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