@flowgram.ai/free-layout-core 0.4.19 → 0.5.0

package/dist/esm/index.js

@@ -776,16 +776,8 @@ var WorkflowLineRenderData = class extends EntityData3 {
    * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
    */
   updatePosition() {
-    this.data.position.from = this.entity.from.ports.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?.ports?.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,
@@ -850,10 +842,11 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       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(() => {
@@ -988,6 +981,30 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     }
     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();
+  }
   /**
    * 设置线条画线时的目标位置
    */
@@ -1004,6 +1021,22 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       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;
+  }
   /**
    * 获取线条正在画线的位置
    */
@@ -1042,6 +1075,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     return this.getData(WorkflowLineRenderData).calcDistance(pos);
   }
   get fromPort() {
+    if (!this.from) {
+      return void 0;
+    }
     return this.from.ports.getPortEntityByKey("output", this.info.fromPort);
   }
   get toPort() {
@@ -1082,7 +1118,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
    * @deprecated
    */
   get vertical() {
-    const fromLocation = this.fromPort.location;
+    const fromLocation = this.fromPort?.location;
     const toLocation = this.toPort?.location;
     if (toLocation) {
       return toLocation === "top";
@@ -1108,7 +1144,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   initInfo(info) {
     if (!isEqual2(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();
@@ -1142,7 +1178,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     this._node = 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 ?? "";
@@ -1324,10 +1360,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([
   inject2(EntityManager)
@@ -1345,7 +1388,8 @@ import {
   Emitter as Emitter6,
   DisposableCollection as DisposableCollection2,
   Rectangle as Rectangle8,
-  delay as delay2
+  delay as delay2,
+  Point
 } from "@flowgram.ai/utils";
 import {
   FlowNodeTransformData as FlowNodeTransformData6,
@@ -1509,6 +1553,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)
@@ -1530,7 +1577,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);
@@ -1539,12 +1586,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,
@@ -1554,16 +1601,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(() => {
@@ -1686,7 +1732,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;
@@ -1714,8 +1760,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;
@@ -1724,9 +1770,14 @@ var WorkflowLinesManager = class {
    * 根据鼠标位置找到 port
    * @param pos
    */
-  getPortFromMousePos(pos) {
+  getPortFromMousePos(pos, portType) {
     const allNodes = this.getSortedNodes().reverse();
-    const allPorts = allNodes.map((node) => node.ports.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);
@@ -2946,18 +2997,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
       };
@@ -3023,16 +3086,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 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 PlaygroundDrag({
@@ -3043,16 +3108,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;
           }
@@ -3063,49 +3141,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({
@@ -3130,36 +3174,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();
           }
@@ -3176,14 +3216,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 = Point.getDistance(fromPort.point, mousePos);
+    const distanceTo = 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);
     }
@@ -3205,17 +3340,27 @@ var WorkflowDragService = class {
       return true;
     }
     const { padding, bounds } = node.transform;
-    const contentRect = new Rectangle8(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 Rectangle8(bounds.x, bounds.y, leftDelta, bounds.height),
+      // left
+      new Rectangle8(bounds.x, bounds.y, bounds.width, topDelta),
+      // top
+      new Rectangle8(bounds.x, bounds.y + bounds.height - bottomDelta, bounds.width, bottomDelta),
+      // bottom
+      new Rectangle8(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) {
+  getNearestPort(node, mousePos, portType = "input") {
     const portsData = node.ports;
-    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;
-    });
+    const distanceSortedPorts = (portType === "input" ? portsData.inputPorts : portsData.outputPorts).sort((a, b) => Point.getDistance(mousePos, a.point) - Point.getDistance(mousePos, b.point));
     return distanceSortedPorts[0];
   }
 };