all 70%

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';

packages/designer/src/builtins/simulator/auxilary/edging.less

@@ -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);
-    }
-  }
-}

packages/designer/src/builtins/simulator/auxilary/edging.tsx

@@ -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 (
-      <div className={className} style={style}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <a className="title">{(node as any).title || node.tagName}</a>
-      </div>
-    );
-  }
-}

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<string, ComponentConfig>();
+  @obx.val private _componentConfigsMap = new Map<string, ComponentConfig>();
 
-  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)) {
+    if (this._componentConfigsMap.has(componentName)) {
-      return this._componentConfigMaps.get(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:
   }

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;
+          const odoc = item.contentDocument;
-          if (odoc && odoc !== doc) {
+          if (odoc) {
             odoc.removeEventListener('mousemove', move, true);
             odoc.removeEventListener('mouseup', over, true);
             odoc.removeEventListener('mousedown', over, true);

packages/designer/src/utils/react.ts

@@ -18,7 +18,7 @@ function elementsFromFiber(fiber: any, elements: Array<Element | Text>) {
   }
 }
 
-export function findDOMNodes(elem: Element | ReactInstance | null): Array<Element | Text> | null {
+export function findDOMNodes(elem: ReactInstance | null): Array<Element | Text> | null {
   if (!elem) {
     return null;
   }