From 14a55aed56e84c618a7be509ae98ca484fc2eb66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Tue, 5 May 2020 19:08:31 +0800 Subject: [PATCH 01/10] feat: add resize box --- .../builtin-simulator/bem-tools/borders.less | 21 ++ .../bem-tools/box-resizing.tsx | 345 ++++++++++++++++++ .../src/builtin-simulator/bem-tools/index.tsx | 2 + 3 files changed, 368 insertions(+) create mode 100644 packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less index 511bae9c2..93ed2c1db 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/borders.less +++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less @@ -45,6 +45,27 @@ } } + &.lc-resize-box { + border-width: 0; + z-index: 1; + cursor: ew-resize; + pointer-events: auto; + align-items: center; + justify-content: center; + display: flex; + + &:after { + content: ""; + display: block; + height: calc(100% - 20px); + min-height: 50%; + width: 4px; + background: #738397; + border-radius: 2px; + // animation: flashing 1.5s infinite linear; + } + } + &&-hovering { z-index: 1; border-style: dashed; diff --git a/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx new file mode 100644 index 000000000..471ce326d --- /dev/null +++ b/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx @@ -0,0 +1,345 @@ +import { Component, Fragment } from 'react'; + +// import Bus from '../../../../core/bus'; +// import DragResizeEngine from '../../../../core/dragResizeEngine'; +// import OverlayCore from '../../../../core/overlay'; +import { observer, computed, Tip } from '@ali/lowcode-editor-core'; +import classNames from 'classnames'; +import { SimulatorContext } from '../context'; +import { BuiltinSimulatorHost } from '../host'; +import { OffsetObserver } from '../../designer'; + +@observer +export default class BoxResizing extends Component { + static contextType = SimulatorContext; + + get host(): BuiltinSimulatorHost { + return this.context; + } + + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + + @computed get selecting() { + const doc = this.host.document; + if (doc.suspensed) { + return null; + } + const selection = doc.selection; + 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(); + } + + // componentDidMount() { + // // this.hoveringCapture.setBoundary(this.outline); + // this.willBind(); + + // const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { + // const proto = node.getPrototype(); + // if (proto && proto.options && typeof proto.options.onResize === 'function') { + // proto.options.onResize(e, direction, node, moveX, moveY); + // } + // }; + + // const resizeStart = (e: MouseEvent, direction: string, node: any) => { + // const proto = node.getPrototype(); + // if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { + // proto.options.onResizeStart(e, direction, node); + // } + // }; + + // const resizeEnd = (e: MouseEvent, direction: string, node: any) => { + // const proto = node.getPrototype(); + // if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { + // proto.options.onResizeEnd(e, direction, node); + // } + // }; + + // // DragResizeEngine.onResize(resize); + // // DragResizeEngine.onResizeStart(resizeStart); + // // DragResizeEngine.onResizeEnd(resizeEnd); + // } + + // componentDidUpdate() { + // this.hoveringCapture.setBoundary(this.outline); + // this.willBind(); + // } + + // componentWillUnmount() { + // this.hoveringCapture.setBoundary(null); + // if (this.willDetach) { + // this.willDetach(); + // } + // if (this.willUnbind) { + // this.willUnbind(); + // } + // } + + // willBind() { + // if (this.willUnbind) { + // this.willUnbind(); + // } + + // if (!this.outlineRight && !this.outlineLeft) { + // return; + // } + + // const unBind: any[] = []; + // unBind + // .push + // // DragResizeEngine.from(this.outlineRight, 'e', () => { + // // if (!this.hoveringLine.hasOutline()) { + // // return null; + // // } + // // return this.hoveringLine.getCurrentNode(); + // // }), + // (); + // unBind + // .push + // // DragResizeEngine.from(this.outlineLeft, 'w', () => { + // // if (!this.hoveringLine.hasOutline()) { + // // return null; + // // } + // // return this.hoveringLine.getCurrentNode(); + // // }), + // (); + + // this.willUnbind = () => { + // if (unBind && unBind.length > 0) { + // unBind.forEach((item) => { + // item(); + // }); + // } + // this.willUnbind = null; + // }; + // } + + render() { + const selecting = this.selecting; + if (!selecting || selecting.length < 1) { + // DIRTY FIX, recore has a bug! + return ; + } + + return ( + + {selecting.map((node) => ( + + ))} + + ); + } + + // render() { + // const node = this.selecting; + // console.log(selecting, 'selecting'); + // if (!selecting || selecting.length < 1) { + // // DIRTY FIX, recore has a bug! + // return ; + // } + // // if (!this.hoveringLine.hasOutline()) { + // // return null; + // // } + + // // const page = node.getPage(); + // const bounds = 2; + // // page.getBounds(); + // const st = 2; + // // page.getScrollTop(); + // const rect = node.getRect(); + + // if (!rect || !bounds) { + // return null; + // } + + // const proto = node.componentMeta; + // console.log('proto', proto); + // const triggerVisible: any = { + // w: true, + // e: true, + // }; + // // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') { + // // triggerVisible = { + // // e: proto.options.canResizing, + // // w: proto.options.canResizing, + // // n: proto.options.canResizing, + // // s: proto.options.canResizing, + // // }; + // // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') { + // // triggerVisible = { + // // e: proto.options.canResizing(node, 'e'), + // // w: proto.options.canResizing(node, 'w'), + // // n: proto.options.canResizing(node, 'n'), + // // s: proto.options.canResizing(node, 's'), + // // }; + // // } + + // return ( + // + // {selecting.map((node) => ( + // + // ))} + // + // ); + + // // return ( + // //
{ + // // this.outline = ref; + // // }} + // // > + // // {triggerVisible.w && ( + // //
{ + // // this.outlineLeft = ref; + // // }} + // // className="engine-outline engine-resize-outline" + // // style={{ + // // height: rect.height, + // // transform: `translate(${rect.left - bounds.left - 10}px, ${rect.top + st - bounds.top}px)`, + // // width: 20, + // // }} + // // /> + // // )} + // // {triggerVisible.e && ( + // //
{ + // // this.outlineRight = ref; + // // }} + // // className="engine-outline engine-resize-outline" + // // style={{ + // // height: rect.height, + // // transform: `translate(${rect.left - bounds.left + rect.width - 10}px, ${rect.top + st - bounds.top}px)`, + // // width: 20, + // // }} + // // /> + // // )} + // //
+ // // ); + // } +} + +@observer +export class BoxResizingForNode extends Component<{ node: Node }> { + static contextType = SimulatorContext; + + get host(): BuiltinSimulatorHost { + return this.context; + } + + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + + @computed get instances() { + return this.host.getComponentInstances(this.props.node); + } + + shouldComponentUpdate() { + return false; + } + + render() { + const { instances } = this; + const { node } = this.props; + const designer = this.host.designer; + + if (!instances || instances.length < 1) { + return null; + } + return ( + + {instances.map((instance) => { + const observed = designer.createOffsetObserver({ + node, + instance, + }); + if (!observed) { + return null; + } + return ; + })} + + ); + } +} + +@observer +export class BoxResizingInstance extends Component<{ + observed: OffsetObserver; + highlight?: boolean; + dragging?: boolean; +}> { + componentWillUnmount() { + this.props.observed.purge(); + } + + render() { + const { observed, highlight, dragging } = this.props; + if (!observed.hasOffset) { + return null; + } + + const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; + console.log(offsetHeight, offsetLeft, offsetTop, offsetWidth); + const triggerVisible = { + w: true, + e: true, + }; + + const className = classNames('lc-borders lc-resize-box'); + + return ( +
+ {triggerVisible.w && ( +
+ )} + {triggerVisible.e && ( +
+ )} +
+ ); + + // return ( + //
+ // {!dragging && } + //
+ // ); + } +} diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index 0ad81c8c4..d89b5fc65 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -4,6 +4,7 @@ import { BorderHovering } from './border-hovering'; import { SimulatorContext } from '../context'; import { BuiltinSimulatorHost } from '../host'; import { BorderSelecting } from './border-selecting'; +import BoxResizing from './box-resizing'; import { InsertionView } from './insertion'; import './bem-tools.less'; import './borders.less'; @@ -24,6 +25,7 @@ export class BemTools extends Component { +
); } From ece6efd828c83ad28a61d4ba3cf483f592c74a30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Thu, 7 May 2020 14:21:42 +0800 Subject: [PATCH 02/10] update vc-deep version --- packages/demo/public/legao-assets.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/demo/public/legao-assets.json b/packages/demo/public/legao-assets.json index e499f3918..d3feb0cc8 100644 --- a/packages/demo/public/legao-assets.json +++ b/packages/demo/public/legao-assets.json @@ -115,8 +115,8 @@ }, { "prototypeConfigsUrl": [ - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.3f4f5d1.css", - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.057b4c5.js" + "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.611ab53.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.5b7b3d3.js" ], "prototypeViewsUrl": null, "alias": "", From d5f459620b5720fa648b8331987726fce6fa9c6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Thu, 7 May 2020 14:22:34 +0800 Subject: [PATCH 03/10] add boreder resizing --- .../{box-resizing.tsx => border-resizing.tsx} | 150 ++++-------------- .../src/builtin-simulator/bem-tools/index.tsx | 4 +- 2 files changed, 32 insertions(+), 122 deletions(-) rename packages/designer/src/builtin-simulator/bem-tools/{box-resizing.tsx => border-resizing.tsx} (56%) diff --git a/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx similarity index 56% rename from packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx rename to packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index 471ce326d..e7500d25f 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/box-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -52,35 +52,35 @@ export default class BoxResizing extends Component { // this.bus = new Bus(); } - // componentDidMount() { - // // this.hoveringCapture.setBoundary(this.outline); - // this.willBind(); + componentDidMount() { + // this.hoveringCapture.setBoundary(this.outline); + // this.willBind(); - // const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { - // const proto = node.getPrototype(); - // if (proto && proto.options && typeof proto.options.onResize === 'function') { - // proto.options.onResize(e, direction, node, moveX, moveY); - // } - // }; + const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResize === 'function') { + proto.options.onResize(e, direction, node, moveX, moveY); + } + }; - // const resizeStart = (e: MouseEvent, direction: string, node: any) => { - // const proto = node.getPrototype(); - // if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { - // proto.options.onResizeStart(e, direction, node); - // } - // }; + const resizeStart = (e: MouseEvent, direction: string, node: any) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { + proto.options.onResizeStart(e, direction, node); + } + }; - // const resizeEnd = (e: MouseEvent, direction: string, node: any) => { - // const proto = node.getPrototype(); - // if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { - // proto.options.onResizeEnd(e, direction, node); - // } - // }; + const resizeEnd = (e: MouseEvent, direction: string, node: any) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { + proto.options.onResizeEnd(e, direction, node); + } + }; - // // DragResizeEngine.onResize(resize); - // // DragResizeEngine.onResizeStart(resizeStart); - // // DragResizeEngine.onResizeEnd(resizeEnd); - // } + // DragResizeEngine.onResize(resize); + // DragResizeEngine.onResizeStart(resizeStart); + // DragResizeEngine.onResizeEnd(resizeEnd); + } // componentDidUpdate() { // this.hoveringCapture.setBoundary(this.outline); @@ -142,6 +142,10 @@ export default class BoxResizing extends Component { // DIRTY FIX, recore has a bug! return ; } + // console.log(selecting[0].componentMeta, 'component meta data'); + const componentMeta = selecting[0].componentMeta; + const metaData = componentMeta.getMetadata(); + console.log('meta data', metaData); return ( @@ -151,94 +155,6 @@ export default class BoxResizing extends Component { ); } - - // render() { - // const node = this.selecting; - // console.log(selecting, 'selecting'); - // if (!selecting || selecting.length < 1) { - // // DIRTY FIX, recore has a bug! - // return ; - // } - // // if (!this.hoveringLine.hasOutline()) { - // // return null; - // // } - - // // const page = node.getPage(); - // const bounds = 2; - // // page.getBounds(); - // const st = 2; - // // page.getScrollTop(); - // const rect = node.getRect(); - - // if (!rect || !bounds) { - // return null; - // } - - // const proto = node.componentMeta; - // console.log('proto', proto); - // const triggerVisible: any = { - // w: true, - // e: true, - // }; - // // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') { - // // triggerVisible = { - // // e: proto.options.canResizing, - // // w: proto.options.canResizing, - // // n: proto.options.canResizing, - // // s: proto.options.canResizing, - // // }; - // // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') { - // // triggerVisible = { - // // e: proto.options.canResizing(node, 'e'), - // // w: proto.options.canResizing(node, 'w'), - // // n: proto.options.canResizing(node, 'n'), - // // s: proto.options.canResizing(node, 's'), - // // }; - // // } - - // return ( - // - // {selecting.map((node) => ( - // - // ))} - // - // ); - - // // return ( - // //
{ - // // this.outline = ref; - // // }} - // // > - // // {triggerVisible.w && ( - // //
{ - // // this.outlineLeft = ref; - // // }} - // // className="engine-outline engine-resize-outline" - // // style={{ - // // height: rect.height, - // // transform: `translate(${rect.left - bounds.left - 10}px, ${rect.top + st - bounds.top}px)`, - // // width: 20, - // // }} - // // /> - // // )} - // // {triggerVisible.e && ( - // //
{ - // // this.outlineRight = ref; - // // }} - // // className="engine-outline engine-resize-outline" - // // style={{ - // // height: rect.height, - // // transform: `translate(${rect.left - bounds.left + rect.width - 10}px, ${rect.top + st - bounds.top}px)`, - // // width: 20, - // // }} - // // /> - // // )} - // //
- // // ); - // } } @observer @@ -303,11 +219,11 @@ export class BoxResizingInstance extends Component<{ } const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; - console.log(offsetHeight, offsetLeft, offsetTop, offsetWidth); const triggerVisible = { w: true, e: true, }; + console.log('hee'); const className = classNames('lc-borders lc-resize-box'); @@ -335,11 +251,5 @@ export class BoxResizingInstance extends Component<{ )}
); - - // return ( - //
- // {!dragging && } - //
- // ); } } diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index d89b5fc65..9235201b2 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -4,7 +4,7 @@ import { BorderHovering } from './border-hovering'; import { SimulatorContext } from '../context'; import { BuiltinSimulatorHost } from '../host'; import { BorderSelecting } from './border-selecting'; -import BoxResizing from './box-resizing'; +import BorderResizing from './border-resizing'; import { InsertionView } from './insertion'; import './bem-tools.less'; import './borders.less'; @@ -25,7 +25,7 @@ export class BemTools extends Component { - +
); } From 9d04cebb46fbabe8297dd0617711b7ce28768998 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Mon, 11 May 2020 16:51:45 +0800 Subject: [PATCH 04/10] add boreder resizing --- packages/designer/package.json | 1 + .../bem-tools/border-resizing.tsx | 203 ++++++++++-------- .../bem-tools/dragResizeEngine.ts | 92 ++++++++ 3 files changed, 210 insertions(+), 86 deletions(-) create mode 100644 packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts diff --git a/packages/designer/package.json b/packages/designer/package.json index 2e466f02f..22538ba19 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -19,6 +19,7 @@ "@ali/lowcode-types": "^0.8.1", "@ali/lowcode-utils": "^0.8.2", "classnames": "^2.2.6", + "event": "^1.0.0", "react": "^16", "react-dom": "^16.7.0" }, 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 e7500d25f..c69727b42 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -1,7 +1,7 @@ import { Component, Fragment } from 'react'; // import Bus from '../../../../core/bus'; -// import DragResizeEngine from '../../../../core/dragResizeEngine'; +import DragResizeEngine from './dragResizeEngine'; // import OverlayCore from '../../../../core/overlay'; import { observer, computed, Tip } from '@ali/lowcode-editor-core'; import classNames from 'classnames'; @@ -52,89 +52,20 @@ export default class BoxResizing extends Component { // this.bus = new Bus(); } - componentDidMount() { + componentDidUpdate() { // this.hoveringCapture.setBoundary(this.outline); // this.willBind(); - - const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResize === 'function') { - proto.options.onResize(e, direction, node, moveX, moveY); - } - }; - - const resizeStart = (e: MouseEvent, direction: string, node: any) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { - proto.options.onResizeStart(e, direction, node); - } - }; - - const resizeEnd = (e: MouseEvent, direction: string, node: any) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { - proto.options.onResizeEnd(e, direction, node); - } - }; - - // DragResizeEngine.onResize(resize); - // DragResizeEngine.onResizeStart(resizeStart); - // DragResizeEngine.onResizeEnd(resizeEnd); } - // componentDidUpdate() { - // this.hoveringCapture.setBoundary(this.outline); - // this.willBind(); - // } - - // componentWillUnmount() { - // this.hoveringCapture.setBoundary(null); - // if (this.willDetach) { - // this.willDetach(); - // } - // if (this.willUnbind) { - // this.willUnbind(); - // } - // } - - // willBind() { - // if (this.willUnbind) { - // this.willUnbind(); - // } - - // if (!this.outlineRight && !this.outlineLeft) { - // return; - // } - - // const unBind: any[] = []; - // unBind - // .push - // // DragResizeEngine.from(this.outlineRight, 'e', () => { - // // if (!this.hoveringLine.hasOutline()) { - // // return null; - // // } - // // return this.hoveringLine.getCurrentNode(); - // // }), - // (); - // unBind - // .push - // // DragResizeEngine.from(this.outlineLeft, 'w', () => { - // // if (!this.hoveringLine.hasOutline()) { - // // return null; - // // } - // // return this.hoveringLine.getCurrentNode(); - // // }), - // (); - - // this.willUnbind = () => { - // if (unBind && unBind.length > 0) { - // unBind.forEach((item) => { - // item(); - // }); - // } - // this.willUnbind = null; - // }; - // } + componentWillUnmount() { + // // this.hoveringCapture.setBoundary(null); + // if (this.willDetach) { + // this.willDetach(); + // } + // if (this.willUnbind) { + // this.willUnbind(); + // } + } render() { const selecting = this.selecting; @@ -142,10 +73,9 @@ export default class BoxResizing extends Component { // DIRTY FIX, recore has a bug! return ; } - // console.log(selecting[0].componentMeta, 'component meta data'); - const componentMeta = selecting[0].componentMeta; - const metaData = componentMeta.getMetadata(); - console.log('meta data', metaData); + + // const componentMeta = selecting[0].componentMeta; + // const metaData = componentMeta.getMetadata(); return ( @@ -208,22 +138,117 @@ export class BoxResizingInstance extends Component<{ highlight?: boolean; dragging?: boolean; }> { + // private outline: any; + private willUnbind: () => any; + private outlineRight: any; + private outlineLeft: any; + componentWillUnmount() { this.props.observed.purge(); } + componentDidMount() { + // this.hoveringCapture.setBoundary(this.outline); + this.willBind(); + + const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResize === 'function') { + proto.options.onResize(e, direction, node, moveX, moveY); + } + }; + + const resizeStart = (e: MouseEvent, direction: string, node: any) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { + proto.options.onResizeStart(e, direction, node); + } + }; + + const resizeEnd = (e: MouseEvent, direction: string, node: any) => { + const proto = node.getPrototype(); + if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { + proto.options.onResizeEnd(e, direction, node); + } + }; + + DragResizeEngine.onResize(resize); + DragResizeEngine.onResizeStart(resizeStart); + DragResizeEngine.onResizeEnd(resizeEnd); + } + + willBind() { + if (this.willUnbind) { + this.willUnbind(); + } + + if (!this.outlineRight && !this.outlineLeft) { + return; + } + + const unBind: any[] = []; + + unBind.push( + DragResizeEngine.from(this.outlineRight, 'e', () => { + // if (!this.hoveringLine.hasOutline()) { + // return null; + // } + // return this.hoveringLine.getCurrentNode(); + }), + ); + unBind.push( + DragResizeEngine.from(this.outlineLeft, 'w', () => { + // if (!this.hoveringLine.hasOutline()) { + // return null; + // } + // return this.hoveringLine.getCurrentNode(); + }), + ); + + this.willUnbind = () => { + if (unBind && unBind.length > 0) { + unBind.forEach((item) => { + item(); + }); + } + this.willUnbind = () => {}; + }; + } + render() { const { observed, highlight, dragging } = this.props; if (!observed.hasOffset) { return null; } - const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; + const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; const triggerVisible = { w: true, e: true, }; - console.log('hee'); + // let triggerVisible: any = {}; + const metaData = node.componentMeta.getMetadata(); + let resizingHandler: any = {}; + if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) { + resizingHandler = metaData.experimental.getResizingHandlers(node); + } + console.log(resizingHandler, 'resizing handle'); + // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') { + // triggerVisible = { + // e: proto.options.canResizing, + // w: proto.options.canResizing, + // n: proto.options.canResizing, + // s: proto.options.canResizing, + // }; + // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') { + // triggerVisible = { + // e: proto.options.canResizing(node, 'e'), + // w: proto.options.canResizing(node, 'w'), + // n: proto.options.canResizing(node, 'n'), + // s: proto.options.canResizing(node, 's'), + // }; + // } + console.log(resizingHandler, 'node data'); const className = classNames('lc-borders lc-resize-box'); @@ -231,6 +256,9 @@ export class BoxResizingInstance extends Component<{
{triggerVisible.w && (
{ + this.outlineLeft = ref; + }} className={className} style={{ height: offsetHeight, @@ -242,6 +270,9 @@ export class BoxResizingInstance extends Component<{ {triggerVisible.e && (
{ + this.outlineRight = ref; + }} style={{ height: offsetHeight, transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`, diff --git a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts new file mode 100644 index 000000000..ae91fa534 --- /dev/null +++ b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts @@ -0,0 +1,92 @@ +import * as EventEmitter from 'events'; +// 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; + console.log('drag from'); + + 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 over = (e: MouseEvent) => { + 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); + return () => { + shell.removeEventListener('mousedown', mousedown); + }; + } + + onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) { + console.log('hello resize start'); + this.emitter.on('resizestart', func); + return () => { + this.emitter.removeListener('resizestart', func); + }; + } + + onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) { + console.log('hello on resize'); + this.emitter.on('resize', func); + return () => { + this.emitter.removeListener('resize', func); + }; + } + + onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) { + console.log('resize end'); + this.emitter.on('resizeEnd', func); + return () => { + this.emitter.removeListener('resizeEnd', func); + }; + } +} + +export default new DragResizeEngine(); From 83d6cd3b58fd20cf495f5e0820394a2de6a992a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Mon, 11 May 2020 22:44:32 +0800 Subject: [PATCH 05/10] add fn node.getIndex for alias node.index --- packages/designer/src/document/node/node.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 6239cfa60..96b810f1d 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -419,6 +419,13 @@ export class Node { return this.parent.children.indexOf(this); } + /** + * alias index + */ + getIndex = () => { + return this.index; + }; + /** * 获取下一个兄弟节点 */ From cb2854d7359f18f515cf60820631f52bdfbca355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Mon, 11 May 2020 22:45:27 +0800 Subject: [PATCH 06/10] feat: for box resizing --- .../bem-tools/border-resizing.tsx | 83 ++++++++++--------- .../bem-tools/dragResizeEngine.ts | 3 - 2 files changed, 42 insertions(+), 44 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 c69727b42..897c3bf08 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -10,11 +10,11 @@ import { BuiltinSimulatorHost } from '../host'; import { OffsetObserver } from '../../designer'; @observer -export default class BoxResizing extends Component { +export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> { static contextType = SimulatorContext; get host(): BuiltinSimulatorHost { - return this.context; + return this.props.host; } get dragging(): boolean { @@ -80,7 +80,7 @@ export default class BoxResizing extends Component { return ( {selecting.map((node) => ( - + ))} ); @@ -88,11 +88,11 @@ export default class BoxResizing extends Component { } @observer -export class BoxResizingForNode extends Component<{ node: Node }> { +export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> { static contextType = SimulatorContext; get host(): BuiltinSimulatorHost { - return this.context; + return this.props.host; } get dragging(): boolean { @@ -117,7 +117,7 @@ export class BoxResizingForNode extends Component<{ node: Node }> { } return ( - {instances.map((instance) => { + {instances.map((instance: any) => { const observed = designer.createOffsetObserver({ node, instance, @@ -147,28 +147,49 @@ export class BoxResizingInstance extends Component<{ this.props.observed.purge(); } + getExperiMentalFns = (metaData: any) => { + if (metaData.experimental && metaData.experimental.callbacks) { + return metaData.experimantal.callbacks; + } + }; + componentDidMount() { // this.hoveringCapture.setBoundary(this.outline); this.willBind(); const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResize === 'function') { - proto.options.onResize(e, direction, node, moveX, moveY); + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + metaData.experimental.callbacks.onResize === 'funtion' + ) { + metaData.experimental.callbacks.onResize(e, direction, node, moveX, moveY); } }; const resizeStart = (e: MouseEvent, direction: string, node: any) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResizeStart === 'function') { - proto.options.onResizeStart(e, direction, node); + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + metaData.experimental.callbacks.onResizeStart === 'funtion' + ) { + metaData.experimental.callbacks.onResizeStart(e, direction, node); } }; const resizeEnd = (e: MouseEvent, direction: string, node: any) => { - const proto = node.getPrototype(); - if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') { - proto.options.onResizeEnd(e, direction, node); + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + metaData.experimental.callbacks.onResizeEnd === 'funtion' + ) { + metaData.experimental.callbacks.onResizeStart(e, direction, node); } }; @@ -194,10 +215,12 @@ export class BoxResizingInstance extends Component<{ // return null; // } // return this.hoveringLine.getCurrentNode(); + return this.props.observed.node; }), ); unBind.push( DragResizeEngine.from(this.outlineLeft, 'w', () => { + return this.props.observed.node; // if (!this.hoveringLine.hasOutline()) { // return null; // } @@ -222,39 +245,17 @@ export class BoxResizingInstance extends Component<{ } const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; - const triggerVisible = { - w: true, - e: true, - }; - // let triggerVisible: any = {}; + let triggerVisible: any = []; const metaData = node.componentMeta.getMetadata(); - let resizingHandler: any = {}; if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) { - resizingHandler = metaData.experimental.getResizingHandlers(node); + triggerVisible = metaData.experimental.getResizingHandlers(node); } - console.log(resizingHandler, 'resizing handle'); - // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') { - // triggerVisible = { - // e: proto.options.canResizing, - // w: proto.options.canResizing, - // n: proto.options.canResizing, - // s: proto.options.canResizing, - // }; - // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') { - // triggerVisible = { - // e: proto.options.canResizing(node, 'e'), - // w: proto.options.canResizing(node, 'w'), - // n: proto.options.canResizing(node, 'n'), - // s: proto.options.canResizing(node, 's'), - // }; - // } - console.log(resizingHandler, 'node data'); const className = classNames('lc-borders lc-resize-box'); return (
- {triggerVisible.w && ( + {triggerVisible.includes('w') && (
{ this.outlineLeft = ref; @@ -267,7 +268,7 @@ export class BoxResizingInstance extends Component<{ }} /> )} - {triggerVisible.e && ( + {triggerVisible.includes('e') && (
{ diff --git a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts index ae91fa534..d89b61bd7 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts +++ b/packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts @@ -25,7 +25,6 @@ class DragResizeEngine { from(shell: Element, direction: string, boost: (e: MouseEvent) => any) { let node: any; let startEvent: MouseEvent; - console.log('drag from'); if (!shell) { return () => {}; @@ -65,7 +64,6 @@ class DragResizeEngine { } onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) { - console.log('hello resize start'); this.emitter.on('resizestart', func); return () => { this.emitter.removeListener('resizestart', func); @@ -73,7 +71,6 @@ class DragResizeEngine { } onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) { - console.log('hello on resize'); this.emitter.on('resize', func); return () => { this.emitter.removeListener('resize', func); 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 07/10] 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 }> { +
); } From e853a4f51077db1f0c2e44f7afa8c63efd77e7d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Wed, 13 May 2020 15:58:53 +0800 Subject: [PATCH 08/10] feat: add alias for get index --- packages/designer/src/document/node/node.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 55cdbebcd..e5c18d33d 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -426,12 +426,6 @@ export class Node { return this.parent.children.indexOf(this); } - /** - * alias index - */ - getIndex = () => { - return this.index; - }; /** * 获取下一个兄弟节点 @@ -625,6 +619,9 @@ export class Node { getId() { return this.id; } + getIndex() { + return this.index; + } getNode() { return this; } From c7fc28cbc24daaeee3bcff1beb85e027776489a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Fri, 15 May 2020 16:06:44 +0800 Subject: [PATCH 09/10] feat: border resizing --- .../bem-tools/border-resizing.tsx | 31 ++-- .../bem-tools/drag-resize-engine.ts | 146 ++++++++++++++++++ .../bem-tools/dragResizeEngine.ts | 94 ----------- 3 files changed, 164 insertions(+), 107 deletions(-) create mode 100644 packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts delete mode 100644 packages/designer/src/builtin-simulator/bem-tools/dragResizeEngine.ts 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(); From 361f4f681d827180af52f4bb7de310255049ef85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=A3=9E=E7=99=BE?= Date: Fri, 15 May 2020 16:08:34 +0800 Subject: [PATCH 10/10] feat: bord resizing --- .../src/builtin-simulator/bem-tools/border-resizing.tsx | 1 - .../src/builtin-simulator/bem-tools/drag-resize-engine.ts | 8 -------- 2 files changed, 9 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 1772c9e89..b0036c5c4 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -146,7 +146,6 @@ export class BoxResizingInstance extends Component<{ metaData.experimental.callbacks && typeof metaData.experimental.callbacks.onResize === 'function' ) { - console.log('resize inner'); e.trigger = direction; e.deltaX = moveX; e.deltaY = moveY; 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 index ec8a8ab5f..11308316e 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts +++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts @@ -55,7 +55,6 @@ export default class DragResizeEngine { } isDragResizing() { - console.log('is drag resizign'); return this.dragResizing; } @@ -87,10 +86,7 @@ export default class DragResizeEngine { 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(); @@ -105,17 +101,13 @@ export default class DragResizeEngine { 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); };