@thienvu18/designable-core 2.0.1 → 2.0.2

package/lib/effects/useResizeEffect.js

@@ -1,81 +1,92 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizeEffect = void 0;
-const models_1 = require("../models");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useResizeEffect = void 0
+const models_1 = require('../models')
+const events_1 = require('../events')
 const useResizeEffect = (engine) => {
-    const findStartNodeHandler = (target) => {
-        const handler = target?.closest(`*[${engine.props.nodeResizeHandlerAttrName}]`);
-        if (handler) {
-            const direction = handler.getAttribute(engine.props.nodeResizeHandlerAttrName);
-            if (direction) {
-                const element = handler.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
-                if (element) {
-                    const nodeId = element.getAttribute(engine.props.nodeSelectionIdAttrName);
-                    if (nodeId) {
-                        const node = engine.findNodeById(nodeId);
-                        if (node) {
-                            return { direction, node, element };
-                        }
-                    }
-                }
+  const findStartNodeHandler = (target) => {
+    const handler = target?.closest(
+      `*[${engine.props.nodeResizeHandlerAttrName}]`
+    )
+    if (handler) {
+      const direction = handler.getAttribute(
+        engine.props.nodeResizeHandlerAttrName
+      )
+      if (direction) {
+        const element = handler.closest(
+          `*[${engine.props.nodeSelectionIdAttrName}]`
+        )
+        if (element) {
+          const nodeId = element.getAttribute(
+            engine.props.nodeSelectionIdAttrName
+          )
+          if (nodeId) {
+            const node = engine.findNodeById(nodeId)
+            if (node) {
+              return { direction, node, element }
             }
+          }
         }
-        return;
-    };
-    engine.subscribeTo(events_1.DragStartEvent, (event) => {
-        const target = event.data.target;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        if (!currentWorkspace)
-            return;
-        const handler = findStartNodeHandler(target);
-        const helper = currentWorkspace.operation.transformHelper;
-        if (handler) {
-            const selectionElement = handler.element.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: 'resize',
-                            direction: handler.direction,
-                        });
-                    }
-                }
-            }
-        }
-    });
-    engine.subscribeTo(events_1.DragMoveEvent, (event) => {
-        if (engine.cursor.dragType !== models_1.CursorDragType.Resize)
-            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.resize(node, (rect) => {
-                element.style.width = rect.width + 'px';
-                element.style.height = rect.height + 'px';
-                element.style.position = 'absolute';
-                element.style.left = '0px';
-                element.style.top = '0px';
-                element.style.transform = `translate3d(${rect.x}px,${rect.y}px,0)`;
-            });
-        });
-    });
-    engine.subscribeTo(events_1.DragStopEvent, (event) => {
-        if (engine.cursor.dragType !== models_1.CursorDragType.Resize)
-            return;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        const helper = currentWorkspace?.operation.transformHelper;
-        if (helper) {
-            helper.dragEnd();
+      }
+    }
+    return
+  }
+  engine.subscribeTo(events_1.DragStartEvent, (event) => {
+    const target = event.data.target
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    const handler = findStartNodeHandler(target)
+    const helper = currentWorkspace.operation.transformHelper
+    if (handler) {
+      const selectionElement = handler.element.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: 'resize',
+              direction: handler.direction,
+            })
+          }
         }
-    });
-};
-exports.useResizeEffect = useResizeEffect;
+      }
+    }
+  })
+  engine.subscribeTo(events_1.DragMoveEvent, (event) => {
+    if (engine.cursor.dragType !== models_1.CursorDragType.Resize) 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.resize(node, (rect) => {
+        element.style.width = rect.width + 'px'
+        element.style.height = rect.height + 'px'
+        element.style.position = 'absolute'
+        element.style.left = '0px'
+        element.style.top = '0px'
+        element.style.transform = `translate3d(${rect.x}px,${rect.y}px,0)`
+      })
+    })
+  })
+  engine.subscribeTo(events_1.DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== models_1.CursorDragType.Resize) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    if (helper) {
+      helper.dragEnd()
+    }
+  })
+}
+exports.useResizeEffect = useResizeEffect

package/lib/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/lib/effects/useSelectionEffect.js

@@ -1,74 +1,74 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectionEffect = void 0;
-const models_1 = require("../models");
-const events_1 = require("../events");
-const designable_shared_1 = require("@thienvu18/designable-shared");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useSelectionEffect = void 0
+const models_1 = require('../models')
+const events_1 = require('../events')
+const designable_shared_1 = require('@thienvu18/designable-shared')
 const useSelectionEffect = (engine) => {
-    engine.subscribeTo(events_1.MouseClickEvent, (event) => {
-        if (engine.cursor.status !== models_1.CursorStatus.Normal)
-            return;
-        const target = event.data.target;
-        const el = target?.closest?.(`
+  engine.subscribeTo(events_1.MouseClickEvent, (event) => {
+    if (engine.cursor.status !== models_1.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 designable_shared_1.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 designable_shared_1.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(designable_shared_1.KeyCode.Meta) ||
+        engine.keyboard.isKeyDown(designable_shared_1.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(designable_shared_1.KeyCode.Meta) ||
-                engine.keyboard.isKeyDown(designable_shared_1.KeyCode.Control)) {
-                if (selection.has(node)) {
-                    if (selection.selected.length > 1) {
-                        selection.remove(node);
-                    }
-                }
-                else {
-                    selection.add(node);
-                }
-            }
-            else if (engine.keyboard.isKeyDown(designable_shared_1.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(designable_shared_1.KeyCode.Shift)) {
+        if (selection.has(node)) {
+          if (selection.selected.length > 1) {
+            selection.remove(node)
+          }
+        } else {
+          selection.crossAddTo(node)
         }
-        else {
-            selection.select(tree);
-        }
-    });
-};
-exports.useSelectionEffect = useSelectionEffect;
+      } else {
+        selection.select(node)
+      }
+    } else {
+      selection.select(tree)
+    }
+  })
+}
+exports.useSelectionEffect = useSelectionEffect

package/lib/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/lib/effects/useTranslateEffect.js

@@ -1,59 +1,62 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTranslateEffect = void 0;
-const models_1 = require("../models");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useTranslateEffect = void 0
+const models_1 = require('../models')
+const events_1 = require('../events')
 const useTranslateEffect = (engine) => {
-    engine.subscribeTo(events_1.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(events_1.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(events_1.DragMoveEvent, (event) => {
-        if (engine.cursor.dragType !== models_1.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(events_1.DragStopEvent, (event) => {
-        if (engine.cursor.dragType !== models_1.CursorDragType.Translate)
-            return;
-        const currentWorkspace = event.context?.workspace ?? engine.workbench.activeWorkspace;
-        const helper = currentWorkspace?.operation.transformHelper;
-        if (helper) {
-            helper.dragEnd();
-        }
-    });
-};
-exports.useTranslateEffect = useTranslateEffect;
+      }
+    }
+  })
+  engine.subscribeTo(events_1.DragMoveEvent, (event) => {
+    if (engine.cursor.dragType !== models_1.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(events_1.DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== models_1.CursorDragType.Translate) return
+    const currentWorkspace =
+      event.context?.workspace ?? engine.workbench.activeWorkspace
+    const helper = currentWorkspace?.operation.transformHelper
+    if (helper) {
+      helper.dragEnd()
+    }
+  })
+}
+exports.useTranslateEffect = useTranslateEffect

package/lib/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/lib/effects/useViewportEffect.js

@@ -1,33 +1,31 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewportEffect = void 0;
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useViewportEffect = void 0
+const events_1 = require('../events')
 const useViewportEffect = (engine) => {
-    engine.subscribeTo(events_1.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(events_1.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();
-        }
-    });
-};
-exports.useViewportEffect = useViewportEffect;
+  engine.subscribeTo(events_1.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(events_1.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()
+    }
+  })
+}
+exports.useViewportEffect = useViewportEffect

package/lib/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/lib/effects/useWorkspaceEffect.js

@@ -1,32 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWorkspaceEffect = void 0;
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useWorkspaceEffect = void 0
+const events_1 = require('../events')
 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(events_1.SelectNodeEvent, (event) => {
-        engine.workbench.eachWorkspace((workspace) => {
-            if (workspace !== event.context.workspace) {
-                workspace.operation.selection.clear();
-            }
-        });
-    });
-};
-exports.useWorkspaceEffect = useWorkspaceEffect;
+  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(events_1.SelectNodeEvent, (event) => {
+    engine.workbench.eachWorkspace((workspace) => {
+      if (workspace !== event.context.workspace) {
+        workspace.operation.selection.clear()
+      }
+    })
+  })
+}
+exports.useWorkspaceEffect = useWorkspaceEffect

package/lib/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
 }