@flowgram.ai/free-layout-core 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/index.js

@@ -26,8 +26,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   EditorCursorState: () => EditorCursorState,
   InteractiveType: () => InteractiveType,
   LINE_HOVER_DISTANCE: () => LINE_HOVER_DISTANCE,
@@ -79,13 +79,12 @@ __export(src_exports, {
   usePlayground: () => import_core25.usePlayground,
   usePlaygroundContainer: () => import_core25.usePlaygroundContainer,
   usePlaygroundContext: () => import_core25.usePlaygroundContext,
-  usePlaygroundLatest: () => import_core25.usePlaygroundLatest,
   usePlaygroundReadonlyState: () => usePlaygroundReadonlyState,
   useRefresh: () => import_core25.useRefresh,
   useService: () => import_core25.useService,
   useWorkflowDocument: () => useWorkflowDocument
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/workflow-commands.ts
 var WorkflowCommands = /* @__PURE__ */ ((WorkflowCommands2) => {
@@ -819,16 +818,8 @@ var WorkflowLineRenderData = class extends import_core7.EntityData {
    * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
    */
   updatePosition() {
-    this.data.position.from = this.entity.from.getData(WorkflowNodePortsData).getOutputPoint(this.entity.info.fromPort);
-    if (this.entity.info.drawingTo) {
-      this.data.position.to = this.entity.info.drawingTo;
-    } else {
-      this.data.position.to = this.entity.to?.getData(WorkflowNodePortsData)?.getInputPoint(this.entity.info.toPort) ?? {
-        x: this.data.position.from.x,
-        y: this.data.position.from.y,
-        location: this.data.position.from.location === "right" ? "left" : "top"
-      };
-    }
+    this.data.position.from = this.entity.drawingFrom || this.entity.fromPort.point;
+    this.data.position.to = this.entity.drawingTo || this.entity.toPort.point;
     this.data.version = [
       this.lineType,
       this.data.position.from.x,
@@ -893,10 +884,11 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
       to: opts.to,
       drawingTo: opts.drawingTo,
       fromPort: opts.fromPort,
+      drawingFrom: opts.drawingFrom,
       toPort: opts.toPort,
       data: opts.data
     });
-    if (opts.drawingTo) {
+    if (opts.drawingTo || opts.drawingFrom) {
       this.isDrawing = true;
     }
     this.onEntityChange(() => {
@@ -1031,6 +1023,30 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     }
     this.fireChange();
   }
+  setFromPort(fromPort) {
+    if (!this.isDrawing) {
+      throw new Error("[setFromPort] only support drawing line.");
+    }
+    if (this.fromPort === fromPort) {
+      return;
+    }
+    const prePort = this.fromPort;
+    if (fromPort && fromPort.portType === "output" && this.linesManager.canAddLine(fromPort, this.toPort, true)) {
+      const { node, portID } = fromPort;
+      this._from = node;
+      this.info.drawingFrom = void 0;
+      this.info.from = node.id;
+      this.info.fromPort = portID;
+    } else {
+      this._from = void 0;
+      this.info.from = void 0;
+      this.info.fromPort = "";
+    }
+    if (prePort) {
+      prePort.validate();
+    }
+    this.fireChange();
+  }
   /**
    * 设置线条画线时的目标位置
    */
@@ -1047,6 +1063,22 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
       this.fireChange();
     }
   }
+  set drawingFrom(pos) {
+    const oldDrawingFrom = this.info.drawingFrom;
+    if (!pos) {
+      this.info.drawingFrom = void 0;
+      this.fireChange();
+      return;
+    }
+    if (!oldDrawingFrom || pos.x !== oldDrawingFrom.x || pos.y !== oldDrawingFrom.y) {
+      this.info.from = void 0;
+      this.info.drawingFrom = pos;
+      this.fireChange();
+    }
+  }
+  get drawingFrom() {
+    return this.info.drawingFrom;
+  }
   /**
    * 获取线条正在画线的位置
    */
@@ -1085,13 +1117,16 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     return this.getData(WorkflowLineRenderData).calcDistance(pos);
   }
   get fromPort() {
-    return this.from.getData(WorkflowNodePortsData).getPortEntityByKey("output", this.info.fromPort);
+    if (!this.from) {
+      return void 0;
+    }
+    return this.from.ports.getPortEntityByKey("output", this.info.fromPort);
   }
   get toPort() {
     if (!this.to) {
       return void 0;
     }
-    return this.to.getData(WorkflowNodePortsData).getPortEntityByKey("input", this.info.toPort);
+    return this.to.ports.getPortEntityByKey("input", this.info.toPort);
   }
   /**
    * 获取线条真实的输入输出节点坐标
@@ -1125,7 +1160,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
    * @deprecated
    */
   get vertical() {
-    const fromLocation = this.fromPort.location;
+    const fromLocation = this.fromPort?.location;
     const toLocation = this.toPort?.location;
     if (toLocation) {
       return toLocation === "top";
@@ -1151,7 +1186,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
   initInfo(info) {
     if (!(0, import_lodash_es2.isEqual)(info, this.info)) {
       this.info = info;
-      this._from = this.document.getNode(info.from);
+      this._from = info.from ? this.document.getNode(info.from) : void 0;
       this._to = info.to ? this.document.getNode(info.to) : void 0;
       this._lineData = info.data;
       this.fireChange();
@@ -1185,7 +1220,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     this._node = import_utils8.domUtils.createDivWithClass("gedit-flow-activity-line");
     this._node.dataset.testid = "sdk.workflow.canvas.line";
     this._node.dataset.lineId = this.id;
-    this._node.dataset.fromNodeId = this.from.id;
+    this._node.dataset.fromNodeId = this.from?.id ?? "";
     this._node.dataset.fromPortId = this.fromPort?.id ?? "";
     this._node.dataset.toNodeId = this.to?.id ?? "";
     this._node.dataset.toPortId = this.toPort?.id ?? "";
@@ -1367,10 +1402,17 @@ var WorkflowHoverService = class {
   }
   /**
    * 获取被 hover 的节点或线条
+   * @deprecated use 'someHovered' instead
    */
   get hoveredNode() {
     return this.entityManager.getEntityById(this.hoveredKey);
   }
+  /**
+   * 获取被 hover 的节点或线条
+   */
+  get someHovered() {
+    return this.entityManager.getEntityById(this.hoveredKey);
+  }
 };
 __decorateClass([
   (0, import_inversify2.inject)(import_core10.EntityManager)
@@ -1575,6 +1617,9 @@ var WorkflowLinesManager = class {
   getAllLines() {
     return this.entityManager.getEntities(WorkflowLineEntity);
   }
+  getAllAvailableLines() {
+    return this.getAllLines().filter((l) => !l.isDrawing && !l.isHidden);
+  }
   hasLine(portInfo) {
     return !!this.entityManager.getEntityById(
       WorkflowLineEntity.portInfoToLineId(portInfo)
@@ -1596,7 +1641,7 @@ var WorkflowLinesManager = class {
     return this.createLine(newPortInfo);
   }
   createLine(options) {
-    const { from, to, drawingTo, fromPort, toPort, data } = options;
+    const { from, to, drawingTo, fromPort, drawingFrom, toPort, data } = options;
     const available = Boolean(from && to);
     const key = options.key || WorkflowLineEntity.portInfoToLineId(options);
     let line = this.entityManager.getEntityById(key);
@@ -1605,12 +1650,12 @@ var WorkflowLinesManager = class {
       line.validate();
       return line;
     }
-    const fromNode = this.entityManager.getEntityById(from)?.getData(WorkflowNodeLinesData);
+    const fromNode = from ? this.entityManager.getEntityById(from).getData(WorkflowNodeLinesData) : void 0;
     const toNode = to ? this.entityManager.getEntityById(to).getData(WorkflowNodeLinesData) : void 0;
-    if (!fromNode) {
+    if (!fromNode && !toNode) {
       return;
     }
-    this.isDrawing = Boolean(drawingTo);
+    this.isDrawing = Boolean(drawingTo || drawingFrom);
     line = this.entityManager.createEntity(WorkflowLineEntity, {
       id: key,
       document: this.document,
@@ -1620,16 +1665,15 @@ var WorkflowLinesManager = class {
       toPort,
       to,
       drawingTo,
+      drawingFrom,
       data
     });
     this.registerData(line);
-    fromNode.addLine(line);
+    fromNode?.addLine(line);
     toNode?.addLine(line);
     line.onDispose(() => {
-      if (drawingTo) {
-        this.isDrawing = false;
-      }
-      fromNode.removeLine(line);
+      this.isDrawing = false;
+      fromNode?.removeLine(line);
       toNode?.removeLine(line);
     });
     line.onDispose(() => {
@@ -1752,7 +1796,7 @@ var WorkflowLinesManager = class {
     return this.lineColor.default;
   }
   canAddLine(fromPort, toPort, silent) {
-    if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || toPort.disabled) {
+    if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || fromPort.disabled || toPort.disabled) {
       return false;
     }
     const fromCanAdd = fromPort.node.getNodeRegistry().canAddLine;
@@ -1780,8 +1824,8 @@ var WorkflowLinesManager = class {
     }
     return true;
   }
-  canReset(fromPort, oldToPort, newToPort) {
-    if (this.options && this.options.canResetLine && !this.options.canResetLine(fromPort, oldToPort, newToPort, this)) {
+  canReset(oldLine, newLineInfo) {
+    if (this.options && this.options.canResetLine && !this.options.canResetLine(oldLine, newLineInfo, this)) {
       return false;
     }
     return true;
@@ -1790,9 +1834,14 @@ var WorkflowLinesManager = class {
    * 根据鼠标位置找到 port
    * @param pos
    */
-  getPortFromMousePos(pos) {
+  getPortFromMousePos(pos, portType) {
     const allNodes = this.getSortedNodes().reverse();
-    const allPorts = allNodes.map((node) => node.getData(WorkflowNodePortsData).allPorts).flat();
+    const allPorts = allNodes.map((node) => {
+      if (!portType) {
+        return node.ports.allPorts;
+      }
+      return portType === "input" ? node.ports.inputPorts : node.ports.outputPorts;
+    }).flat();
     const targetPort = allPorts.find((port) => port.isHovered(pos.x, pos.y));
     if (targetPort) {
       const containNodes = this.getContainNodesFromMousePos(pos);
@@ -2231,8 +2280,11 @@ var WorkflowDocument = class extends import_document8.FlowDocument {
         originParent,
         meta
       });
+      this.options.preNodeCreate?.(node);
       const datas = dataRegistries ? this.nodeDataRegistries.concat(...dataRegistries) : this.nodeDataRegistries;
       node.addInitializeData(datas);
+      node.ports = node.getData(WorkflowNodePortsData);
+      node.lines = node.getData(WorkflowNodeLinesData);
       node.onDispose(() => this.onNodeDisposeEmitter.fire({ node }));
       this.options.fromNodeJSON?.(node, data, true);
       isNew = true;
@@ -2683,10 +2735,6 @@ var WorkflowDragService = class {
       return Promise.resolve(false);
     }
     this.isDragging = true;
-    const sameParent = this.childrenOfContainer(selectedNodes);
-    if (sameParent && sameParent.flowNodeType !== import_document10.FlowNodeBaseType.ROOT) {
-      selectedNodes = [sameParent];
-    }
     let startPosition = this.getNodesPosition(selectedNodes);
     let startPositions = selectedNodes.map((node) => {
       const transform = node.getData(import_core15.TransformData);
@@ -2748,6 +2796,7 @@ var WorkflowDragService = class {
           triggerEvent,
           dragger
         });
+        this.resetContainerInternalPosition(selectedNodes);
       }
     });
     const { clientX, clientY } = import_core15.MouseTouchEvent.getEventCoord(triggerEvent);
@@ -2788,7 +2837,7 @@ var WorkflowDragService = class {
         const targetNode = event.currentTarget;
         domNode = cloneNode ? cloneNode(e) : targetNode.cloneNode(true);
         const bounds = targetNode.getBoundingClientRect();
-        startPos = { x: bounds.left, y: bounds.top };
+        startPos = { x: bounds.left + window.scrollX, y: bounds.top + window.scrollY };
         import_utils16.domUtils.setStyle(domNode, {
           zIndex: 1e3,
           position: "absolute",
@@ -2996,18 +3045,30 @@ var WorkflowDragService = class {
     line.highlightColor = color;
     this.hoverService.clearHovered();
   }
-  handleDragOnNode(toNode, fromPort, line, toPort, originLine) {
-    if (toPort && (originLine?.toPort === toPort || toPort.portType === "input" && this.linesManager.canAddLine(fromPort, toPort, true))) {
-      this.hoverService.updateHoveredKey(toPort.id);
-      line.setToPort(toPort);
+  checkDraggingPort(isDrawingTo, line, draggingNode, draggingPort, originLine) {
+    let successDrawing = false;
+    if (isDrawingTo) {
+      successDrawing = !!(draggingPort && // 同一条线条则不用在判断 canAddLine
+      (originLine?.toPort === draggingPort || draggingPort.portType === "input" && this.linesManager.canAddLine(line.fromPort, draggingPort, true)));
+    } else {
+      successDrawing = !!(draggingPort && // 同一条线条则不用在判断 canAddLine
+      (originLine?.fromPort === draggingPort || draggingPort.portType === "output" && this.linesManager.canAddLine(draggingPort, line.toPort, true)));
+    }
+    if (successDrawing) {
+      this.hoverService.updateHoveredKey(draggingPort.id);
+      if (isDrawingTo) {
+        line.setToPort(draggingPort);
+      } else {
+        line.setFromPort(draggingPort);
+      }
       this._onDragLineEventEmitter.fire({
         type: "onDrag",
-        onDragNodeId: toNode.id
+        onDragNodeId: draggingNode.id
       });
       return {
         hasError: false
       };
-    } else if (this.isContainer(toNode)) {
+    } else if (this.isContainer(draggingNode)) {
       return {
         hasError: false
       };
@@ -3018,12 +3079,48 @@ var WorkflowDragService = class {
       };
     }
   }
+  /**
+   * 容器内子节点总体位置重置为0
+   */
+  resetContainerInternalPosition(nodes) {
+    const container = this.childrenOfContainer(nodes);
+    if (!container) {
+      return;
+    }
+    const bounds = import_utils16.Rectangle.enlarge(
+      container.blocks.map((node) => {
+        const x = node.transform.position.x - node.transform.bounds.width / 2;
+        const y = node.transform.position.y;
+        const width = node.transform.bounds.width;
+        const height = node.transform.bounds.height;
+        return new import_utils16.Rectangle(x, y, width, height);
+      })
+    );
+    const containerTransform = container.getData(import_core15.TransformData);
+    containerTransform.update({
+      position: {
+        x: containerTransform.position.x + bounds.x,
+        y: containerTransform.position.y + bounds.y
+      }
+    });
+    this.document.layout.updateAffectedTransform(container);
+    container.blocks.forEach((node) => {
+      const transform = node.getData(import_core15.TransformData);
+      transform.update({
+        position: {
+          x: transform.position.x - bounds.x,
+          y: transform.position.y - bounds.y
+        }
+      });
+      this.document.layout.updateAffectedTransform(node);
+    });
+  }
   childrenOfContainer(nodes) {
     if (nodes.length === 0) {
       return;
     }
     const sourceContainer = nodes[0]?.parent;
-    if (!sourceContainer || sourceContainer.collapsedChildren.length !== nodes.length) {
+    if (!sourceContainer || sourceContainer.flowNodeType === import_document10.FlowNodeBaseType.ROOT) {
       return;
     }
     const valid = nodes.every((node) => node?.parent === sourceContainer);
@@ -3037,16 +3134,18 @@ var WorkflowDragService = class {
    * @param opts
    * @param event
    */
-  async startDrawingLine(fromPort, event, originLine) {
-    const isFromInActivePort = !originLine && fromPort.isErrorPort() && fromPort.disabled;
-    if (originLine?.disabled || isFromInActivePort || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
+  async startDrawingLine(port, event, originLine) {
+    const isDrawingTo = port.portType === "output";
+    const isInActivePort = !originLine && port.isErrorPort() && port.disabled;
+    if (originLine?.disabled || isInActivePort || 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;
-    let line, toPort, toNode, lineErrorReset = false;
+    let line;
+    let newLineInfo;
     const startTime = Date.now();
     let dragSuccess = false;
     const dragger = new import_core15.PlaygroundDrag({
@@ -3057,16 +3156,29 @@ var WorkflowDragService = class {
           }
           dragSuccess = true;
           const pos = config.getPosFromMouseEvent(event);
-          line = this.linesManager.createLine({
-            from: fromPort.node.id,
-            fromPort: fromPort.portID,
-            data: originLine?.lineData,
-            drawingTo: {
-              x: pos.x,
-              y: pos.y,
-              location: fromPort.location === "right" ? "left" : "top"
-            }
-          });
+          if (isDrawingTo) {
+            line = this.linesManager.createLine({
+              from: port.node.id,
+              fromPort: port.portID,
+              data: originLine?.lineData,
+              drawingTo: {
+                x: pos.x,
+                y: pos.y,
+                location: port.location === "right" ? "left" : "top"
+              }
+            });
+          } else {
+            line = this.linesManager.createLine({
+              to: port.node.id,
+              toPort: port.portID,
+              data: originLine?.lineData,
+              drawingFrom: {
+                x: pos.x,
+                y: pos.y,
+                location: port.location === "left" ? "right" : "bottom"
+              }
+            });
+          }
           if (!line) {
             return;
           }
@@ -3077,49 +3189,15 @@ var WorkflowDragService = class {
         if (!line) {
           return;
         }
-        lineErrorReset = false;
         const dragPos = config.getPosFromMouseEvent(e);
-        toNode = this.linesManager.getNodeFromMousePos(dragPos);
-        toPort = this.linesManager.getPortFromMousePos(dragPos);
-        if (!toPort) {
-          line.setToPort(void 0);
-        } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
-          line.highlightColor = this.linesManager.lineColor.error;
-          lineErrorReset = true;
-          line.setToPort(void 0);
-        } else {
-          line.setToPort(toPort);
-        }
-        this._onDragLineEventEmitter.fire({
-          type: "onDrag"
-        });
-        this.setLineColor(line, originLine?.lockedColor || this.linesManager.lineColor.drawing);
-        if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
-          toPort = this.getNearestPort(toNode, dragPos);
-          const { hasError } = this.handleDragOnNode(toNode, fromPort, line, toPort, originLine);
-          lineErrorReset = hasError;
-        }
-        if (line.toPort) {
-          line.drawingTo = {
-            x: line.toPort.point.x,
-            y: line.toPort.point.y,
-            location: line.toPort.location
-          };
-        } else {
-          line.drawingTo = {
-            x: dragPos.x,
-            y: dragPos.y,
-            location: reverseLocation(line.fromPort.location)
-          };
-        }
-        originLine?.validate();
-        line.validate();
+        newLineInfo = this.updateDrawingLine(isDrawingTo, line, dragPos, originLine);
       },
       // eslint-disable-next-line complexity
       onDragEnd: async (e) => {
         const dragPos = config.getPosFromMouseEvent(e);
         const onDragLineEndCallbacks = Array.from(this._onDragLineEndCallbacks.values());
         config.updateCursor(preCursor);
+        const { fromPort, toPort, hasError } = newLineInfo || {};
         await Promise.all(
           onDragLineEndCallbacks.map(
             (callback) => callback({
@@ -3144,36 +3222,32 @@ var WorkflowDragService = class {
           deferred.resolve({ dragSuccess });
         };
         if (dragSuccess) {
-          if (originLine && originLine.toPort === toPort) {
+          if (originLine && originLine.toPort === toPort && originLine.fromPort === fromPort) {
             return end();
           }
-          if (toPort && toPort.portType !== "input") {
+          if (toPort && toPort.portType !== "input" || fromPort && fromPort.portType !== "output") {
             return end();
           }
-          const newLineInfo = toPort ? {
+          const newLinePortInfo = toPort && fromPort ? {
             from: fromPort.node.id,
             fromPort: fromPort.portID,
             to: toPort.node.id,
             toPort: toPort.portID,
             data: originLine?.lineData
           } : void 0;
-          const isReset = originLine && toPort;
-          if (isReset && !this.linesManager.canReset(
-            originLine.fromPort,
-            originLine.toPort,
-            toPort
-          )) {
+          const isReset = originLine && newLinePortInfo;
+          if (isReset && !this.linesManager.canReset(originLine, newLinePortInfo)) {
             return end();
           }
-          if (originLine && (!this.linesManager.canRemove(originLine, newLineInfo, false) || lineErrorReset)) {
+          if (originLine && (!this.linesManager.canRemove(originLine, newLinePortInfo, false) || hasError)) {
             return end();
           } else {
             originLine?.dispose();
           }
-          if (!toPort || !this.linesManager.canAddLine(fromPort, toPort, false)) {
+          if (!newLinePortInfo || !this.linesManager.canAddLine(fromPort, toPort, false)) {
             return end();
           }
-          const newLine = this.linesManager.createLine(newLineInfo);
+          const newLine = this.linesManager.createLine(newLinePortInfo);
           if (!newLine) {
             end();
           }
@@ -3190,14 +3264,109 @@ var WorkflowDragService = class {
     await dragger.start(clientX, clientY, config);
     return deferred.promise;
   }
+  updateDrawingLine(isDrawingTo, line, dragPos, originLine) {
+    let hasError = false;
+    const mouseNode = this.linesManager.getNodeFromMousePos(dragPos);
+    let toNode;
+    let toPort;
+    let fromPort;
+    let fromNode;
+    if (isDrawingTo) {
+      fromPort = line.fromPort;
+      toNode = mouseNode;
+      toPort = this.linesManager.getPortFromMousePos(dragPos, "input");
+      if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
+        toPort = this.getNearestPort(toNode, dragPos, "input");
+        hasError = this.checkDraggingPort(isDrawingTo, line, toNode, toPort, originLine).hasError;
+      }
+      if (!toPort) {
+        line.setToPort(void 0);
+      } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
+        hasError = true;
+        line.setToPort(void 0);
+      } else {
+        line.setToPort(toPort);
+      }
+      if (line.toPort) {
+        line.drawingTo = {
+          x: line.toPort.point.x,
+          y: line.toPort.point.y,
+          location: line.toPort.location
+        };
+      } else {
+        line.drawingTo = {
+          x: dragPos.x,
+          y: dragPos.y,
+          location: reverseLocation(line.fromPort.location)
+        };
+      }
+    } else {
+      toPort = line.toPort;
+      fromNode = mouseNode;
+      fromPort = this.linesManager.getPortFromMousePos(dragPos, "output");
+      if (fromNode && this.canBuildContainerLine(fromNode, dragPos)) {
+        fromPort = this.getNearestPort(fromNode, dragPos, "output");
+        hasError = this.checkDraggingPort(
+          isDrawingTo,
+          line,
+          fromNode,
+          fromPort,
+          originLine
+        ).hasError;
+      }
+      if (!fromPort) {
+        line.setFromPort(void 0);
+      } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
+        hasError = true;
+        line.setFromPort(void 0);
+      } else {
+        line.setFromPort(fromPort);
+      }
+      if (line.fromPort) {
+        line.drawingFrom = {
+          x: line.fromPort.point.x,
+          y: line.fromPort.point.y,
+          location: line.fromPort.location
+        };
+      } else {
+        line.drawingFrom = {
+          x: dragPos.x,
+          y: dragPos.y,
+          location: reverseLocation(line.toPort.location)
+        };
+      }
+    }
+    this._onDragLineEventEmitter.fire({
+      type: "onDrag"
+    });
+    if (hasError) {
+      this.setLineColor(line, this.linesManager.lineColor.error);
+    } else {
+      this.setLineColor(line, originLine?.lockedColor || this.linesManager.lineColor.drawing);
+    }
+    originLine?.validate();
+    line.validate();
+    return {
+      fromPort,
+      toPort,
+      hasError
+    };
+  }
   /**
    * 重新连接线条
    * @param line
    * @param e
    */
   async resetLine(line, e) {
-    const { fromPort } = line;
-    const { dragSuccess } = await this.startDrawingLine(fromPort, e, line);
+    const { fromPort, toPort } = line;
+    const mousePos = this.playgroundConfig.getPosFromMouseEvent(e);
+    const distanceFrom = import_utils16.Point.getDistance(fromPort.point, mousePos);
+    const distanceTo = import_utils16.Point.getDistance(toPort.point, mousePos);
+    const { dragSuccess } = await this.startDrawingLine(
+      distanceTo <= distanceFrom || !this.document.options.twoWayConnection ? fromPort : toPort,
+      e,
+      line
+    );
     if (!dragSuccess) {
       this.selectService.select(line);
     }
@@ -3219,17 +3388,27 @@ var WorkflowDragService = class {
       return true;
     }
     const { padding, bounds } = node.transform;
-    const contentRect = new import_utils16.Rectangle(bounds.x, bounds.y, padding.left * 2 / 3, bounds.height);
-    return contentRect.contains(mousePos.x, mousePos.y);
+    const DEFAULT_DELTA = 10;
+    const leftDelta = padding.left * 2 / 3 || DEFAULT_DELTA;
+    const rightDelta = padding.right * 2 / 3 || DEFAULT_DELTA;
+    const bottomDelta = padding.bottom * 2 / 3 || DEFAULT_DELTA;
+    const topDelta = padding.top * 2 / 3 || DEFAULT_DELTA;
+    const rectangles = [
+      new import_utils16.Rectangle(bounds.x, bounds.y, leftDelta, bounds.height),
+      // left
+      new import_utils16.Rectangle(bounds.x, bounds.y, bounds.width, topDelta),
+      // top
+      new import_utils16.Rectangle(bounds.x, bounds.y + bounds.height - bottomDelta, bounds.width, bottomDelta),
+      // bottom
+      new import_utils16.Rectangle(bounds.x + bounds.width - rightDelta, bounds.y, rightDelta, bounds.height)
+      // right
+    ];
+    return rectangles.some((rect) => rect.contains(mousePos.x, mousePos.y));
   }
   /** 获取最近的 port */
-  getNearestPort(node, mousePos) {
-    const portsData = node.getData(WorkflowNodePortsData);
-    const distanceSortedPorts = portsData.inputPorts.sort((a, b) => {
-      const aDistance = Math.abs(mousePos.y - a.point.y);
-      const bDistance = Math.abs(mousePos.y - b.point.y);
-      return aDistance - bDistance;
-    });
+  getNearestPort(node, mousePos, portType = "input") {
+    const portsData = node.ports;
+    const distanceSortedPorts = (portType === "input" ? portsData.inputPorts : portsData.outputPorts).sort((a, b) => import_utils16.Point.getDistance(mousePos, a.point) - import_utils16.Point.getDistance(mousePos, b.point));
     return distanceSortedPorts[0];
   }
 };
@@ -3429,7 +3608,7 @@ var isFirefox = navigator?.userAgent?.includes?.("Firefox");
 function useNodeRender(nodeFromProps) {
   const node = nodeFromProps || (0, import_react2.useContext)(import_core21.PlaygroundEntityContext);
   const renderData = node.getData(import_document13.FlowNodeRenderData);
-  const portsData = node.getData(WorkflowNodePortsData);
+  const portsData = node.ports;
   const readonly = usePlaygroundReadonlyState();
   const dragService = (0, import_core21.useService)(WorkflowDragService);
   const selectionService = (0, import_core21.useService)(WorkflowSelectService);
@@ -3654,11 +3833,35 @@ WorkflowDocumentContribution = __decorateClass([
 
 // src/utils/get-url-params.ts
 function getUrlParams() {
-  return location.search.replace(/^\?/, "").split("&").reduce((res, key) => {
+  const paramsMap = /* @__PURE__ */ new Map();
+  location.search.replace(/^\?/, "").split("&").forEach((key) => {
+    if (!key) return;
     const [k, v] = key.split("=");
-    res[k] = v;
-    return res;
-  }, {});
+    if (k) {
+      const decodedKey = decodeURIComponent(k.trim());
+      const decodedValue = v ? decodeURIComponent(v.trim()) : "";
+      const dangerousProps = [
+        "__proto__",
+        "constructor",
+        "prototype",
+        "__defineGetter__",
+        "__defineSetter__",
+        "__lookupGetter__",
+        "__lookupSetter__",
+        "hasOwnProperty",
+        "isPrototypeOf",
+        "propertyIsEnumerable",
+        "toString",
+        "valueOf",
+        "toLocaleString"
+      ];
+      if (dangerousProps.includes(decodedKey.toLowerCase())) {
+        return;
+      }
+      paramsMap.set(decodedKey, decodedValue);
+    }
+  });
+  return Object.fromEntries(paramsMap);
 }
 
 // src/workflow-document-container-module.ts
@@ -3734,7 +3937,6 @@ var WorkflowDocumentContainerModule = new import_inversify10.ContainerModule(
   usePlayground,
   usePlaygroundContainer,
   usePlaygroundContext,
-  usePlaygroundLatest,
   usePlaygroundReadonlyState,
   useRefresh,
   useService,