diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
index 5b2d822f2..1772c9e89 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
@@ -1,13 +1,10 @@
import { Component, Fragment } from 'react';
-
-// import Bus from '../../../../core/bus';
-import DragResizeEngine from './dragResizeEngine';
-// import OverlayCore from '../../../../core/overlay';
+import DragResizeEngine from './drag-resize-engine';
import { observer, computed } from '@ali/lowcode-editor-core';
import classNames from 'classnames';
import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host';
-import { OffsetObserver } from '../../designer';
+import { OffsetObserver, Designer } from '../../designer';
@observer
export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> {
@@ -97,7 +94,9 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost;
if (!observed) {
return null;
}
- return ;
+ return (
+
+ );
})}
);
@@ -109,11 +108,18 @@ export class BoxResizingInstance extends Component<{
observed: OffsetObserver;
highlight?: boolean;
dragging?: boolean;
+ designer?: Designer;
}> {
// private outline: any;
private willUnbind: () => any;
private outlineRight: any;
private outlineLeft: any;
+ private dragEngine: DragResizeEngine;
+
+ constructor(props: any) {
+ super(props);
+ this.dragEngine = new DragResizeEngine(props.designer);
+ }
componentWillUnmount() {
if (this.willUnbind) {
@@ -169,15 +175,14 @@ export class BoxResizingInstance extends Component<{
metaData.experimental.callbacks &&
typeof metaData.experimental.callbacks.onResizeEnd === 'function'
) {
- console.log('resize end');
e.trigger = direction;
metaData.experimental.callbacks.onResizeStart(e, node);
}
};
- DragResizeEngine.onResize(resize);
- DragResizeEngine.onResizeStart(resizeStart);
- DragResizeEngine.onResizeEnd(resizeEnd);
+ this.dragEngine.onResize(resize);
+ this.dragEngine.onResizeStart(resizeStart);
+ this.dragEngine.onResizeEnd(resizeEnd);
}
willBind() {
@@ -192,7 +197,7 @@ export class BoxResizingInstance extends Component<{
const unBind: any[] = [];
unBind.push(
- DragResizeEngine.from(this.outlineRight, 'e', () => {
+ this.dragEngine.from(this.outlineRight, 'e', () => {
// if (!this.hoveringLine.hasOutline()) {
// return null;
// }
@@ -201,7 +206,7 @@ export class BoxResizingInstance extends Component<{
}),
);
unBind.push(
- DragResizeEngine.from(this.outlineLeft, 'w', () => {
+ this.dragEngine.from(this.outlineLeft, 'w', () => {
return this.props.observed.node;
// if (!this.hoveringLine.hasOutline()) {
// return null;
@@ -221,7 +226,7 @@ export class BoxResizingInstance extends Component<{
}
render() {
- const { observed, highlight, dragging } = this.props;
+ const { observed } = this.props;
if (!observed.hasOffset) {
return null;
}
diff --git a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts
new file mode 100644
index 000000000..ec8a8ab5f
--- /dev/null
+++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts
@@ -0,0 +1,146 @@
+import * as EventEmitter from 'events';
+import { ISimulatorHost, isSimulatorHost } from '../../../../designer/src/simulator';
+import { Designer } from '../../../../designer/src/designer/designer';
+import { setNativeSelection, cursor } from '@ali/lowcode-utils';
+// import Cursor from './cursor';
+// import Pages from './pages';
+
+function makeEventsHandler(
+ boostEvent: MouseEvent | DragEvent,
+ sensors: ISimulatorHost[],
+): (fn: (sdoc: Document) => void) => void {
+ const topDoc = window.top.document;
+ const sourceDoc = boostEvent.view?.document || topDoc;
+ // TODO: optimize this logic, reduce listener
+ // const boostPrevented = boostEvent.defaultPrevented;
+ const docs = new Set();
+ // if (boostPrevented || isDragEvent(boostEvent)) {
+ docs.add(topDoc);
+ // }
+ docs.add(sourceDoc);
+ // if (sourceDoc !== topDoc || isDragEvent(boostEvent)) {
+ sensors.forEach((sim) => {
+ const sdoc = sim.contentDocument;
+ if (sdoc) {
+ docs.add(sdoc);
+ }
+ });
+ // }
+
+ return (handle: (sdoc: Document) => void) => {
+ docs.forEach((doc) => handle(doc));
+ };
+}
+
+// 拖动缩放
+export default class DragResizeEngine {
+ private emitter: EventEmitter;
+ private dragResizing = false;
+
+ constructor(readonly designer: Designer) {
+ this.designer = designer;
+ this.emitter = new EventEmitter();
+ }
+
+ private getMasterSensors(): ISimulatorHost[] {
+ return this.designer.project.documents
+ .map((doc) => {
+ // TODO: not use actived,
+ if (doc.actived && doc.simulator?.sensorAvailable) {
+ return doc.simulator;
+ }
+ return null;
+ })
+ .filter(Boolean) as any;
+ }
+
+ isDragResizing() {
+ console.log('is drag resizign');
+ return this.dragResizing;
+ }
+
+ /**
+ * drag reszie from
+ * @param shell
+ * @param direction n/s/e/w
+ * @param boost (e: MouseEvent) => VE.Node
+ */
+ from(shell: Element, direction: string, boost: (e: MouseEvent) => any) {
+ let node: any;
+ let startEvent: MouseEvent;
+
+ if (!shell) {
+ return () => {};
+ }
+
+ const move = (e: MouseEvent) => {
+ const moveX = e.clientX - startEvent.clientX;
+ const moveY = e.clientY - startEvent.clientY;
+
+ this.emitter.emit('resize', e, direction, node, moveX, moveY);
+ };
+
+ const masterSensors = this.getMasterSensors();
+
+ const over = (e: MouseEvent) => {
+ const handleEvents = makeEventsHandler(e, masterSensors);
+ handleEvents((doc) => {
+ doc.removeEventListener('mousemove', move, true);
+ doc.removeEventListener('mouseup', over, true);
+ // doc.addEventListener('mousedown', over, true);
+ });
+ // document.removeEventListener('mousemove', move, true);
+ // document.removeEventListener('mouseup', over, true);
+
+ this.dragResizing = false;
+ cursor.release();
+
+ this.emitter.emit('resizeEnd', e, direction, node);
+ };
+
+ const mousedown = (e: MouseEvent) => {
+ node = boost(e);
+ startEvent = e;
+ const handleEvents = makeEventsHandler(e, masterSensors);
+ handleEvents((doc) => {
+ doc.addEventListener('mousemove', move, true);
+ doc.addEventListener('mouseup', over, true);
+ // doc.addEventListener('mousedown', over, true);
+ });
+
+ this.emitter.emit('resizestart', e, direction, node);
+ // document.addEventListener('mousemove', move, true);
+ // document.addEventListener('mouseup', over, true);
+ this.dragResizing = true;
+ cursor.addState('ew-resize');
+ };
+ shell.addEventListener('mousedown', mousedown);
+ // shell.addEventListener('mouseup', over);
+ return () => {
+ shell.removeEventListener('mousedown', mousedown);
+ };
+ }
+
+ onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) {
+ this.emitter.on('resizestart', func);
+ return () => {
+ this.emitter.removeListener('resizestart', func);
+ };
+ }
+
+ onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
+ this.emitter.on('resize', func);
+ return () => {
+ this.emitter.removeListener('resize', func);
+ };
+ }
+
+ onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) {
+ this.emitter.on('resizeEnd', func);
+ return () => {
+ this.emitter.removeListener('resizeEnd', func);
+ };
+ }
+}
+
+// new DragResizeEngine();
diff --git a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts
deleted file mode 100644
index e94e29254..000000000
--- a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as EventEmitter from 'events';
-import { setNativeSelection, cursor } from '@ali/lowcode-utils';
-// import Cursor from './cursor';
-// import Pages from './pages';
-
-// 拖动缩放
-class DragResizeEngine {
- private emitter: EventEmitter;
- private dragResizing = false;
-
- constructor() {
- this.emitter = new EventEmitter();
- }
-
- isDragResizing() {
- console.log('is drag resizign');
- return this.dragResizing;
- }
-
- /**
- * drag reszie from
- * @param shell
- * @param direction n/s/e/w
- * @param boost (e: MouseEvent) => VE.Node
- */
- from(shell: Element, direction: string, boost: (e: MouseEvent) => any) {
- let node: any;
- let startEvent: MouseEvent;
-
- if (!shell) {
- return () => {};
- }
-
- const move = (e: MouseEvent) => {
- console.log('move');
- const moveX = e.clientX - startEvent.clientX;
- const moveY = e.clientY - startEvent.clientY;
-
- this.emitter.emit('resize', e, direction, node, moveX, moveY);
- };
-
- const over = (e: MouseEvent) => {
- console.log('over');
- document.removeEventListener('mousemove', move, true);
- document.removeEventListener('mouseup', over, true);
-
- this.dragResizing = false;
- cursor.release();
-
- this.emitter.emit('resizeEnd', e, direction, node);
- };
-
- const mousedown = (e: MouseEvent) => {
- node = boost(e);
- startEvent = e;
-
- this.emitter.emit('resizestart', e, direction, node);
-
- document.addEventListener('mousemove', move, true);
- document.addEventListener('mouseup', over, true);
-
- this.dragResizing = true;
- cursor.addState('ew-resize');
- };
- shell.addEventListener('mousedown', mousedown);
- shell.addEventListener('mouseup', over);
- return () => {
- shell.removeEventListener('mousedown', mousedown);
- };
- }
-
- onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) {
- this.emitter.on('resizestart', func);
- return () => {
- this.emitter.removeListener('resizestart', func);
- };
- }
-
- onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
- this.emitter.on('resize', func);
- return () => {
- this.emitter.removeListener('resize', func);
- };
- }
-
- onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) {
- this.emitter.on('resizeEnd', func);
- return () => {
- this.emitter.removeListener('resizeEnd', func);
- };
- }
-}
-
-export default new DragResizeEngine();