@thienvu18/designable-core 2.0.0 → 2.0.2

package/esm/models/Cursor.js

@@ -1,133 +1,137 @@
-import { action, define, observable } from '@formily/reactive';
-import { globalThisPolyfill, isValidNumber } from '@thienvu18/designable-shared';
-export var CursorStatus;
-(function (CursorStatus) {
-    CursorStatus["Normal"] = "NORMAL";
-    CursorStatus["DragStart"] = "DRAG_START";
-    CursorStatus["Dragging"] = "DRAGGING";
-    CursorStatus["DragStop"] = "DRAG_STOP";
-})(CursorStatus || (CursorStatus = {}));
-export var CursorDragType;
-(function (CursorDragType) {
-    CursorDragType["Move"] = "MOVE";
-    CursorDragType["Resize"] = "RESIZE";
-    CursorDragType["Rotate"] = "ROTATE";
-    CursorDragType["Scale"] = "SCALE";
-    CursorDragType["Translate"] = "TRANSLATE";
-    CursorDragType["Round"] = "ROUND";
-})(CursorDragType || (CursorDragType = {}));
-export var CursorType;
-(function (CursorType) {
-    CursorType["Normal"] = "NORMAL";
-    CursorType["Selection"] = "SELECTION";
-    CursorType["Sketch"] = "SKETCH";
-})(CursorType || (CursorType = {}));
+import { action, define, observable } from '@formily/reactive'
+import { globalThisPolyfill, isValidNumber } from '@thienvu18/designable-shared'
+export var CursorStatus
+;(function (CursorStatus) {
+  CursorStatus['Normal'] = 'NORMAL'
+  CursorStatus['DragStart'] = 'DRAG_START'
+  CursorStatus['Dragging'] = 'DRAGGING'
+  CursorStatus['DragStop'] = 'DRAG_STOP'
+})(CursorStatus || (CursorStatus = {}))
+export var CursorDragType
+;(function (CursorDragType) {
+  CursorDragType['Move'] = 'MOVE'
+  CursorDragType['Resize'] = 'RESIZE'
+  CursorDragType['Rotate'] = 'ROTATE'
+  CursorDragType['Scale'] = 'SCALE'
+  CursorDragType['Translate'] = 'TRANSLATE'
+  CursorDragType['Round'] = 'ROUND'
+})(CursorDragType || (CursorDragType = {}))
+export var CursorType
+;(function (CursorType) {
+  CursorType['Normal'] = 'NORMAL'
+  CursorType['Selection'] = 'SELECTION'
+  CursorType['Sketch'] = 'SKETCH'
+})(CursorType || (CursorType = {}))
 const DEFAULT_POSITION = {
-    pageX: 0,
-    pageY: 0,
-    clientX: 0,
-    clientY: 0,
-    topPageX: 0,
-    topPageY: 0,
-    topClientX: 0,
-    topClientY: 0,
-};
+  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 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 {
-    constructor(engine) {
-        this.type = CursorType.Normal;
-        this.dragType = CursorDragType.Move;
-        this.status = CursorStatus.Normal;
-        this.position = DEFAULT_POSITION;
-        this.dragAtomDelta = DEFAULT_POSITION;
-        this.dragStartToCurrentDelta = DEFAULT_POSITION;
-        this.dragStartToEndDelta = DEFAULT_POSITION;
-        this.view = globalThisPolyfill;
-        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));
+  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]
     }
-    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);
-        }
+    return buf
+  }, {})
+}
+export class Cursor {
+  constructor(engine) {
+    this.type = CursorType.Normal
+    this.dragType = CursorDragType.Move
+    this.status = CursorStatus.Normal
+    this.position = DEFAULT_POSITION
+    this.dragAtomDelta = DEFAULT_POSITION
+    this.dragStartToCurrentDelta = DEFAULT_POSITION
+    this.dragStartToEndDelta = DEFAULT_POSITION
+    this.view = globalThisPolyfill
+    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;
-        }
+  }
+  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;
-        }
+  }
+  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
     }
+  }
 }

package/esm/models/Engine.d.ts

@@ -1,29 +1,29 @@
-import { IEngineProps } from '../types';
-import { ITreeNode, TreeNode } from './TreeNode';
-import { Workbench } from './Workbench';
-import { Cursor } from './Cursor';
-import { Keyboard } from './Keyboard';
-import { Screen } from './Screen';
-import { Event } from '@thienvu18/designable-shared';
+import { Event } from '@thienvu18/designable-shared'
+import { IEngineProps } from '../types'
+import { Cursor } from './Cursor'
+import { Keyboard } from './Keyboard'
+import { Screen } from './Screen'
+import { ITreeNode, TreeNode } from './TreeNode'
+import { Workbench } from './Workbench'
 /**
  * 设计器引擎
  */
 export declare class Engine extends Event {
-    id: string;
-    props: IEngineProps<Engine>;
-    cursor: Cursor;
-    workbench: Workbench;
-    keyboard: Keyboard;
-    screen: Screen;
-    constructor(props: IEngineProps<Engine>);
-    init(): void;
-    setCurrentTree(tree?: ITreeNode): void;
-    getCurrentTree(): TreeNode;
-    getAllSelectedNodes(): TreeNode[];
-    findNodeById(id: string): TreeNode;
-    findMovingNodes(): TreeNode[];
-    createNode(node: ITreeNode, parent?: TreeNode): TreeNode;
-    mount(): void;
-    unmount(): void;
-    static defaultProps: IEngineProps<Engine>;
+  id: string
+  props: IEngineProps<Engine>
+  cursor: Cursor
+  workbench: Workbench
+  keyboard: Keyboard
+  screen: Screen
+  constructor(props: IEngineProps<Engine>)
+  init(): void
+  setCurrentTree(tree?: ITreeNode): void
+  getCurrentTree(): TreeNode
+  getAllSelectedNodes(): TreeNode[]
+  findNodeById(id: string): TreeNode
+  findMovingNodes(): TreeNode[]
+  createNode(node: ITreeNode, parent?: TreeNode): TreeNode
+  mount(): void
+  unmount(): void
+  static defaultProps: IEngineProps<Engine>
 }

package/esm/models/Engine.js

@@ -1,83 +1,83 @@
-import { TreeNode } from './TreeNode';
-import { Workbench } from './Workbench';
-import { Cursor } from './Cursor';
-import { Keyboard } from './Keyboard';
-import { Screen, ScreenType } from './Screen';
-import { Event, uid, globalThisPolyfill } from '@thienvu18/designable-shared';
+import { Event, globalThisPolyfill, uid } from '@thienvu18/designable-shared'
+import { Cursor } from './Cursor'
+import { Keyboard } from './Keyboard'
+import { Screen, ScreenType } from './Screen'
+import { TreeNode } from './TreeNode'
+import { Workbench } from './Workbench'
 /**
  * 设计器引擎
  */
 export class Engine extends Event {
-    constructor(props) {
-        super(props);
-        this.props = {
-            ...Engine.defaultProps,
-            ...props,
-        };
-        this.init();
-        this.id = uid();
+  constructor(props) {
+    super(props)
+    this.props = {
+      ...Engine.defaultProps,
+      ...props,
     }
-    init() {
-        this.workbench = new Workbench(this);
-        this.screen = new Screen(this);
-        this.cursor = new Cursor(this);
-        this.keyboard = new Keyboard(this);
+    this.init()
+    this.id = uid()
+  }
+  init() {
+    this.workbench = new Workbench(this)
+    this.screen = new Screen(this)
+    this.cursor = new Cursor(this)
+    this.keyboard = new Keyboard(this)
+  }
+  setCurrentTree(tree) {
+    if (this.workbench.currentWorkspace) {
+      this.workbench.currentWorkspace.operation.tree.from(tree)
     }
-    setCurrentTree(tree) {
-        if (this.workbench.currentWorkspace) {
-            this.workbench.currentWorkspace.operation.tree.from(tree);
-        }
-    }
-    getCurrentTree() {
-        return this.workbench?.currentWorkspace?.operation?.tree;
+  }
+  getCurrentTree() {
+    return this.workbench?.currentWorkspace?.operation?.tree
+  }
+  getAllSelectedNodes() {
+    let results = []
+    for (let i = 0; i < this.workbench.workspaces.length; i++) {
+      const workspace = this.workbench.workspaces[i]
+      results = results.concat(workspace.operation.selection.selectedNodes)
     }
-    getAllSelectedNodes() {
-        let results = [];
-        for (let i = 0; i < this.workbench.workspaces.length; i++) {
-            const workspace = this.workbench.workspaces[i];
-            results = results.concat(workspace.operation.selection.selectedNodes);
+    return results
+  }
+  findNodeById(id) {
+    return TreeNode.findById(id)
+  }
+  findMovingNodes() {
+    const results = []
+    this.workbench.eachWorkspace((workspace) => {
+      workspace.operation.moveHelper.dragNodes?.forEach((node) => {
+        if (!results.includes(node)) {
+          results.push(node)
         }
-        return results;
-    }
-    findNodeById(id) {
-        return TreeNode.findById(id);
-    }
-    findMovingNodes() {
-        const results = [];
-        this.workbench.eachWorkspace((workspace) => {
-            workspace.operation.moveHelper.dragNodes?.forEach((node) => {
-                if (!results.includes(node)) {
-                    results.push(node);
-                }
-            });
-        });
-        return results;
-    }
-    createNode(node, parent) {
-        return new TreeNode(node, parent);
-    }
-    mount() {
-        this.attachEvents(globalThisPolyfill);
-    }
-    unmount() {
-        this.detachEvents();
-    }
+      })
+    })
+    return results
+  }
+  createNode(node, parent) {
+    return new TreeNode(node, parent)
+  }
+  mount() {
+    this.attachEvents(globalThisPolyfill)
+  }
+  unmount() {
+    this.detachEvents()
+  }
 }
 Engine.defaultProps = {
-    shortcuts: [],
-    effects: [],
-    drivers: [],
-    rootComponentName: 'Root',
-    sourceIdAttrName: 'data-designer-source-id',
-    nodeIdAttrName: 'data-designer-node-id',
-    contentEditableAttrName: 'data-content-editable',
-    contentEditableNodeIdAttrName: 'data-content-editable-node-id',
-    clickStopPropagationAttrName: 'data-click-stop-propagation',
-    nodeSelectionIdAttrName: 'data-designer-node-helpers-id',
-    nodeDragHandlerAttrName: 'data-designer-node-drag-handler',
-    screenResizeHandlerAttrName: 'data-designer-screen-resize-handler',
-    nodeResizeHandlerAttrName: 'data-designer-node-resize-handler',
-    outlineNodeIdAttrName: 'data-designer-outline-node-id',
-    nodeTranslateAttrName: 'data-designer-node-translate-handler',
-    defaultScreenType: ScreenType.PC,
-};
+  shortcuts: [],
+  effects: [],
+  drivers: [],
+  rootComponentName: 'Root',
+  sourceIdAttrName: 'data-designer-source-id',
+  nodeIdAttrName: 'data-designer-node-id',
+  contentEditableAttrName: 'data-content-editable',
+  contentEditableNodeIdAttrName: 'data-content-editable-node-id',
+  clickStopPropagationAttrName: 'data-click-stop-propagation',
+  nodeSelectionIdAttrName: 'data-designer-node-helpers-id',
+  nodeDragHandlerAttrName: 'data-designer-node-drag-handler',
+  screenResizeHandlerAttrName: 'data-designer-screen-resize-handler',
+  nodeResizeHandlerAttrName: 'data-designer-node-resize-handler',
+  outlineNodeIdAttrName: 'data-designer-outline-node-id',
+  nodeTranslateAttrName: 'data-designer-node-translate-handler',
+  defaultScreenType: ScreenType.PC,
+}

package/esm/models/History.d.ts

@@ -1,34 +1,34 @@
 export interface IHistoryProps<T> {
-    onPush?: (item: T) => void;
-    onRedo?: (item: T) => void;
-    onUndo?: (item: T) => void;
-    onGoto?: (item: T) => void;
+  onPush?: (item: T) => void
+  onRedo?: (item: T) => void
+  onUndo?: (item: T) => void
+  onGoto?: (item: T) => void
 }
 export interface HistoryItem<T> {
-    data: T;
-    type?: string;
-    timestamp: number;
+  data: T
+  type?: string
+  timestamp: number
 }
 export interface ISerializable {
-    from(json: any): void;
-    serialize(): any;
+  from(json: any): void
+  serialize(): any
 }
 export declare class History<T extends ISerializable = any> {
-    context: ISerializable;
-    props: IHistoryProps<HistoryItem<T>>;
-    current: number;
-    history: HistoryItem<T>[];
-    updateTimer: any;
-    maxSize: number;
-    locking: boolean;
-    constructor(context: T, props?: IHistoryProps<HistoryItem<T>>);
-    makeObservable(): void;
-    list(): HistoryItem<T>[];
-    push(type?: string): void;
-    get allowUndo(): boolean;
-    get allowRedo(): boolean;
-    redo(): void;
-    undo(): void;
-    goTo(index: number): void;
-    clear(): void;
+  context: ISerializable
+  props: IHistoryProps<HistoryItem<T>>
+  current: number
+  history: HistoryItem<T>[]
+  updateTimer: any
+  maxSize: number
+  locking: boolean
+  constructor(context: T, props?: IHistoryProps<HistoryItem<T>>)
+  makeObservable(): void
+  list(): HistoryItem<T>[]
+  push(type?: string): void
+  get allowUndo(): boolean
+  get allowRedo(): boolean
+  redo(): void
+  undo(): void
+  goTo(index: number): void
+  clear(): void
 }