@thienvu18/designable-core 2.0.1 → 2.0.2

package/esm/effects/useSelectionEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useSelectionEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useSelectionEffect: (engine: Engine) => void

package/esm/effects/useSelectionEffect.js

@@ -1,70 +1,67 @@
-import { CursorStatus } from '../models';
-import { MouseClickEvent } from '../events';
-import { KeyCode, Point } from '@thienvu18/designable-shared';
+import { KeyCode, Point } from '@thienvu18/designable-shared'
+import { MouseClickEvent } from '../events'
+import { CursorStatus } from '../models'
 export const useSelectionEffect = (engine) => {
-    engine.subscribeTo(MouseClickEvent, (event) => {
-        if (engine.cursor.status !== CursorStatus.Normal)
-            return;
-        const target = event.data.target;
-        const el = target?.closest?.(`
+  engine.subscribeTo(MouseClickEvent, (event) => {
+    if (engine.cursor.status !== CursorStatus.Normal) return
+    const target = event.data.target
+    const el = target?.closest?.(`
       *[${engine.props.nodeIdAttrName}],
       *[${engine.props.outlineNodeIdAttrName}]
-    `);
-        const isHelpers = target?.closest?.(`*[${engine.props.nodeSelectionIdAttrName}]`);
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        if (!currentWorkspace)
-            return;
-        if (!el?.getAttribute) {
-            const point = new Point(event.data.topClientX, event.data.topClientY);
-            const operation = currentWorkspace.operation;
-            const viewport = currentWorkspace.viewport;
-            const outline = currentWorkspace.outline;
-            const isInViewport = viewport.isPointInViewport(point, false);
-            const isInOutline = outline.isPointInViewport(point, false);
-            if (isHelpers)
-                return;
-            if (isInViewport || isInOutline) {
-                const selection = operation.selection;
-                const tree = operation.tree;
-                selection.select(tree);
-            }
-            return;
+    `)
+    const isHelpers = target?.closest?.(
+      `*[${engine.props.nodeSelectionIdAttrName}]`
+    )
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    if (!el?.getAttribute) {
+      const point = new Point(event.data.topClientX, event.data.topClientY)
+      const operation = currentWorkspace.operation
+      const viewport = currentWorkspace.viewport
+      const outline = currentWorkspace.outline
+      const isInViewport = viewport.isPointInViewport(point, false)
+      const isInOutline = outline.isPointInViewport(point, false)
+      if (isHelpers) return
+      if (isInViewport || isInOutline) {
+        const selection = operation.selection
+        const tree = operation.tree
+        selection.select(tree)
+      }
+      return
+    }
+    const nodeId = el.getAttribute(engine.props.nodeIdAttrName)
+    const structNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName)
+    const operation = currentWorkspace.operation
+    const selection = operation.selection
+    const tree = operation.tree
+    const node = tree.findById(nodeId || structNodeId)
+    if (node) {
+      engine.keyboard.requestClean()
+      if (
+        engine.keyboard.isKeyDown(KeyCode.Meta) ||
+        engine.keyboard.isKeyDown(KeyCode.Control)
+      ) {
+        if (selection.has(node)) {
+          if (selection.selected.length > 1) {
+            selection.remove(node)
+          }
+        } else {
+          selection.add(node)
         }
-        const nodeId = el.getAttribute(engine.props.nodeIdAttrName);
-        const structNodeId = el.getAttribute(engine.props.outlineNodeIdAttrName);
-        const operation = currentWorkspace.operation;
-        const selection = operation.selection;
-        const tree = operation.tree;
-        const node = tree.findById(nodeId || structNodeId);
-        if (node) {
-            engine.keyboard.requestClean();
-            if (engine.keyboard.isKeyDown(KeyCode.Meta) ||
-                engine.keyboard.isKeyDown(KeyCode.Control)) {
-                if (selection.has(node)) {
-                    if (selection.selected.length > 1) {
-                        selection.remove(node);
-                    }
-                }
-                else {
-                    selection.add(node);
-                }
-            }
-            else if (engine.keyboard.isKeyDown(KeyCode.Shift)) {
-                if (selection.has(node)) {
-                    if (selection.selected.length > 1) {
-                        selection.remove(node);
-                    }
-                }
-                else {
-                    selection.crossAddTo(node);
-                }
-            }
-            else {
-                selection.select(node);
-            }
+      } else if (engine.keyboard.isKeyDown(KeyCode.Shift)) {
+        if (selection.has(node)) {
+          if (selection.selected.length > 1) {
+            selection.remove(node)
+          }
+        } else {
+          selection.crossAddTo(node)
         }
-        else {
-            selection.select(tree);
-        }
-    });
-};
+      } else {
+        selection.select(node)
+      }
+    } else {
+      selection.select(tree)
+    }
+  })
+}

package/esm/effects/useTranslateEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useTranslateEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useTranslateEffect: (engine: Engine) => void

package/esm/effects/useTranslateEffect.js

@@ -1,55 +1,58 @@
-import { CursorDragType } from '../models';
-import { DragStartEvent, DragMoveEvent, DragStopEvent } from '../events';
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events'
+import { CursorDragType } from '../models'
 export const useTranslateEffect = (engine) => {
-    engine.subscribeTo(DragStartEvent, (event) => {
-        const target = event.data.target;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        const handler = target?.closest(`*[${engine.props.nodeTranslateAttrName}]`);
-        if (!currentWorkspace)
-            return;
-        const helper = currentWorkspace.operation.transformHelper;
-        if (handler) {
-            const type = handler.getAttribute(engine.props.nodeTranslateAttrName);
-            if (type) {
-                const selectionElement = handler.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
-                if (selectionElement) {
-                    const nodeId = selectionElement.getAttribute(engine.props.nodeSelectionIdAttrName);
-                    if (nodeId) {
-                        const node = engine.findNodeById(nodeId);
-                        if (node) {
-                            helper.dragStart({ dragNodes: [node], type: 'translate' });
-                        }
-                    }
-                }
+  engine.subscribeTo(DragStartEvent, (event) => {
+    const target = event.data.target
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const handler = target?.closest(`*[${engine.props.nodeTranslateAttrName}]`)
+    if (!currentWorkspace) return
+    const helper = currentWorkspace.operation.transformHelper
+    if (handler) {
+      const type = handler.getAttribute(engine.props.nodeTranslateAttrName)
+      if (type) {
+        const selectionElement = handler.closest(
+          `*[${engine.props.nodeSelectionIdAttrName}]`
+        )
+        if (selectionElement) {
+          const nodeId = selectionElement.getAttribute(
+            engine.props.nodeSelectionIdAttrName
+          )
+          if (nodeId) {
+            const node = engine.findNodeById(nodeId)
+            if (node) {
+              helper.dragStart({ dragNodes: [node], type: 'translate' })
             }
+          }
         }
-    });
-    engine.subscribeTo(DragMoveEvent, (event) => {
-        if (engine.cursor.dragType !== CursorDragType.Translate)
-            return;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        const helper = currentWorkspace?.operation.transformHelper;
-        const dragNodes = helper.dragNodes;
-        if (!dragNodes.length)
-            return;
-        helper.dragMove();
-        dragNodes.forEach((node) => {
-            const element = node.getElement();
-            helper.translate(node, (translate) => {
-                element.style.position = 'absolute';
-                element.style.left = '0px';
-                element.style.top = '0px';
-                element.style.transform = `translate3d(${translate.x}px,${translate.y}px,0)`;
-            });
-        });
-    });
-    engine.subscribeTo(DragStopEvent, (event) => {
-        if (engine.cursor.dragType !== CursorDragType.Translate)
-            return;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        const helper = currentWorkspace?.operation.transformHelper;
-        if (helper) {
-            helper.dragEnd();
-        }
-    });
-};
+      }
+    }
+  })
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    if (engine.cursor.dragType !== CursorDragType.Translate) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    const dragNodes = helper.dragNodes
+    if (!dragNodes.length) return
+    helper.dragMove()
+    dragNodes.forEach((node) => {
+      const element = node.getElement()
+      helper.translate(node, (translate) => {
+        element.style.position = 'absolute'
+        element.style.left = '0px'
+        element.style.top = '0px'
+        element.style.transform = `translate3d(${translate.x}px,${translate.y}px,0)`
+      })
+    })
+  })
+  engine.subscribeTo(DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== CursorDragType.Translate) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    if (helper) {
+      helper.dragEnd()
+    }
+  })
+}

package/esm/effects/useViewportEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useViewportEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useViewportEffect: (engine: Engine) => void

package/esm/effects/useViewportEffect.js

@@ -1,29 +1,27 @@
-import { ViewportResizeEvent, ViewportScrollEvent } from '../events';
+import { ViewportResizeEvent, ViewportScrollEvent } from '../events'
 export const useViewportEffect = (engine) => {
-    engine.subscribeTo(ViewportResizeEvent, (event) => {
-        const currentWorkspace = event?.context?.workspace;
-        if (!currentWorkspace)
-            return;
-        const viewport = currentWorkspace.viewport;
-        const outline = currentWorkspace.outline;
-        if (viewport.matchViewport(event.data.target)) {
-            viewport.digestViewport();
-        }
-        if (outline.matchViewport(event.data.target)) {
-            outline.digestViewport();
-        }
-    });
-    engine.subscribeTo(ViewportScrollEvent, (event) => {
-        const currentWorkspace = event?.context?.workspace;
-        if (!currentWorkspace)
-            return;
-        const viewport = currentWorkspace.viewport;
-        const outline = currentWorkspace.outline;
-        if (viewport.matchViewport(event.data.target)) {
-            viewport.digestViewport();
-        }
-        if (outline.matchViewport(event.data.target)) {
-            outline.digestViewport();
-        }
-    });
-};
+  engine.subscribeTo(ViewportResizeEvent, (event) => {
+    const currentWorkspace = event?.context?.workspace
+    if (!currentWorkspace) return
+    const viewport = currentWorkspace.viewport
+    const outline = currentWorkspace.outline
+    if (viewport.matchViewport(event.data.target)) {
+      viewport.digestViewport()
+    }
+    if (outline.matchViewport(event.data.target)) {
+      outline.digestViewport()
+    }
+  })
+  engine.subscribeTo(ViewportScrollEvent, (event) => {
+    const currentWorkspace = event?.context?.workspace
+    if (!currentWorkspace) return
+    const viewport = currentWorkspace.viewport
+    const outline = currentWorkspace.outline
+    if (viewport.matchViewport(event.data.target)) {
+      viewport.digestViewport()
+    }
+    if (outline.matchViewport(event.data.target)) {
+      outline.digestViewport()
+    }
+  })
+}

package/esm/effects/useWorkspaceEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useWorkspaceEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useWorkspaceEffect: (engine: Engine) => void

package/esm/effects/useWorkspaceEffect.js

@@ -1,28 +1,31 @@
-import { SelectNodeEvent } from '../events';
+import { SelectNodeEvent } from '../events'
 export const useWorkspaceEffect = (engine) => {
-    engine.subscribeWith([
-        'append:node',
-        'insert:after',
-        'insert:before',
-        'insert:children',
-        'drag:node',
-        'drop:node',
-        'prepend:node',
-        'remove:node',
-        'select:node',
-        'update:children',
-        'wrap:node',
-        'update:node:props',
-    ], (event) => {
-        if (event.context?.workbench) {
-            engine.workbench.setActiveWorkspace(event.context.workspace);
-        }
-    });
-    engine.subscribeTo(SelectNodeEvent, (event) => {
-        engine.workbench.eachWorkspace((workspace) => {
-            if (workspace !== event.context.workspace) {
-                workspace.operation.selection.clear();
-            }
-        });
-    });
-};
+  engine.subscribeWith(
+    [
+      'append:node',
+      'insert:after',
+      'insert:before',
+      'insert:children',
+      'drag:node',
+      'drop:node',
+      'prepend:node',
+      'remove:node',
+      'select:node',
+      'update:children',
+      'wrap:node',
+      'update:node:props',
+    ],
+    (event) => {
+      if (event.context?.workbench) {
+        engine.workbench.setActiveWorkspace(event.context.workspace)
+      }
+    }
+  )
+  engine.subscribeTo(SelectNodeEvent, (event) => {
+    engine.workbench.eachWorkspace((workspace) => {
+      if (workspace !== event.context.workspace) {
+        workspace.operation.selection.clear()
+      }
+    })
+  })
+}

package/esm/events/cursor/AbstractCursorEvent.d.ts

@@ -1,21 +1,21 @@
-import { IEngineContext } from '../../types';
+import { IEngineContext } from '../../types'
 export interface ICursorEventOriginData {
-    clientX: number;
-    clientY: number;
-    pageX: number;
-    pageY: number;
-    target: EventTarget;
-    view: Window;
+  clientX: number
+  clientY: number
+  pageX: number
+  pageY: number
+  target: EventTarget
+  view: Window
 }
 export interface ICursorEventData extends ICursorEventOriginData {
-    topClientX?: number;
-    topClientY?: number;
-    topPageX?: number;
-    topPageY?: number;
+  topClientX?: number
+  topClientY?: number
+  topPageX?: number
+  topPageY?: number
 }
 export declare class AbstractCursorEvent {
-    data: ICursorEventData;
-    context: IEngineContext;
-    constructor(data: ICursorEventOriginData);
-    transformCoordinates(): void;
+  data: ICursorEventData
+  context: IEngineContext
+  constructor(data: ICursorEventOriginData)
+  transformCoordinates(): void
 }

package/esm/events/cursor/AbstractCursorEvent.js

@@ -1,37 +1,39 @@
-import { globalThisPolyfill } from '@thienvu18/designable-shared';
+import { globalThisPolyfill } from '@thienvu18/designable-shared'
 export class AbstractCursorEvent {
-    constructor(data) {
-        this.data = data || {
-            clientX: 0,
-            clientY: 0,
-            pageX: 0,
-            pageY: 0,
-            target: null,
-            view: globalThisPolyfill,
-        };
-        this.transformCoordinates();
+  constructor(data) {
+    this.data = data || {
+      clientX: 0,
+      clientY: 0,
+      pageX: 0,
+      pageY: 0,
+      target: null,
+      view: globalThisPolyfill,
     }
-    transformCoordinates() {
-        const { frameElement } = this.data?.view || {};
-        if (frameElement && this.data.view !== globalThisPolyfill) {
-            const frameRect = frameElement.getBoundingClientRect();
-            const scale = frameRect.width / frameElement['offsetWidth'];
-            this.data.topClientX = this.data.clientX * scale + frameRect.x;
-            this.data.topClientY = this.data.clientY * scale + frameRect.y;
-            this.data.topPageX =
-                this.data.pageX + frameRect.x - this.data.view.scrollX;
-            this.data.topPageY =
-                this.data.pageY + frameRect.y - this.data.view.scrollY;
-            const topElement = document.elementFromPoint(this.data.topPageX, this.data.topClientY);
-            if (topElement !== frameElement) {
-                this.data.target = topElement;
-            }
-        }
-        else {
-            this.data.topClientX = this.data.clientX;
-            this.data.topClientY = this.data.clientY;
-            this.data.topPageX = this.data.pageX;
-            this.data.topPageY = this.data.pageY;
-        }
+    this.transformCoordinates()
+  }
+  transformCoordinates() {
+    const { frameElement } = this.data?.view || {}
+    if (frameElement && this.data.view !== globalThisPolyfill) {
+      const frameRect = frameElement.getBoundingClientRect()
+      const scale = frameRect.width / frameElement['offsetWidth']
+      this.data.topClientX = this.data.clientX * scale + frameRect.x
+      this.data.topClientY = this.data.clientY * scale + frameRect.y
+      this.data.topPageX =
+        this.data.pageX + frameRect.x - this.data.view.scrollX
+      this.data.topPageY =
+        this.data.pageY + frameRect.y - this.data.view.scrollY
+      const topElement = document.elementFromPoint(
+        this.data.topPageX,
+        this.data.topClientY
+      )
+      if (topElement !== frameElement) {
+        this.data.target = topElement
+      }
+    } else {
+      this.data.topClientX = this.data.clientX
+      this.data.topClientY = this.data.clientY
+      this.data.topPageX = this.data.pageX
+      this.data.topPageY = this.data.pageY
     }
+  }
 }

package/esm/events/cursor/DragMoveEvent.d.ts

@@ -1,5 +1,8 @@
-import { ICustomEvent } from '@thienvu18/designable-shared';
-import { AbstractCursorEvent } from './AbstractCursorEvent';
-export declare class DragMoveEvent extends AbstractCursorEvent implements ICustomEvent {
-    type: string;
+import { ICustomEvent } from '@thienvu18/designable-shared'
+import { AbstractCursorEvent } from './AbstractCursorEvent'
+export declare class DragMoveEvent
+  extends AbstractCursorEvent
+  implements ICustomEvent
+{
+  type: string
 }

package/esm/events/cursor/DragMoveEvent.js

@@ -1,7 +1,7 @@
-import { AbstractCursorEvent } from './AbstractCursorEvent';
+import { AbstractCursorEvent } from './AbstractCursorEvent'
 export class DragMoveEvent extends AbstractCursorEvent {
-    constructor() {
-        super(...arguments);
-        this.type = 'drag:move';
-    }
+  constructor() {
+    super(...arguments)
+    this.type = 'drag:move'
+  }
 }

package/esm/events/cursor/DragStartEvent.d.ts

@@ -1,5 +1,8 @@
-import { ICustomEvent } from '@thienvu18/designable-shared';
-import { AbstractCursorEvent } from './AbstractCursorEvent';
-export declare class DragStartEvent extends AbstractCursorEvent implements ICustomEvent {
-    type: string;
+import { ICustomEvent } from '@thienvu18/designable-shared'
+import { AbstractCursorEvent } from './AbstractCursorEvent'
+export declare class DragStartEvent
+  extends AbstractCursorEvent
+  implements ICustomEvent
+{
+  type: string
 }

package/esm/events/cursor/DragStartEvent.js

@@ -1,7 +1,7 @@
-import { AbstractCursorEvent } from './AbstractCursorEvent';
+import { AbstractCursorEvent } from './AbstractCursorEvent'
 export class DragStartEvent extends AbstractCursorEvent {
-    constructor() {
-        super(...arguments);
-        this.type = 'drag:start';
-    }
+  constructor() {
+    super(...arguments)
+    this.type = 'drag:start'
+  }
 }

package/esm/events/cursor/DragStopEvent.d.ts

@@ -1,5 +1,8 @@
-import { ICustomEvent } from '@thienvu18/designable-shared';
-import { AbstractCursorEvent } from './AbstractCursorEvent';
-export declare class DragStopEvent extends AbstractCursorEvent implements ICustomEvent {
-    type: string;
+import { ICustomEvent } from '@thienvu18/designable-shared'
+import { AbstractCursorEvent } from './AbstractCursorEvent'
+export declare class DragStopEvent
+  extends AbstractCursorEvent
+  implements ICustomEvent
+{
+  type: string
 }

package/esm/events/cursor/DragStopEvent.js

@@ -1,7 +1,7 @@
-import { AbstractCursorEvent } from './AbstractCursorEvent';
+import { AbstractCursorEvent } from './AbstractCursorEvent'
 export class DragStopEvent extends AbstractCursorEvent {
-    constructor() {
-        super(...arguments);
-        this.type = 'drag:stop';
-    }
+  constructor() {
+    super(...arguments)
+    this.type = 'drag:stop'
+  }
 }

package/esm/events/cursor/MouseClickEvent.d.ts

@@ -1,8 +1,14 @@
-import { ICustomEvent } from '@thienvu18/designable-shared';
-import { AbstractCursorEvent } from './AbstractCursorEvent';
-export declare class MouseClickEvent extends AbstractCursorEvent implements ICustomEvent {
-    type: string;
+import { ICustomEvent } from '@thienvu18/designable-shared'
+import { AbstractCursorEvent } from './AbstractCursorEvent'
+export declare class MouseClickEvent
+  extends AbstractCursorEvent
+  implements ICustomEvent
+{
+  type: string
 }
-export declare class MouseDoubleClickEvent extends AbstractCursorEvent implements ICustomEvent {
-    type: string;
+export declare class MouseDoubleClickEvent
+  extends AbstractCursorEvent
+  implements ICustomEvent
+{
+  type: string
 }

package/esm/events/cursor/MouseClickEvent.js

@@ -1,13 +1,13 @@
-import { AbstractCursorEvent } from './AbstractCursorEvent';
+import { AbstractCursorEvent } from './AbstractCursorEvent'
 export class MouseClickEvent extends AbstractCursorEvent {
-    constructor() {
-        super(...arguments);
-        this.type = 'mouse:click';
-    }
+  constructor() {
+    super(...arguments)
+    this.type = 'mouse:click'
+  }
 }
 export class MouseDoubleClickEvent extends AbstractCursorEvent {
-    constructor() {
-        super(...arguments);
-        this.type = 'mouse:dblclick';
-    }
+  constructor() {
+    super(...arguments)
+    this.type = 'mouse:dblclick'
+  }
 }