From 77e325f07d637577fea1fd492908da566a411def Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Wed, 13 May 2020 15:54:22 +0800 Subject: [PATCH] feat: for box resizing --- .../bem-tools/border-resizing.tsx | 52 ++++++------------- .../bem-tools/dragResizeEngine.ts | 11 ++-- .../src/builtin-simulator/bem-tools/index.tsx | 1 + 3 files changed, 26 insertions(+), 38 deletions(-) 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 897c3bf08..5b2d822f2 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/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); } }; diff --git a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts index d89b61bd7..e94e29254 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts +++ b/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); diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index 801b5f019..c22951c2f 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -22,6 +22,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> { + ); }