@flowgram.ai/free-layout-core 0.3.5 → 0.4.0

package/dist/esm/{chunk-CTGO4RKX.js → chunk-E7ZUQ7LV.js}

@@ -19,4 +19,4 @@ export {
   LineType,
   LineColors
 };
-//# sourceMappingURL=chunk-CTGO4RKX.js.map
+//# sourceMappingURL=chunk-E7ZUQ7LV.js.map

package/dist/esm/chunk-E7ZUQ7LV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/typings/workflow-line.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport type { Rectangle, IPoint } from '@flowgram.ai/utils';\n\nimport { type WorkflowLineEntity } from '../entities';\n\nexport enum LineType {\n  BEZIER, // 贝塞尔曲线\n  LINE_CHART, // 折叠线\n}\n\nexport type LineRenderType = LineType | string;\n\nexport type LinePointLocation = 'left' | 'top' | 'right' | 'bottom';\n\nexport interface LinePoint {\n  x: number;\n  y: number;\n  location: LinePointLocation;\n}\nexport interface LinePosition {\n  from: LinePoint;\n  to: LinePoint;\n}\n\nexport interface LineColor {\n  hidden: string;\n  default: string;\n  drawing: string;\n  hovered: string;\n  selected: string;\n  error: string;\n  flowing: string;\n}\n\nexport enum LineColors {\n  HIDDEN = 'var(--g-workflow-line-color-hidden,transparent)', // 隐藏线条\n  DEFUALT = 'var(--g-workflow-line-color-default,#4d53e8)',\n  DRAWING = 'var(--g-workflow-line-color-drawing, #5DD6E3)', // '#b5bbf8', // '#9197F1',\n  HOVER = 'var(--g-workflow-line-color-hover,#37d0ff)',\n  SELECTED = 'var(--g-workflow-line-color-selected,#37d0ff)',\n  ERROR = 'var(--g-workflow-line-color-error,red)',\n  FLOWING = 'var(--g-workflow-line-color-flowing,#4d53e8)', // 流动线条，默认使用主题色\n}\n\nexport interface WorkflowLineRenderContribution {\n  entity: WorkflowLineEntity;\n  path: string;\n  bounds: Rectangle;\n  update: (params: { fromPos: LinePoint; toPos: LinePoint }) => void;\n  calcDistance: (pos: IPoint) => number;\n}\n\nexport type WorkflowLineRenderContributionFactory = (new (\n  entity: WorkflowLineEntity\n) => WorkflowLineRenderContribution) & {\n  type: LineRenderType;\n};\n"],"mappings":";AASO,IAAK,WAAL,kBAAKA,cAAL;AACL,EAAAA,oBAAA;AACA,EAAAA,oBAAA;AAFU,SAAAA;AAAA,GAAA;AA6BL,IAAK,aAAL,kBAAKC,gBAAL;AACL,EAAAA,YAAA,YAAS;AACT,EAAAA,YAAA,aAAU;AACV,EAAAA,YAAA,aAAU;AACV,EAAAA,YAAA,WAAQ;AACR,EAAAA,YAAA,cAAW;AACX,EAAAA,YAAA,WAAQ;AACR,EAAAA,YAAA,aAAU;AAPA,SAAAA;AAAA,GAAA;","names":["LineType","LineColors"]}

package/dist/esm/index.js

@@ -11,7 +11,7 @@ import {
 import {
   LineColors,
   LineType
-} from "./chunk-CTGO4RKX.js";
+} from "./chunk-E7ZUQ7LV.js";
 import "./chunk-DDJTYHXN.js";
 import {
   WorkflowOperationBaseService
@@ -110,8 +110,8 @@ function nanoid(n) {
 import { compose, composeAsync } from "@flowgram.ai/utils";
 
 // src/utils/fit-view.ts
-import { TransformData } from "@flowgram.ai/core";
 import { Rectangle } from "@flowgram.ai/utils";
+import { TransformData } from "@flowgram.ai/core";
 var fitView = (doc, playgroundConfig, easing = true) => {
   const bounds = Rectangle.enlarge(
     doc.getAllNodes().map((node) => node.getData(TransformData).bounds)
@@ -223,43 +223,51 @@ var WorkflowPortEntity = class extends Entity {
   isErrorPort() {
     return this.node.document.isErrorPort(this, this.hasError);
   }
+  get location() {
+    if (this._location) {
+      return this._location;
+    }
+    if (this.portType === "input") {
+      return "left";
+    }
+    return "right";
+  }
   get point() {
     const { targetElement } = this;
     const { bounds } = this.node.getData(FlowNodeTransformData);
+    const location2 = this.location;
     if (targetElement) {
       const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
-      return this.entityManager.getEntity(PlaygroundConfigEntity).getPosFromMouseEvent({
+      const point2 = this.entityManager.getEntity(PlaygroundConfigEntity).getPosFromMouseEvent({
         clientX: pos.x,
         clientY: pos.y
       });
+      return {
+        x: point2.x,
+        y: point2.y,
+        location: location2
+      };
     }
     let point = { x: 0, y: 0 };
     const offset = this._offset || { x: 0, y: 0 };
-    if (this._location) {
-      switch (this._location) {
-        case "left":
-          point = bounds.leftCenter;
-          break;
-        case "top":
-          point = bounds.topCenter;
-          break;
-        case "right":
-          point = bounds.rightCenter;
-          break;
-        case "bottom":
-          point = bounds.bottomCenter;
-          break;
-      }
-    } else {
-      if (this.portType === "input") {
+    switch (location2) {
+      case "left":
         point = bounds.leftCenter;
-      } else {
+        break;
+      case "top":
+        point = bounds.topCenter;
+        break;
+      case "right":
         point = bounds.rightCenter;
-      }
+        break;
+      case "bottom":
+        point = bounds.bottomCenter;
+        break;
     }
     return {
       x: point.x + offset.x,
-      y: point.y + offset.y
+      y: point.y + offset.y,
+      location: location2
     };
   }
   /**
@@ -703,8 +711,8 @@ var WorkflowLineRenderData = class extends EntityData3 {
       version: "",
       contributions: /* @__PURE__ */ new Map(),
       position: {
-        from: { x: 0, y: 0 },
-        to: { x: 0, y: 0 }
+        from: { x: 0, y: 0, location: "right" },
+        to: { x: 0, y: 0, location: "left" }
       }
     };
   }
@@ -750,16 +758,23 @@ var WorkflowLineRenderData = class extends EntityData3 {
    */
   updatePosition() {
     this.data.position.from = this.entity.from.getData(WorkflowNodePortsData).getOutputPoint(this.entity.info.fromPort);
-    this.data.position.to = this.entity.info.drawingTo ?? this.entity.to?.getData(WorkflowNodePortsData)?.getInputPoint(this.entity.info.toPort) ?? {
-      x: this.data.position.from.x,
-      y: this.data.position.from.y
-    };
+    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.version = [
       this.lineType,
       this.data.position.from.x,
       this.data.position.from.y,
+      this.data.position.from.location,
       this.data.position.to.x,
-      this.data.position.to.y
+      this.data.position.to.y,
+      this.data.position.to.location
     ].join("-");
   }
   get currentLine() {
@@ -795,9 +810,10 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       hasError: false,
       flowing: false,
       disabled: false,
-      vertical: false,
       hideArrow: false,
       reverse: false,
+      shrink: 10,
+      curvature: 0.25,
       highlightColor: "",
       lockedColor: ""
     };
@@ -901,20 +917,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /**
    * 获取是否 testrun processing
-   * @deprecated  use `uiState.flowing` instead
+   * @deprecated  use `flowing` instead
    */
   get processing() {
     return this._uiState.flowing;
   }
   /**
    * 设置 testrun processing 状态
-   * @deprecated  use `uiState.flowing` instead
+   * @deprecated  use `flowing` instead
    */
   set processing(status) {
-    if (this._uiState.flowing !== status) {
-      this._uiState.flowing = status;
-      this.fireChange();
-    }
+    this.flowing = status;
   }
   // 获取连线是否为错误态
   get hasError() {
@@ -1033,13 +1046,25 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   get flowing() {
     return this.linesManager.isFlowingLine(this, this.uiState.flowing);
   }
+  set flowing(flowing) {
+    if (this._uiState.flowing !== flowing) {
+      this._uiState.flowing = flowing;
+      this.fireChange();
+    }
+  }
   /** 是否禁用 */
   get disabled() {
     return this.linesManager.isDisabledLine(this, this.uiState.disabled);
   }
   /** 是否竖向 */
   get vertical() {
-    return this.linesManager.isVerticalLine(this, this.uiState.vertical);
+    const fromLocation = this.fromPort.location;
+    const toLocation = this.toPort?.location;
+    if (toLocation) {
+      return toLocation === "top";
+    } else {
+      return fromLocation === "bottom";
+    }
   }
   /** 获取线条渲染器类型 */
   get renderType() {
@@ -1047,7 +1072,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /** 获取线条样式 */
   get className() {
-    return this.linesManager.setLineClassName(this) ?? "";
+    return [this.linesManager.setLineClassName(this), this._uiState.className].filter((s) => !!s).join(" ");
   }
   get color() {
     return this.linesManager.getLineColor(this);
@@ -1597,12 +1622,6 @@ var WorkflowLinesManager = class {
     }
     return defaultValue;
   }
-  isVerticalLine(line, defaultValue = false) {
-    if (this.options.isVerticalLine) {
-      return this.options.isVerticalLine(line);
-    }
-    return defaultValue;
-  }
   setLineRenderType(line) {
     if (this.options.setLineRenderType) {
       return this.options.setLineRenderType(line);
@@ -1933,6 +1952,11 @@ var WorkflowDocument = class extends FlowDocument {
   get loading() {
     return this._loading;
   }
+  /**
+   * use `ctx.tools.fitView()` instead
+   * @deprecated
+   * @param easing
+   */
   async fitView(easing) {
     return fitView(this, this.playgroundConfig, easing).then(() => {
       this.linesManager.forceUpdate();
@@ -2937,11 +2961,16 @@ var WorkflowDragService = class {
             originLine.highlightColor = this.linesManager.lineColor.hidden;
           }
           dragSuccess = true;
+          const pos = config.getPosFromMouseEvent(event);
           line = this.linesManager.createLine({
             from: fromPort.node.id,
             fromPort: fromPort.portID,
-            drawingTo: config.getPosFromMouseEvent(event),
-            data: originLine?.lineData
+            data: originLine?.lineData,
+            drawingTo: {
+              x: pos.x,
+              y: pos.y,
+              location: fromPort.location === "right" ? "left" : "top"
+            }
           });
           if (!line) {
             return;
@@ -2976,9 +3005,17 @@ var WorkflowDragService = class {
           lineErrorReset = hasError;
         }
         if (line.toPort) {
-          line.drawingTo = { x: line.toPort.point.x, y: line.toPort.point.y };
+          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 };
+          line.drawingTo = {
+            x: dragPos.x,
+            y: dragPos.y,
+            location: line.fromPort.location === "right" ? "left" : "top"
+          };
         }
         originLine?.validate();
         line.validate();
@@ -3293,6 +3330,7 @@ function usePlaygroundReadonlyState(listenChange) {
 function checkTargetDraggable(el) {
   return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
 }
+var isFirefox = navigator?.userAgent?.includes?.("Firefox");
 function useNodeRender(nodeFromProps) {
   const node = nodeFromProps || useContext(PlaygroundEntityContext);
   const renderData = node.getData(FlowNodeRenderData3);
@@ -3356,7 +3394,6 @@ function useNodeRender(nodeFromProps) {
   );
   const deleteNode = useCallback(() => node.dispose(), [node]);
   useListenEvents(portsData.onDataChange);
-  const isFirefox = navigator?.userAgent?.includes?.("Firefox");
   const onFocus = useCallback(() => {
     if (isFirefox) {
       nodeRef.current?.setAttribute("draggable", "false");