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