From a12aa43c64c3f54d47152e01f7f1f33a100656ea Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 17 Feb 2020 18:43:21 +0800 Subject: [PATCH] all 70% --- .../builtins/simulator/auxilary/auxiliary.tsx | 2 +- .../builtins/simulator/auxilary/edging.less | 39 ------------ .../builtins/simulator/auxilary/edging.tsx | 62 ------------------- packages/designer/src/designer/designer.ts | 40 ++++++++---- packages/designer/src/designer/dragon.ts | 4 +- packages/designer/src/utils/react.ts | 2 +- 6 files changed, 32 insertions(+), 117 deletions(-) delete mode 100644 packages/designer/src/builtins/simulator/auxilary/edging.less delete mode 100644 packages/designer/src/builtins/simulator/auxilary/edging.tsx diff --git a/packages/designer/src/builtins/simulator/auxilary/auxiliary.tsx b/packages/designer/src/builtins/simulator/auxilary/auxiliary.tsx index 1e5e308fc..99bfd28b9 100644 --- a/packages/designer/src/builtins/simulator/auxilary/auxiliary.tsx +++ b/packages/designer/src/builtins/simulator/auxilary/auxiliary.tsx @@ -2,7 +2,7 @@ import { observer } from '@ali/recore'; import { Component } from 'react'; import { getCurrentDocument } from '../../globals'; import './auxiliary.less'; -import { EdgingView } from './edging'; +import { EdgingView } from './gliding'; import { InsertionView } from './insertion'; import { SelectingView } from './selecting'; import EmbedEditorToolbar from './embed-editor-toolbar'; diff --git a/packages/designer/src/builtins/simulator/auxilary/edging.less b/packages/designer/src/builtins/simulator/auxilary/edging.less deleted file mode 100644 index 733ae746d..000000000 --- a/packages/designer/src/builtins/simulator/auxilary/edging.less +++ /dev/null @@ -1,39 +0,0 @@ -.my-edging { - box-sizing: border-box; - pointer-events: none; - position: absolute; - top: 0; - left: 0; - border: 1px dashed var(--color-brand-light); - z-index: 1; - background: rgba(95, 240, 114, 0.04); - will-change: transform, width, height; - transition-property: transform, width, height; - transition-duration: 60ms; - transition-timing-function: linear; - overflow: visible; - >.title { - position: absolute; - color: var(--color-brand-light); - top: -20px; - left: 0; - font-weight: lighter; - } - - &.x-shadow { - border-color: rgba(138, 93, 226, 0.8); - background: rgba(138, 93, 226, 0.04); - - >.title { - color: rgba(138, 93, 226, 1.0); - } - } - - &.x-flow { - border-color: rgba(255, 99, 8, 0.8); - background: rgba(255, 99, 8, 0.04); - >.title { - color: rgb(255, 99, 8); - } - } -} diff --git a/packages/designer/src/builtins/simulator/auxilary/edging.tsx b/packages/designer/src/builtins/simulator/auxilary/edging.tsx deleted file mode 100644 index 2cde1a9aa..000000000 --- a/packages/designer/src/builtins/simulator/auxilary/edging.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { observer } from '@ali/recore'; -import { Component } from 'react'; -import { edging } from '../../globals/edging'; -import './edging.less'; -import { hasConditionFlow } from '../../document/node'; -import { isShadowNode } from '../../document/node/shadow-node'; -import { isConditionFlow } from '../../document/node/condition-flow'; -import { current } from '../../globals'; - -@observer -export class EdgingView extends Component { - shouldComponentUpdate() { - return false; - } - - render() { - const node = edging.watching; - if (!node || !edging.enable || (current.selection && current.selection.has(node.id))) { - return null; - } - - // TODO: think of multi rects - // TODO: findDOMNode cause a render bug - const rect = node.document.computeRect(node); - if (!rect) { - return null; - } - - const { scale, scrollTarget } = node.document.viewport; - - const sx = scrollTarget!.left; - const sy = scrollTarget!.top; - - const style = { - width: rect.width * scale, - height: rect.height * scale, - transform: `translate(${(sx + rect.left) * scale}px, ${(sy + rect.top) * scale}px)`, - } as any; - - let className = 'my-edging'; - - // handle x-for node - if (isShadowNode(node)) { - className += ' x-shadow'; - } - // handle x-if/else-if/else node - if (isConditionFlow(node) || hasConditionFlow(node)) { - className += ' x-flow'; - } - - // TODO: - // 1. thinkof icon - // 2. thinkof top|bottom|inner space - - return ( -
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - {(node as any).title || node.tagName} -
- ); - } -} diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index e67299b0f..9d09844c7 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -1,15 +1,17 @@ import { ComponentType } from 'react'; import { obx, computed } from '@recore/obx'; import { SimulatorView as BuiltinSimulatorView } from '../builtins/simulator'; -import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './dragon'; import Project from './project'; import { ProjectSchema } from './schema'; -import DocumentModel from './document/document-model'; +import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './dragon'; import ActiveTracker from './active-tracker'; +import Hovering from './hovering'; import Location, { LocationData, isLocationChildrenDetail } from './location'; +import DocumentModel from './document/document-model'; import Node, { insertChildren } from './document/node/node'; import { isRootNode } from './document/node/root-node'; import { ComponentDescriptionSpec, ComponentConfig } from './document/node/component-config'; +import Scroller, { IScrollable } from './scroller'; export interface DesignerProps { className?: string; @@ -33,12 +35,14 @@ export default class Designer { // readonly hotkey: Hotkey; readonly dragon = new Dragon(this); readonly activeTracker = new ActiveTracker(); + readonly hovering = new Hovering(); readonly project: Project; constructor(props: DesignerProps) { this.project = new Project(this, props.defaultSchema); this.dragon.onDragstart(e => { + this.hovering.enable = false; const { dragObject } = e; if (isDragNodeObject(dragObject) && dragObject.nodes.length === 1) { // ensure current selecting @@ -78,7 +82,7 @@ export default class Designer { if (this.props?.onDragend) { this.props.onDragend(e, loc); } - // this.enableEdging(); + this.hovering.enable = true; }); this.activeTracker.onChange(({ node, detail }) => { @@ -110,6 +114,10 @@ export default class Designer { this._dropLocation = undefined; } + createScroller(scrollable: IScrollable) { + return new Scroller(scrollable); + } + /** * 获得合适的插入位置 */ @@ -152,7 +160,7 @@ export default class Designer { this.suspensed = props.suspensed; } if (props.componentDescriptionSpecs !== this.props.componentDescriptionSpecs && props.componentDescriptionSpecs != null) { - this.buildComponentConfigMaps(props.componentDescriptionSpecs); + this.buildComponentConfigsMap(props.componentDescriptionSpecs); } } else { // init hotkeys @@ -169,7 +177,7 @@ export default class Designer { this.suspensed = props.suspensed; } if (props.componentDescriptionSpecs != null) { - this.buildComponentConfigMaps(props.componentDescriptionSpecs); + this.buildComponentConfigsMap(props.componentDescriptionSpecs); } } this.props = props; @@ -213,33 +221,41 @@ export default class Designer { // todo: } - @obx.val private _componentConfigMaps = new Map(); + @obx.val private _componentConfigsMap = new Map(); - private buildComponentConfigMaps(specs: ComponentDescriptionSpec[]) { + private buildComponentConfigsMap(specs: ComponentDescriptionSpec[]) { specs.forEach(spec => { const key = spec.componentName; - const had = this._componentConfigMaps.get(key); + const had = this._componentConfigsMap.get(key); if (had) { had.spec = spec; } else { - this._componentConfigMaps.set(key, new ComponentConfig(spec)); + this._componentConfigsMap.set(key, new ComponentConfig(spec)); } }); } getComponentConfig(componentName: string): ComponentConfig { - if (this._componentConfigMaps.has(componentName)) { - return this._componentConfigMaps.get(componentName)!; + if (this._componentConfigsMap.has(componentName)) { + return this._componentConfigsMap.get(componentName)!; } const config = new ComponentConfig({ componentName, }); - this._componentConfigMaps.set(componentName, config); + this._componentConfigsMap.set(componentName, config); return config; } + get componentsMap(): { [key: string]: ComponentDescriptionSpec } { + const maps: any = {}; + this._componentConfigsMap.forEach((config, key) => { + maps[key] = config.spec; + }); + return maps; + } + purge() { // todo: } diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index 99eb756da..f1b0a5328 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -277,8 +277,8 @@ export default class Dragon { doc.removeEventListener('keyup', checkcopy as any, false); } else { masterSensors.forEach(item => { - const odoc = item.ownerDocument; - if (odoc && odoc !== doc) { + const odoc = item.contentDocument; + if (odoc) { odoc.removeEventListener('mousemove', move, true); odoc.removeEventListener('mouseup', over, true); odoc.removeEventListener('mousedown', over, true); diff --git a/packages/designer/src/utils/react.ts b/packages/designer/src/utils/react.ts index 948804c4c..33feb4c70 100644 --- a/packages/designer/src/utils/react.ts +++ b/packages/designer/src/utils/react.ts @@ -18,7 +18,7 @@ function elementsFromFiber(fiber: any, elements: Array) { } } -export function findDOMNodes(elem: Element | ReactInstance | null): Array | null { +export function findDOMNodes(elem: ReactInstance | null): Array | null { if (!elem) { return null; }