@flowgram.ai/free-lines-plugin 0.4.3 → 0.4.5

package/dist/index.js

@@ -41,7 +41,6 @@ __export(src_exports, {
   LINE_OFFSET: () => LINE_OFFSET,
   LINE_PADDING: () => LINE_PADDING,
   LinesLayer: () => WorkflowLinesLayer,
-  WorkflowArkLineContribution: () => WorkflowArkLineContribution,
   WorkflowBezierLineContribution: () => WorkflowBezierLineContribution,
   WorkflowFoldLineContribution: () => WorkflowFoldLineContribution,
   WorkflowLinesLayer: () => WorkflowLinesLayer,
@@ -300,7 +299,7 @@ var LINE_OFFSET = 6;
 var LINE_PADDING = 12;
 
 // src/create-free-lines-plugin.ts
-var import_free_layout_core10 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core8 = require("@flowgram.ai/free-layout-core");
 var import_core3 = require("@flowgram.ai/core");
 
 // src/layer/workflow-lines-layer.tsx
@@ -375,12 +374,12 @@ var LineSVG = (props) => {
   const { position, reverse, hideArrow, vertical } = line;
   const renderData = line.getData(import_free_layout_core3.WorkflowLineRenderData);
   const { bounds, path: bezierPath } = renderData;
-  const toRelative = (p) => ({
+  const toRelative2 = (p) => ({
     x: p.x - bounds.x + PADDING,
     y: p.y - bounds.y + PADDING
   });
-  const fromPos = toRelative(position.from);
-  const toPos = toRelative(position.to);
+  const fromPos = toRelative2(position.from);
+  const toPos = toRelative2(position.to);
   const arrowToPos = position.to.location === "top" ? { x: toPos.x, y: toPos.y - import_free_layout_core2.POINT_RADIUS } : { x: toPos.x - import_free_layout_core2.POINT_RADIUS, y: toPos.y };
   const arrowFromPos = position.from.location === "bottom" ? { x: fromPos.x, y: fromPos.y + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
   const strokeWidth = selected ? line.uiState.strokeWidthSelected ?? STROKE_WIDTH_SLECTED : line.uiState.strokeWidth ?? STROKE_WIDTH;
@@ -589,7 +588,23 @@ var import_bezier_js = require("bezier-js");
 var import_utils2 = require("@flowgram.ai/utils");
 var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
 
+// src/contributions/utils.ts
+function toRelative(p, bbox) {
+  return {
+    x: p.x - bbox.x + LINE_PADDING,
+    y: p.y - bbox.y + LINE_PADDING
+  };
+}
+
 // src/contributions/bezier/bezier-controls.ts
+function getBezierEdgeCenter(fromPos, toPos, fromControl, toControl) {
+  const x = fromPos.x * 0.125 + fromControl.x * 0.375 + toControl.x * 0.375 + toPos.x * 0.125;
+  const y = fromPos.y * 0.125 + fromControl.y * 0.375 + toControl.y * 0.375 + toPos.y * 0.125;
+  return {
+    x,
+    y
+  };
+}
 function getControlOffset(distance, curvature) {
   if (distance >= 0) {
     return 0.5 * distance;
@@ -644,7 +659,11 @@ function getBezierControlPoints(fromPos, toPos, curvature = 0.25) {
     y2: fromPos.y,
     curvature
   });
-  return [fromControl, toControl];
+  const center = getBezierEdgeCenter(fromPos, toPos, fromControl, toControl);
+  return {
+    controls: [fromControl, toControl],
+    center
+  };
 }
 
 // src/contributions/bezier/index.ts
@@ -663,15 +682,22 @@ var WorkflowBezierLineContribution = class {
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils2.Rectangle();
+      return import_utils2.Rectangle.EMPTY;
     }
     return this.data.bbox;
   }
+  get center() {
+    return this.data?.center;
+  }
   update(params) {
     this.data = this.calcBezier(params.fromPos, params.toPos);
   }
   calcBezier(fromPos, toPos) {
-    const controls = getBezierControlPoints(fromPos, toPos, this.entity.uiState.curvature);
+    const { controls, center } = getBezierControlPoints(
+      fromPos,
+      toPos,
+      this.entity.uiState.curvature
+    );
     const bezier = new import_bezier_js.Bezier([fromPos, ...controls, toPos]);
     const bbox = bezier.bbox();
     const bboxBounds = new import_utils2.Rectangle(
@@ -680,6 +706,7 @@ var WorkflowBezierLineContribution = class {
       bbox.x.max - bbox.x.min,
       bbox.y.max - bbox.y.min
     );
+    const centerPoint = toRelative(center, bboxBounds);
     const path = this.getPath({ bbox: bboxBounds, fromPos, toPos, controls });
     this.data = {
       fromPos,
@@ -687,19 +714,20 @@ var WorkflowBezierLineContribution = class {
       bezier,
       bbox: bboxBounds,
       controls,
-      path
+      path,
+      center: {
+        ...center,
+        labelX: centerPoint.x,
+        labelY: centerPoint.y
+      }
     };
     return this.data;
   }
   getPath(params) {
     const { bbox } = params;
-    const toRelative = (p) => ({
-      x: p.x - bbox.x + LINE_PADDING,
-      y: p.y - bbox.y + LINE_PADDING
-    });
-    const fromPos = toRelative(params.fromPos);
-    const toPos = toRelative(params.toPos);
-    const controls = params.controls.map((c) => toRelative(c));
+    const fromPos = toRelative(params.fromPos, bbox);
+    const toPos = toRelative(params.toPos, bbox);
+    const controls = params.controls.map((c) => toRelative(c, bbox));
     const shrink = this.entity.uiState.shrink;
     const renderFromPos = params.fromPos.location === "bottom" ? { x: fromPos.x, y: fromPos.y + shrink } : { x: fromPos.x + shrink, y: fromPos.y };
     const renderToPos = params.toPos.location === "top" ? { x: toPos.x, y: toPos.y - shrink } : { x: toPos.x - shrink, y: toPos.y };
@@ -710,12 +738,11 @@ var WorkflowBezierLineContribution = class {
 WorkflowBezierLineContribution.type = import_free_layout_core5.LineType.BEZIER;
 
 // src/contributions/fold/index.ts
-var import_utils4 = require("@flowgram.ai/utils");
+var import_utils5 = require("@flowgram.ai/utils");
 var import_free_layout_core6 = require("@flowgram.ai/free-layout-core");
-var import_free_layout_core7 = require("@flowgram.ai/free-layout-core");
 
 // src/contributions/fold/fold-line.ts
-var import_utils3 = require("@flowgram.ai/utils");
+var import_utils4 = require("@flowgram.ai/utils");
 var getPointToSegmentDistance = (point, segStart, segEnd) => {
   const { x: px, y: py } = point;
   const { x: x1, y: y1 } = segStart;
@@ -766,10 +793,7 @@ var FoldLine;
     top: { x: 0, y: -1 },
     bottom: { x: 0, y: 1 }
   };
-  function getPoints({
-    source,
-    target
-  }) {
+  function getPoints({ source, target }) {
     const sourceDir = handleDirections[source.location];
     const targetDir = handleDirections[target.location];
     const sourceGapped = {
@@ -851,13 +875,19 @@ var FoldLine;
       { x: targetGapped.x, y: targetGapped.y },
       target
     ];
-    return pathPoints;
+    return {
+      points: pathPoints,
+      center: {
+        x: centerX,
+        y: centerY
+      }
+    };
   }
   FoldLine2.getPoints = getPoints;
   function getBend(a, b, c) {
     const bendSize = Math.min(
-      import_utils3.Point.getDistance(a, b) / 2,
-      import_utils3.Point.getDistance(b, c) / 2,
+      import_utils4.Point.getDistance(a, b) / 2,
+      import_utils4.Point.getDistance(b, c) / 2,
       EDGE_RADIUS
     );
     const { x, y } = b;
@@ -894,7 +924,7 @@ var FoldLine;
     const right = Math.max(...xList);
     const top = Math.min(...yList);
     const bottom = Math.max(...yList);
-    return import_utils3.Rectangle.createRectangleWithTwoPoints(
+    return import_utils4.Rectangle.createRectangleWithTwoPoints(
       {
         x: left,
         y: top
@@ -911,7 +941,7 @@ var FoldLine;
       return Infinity;
     }
     if (points.length === 1) {
-      return import_utils3.Point.getDistance(points[0], pos);
+      return import_utils4.Point.getDistance(points[0], pos);
     }
     const lines = [];
     for (let i = 0; i < points.length - 1; i++) {
@@ -941,21 +971,25 @@ var WorkflowFoldLineContribution = class {
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils4.Rectangle();
+      return new import_utils5.Rectangle();
     }
     return this.data.bbox;
   }
+  get center() {
+    return this.data?.center;
+  }
   update(params) {
     const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
     const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : import_free_layout_core6.POINT_RADIUS,
-      y: fromPos.location === "bottom" ? import_free_layout_core6.POINT_RADIUS : 0
+      x: fromPos.location === "bottom" ? 0 : shrink,
+      y: fromPos.location === "bottom" ? shrink : 0
     };
     const targetOffset = {
-      x: toPos.location === "top" ? 0 : -import_free_layout_core6.POINT_RADIUS,
-      y: toPos.location === "top" ? -import_free_layout_core6.POINT_RADIUS : 0
+      x: toPos.location === "top" ? 0 : -shrink,
+      y: toPos.location === "top" ? -shrink : 0
     };
-    const points = FoldLine.getPoints({
+    const { points, center } = FoldLine.getPoints({
       source: {
         x: fromPos.x + sourceOffset.x,
         y: fromPos.y + sourceOffset.y,
@@ -968,23 +1002,27 @@ var WorkflowFoldLineContribution = class {
       }
     });
     const bbox = FoldLine.getBounds(points);
-    const adjustedPoints = points.map((p) => ({
-      x: p.x - bbox.x + LINE_PADDING,
-      y: p.y - bbox.y + LINE_PADDING
-    }));
+    const adjustedPoints = points.map((p) => toRelative(p, bbox));
     const path = FoldLine.getSmoothStepPath(adjustedPoints);
+    const relativeCenter = toRelative(center, bbox);
     this.data = {
       points,
       path,
-      bbox
+      bbox,
+      center: {
+        x: center.x,
+        y: center.y,
+        labelX: relativeCenter.x,
+        labelY: relativeCenter.y
+      }
     };
   }
 };
-WorkflowFoldLineContribution.type = import_free_layout_core7.LineType.LINE_CHART;
+WorkflowFoldLineContribution.type = import_free_layout_core6.LineType.LINE_CHART;
 
 // src/contributions/straight/index.ts
-var import_utils5 = require("@flowgram.ai/utils");
-var import_free_layout_core8 = require("@flowgram.ai/free-layout-core");
+var import_utils7 = require("@flowgram.ai/utils");
+var import_free_layout_core7 = require("@flowgram.ai/free-layout-core");
 
 // src/contributions/straight/point-on-line.ts
 function projectPointOnLine(point, lineStart, lineEnd) {
@@ -1017,23 +1055,27 @@ var WorkflowStraightLineContribution = class {
       return Number.MAX_SAFE_INTEGER;
     }
     const [start, end] = this.data.points;
-    return import_utils5.Point.getDistance(pos, projectPointOnLine(pos, start, end));
+    return import_utils7.Point.getDistance(pos, projectPointOnLine(pos, start, end));
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils5.Rectangle();
+      return new import_utils7.Rectangle();
     }
     return this.data.bbox;
   }
+  get center() {
+    return this.data?.center;
+  }
   update(params) {
     const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
     const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : import_free_layout_core8.POINT_RADIUS,
-      y: fromPos.location === "bottom" ? import_free_layout_core8.POINT_RADIUS : 0
+      x: fromPos.location === "bottom" ? 0 : shrink,
+      y: fromPos.location === "bottom" ? shrink : 0
     };
     const targetOffset = {
-      x: toPos.location === "top" ? 0 : -import_free_layout_core8.POINT_RADIUS,
-      y: toPos.location === "top" ? -import_free_layout_core8.POINT_RADIUS : 0
+      x: toPos.location === "top" ? 0 : -shrink,
+      y: toPos.location === "top" ? -shrink : 0
     };
     const points = [
       {
@@ -1045,7 +1087,7 @@ var WorkflowStraightLineContribution = class {
         y: toPos.y + targetOffset.y
       }
     ];
-    const bbox = import_utils5.Rectangle.createRectangleWithTwoPoints(points[0], points[1]);
+    const bbox = import_utils7.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
@@ -1054,98 +1096,12 @@ var WorkflowStraightLineContribution = class {
     this.data = {
       points,
       path,
-      bbox
-    };
-  }
-};
-WorkflowStraightLineContribution.type = "WorkflowStraightLineContribution";
-
-// src/contributions/arc/index.ts
-var import_utils6 = require("@flowgram.ai/utils");
-var import_free_layout_core9 = require("@flowgram.ai/free-layout-core");
-var WorkflowArkLineContribution = class {
-  constructor(entity) {
-    this.entity = entity;
-  }
-  get path() {
-    return this.data?.path ?? "";
-  }
-  calcDistance(pos) {
-    if (!this.data) {
-      return Number.MAX_SAFE_INTEGER;
-    }
-    const { fromPos, toPos, bbox } = this.data;
-    if (!bbox.contains(pos.x, pos.y)) {
-      const dx = Math.max(bbox.x - pos.x, 0, pos.x - (bbox.x + bbox.width));
-      const dy = Math.max(bbox.y - pos.y, 0, pos.y - (bbox.y + bbox.height));
-      return Math.sqrt(dx * dx + dy * dy);
-    }
-    const center = {
-      x: (fromPos.x + toPos.x) / 2,
-      y: (fromPos.y + toPos.y) / 2
-    };
-    const radius = import_utils6.Point.getDistance(fromPos, center);
-    const distanceToCenter = import_utils6.Point.getDistance(pos, center);
-    return Math.abs(distanceToCenter - radius);
-  }
-  get bounds() {
-    if (!this.data) {
-      return new import_utils6.Rectangle();
-    }
-    return this.data.bbox;
-  }
-  update(params) {
-    const { fromPos, toPos } = params;
-    const { vertical } = this.entity;
-    const sourceOffset = {
-      x: vertical ? 0 : import_free_layout_core9.POINT_RADIUS,
-      y: vertical ? import_free_layout_core9.POINT_RADIUS : 0
-    };
-    const targetOffset = {
-      x: vertical ? 0 : -import_free_layout_core9.POINT_RADIUS,
-      y: vertical ? -import_free_layout_core9.POINT_RADIUS : 0
-    };
-    const start = {
-      x: fromPos.x + sourceOffset.x,
-      y: fromPos.y + sourceOffset.y
-    };
-    const end = {
-      x: toPos.x + targetOffset.x,
-      y: toPos.y + targetOffset.y
-    };
-    const bbox = this.calculateArcBBox(start, end);
-    const path = this.getArcPath(start, end, bbox);
-    this.data = {
-      fromPos: start,
-      toPos: end,
-      path,
-      bbox
-    };
-  }
-  calculateArcBBox(start, end) {
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    const radius = Math.sqrt(dx * dx + dy * dy) / 2;
-    const centerX = (start.x + end.x) / 2;
-    const centerY = (start.y + end.y) / 2;
-    return new import_utils6.Rectangle(centerX - radius, centerY - radius, radius * 2, radius * 2);
-  }
-  getArcPath(start, end, bbox) {
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-    const startRel = {
-      x: start.x - bbox.x + LINE_PADDING,
-      y: start.y - bbox.y + LINE_PADDING
-    };
-    const endRel = {
-      x: end.x - bbox.x + LINE_PADDING,
-      y: end.y - bbox.y + LINE_PADDING
+      bbox,
+      center: (0, import_free_layout_core7.getLineCenter)(fromPos, toPos, bbox, LINE_PADDING)
     };
-    return `M ${startRel.x} ${startRel.y} A ${distance / 2} ${distance / 2} 0 0 1 ${endRel.x} ${endRel.y}`;
   }
 };
-WorkflowArkLineContribution.type = "WorkflowArkLineContribution";
+WorkflowStraightLineContribution.type = import_free_layout_core7.LineType.STRAIGHT;
 
 // src/create-free-lines-plugin.ts
 var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
@@ -1156,8 +1112,8 @@ var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
     });
   },
   onReady: (ctx, opts) => {
-    const linesManager = ctx.container.get(import_free_layout_core10.WorkflowLinesManager);
-    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution);
+    const linesManager = ctx.container.get(import_free_layout_core8.WorkflowLinesManager);
+    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution).registerContribution(WorkflowStraightLineContribution);
     if (opts.contributions) {
       opts.contributions.forEach((contribution) => {
         linesManager.registerContribution(contribution);
@@ -1173,7 +1129,6 @@ var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
   LINE_OFFSET,
   LINE_PADDING,
   LinesLayer,
-  WorkflowArkLineContribution,
   WorkflowBezierLineContribution,
   WorkflowFoldLineContribution,
   WorkflowLinesLayer,