@thienvu18/designable-core 2.0.1 → 2.0.2

package/lib/effects/useDragDropEffect.js

@@ -1,159 +1,185 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragDropEffect = 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.useDragDropEffect = void 0
+const models_1 = require('../models')
+const events_1 = require('../events')
+const designable_shared_1 = require('@thienvu18/designable-shared')
 const useDragDropEffect = (engine) => {
-    engine.subscribeTo(events_1.DragStartEvent, (event) => {
-        if (engine.cursor.type !== models_1.CursorType.Normal)
-            return;
-        const target = event.data.target;
-        const el = target?.closest(`
+  engine.subscribeTo(events_1.DragStartEvent, (event) => {
+    if (engine.cursor.type !== models_1.CursorType.Normal) return
+    const target = event.data.target
+    const el = target?.closest(`
        *[${engine.props.nodeIdAttrName}],
        *[${engine.props.sourceIdAttrName}],
        *[${engine.props.outlineNodeIdAttrName}]
-      `);
-        const handler = target?.closest(`*[${engine.props.nodeDragHandlerAttrName}]`);
-        const helper = handler?.closest(`*[${engine.props.nodeSelectionIdAttrName}]`);
-        if (!el?.getAttribute && !handler)
-            return;
-        const sourceId = el?.getAttribute(engine.props.sourceIdAttrName);
-        const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName);
-        const handlerId = helper?.getAttribute(engine.props.nodeSelectionIdAttrName);
-        const nodeId = el?.getAttribute(engine.props.nodeIdAttrName);
-        engine.workbench.eachWorkspace((currentWorkspace) => {
-            const operation = currentWorkspace.operation;
-            const moveHelper = operation.moveHelper;
-            if (nodeId || outlineId || handlerId) {
-                const node = engine.findNodeById(outlineId || nodeId || handlerId);
-                if (node) {
-                    if (!node.allowDrag())
-                        return;
-                    if (node === node.root)
-                        return;
-                    const validSelected = engine
-                        .getAllSelectedNodes()
-                        .filter((node) => node.allowDrag());
-                    if (validSelected.some((selectNode) => selectNode === node)) {
-                        moveHelper.dragStart({ dragNodes: models_1.TreeNode.sort(validSelected) });
-                    }
-                    else {
-                        moveHelper.dragStart({ dragNodes: [node] });
-                    }
-                }
-            }
-            else if (sourceId) {
-                const sourceNode = engine.findNodeById(sourceId);
-                if (sourceNode) {
-                    moveHelper.dragStart({ dragNodes: [sourceNode] });
-                }
-            }
-        });
-        engine.cursor.setStyle('move');
-    });
-    engine.subscribeTo(events_1.DragMoveEvent, (event) => {
-        if (engine.cursor.type !== models_1.CursorType.Normal)
-            return;
-        if (engine.cursor.dragType !== models_1.CursorDragType.Move)
-            return;
-        const target = event.data.target;
-        const el = target?.closest(`
+      `)
+    const handler = target?.closest(
+      `*[${engine.props.nodeDragHandlerAttrName}]`
+    )
+    const helper = handler?.closest(
+      `*[${engine.props.nodeSelectionIdAttrName}]`
+    )
+    if (!el?.getAttribute && !handler) return
+    const sourceId = el?.getAttribute(engine.props.sourceIdAttrName)
+    const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
+    const handlerId = helper?.getAttribute(engine.props.nodeSelectionIdAttrName)
+    const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      if (nodeId || outlineId || handlerId) {
+        const node = engine.findNodeById(outlineId || nodeId || handlerId)
+        if (node) {
+          if (!node.allowDrag()) return
+          if (node === node.root) return
+          const validSelected = engine
+            .getAllSelectedNodes()
+            .filter((node) => node.allowDrag())
+          if (validSelected.some((selectNode) => selectNode === node)) {
+            moveHelper.dragStart({
+              dragNodes: models_1.TreeNode.sort(validSelected),
+            })
+          } else {
+            moveHelper.dragStart({ dragNodes: [node] })
+          }
+        }
+      } else if (sourceId) {
+        const sourceNode = engine.findNodeById(sourceId)
+        if (sourceNode) {
+          moveHelper.dragStart({ dragNodes: [sourceNode] })
+        }
+      }
+    })
+    engine.cursor.setStyle('move')
+  })
+  engine.subscribeTo(events_1.DragMoveEvent, (event) => {
+    if (engine.cursor.type !== models_1.CursorType.Normal) return
+    if (engine.cursor.dragType !== models_1.CursorDragType.Move) return
+    const target = event.data.target
+    const el = target?.closest(`
       *[${engine.props.nodeIdAttrName}],
       *[${engine.props.outlineNodeIdAttrName}]
-    `);
-        const point = new designable_shared_1.Point(event.data.topClientX, event.data.topClientY);
-        const nodeId = el?.getAttribute(engine.props.nodeIdAttrName);
-        const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName);
-        engine.workbench.eachWorkspace((currentWorkspace) => {
-            const operation = currentWorkspace.operation;
-            const moveHelper = operation.moveHelper;
-            const dragNodes = moveHelper.dragNodes;
-            const tree = operation.tree;
-            if (!dragNodes.length)
-                return;
-            const touchNode = tree.findById(outlineId || nodeId);
-            moveHelper.dragMove({
-                point,
-                touchNode,
-            });
-        });
-    });
-    engine.subscribeTo(events_1.ViewportScrollEvent, (event) => {
-        if (engine.cursor.type !== models_1.CursorType.Normal)
-            return;
-        if (engine.cursor.dragType !== models_1.CursorDragType.Move)
-            return;
-        const point = new designable_shared_1.Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY);
-        const currentWorkspace = event?.context?.workspace ?? engine.workbench.activeWorkspace;
-        if (!currentWorkspace)
-            return;
-        const operation = currentWorkspace.operation;
-        const moveHelper = operation.moveHelper;
-        if (!moveHelper.dragNodes.length)
-            return;
-        const tree = operation.tree;
-        const viewport = currentWorkspace.viewport;
-        const outline = currentWorkspace.outline;
-        const viewportTarget = viewport.elementFromPoint(point);
-        const outlineTarget = outline.elementFromPoint(point);
-        const viewportNodeElement = viewportTarget?.closest(`
+    `)
+    const point = new designable_shared_1.Point(
+      event.data.topClientX,
+      event.data.topClientY
+    )
+    const nodeId = el?.getAttribute(engine.props.nodeIdAttrName)
+    const outlineId = el?.getAttribute(engine.props.outlineNodeIdAttrName)
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
+      const tree = operation.tree
+      if (!dragNodes.length) return
+      const touchNode = tree.findById(outlineId || nodeId)
+      moveHelper.dragMove({
+        point,
+        touchNode,
+      })
+    })
+  })
+  engine.subscribeTo(events_1.ViewportScrollEvent, (event) => {
+    if (engine.cursor.type !== models_1.CursorType.Normal) return
+    if (engine.cursor.dragType !== models_1.CursorDragType.Move) return
+    const point = new designable_shared_1.Point(
+      engine.cursor.position.topClientX,
+      engine.cursor.position.topClientY
+    )
+    const currentWorkspace =
+      event?.context?.workspace ?? engine.workbench.activeWorkspace
+    if (!currentWorkspace) return
+    const operation = currentWorkspace.operation
+    const moveHelper = operation.moveHelper
+    if (!moveHelper.dragNodes.length) return
+    const tree = operation.tree
+    const viewport = currentWorkspace.viewport
+    const outline = currentWorkspace.outline
+    const viewportTarget = viewport.elementFromPoint(point)
+    const outlineTarget = outline.elementFromPoint(point)
+    const viewportNodeElement = viewportTarget?.closest(`
       *[${engine.props.nodeIdAttrName}],
       *[${engine.props.outlineNodeIdAttrName}]
-    `);
-        const outlineNodeElement = outlineTarget?.closest(`
+    `)
+    const outlineNodeElement = outlineTarget?.closest(`
     *[${engine.props.nodeIdAttrName}],
     *[${engine.props.outlineNodeIdAttrName}]
-  `);
-        const nodeId = viewportNodeElement?.getAttribute(engine.props.nodeIdAttrName);
-        const outlineNodeId = outlineNodeElement?.getAttribute(engine.props.outlineNodeIdAttrName);
-        const touchNode = tree.findById(outlineNodeId || nodeId);
-        moveHelper.dragMove({ point, touchNode });
-    });
-    engine.subscribeTo(events_1.DragStopEvent, () => {
-        if (engine.cursor.type !== models_1.CursorType.Normal)
-            return;
-        if (engine.cursor.dragType !== models_1.CursorDragType.Move)
-            return;
-        engine.workbench.eachWorkspace((currentWorkspace) => {
-            const operation = currentWorkspace.operation;
-            const moveHelper = operation.moveHelper;
-            const dragNodes = moveHelper.dragNodes;
-            const closestNode = moveHelper.closestNode;
-            const closestDirection = moveHelper.closestDirection;
-            const selection = operation.selection;
-            if (!dragNodes.length)
-                return;
-            if (dragNodes.length && closestNode && closestDirection) {
-                if (closestDirection === models_1.ClosestPosition.After ||
-                    closestDirection === models_1.ClosestPosition.Under) {
-                    if (closestNode.allowSibling(dragNodes)) {
-                        selection.batchSafeSelect(closestNode.insertAfter(...models_1.TreeNode.filterDroppable(dragNodes, closestNode.parent)));
-                    }
-                }
-                else if (closestDirection === models_1.ClosestPosition.Before ||
-                    closestDirection === models_1.ClosestPosition.Upper) {
-                    if (closestNode.allowSibling(dragNodes)) {
-                        selection.batchSafeSelect(closestNode.insertBefore(...models_1.TreeNode.filterDroppable(dragNodes, closestNode.parent)));
-                    }
-                }
-                else if (closestDirection === models_1.ClosestPosition.Inner ||
-                    closestDirection === models_1.ClosestPosition.InnerAfter) {
-                    if (closestNode.allowAppend(dragNodes)) {
-                        selection.batchSafeSelect(closestNode.append(...models_1.TreeNode.filterDroppable(dragNodes, closestNode)));
-                        moveHelper.dragDrop({ dropNode: closestNode });
-                    }
-                }
-                else if (closestDirection === models_1.ClosestPosition.InnerBefore) {
-                    if (closestNode.allowAppend(dragNodes)) {
-                        selection.batchSafeSelect(closestNode.prepend(...models_1.TreeNode.filterDroppable(dragNodes, closestNode)));
-                        moveHelper.dragDrop({ dropNode: closestNode });
-                    }
-                }
-            }
-            moveHelper.dragEnd();
-        });
-        engine.cursor.setStyle('');
-    });
-};
-exports.useDragDropEffect = useDragDropEffect;
+  `)
+    const nodeId = viewportNodeElement?.getAttribute(
+      engine.props.nodeIdAttrName
+    )
+    const outlineNodeId = outlineNodeElement?.getAttribute(
+      engine.props.outlineNodeIdAttrName
+    )
+    const touchNode = tree.findById(outlineNodeId || nodeId)
+    moveHelper.dragMove({ point, touchNode })
+  })
+  engine.subscribeTo(events_1.DragStopEvent, () => {
+    if (engine.cursor.type !== models_1.CursorType.Normal) return
+    if (engine.cursor.dragType !== models_1.CursorDragType.Move) return
+    engine.workbench.eachWorkspace((currentWorkspace) => {
+      const operation = currentWorkspace.operation
+      const moveHelper = operation.moveHelper
+      const dragNodes = moveHelper.dragNodes
+      const closestNode = moveHelper.closestNode
+      const closestDirection = moveHelper.closestDirection
+      const selection = operation.selection
+      if (!dragNodes.length) return
+      if (dragNodes.length && closestNode && closestDirection) {
+        if (
+          closestDirection === models_1.ClosestPosition.After ||
+          closestDirection === models_1.ClosestPosition.Under
+        ) {
+          if (closestNode.allowSibling(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.insertAfter(
+                ...models_1.TreeNode.filterDroppable(
+                  dragNodes,
+                  closestNode.parent
+                )
+              )
+            )
+          }
+        } else if (
+          closestDirection === models_1.ClosestPosition.Before ||
+          closestDirection === models_1.ClosestPosition.Upper
+        ) {
+          if (closestNode.allowSibling(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.insertBefore(
+                ...models_1.TreeNode.filterDroppable(
+                  dragNodes,
+                  closestNode.parent
+                )
+              )
+            )
+          }
+        } else if (
+          closestDirection === models_1.ClosestPosition.Inner ||
+          closestDirection === models_1.ClosestPosition.InnerAfter
+        ) {
+          if (closestNode.allowAppend(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.append(
+                ...models_1.TreeNode.filterDroppable(dragNodes, closestNode)
+              )
+            )
+            moveHelper.dragDrop({ dropNode: closestNode })
+          }
+        } else if (closestDirection === models_1.ClosestPosition.InnerBefore) {
+          if (closestNode.allowAppend(dragNodes)) {
+            selection.batchSafeSelect(
+              closestNode.prepend(
+                ...models_1.TreeNode.filterDroppable(dragNodes, closestNode)
+              )
+            )
+            moveHelper.dragDrop({ dropNode: closestNode })
+          }
+        }
+      }
+      moveHelper.dragEnd()
+    })
+    engine.cursor.setStyle('')
+  })
+}
+exports.useDragDropEffect = useDragDropEffect

package/lib/effects/useFreeSelectionEffect.d.ts

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

package/lib/effects/useFreeSelectionEffect.js

@@ -1,43 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFreeSelectionEffect = void 0;
-const events_1 = require("../events");
-const models_1 = require("../models");
-const designable_shared_1 = require("@thienvu18/designable-shared");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useFreeSelectionEffect = void 0
+const events_1 = require('../events')
+const models_1 = require('../models')
+const designable_shared_1 = require('@thienvu18/designable-shared')
 const useFreeSelectionEffect = (engine) => {
-    engine.subscribeTo(events_1.DragStopEvent, (event) => {
-        if (engine.cursor.dragType !== models_1.CursorDragType.Move) {
-            return;
+  engine.subscribeTo(events_1.DragStopEvent, (event) => {
+    if (engine.cursor.dragType !== models_1.CursorDragType.Move) {
+      return
+    }
+    engine.workbench.eachWorkspace((workspace) => {
+      const viewport = workspace.viewport
+      const dragEndPoint = new designable_shared_1.Point(
+        event.data.topClientX,
+        event.data.topClientY
+      )
+      const dragStartOffsetPoint = viewport.getOffsetPoint(
+        new designable_shared_1.Point(
+          engine.cursor.dragStartPosition.topClientX,
+          engine.cursor.dragStartPosition.topClientY
+        )
+      )
+      const dragEndOffsetPoint = viewport.getOffsetPoint(
+        new designable_shared_1.Point(
+          engine.cursor.position.topClientX,
+          engine.cursor.position.topClientY
+        )
+      )
+      if (!viewport.isPointInViewport(dragEndPoint, false)) return
+      const tree = workspace.operation.tree
+      const selectionRect = (0, designable_shared_1.calcRectByStartEndPoint)(
+        dragStartOffsetPoint,
+        dragEndOffsetPoint,
+        viewport.dragScrollXDelta,
+        viewport.dragScrollYDelta
+      )
+      const selected = []
+      tree.eachChildren((node) => {
+        const nodeRect = viewport.getValidNodeOffsetRect(node)
+        if (
+          nodeRect &&
+          (0, designable_shared_1.isCrossRectInRect)(selectionRect, nodeRect)
+        ) {
+          selected.push([node, nodeRect])
         }
-        engine.workbench.eachWorkspace((workspace) => {
-            const viewport = workspace.viewport;
-            const dragEndPoint = new designable_shared_1.Point(event.data.topClientX, event.data.topClientY);
-            const dragStartOffsetPoint = viewport.getOffsetPoint(new designable_shared_1.Point(engine.cursor.dragStartPosition.topClientX, engine.cursor.dragStartPosition.topClientY));
-            const dragEndOffsetPoint = viewport.getOffsetPoint(new designable_shared_1.Point(engine.cursor.position.topClientX, engine.cursor.position.topClientY));
-            if (!viewport.isPointInViewport(dragEndPoint, false))
-                return;
-            const tree = workspace.operation.tree;
-            const selectionRect = (0, designable_shared_1.calcRectByStartEndPoint)(dragStartOffsetPoint, dragEndOffsetPoint, viewport.dragScrollXDelta, viewport.dragScrollYDelta);
-            const selected = [];
-            tree.eachChildren((node) => {
-                const nodeRect = viewport.getValidNodeOffsetRect(node);
-                if (nodeRect && (0, designable_shared_1.isCrossRectInRect)(selectionRect, nodeRect)) {
-                    selected.push([node, nodeRect]);
-                }
-            });
-            const selectedNodes = selected.reduce((buf, [node, nodeRect]) => {
-                if ((0, designable_shared_1.isRectInRect)(nodeRect, selectionRect)) {
-                    if (selected.some(([selectNode]) => selectNode.isMyParents(node))) {
-                        return buf;
-                    }
-                }
-                return buf.concat(node);
-            }, []);
-            workspace.operation.selection.batchSafeSelect(selectedNodes);
-        });
-        if (engine.cursor.type === models_1.CursorType.Selection) {
-            engine.cursor.setType(models_1.CursorType.Normal);
+      })
+      const selectedNodes = selected.reduce((buf, [node, nodeRect]) => {
+        if ((0, designable_shared_1.isRectInRect)(nodeRect, selectionRect)) {
+          if (selected.some(([selectNode]) => selectNode.isMyParents(node))) {
+            return buf
+          }
         }
-    });
-};
-exports.useFreeSelectionEffect = useFreeSelectionEffect;
+        return buf.concat(node)
+      }, [])
+      workspace.operation.selection.batchSafeSelect(selectedNodes)
+    })
+    if (engine.cursor.type === models_1.CursorType.Selection) {
+      engine.cursor.setType(models_1.CursorType.Normal)
+    }
+  })
+}
+exports.useFreeSelectionEffect = useFreeSelectionEffect

package/lib/effects/useKeyboardEffect.d.ts

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

package/lib/effects/useKeyboardEffect.js

@@ -1,21 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyboardEffect = void 0;
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useKeyboardEffect = void 0
+const events_1 = require('../events')
 const useKeyboardEffect = (engine) => {
-    engine.subscribeTo(events_1.KeyDownEvent, (event) => {
-        const keyboard = engine.keyboard;
-        if (!keyboard)
-            return;
-        const workspace = engine.workbench.activeWorkspace || engine.workbench.currentWorkspace;
-        keyboard.handleKeyboard(event, workspace.getEventContext());
-    });
-    engine.subscribeTo(events_1.KeyUpEvent, (event) => {
-        const keyboard = engine.keyboard;
-        if (!keyboard)
-            return;
-        const workspace = engine.workbench.activeWorkspace || engine.workbench.currentWorkspace;
-        keyboard.handleKeyboard(event, workspace.getEventContext());
-    });
-};
-exports.useKeyboardEffect = useKeyboardEffect;
+  engine.subscribeTo(events_1.KeyDownEvent, (event) => {
+    const keyboard = engine.keyboard
+    if (!keyboard) return
+    const workspace =
+      engine.workbench.activeWorkspace || engine.workbench.currentWorkspace
+    keyboard.handleKeyboard(event, workspace.getEventContext())
+  })
+  engine.subscribeTo(events_1.KeyUpEvent, (event) => {
+    const keyboard = engine.keyboard
+    if (!keyboard) return
+    const workspace =
+      engine.workbench.activeWorkspace || engine.workbench.currentWorkspace
+    keyboard.handleKeyboard(event, workspace.getEventContext())
+  })
+}
+exports.useKeyboardEffect = useKeyboardEffect

package/lib/effects/useResizeEffect.d.ts

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