@yh-ui/flow 1.0.1 → 1.0.5

package/dist/__tests__/layout-plugin.test.mjs

@@ -0,0 +1,215 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ref } from "vue";
+import { createLayoutPlugin } from "../plugins/plugins/layout.mjs";
+function createMockFlowInstance() {
+  const nodes = ref([]);
+  const edges = ref([]);
+  const viewport = ref({ x: 0, y: 0, zoom: 1 });
+  const draggingNodeId = ref(null);
+  return {
+    nodes,
+    edges,
+    viewport,
+    draggingNodeId,
+    addNode: vi.fn(),
+    removeNode: vi.fn(),
+    updateNode: vi.fn(),
+    getNode: vi.fn(),
+    addEdge: vi.fn(),
+    removeEdge: vi.fn(),
+    updateEdge: vi.fn(),
+    getEdge: vi.fn(),
+    setViewport: vi.fn(),
+    fitView: vi.fn(),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+    centerView: vi.fn(),
+    selectNode: vi.fn(),
+    selectEdge: vi.fn(),
+    clearSelection: vi.fn(),
+    getNodes: vi.fn(() => nodes.value),
+    getEdges: vi.fn(() => edges.value),
+    getViewport: vi.fn(() => viewport.value),
+    screenToCanvas: vi.fn(),
+    canvasToScreen: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+    isValidConnection: vi.fn(() => true),
+    $el: void 0,
+    usePlugin: vi.fn(),
+    removePlugin: vi.fn()
+  };
+}
+function createMockNode(id, type = "default") {
+  return {
+    id,
+    type,
+    position: { x: 0, y: 0 },
+    width: 100,
+    height: 50,
+    data: {},
+    selected: false,
+    dragging: false
+  };
+}
+function createMockEdge(id, source, target) {
+  return {
+    id,
+    source,
+    target,
+    type: "smoothstep",
+    selected: false,
+    animated: false
+  };
+}
+describe("flow/plugins/plugins/layout", () => {
+  let consoleLogSpy;
+  let consoleWarnSpy;
+  let consoleErrorSpy;
+  beforeEach(() => {
+    consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {
+    });
+    consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {
+    });
+    consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {
+    });
+  });
+  afterEach(() => {
+    consoleLogSpy.mockRestore();
+    consoleWarnSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+    vi.restoreAllMocks();
+  });
+  describe("createLayoutPlugin", () => {
+    it("should create plugin with correct id and name", () => {
+      const plugin = createLayoutPlugin();
+      expect(plugin.id).toBe("layout");
+      expect(plugin.name).toBe("Layout");
+      expect(plugin.version).toBe("1.0.0");
+    });
+    it("should install without crashing", () => {
+      const flow = createMockFlowInstance();
+      const plugin = createLayoutPlugin();
+      plugin.install(flow);
+      expect(flow.applyLayout).toBeDefined();
+    });
+    it("should not install applyLayout when enabled is false", () => {
+      const flow = createMockFlowInstance();
+      const plugin = createLayoutPlugin({ enabled: false });
+      plugin.install(flow);
+      expect(flow.applyLayout).toBeUndefined();
+    });
+    it("should use default layout options", () => {
+      const plugin = createLayoutPlugin();
+      expect(plugin.id).toBe("layout");
+    });
+    it("should merge custom options", () => {
+      const plugin = createLayoutPlugin({
+        type: "grid",
+        direction: "LR",
+        nodeSpacing: 100,
+        rankSpacing: 200,
+        animate: false
+      });
+      expect(plugin.id).toBe("layout");
+    });
+    it("should support all layout types", () => {
+      const types = ["dagre", "elk", "force", "grid"];
+      for (const type of types) {
+        const plugin = createLayoutPlugin({ type });
+        expect(plugin.id).toBe("layout");
+      }
+    });
+    it("should support all directions", () => {
+      const directions = ["TB", "BT", "LR", "RL"];
+      for (const direction of directions) {
+        const plugin = createLayoutPlugin({ direction });
+        expect(plugin.id).toBe("layout");
+      }
+    });
+    it("should support elk options", () => {
+      const plugin = createLayoutPlugin({
+        type: "elk",
+        elkOptions: {
+          algorithm: "layered",
+          direction: "DOWN",
+          spacing: 50,
+          edgeRouting: "POLYLINE"
+        }
+      });
+      expect(plugin.id).toBe("layout");
+    });
+    it("should support force options", () => {
+      const plugin = createLayoutPlugin({
+        type: "force",
+        forceOptions: {
+          strength: -500,
+          distance: 150,
+          theta: 0.5,
+          iterations: 500
+        }
+      });
+      expect(plugin.id).toBe("layout");
+    });
+    it("should support grid options", () => {
+      const plugin = createLayoutPlugin({
+        type: "grid",
+        gridOptions: {
+          columns: 6,
+          startX: 100,
+          startY: 100
+        }
+      });
+      expect(plugin.id).toBe("layout");
+    });
+  });
+  describe("applyLayout with grid", () => {
+    it("should apply grid layout", async () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        createMockNode("n1"),
+        createMockNode("n2"),
+        createMockNode("n3"),
+        createMockNode("n4")
+      ];
+      flow.edges.value = [
+        createMockEdge("e1", "n1", "n2"),
+        createMockEdge("e2", "n2", "n3")
+      ];
+      const plugin = createLayoutPlugin({ type: "grid", animate: false });
+      plugin.install(flow);
+      await flow.applyLayout({ type: "grid", gridOptions: { columns: 2 } });
+      expect(flow.updateNode).toHaveBeenCalled();
+      expect(consoleLogSpy).toHaveBeenCalledWith("[Layout Plugin] Grid layout applied successfully");
+    });
+    it("should warn for unknown layout type", async () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [createMockNode("n1")];
+      const plugin = createLayoutPlugin();
+      plugin.install(flow);
+      await flow.applyLayout({ type: "unknown" });
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining("Unknown layout type")
+      );
+    });
+    it("should handle layout with empty nodes", async () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [];
+      flow.edges.value = [];
+      const plugin = createLayoutPlugin({ type: "grid" });
+      plugin.install(flow);
+      await flow.applyLayout();
+      expect(flow.updateNode).not.toHaveBeenCalled();
+    });
+    it("should use override options from applyLayout call", async () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [createMockNode("n1")];
+      flow.edges.value = [];
+      const plugin = createLayoutPlugin({ type: "grid" });
+      plugin.install(flow);
+      await flow.applyLayout({ direction: "LR" });
+      expect(flow.updateNode).toHaveBeenCalled();
+    });
+  });
+});

package/dist/__tests__/node-types.test.cjs

@@ -0,0 +1,368 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _node = require("../types/node.cjs");
+(0, _vitest.describe)("flow/types/node", () => {
+  (0, _vitest.describe)("NodeHandle", () => {
+    (0, _vitest.it)("should define handle with type and position", () => {
+      const handle = {
+        type: "source",
+        position: "right"
+      };
+      (0, _vitest.expect)(handle.type).toBe("source");
+      (0, _vitest.expect)(handle.position).toBe("right");
+    });
+    (0, _vitest.it)("should support optional properties", () => {
+      const handle = {
+        type: "target",
+        position: "left",
+        id: "handle-1",
+        style: {
+          background: "#fff"
+        },
+        class: "custom-handle",
+        isConnectable: true
+      };
+      (0, _vitest.expect)(handle.id).toBe("handle-1");
+      (0, _vitest.expect)(handle.class).toBe("custom-handle");
+      (0, _vitest.expect)(handle.isConnectable).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("NodeStyle", () => {
+    (0, _vitest.it)("should allow CSS-like properties", () => {
+      const style = {
+        background: "#f0f0f0",
+        border: "1px solid #ccc",
+        width: 200
+      };
+      (0, _vitest.expect)(style.background).toBe("#f0f0f0");
+      (0, _vitest.expect)(style.width).toBe(200);
+    });
+    (0, _vitest.it)("should support undefined values", () => {
+      const style = {
+        background: "#fff",
+        border: void 0
+      };
+      (0, _vitest.expect)(style.border).toBeUndefined();
+    });
+  });
+  (0, _vitest.describe)("NodeData", () => {
+    (0, _vitest.it)("should define basic node data", () => {
+      const data = {
+        label: "Test Node"
+      };
+      (0, _vitest.expect)(data.label).toBe("Test Node");
+    });
+    (0, _vitest.it)("should support extended data fields", () => {
+      const data = {
+        label: "AI Node",
+        style: {
+          background: "#e0f7fa"
+        },
+        class: "ai-node",
+        icon: "robot",
+        description: "An AI processing node"
+      };
+      (0, _vitest.expect)(data.icon).toBe("robot");
+      (0, _vitest.expect)(data.description).toBe("An AI processing node");
+    });
+    (0, _vitest.it)("should support AI workflow specific fields", () => {
+      const data = {
+        label: "LLM Node",
+        model: "gpt-4",
+        prompt: "You are a helpful assistant",
+        temperature: 0.7,
+        maxTokens: 2e3,
+        tools: ["search", "calculator"],
+        toolName: "web_search",
+        condition: 'status == "success"',
+        memoryType: "vector",
+        status: "running",
+        streamOutput: "partial"
+      };
+      (0, _vitest.expect)(data.model).toBe("gpt-4");
+      (0, _vitest.expect)(data.temperature).toBe(0.7);
+      (0, _vitest.expect)(data.status).toBe("running");
+    });
+  });
+  (0, _vitest.describe)("NodePosition", () => {
+    (0, _vitest.it)("should define position with x and y", () => {
+      const pos = {
+        x: 100,
+        y: 200
+      };
+      (0, _vitest.expect)(pos.x).toBe(100);
+      (0, _vitest.expect)(pos.y).toBe(200);
+    });
+    (0, _vitest.it)("should support negative coordinates", () => {
+      const pos = {
+        x: -50,
+        y: -100
+      };
+      (0, _vitest.expect)(pos.x).toBe(-50);
+      (0, _vitest.expect)(pos.y).toBe(-100);
+    });
+  });
+  (0, _vitest.describe)("NodeDimension", () => {
+    (0, _vitest.it)("should define width and height", () => {
+      const dim = {
+        width: 150,
+        height: 80
+      };
+      (0, _vitest.expect)(dim.width).toBe(150);
+      (0, _vitest.expect)(dim.height).toBe(80);
+    });
+  });
+  (0, _vitest.describe)("NodeHandleBounds", () => {
+    (0, _vitest.it)("should define handle bounds", () => {
+      const bounds = {
+        top: [{
+          type: "source",
+          position: "top"
+        }],
+        right: [{
+          type: "target",
+          position: "right"
+        }]
+      };
+      (0, _vitest.expect)(bounds.top).toHaveLength(1);
+      (0, _vitest.expect)(bounds.right).toHaveLength(1);
+    });
+  });
+  (0, _vitest.describe)("Node", () => {
+    (0, _vitest.it)("should create basic node", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Basic Node"
+        }
+      };
+      (0, _vitest.expect)(node.id).toBe("node-1");
+      (0, _vitest.expect)(node.type).toBe("default");
+    });
+    (0, _vitest.it)("should support all optional properties", () => {
+      const node = {
+        id: "node-1",
+        type: "custom",
+        position: {
+          x: 100,
+          y: 200
+        },
+        data: {
+          label: "Test"
+        },
+        style: {
+          background: "#fff"
+        },
+        class: "custom-node",
+        draggable: true,
+        selectable: true,
+        connectable: true,
+        resizable: true,
+        deletable: true,
+        hidden: false,
+        selected: false,
+        dragging: false,
+        width: 200,
+        height: 100,
+        parentId: "parent-1",
+        zIndex: 1,
+        extent: "parent",
+        expandParent: true,
+        positionAbsolute: {
+          x: 150,
+          y: 250
+        },
+        handleBounds: {
+          top: [{
+            type: "source",
+            position: "top"
+          }],
+          right: [{
+            type: "target",
+            position: "right"
+          }]
+        }
+      };
+      (0, _vitest.expect)(node.draggable).toBe(true);
+      (0, _vitest.expect)(node.width).toBe(200);
+      (0, _vitest.expect)(node.parentId).toBe("parent-1");
+    });
+    (0, _vitest.it)("should support nested children", () => {
+      const node = {
+        id: "parent",
+        type: "group",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Parent"
+        },
+        children: ["child-1", "child-2"],
+        computed: true
+      };
+      (0, _vitest.expect)(node.children).toEqual(["child-1", "child-2"]);
+      (0, _vitest.expect)(node.computed).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("NodeChangeType", () => {
+    (0, _vitest.it)("should define all change types", () => {
+      const types = ["select", "position", "remove", "dimensions", "style", "data", "selectMulti", "unselect"];
+      (0, _vitest.expect)(types).toContain("select");
+      (0, _vitest.expect)(types).toContain("position");
+      (0, _vitest.expect)(types).toContain("remove");
+    });
+  });
+  (0, _vitest.describe)("NodeChange", () => {
+    (0, _vitest.it)("should create select change", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      };
+      const change = {
+        type: "select",
+        id: "node-1",
+        item: node,
+        selected: true
+      };
+      (0, _vitest.expect)(change.type).toBe("select");
+      (0, _vitest.expect)(change.selected).toBe(true);
+    });
+    (0, _vitest.it)("should create position change", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      };
+      const change = {
+        type: "position",
+        id: "node-1",
+        item: node,
+        position: {
+          x: 100,
+          y: 200
+        }
+      };
+      (0, _vitest.expect)(change.position?.x).toBe(100);
+      (0, _vitest.expect)(change.position?.y).toBe(200);
+    });
+    (0, _vitest.it)("should create dimensions change", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      };
+      const change = {
+        type: "dimensions",
+        id: "node-1",
+        item: node,
+        dimensions: {
+          width: 200,
+          height: 100
+        }
+      };
+      (0, _vitest.expect)(change.dimensions?.width).toBe(200);
+    });
+    (0, _vitest.it)("should create drag change", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      };
+      const change = {
+        type: "position",
+        id: "node-1",
+        item: node,
+        drag: true
+      };
+      (0, _vitest.expect)(change.drag).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("isNode", () => {
+    (0, _vitest.it)("should return true for valid node objects", () => {
+      const node = {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      };
+      (0, _vitest.expect)((0, _node.isNode)(node)).toBe(true);
+    });
+    (0, _vitest.it)("should return true for node with extended properties", () => {
+      const node = {
+        id: "node-1",
+        type: "custom",
+        position: {
+          x: 100,
+          y: 200
+        },
+        data: {
+          label: "Test"
+        },
+        width: 200,
+        height: 100
+      };
+      (0, _vitest.expect)((0, _node.isNode)(node)).toBe(true);
+    });
+    (0, _vitest.it)("should return false for null", () => {
+      (0, _vitest.expect)((0, _node.isNode)(null)).toBe(false);
+    });
+    (0, _vitest.it)("should return false for undefined", () => {
+      (0, _vitest.expect)((0, _node.isNode)(void 0)).toBe(false);
+    });
+    (0, _vitest.it)("should return false for object missing id", () => {
+      (0, _vitest.expect)((0, _node.isNode)({
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      })).toBe(false);
+    });
+    (0, _vitest.it)("should return false for object missing type", () => {
+      (0, _vitest.expect)((0, _node.isNode)({
+        id: "node-1",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      })).toBe(false);
+    });
+    (0, _vitest.it)("should return false for primitive values", () => {
+      (0, _vitest.expect)((0, _node.isNode)("node")).toBe(false);
+      (0, _vitest.expect)((0, _node.isNode)(123)).toBe(false);
+      (0, _vitest.expect)((0, _node.isNode)(true)).toBe(false);
+    });
+    (0, _vitest.it)("should return false for arrays", () => {
+      (0, _vitest.expect)((0, _node.isNode)([])).toBe(false);
+    });
+  });
+});

package/dist/__tests__/node-types.test.d.ts

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