jjb-lc-designable/core/models/Cursor.js

基于alibaba-designable源码二次封装的表单设计器。

import { action, define, observable } from 'jjb-lc-formily/reactive';
import { globalThisPolyfill, isValidNumber } from 'jjb-lc-designable/shared';
export let CursorStatus = /*#__PURE__*/function (CursorStatus) {
  CursorStatus["Normal"] = "NORMAL";
  CursorStatus["DragStart"] = "DRAG_START";
  CursorStatus["Dragging"] = "DRAGGING";
  CursorStatus["DragStop"] = "DRAG_STOP";
  return CursorStatus;
}({});
export let CursorDragType = /*#__PURE__*/function (CursorDragType) {
  CursorDragType["Move"] = "MOVE";
  CursorDragType["Resize"] = "RESIZE";
  CursorDragType["Rotate"] = "ROTATE";
  CursorDragType["Scale"] = "SCALE";
  CursorDragType["Translate"] = "TRANSLATE";
  CursorDragType["Round"] = "ROUND";
  return CursorDragType;
}({});
export let CursorType = /*#__PURE__*/function (CursorType) {
  CursorType["Normal"] = "NORMAL";
  CursorType["Selection"] = "SELECTION";
  CursorType["Sketch"] = "SKETCH";
  return CursorType;
}({});
const DEFAULT_POSITION = {
  pageX: 0,
  pageY: 0,
  clientX: 0,
  clientY: 0,
  topPageX: 0,
  topPageY: 0,
  topClientX: 0,
  topClientY: 0
};
const setCursorStyle = (contentWindow, style) => {
  const currentRoot = document?.getElementsByTagName?.('html')?.[0];
  const root = contentWindow?.document?.getElementsByTagName('html')?.[0];
  if (root && root.style.cursor !== style) {
    root.style.cursor = style;
  }
  if (currentRoot && currentRoot.style.cursor !== style) {
    currentRoot.style.cursor = style;
  }
};
const calcPositionDelta = (end, start) => {
  return Object.keys(end || {}).reduce((buf, key) => {
    if (isValidNumber(end?.[key]) && isValidNumber(start?.[key])) {
      buf[key] = end[key] - start[key];
    } else {
      buf[key] = end[key];
    }
    return buf;
  }, {});
};
export class Cursor {
  type = CursorType.Normal;
  dragType = CursorDragType.Move;
  status = CursorStatus.Normal;
  position = DEFAULT_POSITION;
  dragAtomDelta = DEFAULT_POSITION;
  dragStartToCurrentDelta = DEFAULT_POSITION;
  dragStartToEndDelta = DEFAULT_POSITION;
  view = globalThisPolyfill;
  constructor(engine) {
    this.engine = engine;
    this.makeObservable();
  }
  makeObservable() {
    define(this, {
      type: observable.ref,
      dragType: observable.ref,
      status: observable.ref,
      position: observable.ref,
      dragStartPosition: observable.ref,
      dragEndPosition: observable.ref,
      dragAtomDelta: observable.ref,
      dragStartToCurrentDelta: observable.ref,
      dragStartToEndDelta: observable.ref,
      view: observable.ref,
      setStyle: action,
      setPosition: action,
      setStatus: action,
      setType: action
    });
  }
  get speed() {
    return Math.sqrt(Math.pow(this.dragAtomDelta.clientX, 2) + Math.pow(this.dragAtomDelta.clientY, 2));
  }
  setStatus(status) {
    this.status = status;
  }
  setType(type) {
    this.type = type;
  }
  setDragType(type) {
    this.dragType = type;
  }
  setStyle(style) {
    this.engine.workbench.eachWorkspace(workspace => {
      setCursorStyle(workspace.viewport.contentWindow, style);
    });
  }
  setPosition(position) {
    this.dragAtomDelta = calcPositionDelta(this.position, position);
    this.position = {
      ...position
    };
    if (this.status === CursorStatus.Dragging) {
      this.dragStartToCurrentDelta = calcPositionDelta(this.position, this.dragStartPosition);
    }
  }
  setDragStartPosition(position) {
    if (position) {
      this.dragStartPosition = {
        ...position
      };
    } else {
      this.dragStartPosition = null;
      this.dragStartToCurrentDelta = DEFAULT_POSITION;
    }
  }
  setDragEndPosition(position) {
    if (!this.dragStartPosition) return;
    if (position) {
      this.dragEndPosition = {
        ...position
      };
      this.dragStartToEndDelta = calcPositionDelta(this.dragStartPosition, this.dragEndPosition);
    } else {
      this.dragEndPosition = null;
      this.dragStartToEndDelta = DEFAULT_POSITION;
    }
  }
}