@flowgram.ai/free-layout-core 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.js

@@ -52,6 +52,8 @@ __export(src_exports, {
   WorkflowNodeEntity: () => WorkflowNodeEntity,
   WorkflowNodeLinesData: () => WorkflowNodeLinesData,
   WorkflowNodePortsData: () => WorkflowNodePortsData,
+  WorkflowOperationBaseService: () => WorkflowOperationBaseService,
+  WorkflowOperationBaseServiceImpl: () => WorkflowOperationBaseServiceImpl,
   WorkflowPortEntity: () => WorkflowPortEntity,
   WorkflowResetLayoutService: () => WorkflowResetLayoutService,
   WorkflowSelectService: () => WorkflowSelectService,
@@ -65,21 +67,21 @@ __export(src_exports, {
   getAntiOverlapPosition: () => getAntiOverlapPosition,
   getPortEntityId: () => getPortEntityId,
   nanoid: () => nanoid,
-  useConfigEntity: () => import_core24.useConfigEntity,
+  useConfigEntity: () => import_core25.useConfigEntity,
   useCurrentDomNode: () => useCurrentDomNode,
   useCurrentEntity: () => useCurrentEntity,
-  useEntities: () => import_core24.useEntities,
-  useEntityDataFromContext: () => import_core24.useEntityDataFromContext,
-  useEntityFromContext: () => import_core24.useEntityFromContext,
-  useListenEvents: () => import_core24.useListenEvents,
+  useEntities: () => import_core25.useEntities,
+  useEntityDataFromContext: () => import_core25.useEntityDataFromContext,
+  useEntityFromContext: () => import_core25.useEntityFromContext,
+  useListenEvents: () => import_core25.useListenEvents,
   useNodeRender: () => useNodeRender,
-  usePlayground: () => import_core24.usePlayground,
-  usePlaygroundContainer: () => import_core24.usePlaygroundContainer,
-  usePlaygroundContext: () => import_core24.usePlaygroundContext,
-  usePlaygroundLatest: () => import_core24.usePlaygroundLatest,
+  usePlayground: () => import_core25.usePlayground,
+  usePlaygroundContainer: () => import_core25.usePlaygroundContainer,
+  usePlaygroundContext: () => import_core25.usePlaygroundContext,
+  usePlaygroundLatest: () => import_core25.usePlaygroundLatest,
   usePlaygroundReadonlyState: () => usePlaygroundReadonlyState,
-  useRefresh: () => import_core24.useRefresh,
-  useService: () => import_core24.useService,
+  useRefresh: () => import_core25.useRefresh,
+  useService: () => import_core25.useService,
   useWorkflowDocument: () => useWorkflowDocument
 });
 module.exports = __toCommonJS(src_exports);
@@ -97,14 +99,14 @@ var WorkflowCommands = /* @__PURE__ */ ((WorkflowCommands2) => {
 })(WorkflowCommands || {});
 
 // src/hooks/index.ts
-var import_core24 = require("@flowgram.ai/core");
+var import_core25 = require("@flowgram.ai/core");
 
 // src/hooks/use-node-render.tsx
 var import_react2 = require("react");
 var import_reactive = require("@flowgram.ai/reactive");
 var import_node = require("@flowgram.ai/node");
-var import_document10 = require("@flowgram.ai/document");
-var import_core20 = require("@flowgram.ai/core");
+var import_document12 = require("@flowgram.ai/document");
+var import_core21 = require("@flowgram.ai/core");
 
 // src/service/workflow-select-service.ts
 var import_inversify = require("inversify");
@@ -178,11 +180,12 @@ var import_core8 = require("@flowgram.ai/core");
 
 // src/entity-datas/workflow-node-ports-data.ts
 var import_lodash_es = require("lodash-es");
-var import_document2 = require("@flowgram.ai/document");
+var import_document3 = require("@flowgram.ai/document");
 var import_core5 = require("@flowgram.ai/core");
 
 // src/entities/workflow-port-entity.ts
 var import_utils5 = require("@flowgram.ai/utils");
+var import_document2 = require("@flowgram.ai/document");
 var import_core4 = require("@flowgram.ai/core");
 var PORT_SIZE = 24;
 var WorkflowPortEntity = class extends import_core4.Entity {
@@ -230,7 +233,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
   }
   get point() {
     const { targetElement } = this;
-    const { bounds } = this.node.getData(import_core4.TransformData);
+    const { bounds } = this.node.getData(import_document2.FlowNodeTransformData);
     if (targetElement) {
       const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
       return this.entityManager.getEntity(import_core4.PlaygroundConfigEntity).getPosFromMouseEvent({
@@ -259,7 +262,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
    */
   get relativePosition() {
     const { point } = this;
-    const { bounds } = this.node.getData(import_core4.TransformData);
+    const { bounds } = this.node.getData(import_document2.FlowNodeTransformData);
     return {
       x: point.x - bounds.x,
       y: point.y - bounds.y
@@ -290,10 +293,17 @@ var WorkflowPortEntity = class extends import_core4.Entity {
   }
   /**
    * 当前点位上连接的线条
+   * @deprecated use `availableLines` instead
    */
   get lines() {
     return this.allLines.filter((line) => !line.isDrawing);
   }
+  /**
+   * 当前有效的线条，不包含正在画的线条和隐藏的线条（这个出现在线条重连会先把原来的线条隐藏）
+   */
+  get availableLines() {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
   /**
    * 当前点位上连接的线条（包含 isDrawing === true 的线条）
    */
@@ -362,7 +372,7 @@ var WorkflowNodePortsData = class extends import_core5.EntityData {
    * 动态计算点位，通过 dom 的 data-port-key
    */
   updateDynamicPorts() {
-    const domNode = this.entity.getData(import_document2.FlowNodeRenderData).node;
+    const domNode = this.entity.getData(import_document3.FlowNodeRenderData).node;
     const elements = domNode.querySelectorAll("[data-port-id]");
     const staticPorts = this._staticPorts;
     const dynamicPorts = [];
@@ -1139,20 +1149,20 @@ WorkflowHoverService = __decorateClass([
 var import_nanoid3 = require("nanoid");
 var import_inversify6 = require("inversify");
 var import_utils16 = require("@flowgram.ai/utils");
-var import_document7 = require("@flowgram.ai/document");
 var import_document8 = require("@flowgram.ai/document");
+var import_document9 = require("@flowgram.ai/document");
 var import_core15 = require("@flowgram.ai/core");
 
 // src/workflow-lines-manager.ts
 var import_lodash_es3 = require("lodash-es");
 var import_inversify3 = require("inversify");
 var import_utils12 = require("@flowgram.ai/utils");
-var import_document4 = require("@flowgram.ai/document");
+var import_document5 = require("@flowgram.ai/document");
 var import_core12 = require("@flowgram.ai/core");
 
 // src/workflow-document-option.ts
 var import_form_core2 = require("@flowgram.ai/form-core");
-var import_document3 = require("@flowgram.ai/document");
+var import_document4 = require("@flowgram.ai/document");
 var import_core11 = require("@flowgram.ai/core");
 
 // src/utils/flow-node-form-data.ts
@@ -1185,6 +1195,9 @@ var LineColors = /* @__PURE__ */ ((LineColors2) => {
   return LineColors2;
 })(LineColors || {});
 
+// src/typings/workflow-operation.ts
+var WorkflowOperationBaseService = Symbol("WorkflowOperationBaseService");
+
 // src/typings/index.ts
 var URLParams = Symbol("");
 
@@ -1235,7 +1248,7 @@ var WorkflowDocumentOptionsDefault = {
     const nodeMeta = node.getNodeMeta();
     const subCanvas = nodeMeta.subCanvas?.(node);
     if (subCanvas?.isCanvas === false) {
-      const canvasNodeTransform = subCanvas.canvasNode.getData(import_document3.FlowNodeTransformData);
+      const canvasNodeTransform = subCanvas.canvasNode.getData(import_document4.FlowNodeTransformData);
       const { x, y } = canvasNodeTransform.transform.position;
       metaData.canvasPosition = { x, y };
     }
@@ -1533,12 +1546,12 @@ var WorkflowLinesManager = class {
    * @param pos - 鼠标位置
    */
   getNodeFromMousePos(pos) {
-    const allNodes = this.document.getAllNodes();
+    const allNodes = this.document.getAllNodes().sort((a, b) => this.getNodeIndex(a) - this.getNodeIndex(b));
     const containNodes = [];
     const { selection } = this.selectService;
     const zoom = this.entityManager.getEntity(import_core12.PlaygroundConfigEntity)?.config?.zoom || 1;
     allNodes.forEach((node) => {
-      const { bounds } = node.getData(import_document4.FlowNodeTransformData);
+      const { bounds } = node.getData(import_document5.FlowNodeTransformData);
       if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
         containNodes.push(node);
       }
@@ -1560,6 +1573,10 @@ var WorkflowLinesManager = class {
   registerData(line) {
     line.addData(WorkflowLineRenderData);
   }
+  getNodeIndex(node) {
+    const nodeRenderData = node.getData(import_document5.FlowNodeRenderData);
+    return nodeRenderData.stackIndex;
+  }
 };
 __decorateClass([
   (0, import_inversify3.inject)(WorkflowHoverService)
@@ -1582,12 +1599,12 @@ var import_nanoid2 = require("nanoid");
 var import_inversify5 = require("inversify");
 var import_utils14 = require("@flowgram.ai/utils");
 var import_form_core3 = require("@flowgram.ai/form-core");
-var import_document6 = require("@flowgram.ai/document");
+var import_document7 = require("@flowgram.ai/document");
 var import_core14 = require("@flowgram.ai/core");
 
 // src/layout/free-layout.ts
 var import_inversify4 = require("inversify");
-var import_document5 = require("@flowgram.ai/document");
+var import_document6 = require("@flowgram.ai/document");
 var import_core13 = require("@flowgram.ai/core");
 var import_utils13 = require("@flowgram.ai/utils");
 var FREE_LAYOUT_KEY = "free-layout";
@@ -1602,12 +1619,12 @@ var FreeLayout = class {
    * 更新布局
    */
   update() {
-    if (this.document.root.getData(import_document5.FlowNodeTransformData)?.localDirty) {
+    if (this.document.root.getData(import_document6.FlowNodeTransformData)?.localDirty) {
       this.document.root.clearMemoGlobal();
     }
   }
   syncTransform(node) {
-    const transform = node.getData(import_document5.FlowNodeTransformData);
+    const transform = node.getData(import_document6.FlowNodeTransformData);
     if (!transform.localDirty) {
       return;
     }
@@ -1621,7 +1638,7 @@ var FreeLayout = class {
     }
     node.parent.clearMemoGlobal();
     node.parent.clearMemoLocal();
-    const parentTransform = node.parent.getData(import_document5.FlowNodeTransformData);
+    const parentTransform = node.parent.getData(import_document6.FlowNodeTransformData);
     parentTransform.transform.fireChange();
   }
   /**
@@ -1630,7 +1647,7 @@ var FreeLayout = class {
    */
   getPadding(node) {
     const { padding } = node.getNodeMeta();
-    const transform = node.getData(import_document5.FlowNodeTransformData);
+    const transform = node.getData(import_document6.FlowNodeTransformData);
     if (padding) {
       return typeof padding === "function" ? padding(transform) : padding;
     }
@@ -1674,7 +1691,7 @@ __decorateClass([
   (0, import_inversify4.inject)(import_core13.PlaygroundConfigEntity)
 ], FreeLayout.prototype, "playgroundConfig", 2);
 __decorateClass([
-  (0, import_inversify4.inject)(import_document5.FlowDocumentProvider)
+  (0, import_inversify4.inject)(import_document6.FlowDocumentProvider)
 ], FreeLayout.prototype, "documentProvider", 2);
 FreeLayout = __decorateClass([
   (0, import_inversify4.injectable)()
@@ -1683,7 +1700,7 @@ FreeLayout = __decorateClass([
 // src/workflow-document.ts
 var nanoid2 = (0, import_nanoid2.customAlphabet)("1234567890", 5);
 var WorkflowDocumentProvider = Symbol("WorkflowDocumentProvider");
-var WorkflowDocument = class extends import_document6.FlowDocument {
+var WorkflowDocument = class extends import_document7.FlowDocument {
   constructor() {
     super(...arguments);
     this._onContentChangeEmitter = new import_utils14.Emitter();
@@ -1776,7 +1793,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     const { formMeta } = registry;
     const meta = node.getNodeMeta();
     const formData = getFlowNodeFormData(node);
-    const transform = node.getData(import_document6.FlowNodeTransformData);
+    const transform = node.getData(import_document7.FlowNodeTransformData);
     const freeLayout = this.layout;
     transform.onDataChange(() => {
       freeLayout.syncTransform(node);
@@ -1824,10 +1841,10 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
       );
       node.toDispose.push(
         import_utils14.Disposable.create(() => {
-          if (!node.parent || node.parent.flowNodeType === import_document6.FlowNodeBaseType.ROOT) {
+          if (!node.parent || node.parent.flowNodeType === import_document7.FlowNodeBaseType.ROOT) {
             return;
           }
-          const parentTransform = node.parent.getData(import_document6.FlowNodeTransformData);
+          const parentTransform = node.parent.getData(import_document7.FlowNodeTransformData);
           setTimeout(() => {
             parentTransform.fireChange();
           }, 0);
@@ -1908,10 +1925,10 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     );
   }
   getAllNodes() {
-    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== import_document6.FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== import_document7.FlowNodeBaseType.ROOT);
   }
   getAllPorts() {
-    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== import_document6.FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== import_document7.FlowNodeBaseType.ROOT);
   }
   /**
    * 获取画布中的非游离节点
@@ -1928,8 +1945,8 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     }));
     const startNodeId = allNode.find((node) => node.isStart).id;
     const endNodeId = allNode.find((node) => node.isNodeEnd).id;
-    const nodeInSubCanvas = allNode.filter((node) => node.parent?.flowNodeType === import_document6.FlowNodeBaseType.SUB_CANVAS).map((node) => node.id);
-    const associatedCache = /* @__PURE__ */ new Set([endNodeId, ...nodeInSubCanvas]);
+    const nodeInContainer = allNode.filter((node) => node.parent?.getNodeMeta().isContainer).map((node) => node.id);
+    const associatedCache = /* @__PURE__ */ new Set([endNodeId, ...nodeInContainer]);
     const bfs = (nodeId) => {
       if (associatedCache.has(nodeId)) {
         return;
@@ -2099,8 +2116,8 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     const flattenEdgeJSONs = [...rootEdges];
     const rootBlockIDs = rootNodes.map((node) => node.id);
     const rootEdgeIDs = rootEdges.map((edge) => this.getEdgeID(edge));
-    nodeBlocks.set(import_document6.FlowNodeBaseType.ROOT, rootBlockIDs);
-    nodeEdges.set(import_document6.FlowNodeBaseType.ROOT, rootEdgeIDs);
+    nodeBlocks.set(import_document7.FlowNodeBaseType.ROOT, rootBlockIDs);
+    nodeEdges.set(import_document7.FlowNodeBaseType.ROOT, rootEdgeIDs);
     rootNodes.forEach((nodeJSON) => {
       const { blocks, edges } = nodeJSON;
       if (blocks) {
@@ -2143,8 +2160,8 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     };
     const nodeMap = /* @__PURE__ */ new Map();
     const edgeMap = /* @__PURE__ */ new Map();
-    const rootBlockSet = new Set(nodeBlocks.get(import_document6.FlowNodeBaseType.ROOT) ?? []);
-    const rootEdgeSet = new Set(nodeEdges.get(import_document6.FlowNodeBaseType.ROOT) ?? []);
+    const rootBlockSet = new Set(nodeBlocks.get(import_document7.FlowNodeBaseType.ROOT) ?? []);
+    const rootEdgeSet = new Set(nodeEdges.get(import_document7.FlowNodeBaseType.ROOT) ?? []);
     flattenJSON.nodes.forEach((nodeJSON) => {
       nodeMap.set(nodeJSON.id, nodeJSON);
     });
@@ -2204,7 +2221,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
   }
   toLineJSON(line) {
     const lineJSON = line.toJSON();
-    if (!line.to || !line.info.to || !line.toPort) {
+    if (!line.from || !line.info.from || !line.fromPort || !line.to || !line.info.to || !line.toPort) {
       return;
     }
     const fromSubCanvas = this.getNodeSubCanvas(line.from);
@@ -2322,18 +2339,19 @@ var WorkflowDragService = class {
   }
   /**
    * 拖拽选中节点
-   * @param event
+   * @param triggerEvent
    */
-  startDragSelectedNodes(event) {
+  startDragSelectedNodes(triggerEvent) {
     let { selectedNodes } = this.selectService;
-    if (selectedNodes.length === 0 || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
+    if (selectedNodes.length === 0 || this.playgroundConfig.readonly || this.playgroundConfig.disabled || this.isDragging) {
       return Promise.resolve(false);
     }
+    this.isDragging = true;
     const sameParent = this.childrenOfContainer(selectedNodes);
-    if (sameParent && sameParent.flowNodeType !== import_document8.FlowNodeBaseType.ROOT) {
+    if (sameParent && sameParent.flowNodeType !== import_document9.FlowNodeBaseType.ROOT) {
       selectedNodes = [sameParent];
     }
-    const { altKey } = event;
+    const { altKey } = triggerEvent;
     let startPosition = this.getNodesPosition(selectedNodes);
     let startPositions = selectedNodes.map((node) => {
       const transform = node.getData(import_core15.TransformData);
@@ -2342,11 +2360,19 @@ var WorkflowDragService = class {
     let dragSuccess = false;
     const startTime = Date.now();
     const dragger = new import_core15.PlaygroundDrag({
-      onDragStart: () => {
-        this.isDragging = true;
+      onDragStart: (dragEvent) => {
+        this._nodesDragEmitter.fire({
+          type: "onDragStart",
+          nodes: selectedNodes,
+          startPositions,
+          altKey,
+          dragEvent,
+          triggerEvent,
+          dragger
+        });
       },
-      onDrag: (e) => {
-        if (!dragSuccess && checkDragSuccess(Date.now() - startTime, e)) {
+      onDrag: (dragEvent) => {
+        if (!dragSuccess && checkDragSuccess(Date.now() - startTime, dragEvent)) {
           dragSuccess = true;
           if (altKey) {
             const tryCopyNodes = selectedNodes;
@@ -2369,10 +2395,11 @@ var WorkflowDragService = class {
           }
         }
         const offset = this.getDragPosOffset({
-          event: e,
+          event: dragEvent,
           selectedNodes,
           startPosition
         });
+        const positions = [];
         selectedNodes.forEach((node, index) => {
           const transform = node.getData(import_core15.TransformData);
           const nodeStartPosition = startPositions[index];
@@ -2382,26 +2409,40 @@ var WorkflowDragService = class {
           };
           if (node.collapsedChildren?.length > 0) {
             node.collapsedChildren.forEach((childNode) => {
-              const childNodeTransformData = childNode.getData(import_document7.FlowNodeTransformData);
+              const childNodeTransformData = childNode.getData(import_document8.FlowNodeTransformData);
               childNodeTransformData.fireChange();
             });
           }
           transform.update({
             position: newPosition
           });
+          positions.push(newPosition);
+        });
+        this._nodesDragEmitter.fire({
+          type: "onDragging",
+          nodes: selectedNodes,
+          startPositions,
+          positions,
+          altKey,
+          dragEvent,
+          triggerEvent,
+          dragger
         });
       },
-      onDragEnd: () => {
+      onDragEnd: (dragEvent) => {
         this.isDragging = false;
         this._nodesDragEmitter.fire({
           type: "onDragEnd",
           nodes: selectedNodes,
           startPositions,
-          altKey
+          altKey,
+          dragEvent,
+          triggerEvent,
+          dragger
         });
       }
     });
-    return dragger.start(event.clientX, event.clientY, this.playgroundConfig).then(() => dragSuccess);
+    return dragger.start(triggerEvent.clientX, triggerEvent.clientY, this.playgroundConfig)?.then(() => dragSuccess);
   }
   /**
    * 通过拖入卡片添加
@@ -2473,7 +2514,11 @@ var WorkflowDragService = class {
       },
       onDragEnd: async (e) => {
         const dropNode = this._dropNode;
-        const dragNode = await this.dropCard(type, e, data, dropNode);
+        const { allowDrop } = this.canDropToNode({
+          dragNodeType: type,
+          dropNode
+        });
+        const dragNode = allowDrop ? await this.dropCard(type, e, data, dropNode) : void 0;
         this.clearDrop();
         if (dragNode) {
           domNode.remove();
@@ -2499,7 +2544,7 @@ var WorkflowDragService = class {
     if (!mousePos) {
       return { x: 0, y: 0 };
     }
-    if (!subNodeType || !containerNode || containerNode.flowNodeType === import_document8.FlowNodeBaseType.ROOT) {
+    if (!subNodeType || !containerNode || containerNode.flowNodeType === import_document9.FlowNodeBaseType.ROOT) {
       return mousePos;
     }
     const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
@@ -2526,6 +2571,22 @@ var WorkflowDragService = class {
       dispose: () => this.posAdjusters.delete(adjuster)
     };
   }
+  /**
+   * 判断是否可以放置节点
+   */
+  canDropToNode(params) {
+    const { dragNodeType, dropNode } = params;
+    if (!dragNodeType) {
+      return {
+        allowDrop: false,
+        message: "Please select a node to drop"
+      };
+    }
+    return {
+      allowDrop: true,
+      dropNode
+    };
+  }
   /**
    * 获取拖拽偏移
    */
@@ -2556,23 +2617,24 @@ var WorkflowDragService = class {
     return offset;
   }
   updateDroppableTransforms() {
-    this._droppableTransforms = this.document.getRenderDatas(import_document7.FlowNodeTransformData, false).filter((transform) => {
+    this._droppableTransforms = this.document.getRenderDatas(import_document8.FlowNodeTransformData, false).filter((transform) => {
       const { entity } = transform;
       if (entity.originParent) {
         return this.nodeSelectable(entity) && this.nodeSelectable(entity.originParent);
       }
       return this.nodeSelectable(entity);
-    }).filter((transform) => {
-      const { entity } = transform;
-      return entity.flowNodeType === import_document8.FlowNodeBaseType.SUB_CANVAS;
-    });
+    }).filter((transform) => this.isContainer(transform.entity));
+  }
+  /** 是否容器节点 */
+  isContainer(node) {
+    return node?.getNodeMeta().isContainer ?? false;
   }
   /**
    * 获取节点整体位置
    */
   getNodesPosition(nodes) {
     const selectedBounds = import_utils16.Rectangle.enlarge(
-      nodes.map((n) => n.getData(import_document7.FlowNodeTransformData).bounds)
+      nodes.map((n) => n.getData(import_document8.FlowNodeTransformData).bounds)
     );
     const position = {
       x: selectedBounds.x,
@@ -2622,7 +2684,7 @@ var WorkflowDragService = class {
       return {
         hasError: false
       };
-    } else if (toNode.flowNodeType === import_document8.FlowNodeBaseType.SUB_CANVAS) {
+    } else if (this.isContainer(toNode)) {
       return {
         hasError: false
       };
@@ -2657,6 +2719,7 @@ var WorkflowDragService = class {
     if (originLine?.disabled || isFromInActivePort || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
       return { dragSuccess: false, newLine: void 0 };
     }
+    this.selectService.clear();
     const config = this.playgroundConfig;
     const deferred = new import_utils16.PromiseDeferred();
     const preCursor = config.cursor;
@@ -2702,9 +2765,12 @@ var WorkflowDragService = class {
           type: "onDrag"
         });
         this.setLineColor(line, this.linesManager.lineColor.drawing);
-        if (toNode && toNode.flowNodeType !== import_document8.FlowNodeBaseType.SUB_CANVAS) {
+        if (toNode && !this.isContainer(toNode)) {
           const portsData = toNode.getData(WorkflowNodePortsData);
-          toPort = portsData.inputPorts[0];
+          const { inputPorts } = portsData;
+          if (inputPorts.length === 1) {
+            toPort = inputPorts[0];
+          }
           const { hasError } = this.handleDragOnNode(toNode, fromPort, line, toPort, originLine);
           lineErrorReset = hasError;
         }
@@ -2831,7 +2897,7 @@ __decorateClass([
   (0, import_inversify6.inject)(WorkflowSelectService)
 ], WorkflowDragService.prototype, "selectService", 2);
 __decorateClass([
-  (0, import_inversify6.inject)(import_document7.FlowOperationBaseService)
+  (0, import_inversify6.inject)(import_document8.FlowOperationBaseService)
 ], WorkflowDragService.prototype, "operationService", 2);
 __decorateClass([
   (0, import_inversify6.inject)(WorkflowDocumentOptions)
@@ -2850,13 +2916,13 @@ var import_core18 = require("@flowgram.ai/core");
 var import_utils17 = require("@flowgram.ai/utils");
 
 // src/utils/layout-to-positions.ts
-var import_document9 = require("@flowgram.ai/document");
+var import_document10 = require("@flowgram.ai/document");
 var import_core16 = require("@flowgram.ai/core");
 var layoutToPositions = async (nodes, nodePositionMap) => {
   const newNodePositionMap = {};
   nodes.forEach((node) => {
     const transform = node.getData(import_core16.TransformData);
-    const nodeTransform = node.getData(import_document9.FlowNodeTransformData);
+    const nodeTransform = node.getData(import_document10.FlowNodeTransformData);
     newNodePositionMap[node.id] = {
       x: transform.position.x,
       y: transform.position.y + nodeTransform.bounds.height / 2
@@ -2874,7 +2940,7 @@ var layoutToPositions = async (nodes, nodePositionMap) => {
           const deltaY = (nodePositionMap[node.id].y - transform.bounds.height / 2 - transform.position.y) * v.d / 100;
           if (node.collapsedChildren?.length > 0) {
             node.collapsedChildren.forEach((childNode) => {
-              const childNodeTransformData = childNode.getData(import_document9.FlowNodeTransformData);
+              const childNodeTransformData = childNode.getData(import_document10.FlowNodeTransformData);
               childNodeTransformData.fireChange();
             });
           }
@@ -2953,12 +3019,47 @@ WorkflowResetLayoutService = __decorateClass([
   (0, import_inversify7.injectable)()
 ], WorkflowResetLayoutService);
 
+// src/service/workflow-operation-base-service.ts
+var import_inversify8 = require("inversify");
+var import_utils19 = require("@flowgram.ai/utils");
+var import_document11 = require("@flowgram.ai/document");
+var import_core19 = require("@flowgram.ai/core");
+var WorkflowOperationBaseServiceImpl = class extends import_document11.FlowOperationBaseServiceImpl {
+  constructor() {
+    super(...arguments);
+    this.onNodePostionUpdateEmitter = new import_utils19.Emitter();
+    this.onNodePostionUpdate = this.onNodePostionUpdateEmitter.event;
+  }
+  updateNodePosition(nodeOrId, position) {
+    const node = this.toNodeEntity(nodeOrId);
+    if (!node) {
+      return;
+    }
+    const transformData = node.getData(import_core19.TransformData);
+    const oldPosition = {
+      x: transformData.position.x,
+      y: transformData.position.y
+    };
+    transformData.update({
+      position
+    });
+    this.onNodePostionUpdateEmitter.fire({
+      node,
+      oldPosition,
+      newPosition: position
+    });
+  }
+};
+__decorateClass([
+  (0, import_inversify8.inject)(WorkflowDocument)
+], WorkflowOperationBaseServiceImpl.prototype, "document", 2);
+
 // src/hooks/use-playground-readonly-state.ts
 var import_react = require("react");
-var import_core19 = require("@flowgram.ai/core");
+var import_core20 = require("@flowgram.ai/core");
 function usePlaygroundReadonlyState(listenChange) {
-  const playground = (0, import_core19.usePlayground)();
-  const refresh = (0, import_core19.useRefresh)();
+  const playground = (0, import_core20.usePlayground)();
+  const refresh = (0, import_core20.useRefresh)();
   (0, import_react.useEffect)(() => {
     let dispose = void 0;
     if (listenChange) {
@@ -2974,12 +3075,12 @@ function checkTargetDraggable(el) {
   return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
 }
 function useNodeRender(nodeFromProps) {
-  const node = nodeFromProps || (0, import_react2.useContext)(import_core20.PlaygroundEntityContext);
-  const renderData = node.getData(import_document10.FlowNodeRenderData);
+  const node = nodeFromProps || (0, import_react2.useContext)(import_core21.PlaygroundEntityContext);
+  const renderData = node.getData(import_document12.FlowNodeRenderData);
   const portsData = node.getData(WorkflowNodePortsData);
   const readonly = usePlaygroundReadonlyState();
-  const dragService = (0, import_core20.useService)(WorkflowDragService);
-  const selectionService = (0, import_core20.useService)(WorkflowSelectService);
+  const dragService = (0, import_core21.useService)(WorkflowDragService);
+  const selectionService = (0, import_core21.useService)(WorkflowSelectService);
   const isDragging = (0, import_react2.useRef)(false);
   const nodeRef = (0, import_react2.useRef)(null);
   const [linkingNodeId, setLinkingNodeId] = (0, import_react2.useState)("");
@@ -3005,7 +3106,7 @@ function useNodeRender(nodeFromProps) {
         return;
       }
       isDragging.current = true;
-      dragService.startDragSelectedNodes(e).finally(
+      dragService.startDragSelectedNodes(e)?.finally(
         () => setTimeout(() => {
           isDragging.current = false;
         })
@@ -3018,7 +3119,7 @@ function useNodeRender(nodeFromProps) {
       if (isDragging.current) {
         return;
       }
-      if (e.metaKey || e.shiftKey || e.ctrlKey) {
+      if (e.shiftKey) {
         selectionService.toggleSelect(node);
       } else {
         selectionService.selectNode(node);
@@ -3030,7 +3131,7 @@ function useNodeRender(nodeFromProps) {
     [node]
   );
   const deleteNode = (0, import_react2.useCallback)(() => node.dispose(), [node]);
-  (0, import_core20.useListenEvents)(portsData.onDataChange);
+  (0, import_core21.useListenEvents)(portsData.onDataChange);
   const isFirefox = navigator?.userAgent?.includes?.("Firefox");
   const onFocus = (0, import_react2.useCallback)(() => {
     if (isFirefox) {
@@ -3087,24 +3188,24 @@ function useNodeRender(nodeFromProps) {
 }
 
 // src/hooks/use-current-dom-node.ts
-var import_document11 = require("@flowgram.ai/document");
-var import_core21 = require("@flowgram.ai/core");
+var import_document13 = require("@flowgram.ai/document");
+var import_core22 = require("@flowgram.ai/core");
 function useCurrentDomNode() {
-  const entity = (0, import_core21.useEntityFromContext)();
-  const renderData = entity.getData(import_document11.FlowNodeRenderData);
+  const entity = (0, import_core22.useEntityFromContext)();
+  const renderData = entity.getData(import_document13.FlowNodeRenderData);
   return renderData.node;
 }
 
 // src/hooks/use-current-entity.ts
-var import_core22 = require("@flowgram.ai/core");
+var import_core23 = require("@flowgram.ai/core");
 function useCurrentEntity() {
-  return (0, import_core22.useEntityFromContext)();
+  return (0, import_core23.useEntityFromContext)();
 }
 
 // src/hooks/use-workflow-document.ts
-var import_core23 = require("@flowgram.ai/core");
+var import_core24 = require("@flowgram.ai/core");
 function useWorkflowDocument() {
-  return (0, import_core23.useService)(WorkflowDocument);
+  return (0, import_core24.useService)(WorkflowDocument);
 }
 
 // src/constants.ts
@@ -3120,18 +3221,18 @@ var InteractiveType = /* @__PURE__ */ ((InteractiveType2) => {
 })(InteractiveType || {});
 
 // src/workflow-document-container-module.ts
-var import_inversify9 = require("inversify");
-var import_document13 = require("@flowgram.ai/document");
-var import_utils19 = require("@flowgram.ai/utils");
+var import_inversify10 = require("inversify");
+var import_utils20 = require("@flowgram.ai/utils");
+var import_document15 = require("@flowgram.ai/document");
 
 // src/workflow-document-contribution.ts
-var import_inversify8 = require("inversify");
-var import_document12 = require("@flowgram.ai/document");
+var import_inversify9 = require("inversify");
+var import_document14 = require("@flowgram.ai/document");
 var WorkflowDocumentContribution = class {
   registerDocument(document2) {
     document2.registerNodeDatas(
-      import_document12.FlowNodeTransformData,
-      import_document12.FlowNodeRenderData,
+      import_document14.FlowNodeTransformData,
+      import_document14.FlowNodeRenderData,
       WorkflowNodePortsData,
       WorkflowNodeLinesData
     );
@@ -3139,10 +3240,10 @@ var WorkflowDocumentContribution = class {
   }
 };
 __decorateClass([
-  (0, import_inversify8.inject)(FreeLayout)
+  (0, import_inversify9.inject)(FreeLayout)
 ], WorkflowDocumentContribution.prototype, "freeLayout", 2);
 WorkflowDocumentContribution = __decorateClass([
-  (0, import_inversify8.injectable)()
+  (0, import_inversify9.injectable)()
 ], WorkflowDocumentContribution);
 
 // src/utils/get-url-params.ts
@@ -3155,7 +3256,7 @@ function getUrlParams() {
 }
 
 // src/workflow-document-container-module.ts
-var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
+var WorkflowDocumentContainerModule = new import_inversify10.ContainerModule(
   (bind, unbind, isBound, rebind) => {
     bind(WorkflowDocument).toSelf().inSingletonScope();
     bind(WorkflowLinesManager).toSelf().inSingletonScope();
@@ -3164,18 +3265,19 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
     bind(WorkflowSelectService).toSelf().inSingletonScope();
     bind(WorkflowHoverService).toSelf().inSingletonScope();
     bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
+    bind(WorkflowOperationBaseService).to(WorkflowOperationBaseServiceImpl).inSingletonScope();
     bind(URLParams).toDynamicValue(() => getUrlParams()).inSingletonScope();
-    (0, import_utils19.bindContributions)(bind, WorkflowDocumentContribution, [import_document13.FlowDocumentContribution]);
+    (0, import_utils20.bindContributions)(bind, WorkflowDocumentContribution, [import_document15.FlowDocumentContribution]);
     bind(WorkflowDocumentOptions).toConstantValue({
       ...WorkflowDocumentOptionsDefault
     });
-    rebind(import_document13.FlowDocument).toService(WorkflowDocument);
+    rebind(import_document15.FlowDocument).toService(WorkflowDocument);
     bind(WorkflowDocumentProvider).toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument)).inSingletonScope();
   }
 );
 
 // src/utils/simple-line.ts
-var import_utils20 = require("@flowgram.ai/utils");
+var import_utils21 = require("@flowgram.ai/utils");
 var LINE_PADDING = 12;
 var WorkflowSimpleLineContribution = class {
   constructor(entity) {
@@ -3189,11 +3291,11 @@ var WorkflowSimpleLineContribution = class {
       return Number.MAX_SAFE_INTEGER;
     }
     const [start, end] = this.data.points;
-    return import_utils20.Point.getDistance(pos, this.projectPointOnLine(pos, start, end));
+    return import_utils21.Point.getDistance(pos, this.projectPointOnLine(pos, start, end));
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils20.Rectangle();
+      return new import_utils21.Rectangle();
     }
     return this.data.bbox;
   }
@@ -3218,7 +3320,7 @@ var WorkflowSimpleLineContribution = class {
         y: toPos.y + targetOffset.y
       }
     ];
-    const bbox = import_utils20.Rectangle.createRectangleWithTwoPoints(points[0], points[1]);
+    const bbox = import_utils21.Rectangle.createRectangleWithTwoPoints(points[0], points[1]);
     const adjustedPoints = points.map((p) => ({
       x: p.x - bbox.x + LINE_PADDING,
       y: p.y - bbox.y + LINE_PADDING
@@ -3274,6 +3376,8 @@ WorkflowSimpleLineContribution.type = "WorkflowSimpleLineContribution";
   WorkflowNodeEntity,
   WorkflowNodeLinesData,
   WorkflowNodePortsData,
+  WorkflowOperationBaseService,
+  WorkflowOperationBaseServiceImpl,
   WorkflowPortEntity,
   WorkflowResetLayoutService,
   WorkflowSelectService,