lowcode-engine/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts

import { ISimulatorHost } from '../../simulator';
import { Designer, Point } from '../../designer';
import { cursor } from '@alilc/lowcode-utils';
import { makeEventsHandler } from '../../utils/misc';
import { createModuleEventBus, IEventBus } from '@alilc/lowcode-editor-core';

// 拖动缩放
export default class DragResizeEngine {
  private emitter: IEventBus;

  private dragResizing = false;

  private designer: Designer;

  constructor(designer: Designer) {
    this.designer = designer;
    this.emitter = createModuleEventBus('DragResizeEngine');
  }

  isDragResizing() {
    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: Point;

    if (!shell) {
      return () => {};
    }

    const move = (e: MouseEvent) => {
      const x = createResizeEvent(e);
      const moveX = x.clientX - startEvent.clientX;
      const moveY = x.clientY - startEvent.clientY;

      this.emitter.emit('resize', e, direction, node, moveX, moveY);
    };

    const masterSensors = this.getMasterSensors();

    /* istanbul ignore next */
    const createResizeEvent = (e: MouseEvent | DragEvent): Point => {
      const sourceDocument = e.view?.document;

      if (!sourceDocument || sourceDocument === document) {
        return e;
      }
      const srcSim = masterSensors.find(sim => sim.contentDocument === sourceDocument);
      if (srcSim) {
        return srcSim.viewport.toGlobalPoint(e);
      }
      return e;
    };

    const over = (e: MouseEvent) => {
      const handleEvents = makeEventsHandler(e, masterSensors);
      handleEvents(doc => {
        doc.removeEventListener('mousemove', move, true);
        doc.removeEventListener('mouseup', over, true);
      });

      this.dragResizing = false;
      this.designer.detecting.enable = true;
      cursor.release();

      this.emitter.emit('resizeEnd', e, direction, node);
    };

    const mousedown = (e: MouseEvent) => {
      node = boost(e);
      startEvent = createResizeEvent(e);
      const handleEvents = makeEventsHandler(e, masterSensors);
      handleEvents(doc => {
        doc.addEventListener('mousemove', move, true);
        doc.addEventListener('mouseup', over, true);
      });

      this.emitter.emit('resizeStart', e, direction, node);
      this.dragResizing = true;
      this.designer.detecting.enable = false;
      cursor.addState('ew-resize');
    };
    shell.addEventListener('mousedown', mousedown);
    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);
    };
  }

  private getMasterSensors(): ISimulatorHost[] {
    return this.designer.project.documents
      .map(doc => {
        if (doc.active && doc.simulator?.sensorAvailable) {
          return doc.simulator;
        }
        return null;
      })
      .filter(Boolean) as any;
  }
}

// new DragResizeEngine();