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