feat: for box resizing

packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx

@@ -3,7 +3,7 @@ import { Component, Fragment } from 'react';
 // import Bus from '../../../../core/bus';
 import DragResizeEngine from './dragResizeEngine';
 // import OverlayCore from '../../../../core/overlay';
-import { observer, computed, Tip } from '@ali/lowcode-editor-core';
+import { observer, computed } from '@ali/lowcode-editor-core';
 import classNames from 'classnames';
 import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
@@ -30,43 +30,15 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost
     return this.dragging ? selection.getTopNodes() : selection.getNodes();
   }
 
-  private hoveringLine: any;
-  private hoveringCapture: any;
-  private willDetach: () => any;
-  private willUnbind: () => any;
-  private handler: any;
-  //   private bus: Bus;
-
-  private outline: any;
-  private outlineRight: any;
-  private outlineLeft: any;
-
   shouldComponentUpdate() {
     return false;
   }
 
-  componentWillMount() {
-    // this.hoveringLine = OverlayCore.getHoveringLine();
-    // this.hoveringCapture = OverlayCore.getHoveringCapture();
-    // this.willDetach = this.hoveringLine.onSync(() => this.forceUpdate());
-    // this.bus = new Bus();
-  }
-
   componentDidUpdate() {
     // this.hoveringCapture.setBoundary(this.outline);
     // this.willBind();
   }
 
-  componentWillUnmount() {
-    // // this.hoveringCapture.setBoundary(null);
-    // if (this.willDetach) {
-    //   this.willDetach();
-    // }
-    // if (this.willUnbind) {
-    //   this.willUnbind();
-    // }
-  }
-
   render() {
     const selecting = this.selecting;
     if (!selecting || selecting.length < 1) {
@@ -144,6 +116,9 @@ export class BoxResizingInstance extends Component<{
   private outlineLeft: any;
 
   componentWillUnmount() {
+    if (this.willUnbind) {
+      this.willUnbind();
+    }
     this.props.observed.purge();
   }
 
@@ -163,9 +138,13 @@ export class BoxResizingInstance extends Component<{
         metaData &&
         metaData.experimental &&
         metaData.experimental.callbacks &&
-        metaData.experimental.callbacks.onResize === 'funtion'
+        typeof metaData.experimental.callbacks.onResize === 'function'
       ) {
-        metaData.experimental.callbacks.onResize(e, direction, node, moveX, moveY);
+        console.log('resize inner');
+        e.trigger = direction;
+        e.deltaX = moveX;
+        e.deltaY = moveY;
+        metaData.experimental.callbacks.onResize(e, node);
       }
     };
 
@@ -175,9 +154,10 @@ export class BoxResizingInstance extends Component<{
         metaData &&
         metaData.experimental &&
         metaData.experimental.callbacks &&
-        metaData.experimental.callbacks.onResizeStart === 'funtion'
+        typeof metaData.experimental.callbacks.onResizeStart === 'function'
       ) {
-        metaData.experimental.callbacks.onResizeStart(e, direction, node);
+        e.trigger = direction;
+        metaData.experimental.callbacks.onResizeStart(e, node);
       }
     };
 
@@ -187,9 +167,11 @@ export class BoxResizingInstance extends Component<{
         metaData &&
         metaData.experimental &&
         metaData.experimental.callbacks &&
-        metaData.experimental.callbacks.onResizeEnd === 'funtion'
+        typeof metaData.experimental.callbacks.onResizeEnd === 'function'
       ) {
-        metaData.experimental.callbacks.onResizeStart(e, direction, node);
+        console.log('resize end');
+        e.trigger = direction;
+        metaData.experimental.callbacks.onResizeStart(e, node);
       }
     };
 

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

@@ -1,4 +1,5 @@
 import * as EventEmitter from 'events';
+import { setNativeSelection, cursor } from '@ali/lowcode-utils';
 // import Cursor from './cursor';
 // import Pages from './pages';
 
@@ -31,20 +32,24 @@ class DragResizeEngine {
     }
 
     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();
+      cursor.release();
 
       this.emitter.emit('resizeEnd', e, direction, node);
     };
+
     const mousedown = (e: MouseEvent) => {
       node = boost(e);
       startEvent = e;
@@ -55,9 +60,10 @@ class DragResizeEngine {
       document.addEventListener('mouseup', over, true);
 
       this.dragResizing = true;
-      // Cursor.addState('ew-resize');
+      cursor.addState('ew-resize');
     };
     shell.addEventListener('mousedown', mousedown);
+    shell.addEventListener('mouseup', over);
     return () => {
       shell.removeEventListener('mousedown', mousedown);
     };
@@ -78,7 +84,6 @@ class DragResizeEngine {
   }
 
   onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) {
-    console.log('resize end');
     this.emitter.on('resizeEnd', func);
     return () => {
       this.emitter.removeListener('resizeEnd', func);

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -22,6 +22,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> {
         <BorderDetecting key="hovering" host={host} />
         <BorderSelecting key="selecting" host={host} />
         <InsertionView key="insertion" host={host} />
+        <BorderResizing key="resizing" host={host} />
       </div>
     );
   }