feat: border resizing

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 <BoxResizingInstance key={observed.id} dragging={this.dragging} observed={observed} />;
+          return (
+            <BoxResizingInstance key={observed.id} dragging={this.dragging} designer={designer} observed={observed} />
+          );
         })}
       </Fragment>
     );
@@ -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;
     }

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<Document>();
+  // 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();

packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts

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