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