@yh-ui/flow 0.1.56 → 1.0.4

package/dist/__tests__/edge-types.test.mjs

@@ -0,0 +1,234 @@
+import { describe, it, expect } from "vitest";
+import {
+  isEdge,
+  isEdgeType
+} from "../types/edge.mjs";
+describe("flow/types/edge", () => {
+  describe("EdgeType", () => {
+    it("should accept valid edge types", () => {
+      const types = ["smoothstep", "step", "bezier", "straight", "default"];
+      types.forEach((type) => {
+        expect(isEdgeType(type)).toBe(true);
+      });
+    });
+    it("should reject invalid edge types", () => {
+      expect(isEdgeType("invalid")).toBe(false);
+      expect(isEdgeType("")).toBe(false);
+      expect(isEdgeType("smooth")).toBe(false);
+    });
+  });
+  describe("Connection", () => {
+    it("should define connection with source and target", () => {
+      const conn = {
+        source: "node-1",
+        target: "node-2"
+      };
+      expect(conn.source).toBe("node-1");
+      expect(conn.target).toBe("node-2");
+    });
+    it("should support optional handles", () => {
+      const conn = {
+        source: "node-1",
+        target: "node-2",
+        sourceHandle: "handle-top",
+        targetHandle: null
+      };
+      expect(conn.sourceHandle).toBe("handle-top");
+      expect(conn.targetHandle).toBeNull();
+    });
+  });
+  describe("EdgeStyle", () => {
+    it("should allow style properties", () => {
+      const style = {
+        stroke: "#409eff",
+        strokeWidth: 2,
+        strokeDasharray: "5,5"
+      };
+      expect(style.stroke).toBe("#409eff");
+      expect(style.strokeWidth).toBe(2);
+      expect(style.strokeDasharray).toBe("5,5");
+    });
+    it("should support custom properties", () => {
+      const style = {
+        stroke: "#fff",
+        customProp: "value"
+      };
+      expect(style.customProp).toBe("value");
+    });
+  });
+  describe("EdgeData", () => {
+    it("should define edge data with label and style", () => {
+      const data = {
+        label: "Edge Label",
+        type: "bezier",
+        animated: true,
+        style: { stroke: "#000" }
+      };
+      expect(data.label).toBe("Edge Label");
+      expect(data.type).toBe("bezier");
+      expect(data.animated).toBe(true);
+    });
+    it("should support label styling options", () => {
+      const data = {
+        label: "Test",
+        labelStyle: { color: "#fff" },
+        labelShowBg: true,
+        labelBgColor: "#000",
+        labelBgPadding: [4, 4],
+        labelBgBorderRadius: 4
+      };
+      expect(data.labelShowBg).toBe(true);
+      expect(data.labelBgColor).toBe("#000");
+      expect(data.labelBgPadding).toEqual([4, 4]);
+    });
+  });
+  describe("Edge", () => {
+    it("should create basic edge", () => {
+      const edge = {
+        id: "edge-1",
+        source: "node-1",
+        target: "node-2"
+      };
+      expect(edge.id).toBe("edge-1");
+      expect(edge.source).toBe("node-1");
+      expect(edge.target).toBe("node-2");
+    });
+    it("should support optional edge properties", () => {
+      const edge = {
+        id: "edge-1",
+        source: "node-1",
+        target: "node-2",
+        type: "smoothstep",
+        animated: true,
+        label: "Flow",
+        selectable: true,
+        deletable: true,
+        hidden: false,
+        selected: false,
+        zIndex: 1
+      };
+      expect(edge.type).toBe("smoothstep");
+      expect(edge.animated).toBe(true);
+      expect(edge.label).toBe("Flow");
+    });
+    it("should support marker definitions", () => {
+      const edge = {
+        id: "edge-1",
+        source: "node-1",
+        target: "node-2",
+        markerEnd: "arrow",
+        markerStart: { type: "arrow", color: "#000", width: 12, height: 12 }
+      };
+      expect(edge.markerEnd).toBe("arrow");
+      expect(edge.markerStart).toEqual({ type: "arrow", color: "#000", width: 12, height: 12 });
+    });
+    it("should support updatable configuration", () => {
+      const edgeSource = {
+        id: "edge-1",
+        source: "node-1",
+        target: "node-2",
+        updatable: "source"
+      };
+      const edgeTarget = {
+        id: "edge-2",
+        source: "node-2",
+        target: "node-3",
+        updatable: "target"
+      };
+      const edgeBoth = {
+        id: "edge-3",
+        source: "node-3",
+        target: "node-4",
+        updatable: true
+      };
+      const edgeFixed = {
+        id: "edge-4",
+        source: "node-4",
+        target: "node-5",
+        updatable: false
+      };
+      expect(edgeSource.updatable).toBe("source");
+      expect(edgeTarget.updatable).toBe("target");
+      expect(edgeBoth.updatable).toBe(true);
+      expect(edgeFixed.updatable).toBe(false);
+    });
+  });
+  describe("EdgeChangeType", () => {
+    it("should define all change types", () => {
+      const types = ["select", "remove", "style", "data", "selectMulti", "unselect"];
+      expect(types).toContain("select");
+      expect(types).toContain("remove");
+      expect(types).toContain("style");
+      expect(types).toContain("data");
+    });
+  });
+  describe("EdgeChange", () => {
+    it("should create edge change object", () => {
+      const edge = { id: "edge-1", source: "n1", target: "n2" };
+      const change = {
+        type: "select",
+        id: "edge-1",
+        item: edge,
+        selected: true
+      };
+      expect(change.type).toBe("select");
+      expect(change.selected).toBe(true);
+    });
+    it("should support style change", () => {
+      const edge = { id: "edge-1", source: "n1", target: "n2" };
+      const change = {
+        type: "style",
+        id: "edge-1",
+        item: edge,
+        style: { stroke: "#f00", strokeWidth: 3 }
+      };
+      expect(change.style?.stroke).toBe("#f00");
+    });
+    it("should support data change", () => {
+      const edge = { id: "edge-1", source: "n1", target: "n2" };
+      const change = {
+        type: "data",
+        id: "edge-1",
+        item: edge,
+        data: { label: "Updated", animated: true }
+      };
+      expect(change.data?.label).toBe("Updated");
+    });
+  });
+  describe("isEdge", () => {
+    it("should return true for valid edge objects", () => {
+      const edge = { id: "e1", source: "n1", target: "n2" };
+      expect(isEdge(edge)).toBe(true);
+    });
+    it("should return true for edge with optional properties", () => {
+      const edge = {
+        id: "e1",
+        source: "n1",
+        target: "n2",
+        type: "bezier",
+        label: "Test"
+      };
+      expect(isEdge(edge)).toBe(true);
+    });
+    it("should return false for null", () => {
+      expect(isEdge(null)).toBe(false);
+    });
+    it("should return false for undefined", () => {
+      expect(isEdge(void 0)).toBe(false);
+    });
+    it("should return false for object missing source", () => {
+      expect(isEdge({ id: "e1", target: "n2" })).toBe(false);
+    });
+    it("should return false for object missing target", () => {
+      expect(isEdge({ id: "e1", source: "n1" })).toBe(false);
+    });
+    it("should return false for primitive values", () => {
+      expect(isEdge("edge")).toBe(false);
+      expect(isEdge(123)).toBe(false);
+      expect(isEdge(true)).toBe(false);
+    });
+    it("should return false for arrays", () => {
+      expect(isEdge([])).toBe(false);
+    });
+  });
+});

package/dist/__tests__/edge-utils.test.cjs

@@ -0,0 +1,375 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _edge = require("../utils/edge.cjs");
+function createMockNode(x, y, width = 150, height = 80, style) {
+  return {
+    id: "test",
+    type: "default",
+    position: {
+      x,
+      y
+    },
+    width,
+    height,
+    style,
+    data: {},
+    selected: false,
+    dragging: false
+  };
+}
+(0, _vitest.describe)("flow/utils/edge", () => {
+  (0, _vitest.describe)("getHandlePosition", () => {
+    (0, _vitest.it)("should return center for unknown position", () => {
+      const node = createMockNode(0, 0, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node, "unknown");
+      (0, _vitest.expect)(result.x).toBe(50);
+      (0, _vitest.expect)(result.y).toBe(25);
+    });
+    (0, _vitest.it)("should return top handle position", () => {
+      const node = createMockNode(10, 20, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node, "top");
+      (0, _vitest.expect)(result.x).toBe(60);
+      (0, _vitest.expect)(result.y).toBe(20);
+    });
+    (0, _vitest.it)("should return bottom handle position", () => {
+      const node = createMockNode(10, 20, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node, "bottom");
+      (0, _vitest.expect)(result.x).toBe(60);
+      (0, _vitest.expect)(result.y).toBe(70);
+    });
+    (0, _vitest.it)("should return left handle position", () => {
+      const node = createMockNode(10, 20, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node, "left");
+      (0, _vitest.expect)(result.x).toBe(10);
+      (0, _vitest.expect)(result.y).toBe(45);
+    });
+    (0, _vitest.it)("should return right handle position", () => {
+      const node = createMockNode(10, 20, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node, "right");
+      (0, _vitest.expect)(result.x).toBe(110);
+      (0, _vitest.expect)(result.y).toBe(45);
+    });
+    (0, _vitest.it)("should fallback to default dimensions when width/height are undefined", () => {
+      const node = {
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        selected: false,
+        dragging: false
+      };
+      const result = (0, _edge.getHandlePosition)(node, "right");
+      (0, _vitest.expect)(result.x).toBe(150);
+      (0, _vitest.expect)(result.y).toBe(20);
+    });
+    (0, _vitest.it)("should use right as default position", () => {
+      const node = createMockNode(0, 0, 100, 50);
+      const result = (0, _edge.getHandlePosition)(node);
+      (0, _vitest.expect)(result.x).toBe(100);
+      (0, _vitest.expect)(result.y).toBe(25);
+    });
+  });
+  (0, _vitest.describe)("getBezierPath", () => {
+    (0, _vitest.it)("should generate bezier path", () => {
+      const result = (0, _edge.getBezierPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("100,50");
+      (0, _vitest.expect)(result).toContain("C");
+    });
+    (0, _vitest.it)("should use custom curvature", () => {
+      const result = (0, _edge.getBezierPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left",
+        curvature: 0.5
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("100,50");
+    });
+    (0, _vitest.it)("should handle vertical movement", () => {
+      const result = (0, _edge.getBezierPath)({
+        sourceX: 50,
+        sourceY: 0,
+        targetX: 50,
+        targetY: 100,
+        sourcePosition: "bottom",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("M50,0");
+      (0, _vitest.expect)(result).toContain("50,100");
+    });
+    (0, _vitest.it)("should handle top to bottom direction", () => {
+      const result = (0, _edge.getBezierPath)({
+        sourceX: 50,
+        sourceY: 0,
+        targetX: 50,
+        targetY: 100,
+        sourcePosition: "top",
+        targetPosition: "bottom"
+      });
+      (0, _vitest.expect)(result).toContain("M50,0");
+    });
+  });
+  (0, _vitest.describe)("getStraightPath", () => {
+    (0, _vitest.it)("should generate straight line path", () => {
+      const result = (0, _edge.getStraightPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toBe("M0,0 L100,50");
+    });
+    (0, _vitest.it)("should handle diagonal line", () => {
+      const result = (0, _edge.getStraightPath)({
+        sourceX: 10,
+        sourceY: 20,
+        targetX: 300,
+        targetY: 400,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toBe("M10,20 L300,400");
+    });
+  });
+  (0, _vitest.describe)("getStepPath", () => {
+    (0, _vitest.it)("should generate step path when source is horizontal and target is vertical", () => {
+      const result = (0, _edge.getStepPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("L");
+      (0, _vitest.expect)(result).toContain("100,50");
+    });
+    (0, _vitest.it)("should generate step path when source is vertical and target is horizontal", () => {
+      const result = (0, _edge.getStepPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "top",
+        targetPosition: "right"
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("L");
+    });
+    (0, _vitest.it)("should handle both horizontal", () => {
+      const result = (0, _edge.getStepPath)({
+        sourceX: 0,
+        sourceY: 50,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toContain("M0,50");
+      (0, _vitest.expect)(result).toContain("L");
+    });
+    (0, _vitest.it)("should handle both vertical", () => {
+      const result = (0, _edge.getStepPath)({
+        sourceX: 50,
+        sourceY: 0,
+        targetX: 50,
+        targetY: 100,
+        sourcePosition: "bottom",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("M50,0");
+      (0, _vitest.expect)(result).toContain("L");
+    });
+  });
+  (0, _vitest.describe)("getSmoothStepPath", () => {
+    (0, _vitest.it)("should generate smooth step path for horizontal source", () => {
+      const result = (0, _edge.getSmoothStepPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("Q");
+      (0, _vitest.expect)(result).toContain("100,50");
+    });
+    (0, _vitest.it)("should generate smooth step path for vertical source", () => {
+      const result = (0, _edge.getSmoothStepPath)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "bottom",
+        targetPosition: "right"
+      });
+      (0, _vitest.expect)(result).toContain("M0,0");
+      (0, _vitest.expect)(result).toContain("Q");
+    });
+  });
+  (0, _vitest.describe)("getEdgePath", () => {
+    (0, _vitest.it)("should return bezier path for bezier type", () => {
+      const result = (0, _edge.getEdgePath)("bezier", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toContain("C");
+    });
+    (0, _vitest.it)("should return straight path for straight type", () => {
+      const result = (0, _edge.getEdgePath)("straight", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toBe("M0,0 L100,50");
+    });
+    (0, _vitest.it)("should return step path for step type", () => {
+      const result = (0, _edge.getEdgePath)("step", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("L");
+    });
+    (0, _vitest.it)("should return smooth step path for smoothstep type", () => {
+      const result = (0, _edge.getEdgePath)("smoothstep", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "top"
+      });
+      (0, _vitest.expect)(result).toContain("Q");
+    });
+    (0, _vitest.it)("should default to bezier for unknown type", () => {
+      const result = (0, _edge.getEdgePath)("unknown", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toContain("C");
+    });
+    (0, _vitest.it)("should default to bezier for default type", () => {
+      const result = (0, _edge.getEdgePath)("default", {
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toContain("C");
+    });
+  });
+  (0, _vitest.describe)("getEdgeCenter", () => {
+    (0, _vitest.it)("should return center for bezier type", () => {
+      const result = (0, _edge.getEdgeCenter)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left",
+        type: "bezier"
+      });
+      (0, _vitest.expect)(result).toHaveProperty("x");
+      (0, _vitest.expect)(result).toHaveProperty("y");
+      (0, _vitest.expect)(result).toHaveProperty("ox");
+      (0, _vitest.expect)(result).toHaveProperty("oy");
+    });
+    (0, _vitest.it)("should return center for straight type", () => {
+      const result = (0, _edge.getEdgeCenter)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left",
+        type: "straight"
+      });
+      (0, _vitest.expect)(result.x).toBe(50);
+      (0, _vitest.expect)(result.y).toBe(25);
+    });
+    (0, _vitest.it)("should return center for step type", () => {
+      const result = (0, _edge.getEdgeCenter)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left",
+        type: "step"
+      });
+      (0, _vitest.expect)(result.x).toBe(50);
+      (0, _vitest.expect)(result.y).toBe(25);
+    });
+    (0, _vitest.it)("should default to bezier when type is undefined", () => {
+      const result = (0, _edge.getEdgeCenter)({
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 100,
+        targetY: 50,
+        sourcePosition: "right",
+        targetPosition: "left"
+      });
+      (0, _vitest.expect)(result).toHaveProperty("x");
+    });
+  });
+  (0, _vitest.describe)("shortenEndpoint", () => {
+    (0, _vitest.it)("should shorten endpoint in the direction of source", () => {
+      const result = (0, _edge.shortenEndpoint)(100, 50, 0, 0, 10);
+      (0, _vitest.expect)(result.x).toBeLessThan(100);
+      (0, _vitest.expect)(result.y).toBeLessThan(50);
+    });
+    (0, _vitest.it)("should not shorten when distance is too small", () => {
+      const result = (0, _edge.shortenEndpoint)(5, 5, 0, 0, 10);
+      (0, _vitest.expect)(result.x).toBe(5);
+      (0, _vitest.expect)(result.y).toBe(5);
+    });
+    (0, _vitest.it)("should shorten towards source", () => {
+      const result = (0, _edge.shortenEndpoint)(200, 100, 100, 50, 10);
+      const dx = 200 - 100;
+      const dy = 100 - 50;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const factor = 10 / dist;
+      (0, _vitest.expect)(result.x).toBeCloseTo(200 - dx * factor, 5);
+      (0, _vitest.expect)(result.y).toBeCloseTo(100 - dy * factor, 5);
+    });
+    (0, _vitest.it)("should handle vertical movement", () => {
+      const result = (0, _edge.shortenEndpoint)(50, 100, 50, 0, 10);
+      (0, _vitest.expect)(result.x).toBe(50);
+      (0, _vitest.expect)(result.y).toBeCloseTo(90, 0);
+    });
+  });
+});

package/dist/__tests__/edge-utils.test.d.ts

@@ -0,0 +1 @@
+export {};