@yh-ui/flow 1.0.1 → 1.0.4

package/dist/__tests__/useNodeDistribution.test.cjs

@@ -0,0 +1,643 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _useNodeDistribution = require("../core/useNodeDistribution.cjs");
+function createMockFlowInstance() {
+  const nodes = (0, _vue.ref)([]);
+  const edges = (0, _vue.ref)([]);
+  const viewport = (0, _vue.ref)({
+    x: 0,
+    y: 0,
+    zoom: 1
+  });
+  const draggingNodeId = (0, _vue.ref)(null);
+  return {
+    nodes,
+    edges,
+    viewport,
+    draggingNodeId,
+    addNode: _vitest.vi.fn(),
+    removeNode: _vitest.vi.fn(),
+    updateNode: _vitest.vi.fn(),
+    getNode: _vitest.vi.fn(),
+    addEdge: _vitest.vi.fn(),
+    removeEdge: _vitest.vi.fn(),
+    updateEdge: _vitest.vi.fn(),
+    getEdge: _vitest.vi.fn(),
+    setViewport: _vitest.vi.fn(),
+    fitView: _vitest.vi.fn(),
+    zoomIn: _vitest.vi.fn(),
+    zoomOut: _vitest.vi.fn(),
+    centerView: _vitest.vi.fn(),
+    selectNode: _vitest.vi.fn(),
+    selectEdge: _vitest.vi.fn(),
+    clearSelection: _vitest.vi.fn(),
+    getNodes: _vitest.vi.fn(() => nodes.value),
+    getEdges: _vitest.vi.fn(() => edges.value),
+    getViewport: _vitest.vi.fn(() => viewport.value),
+    screenToCanvas: _vitest.vi.fn(),
+    canvasToScreen: _vitest.vi.fn(),
+    on: _vitest.vi.fn(),
+    off: _vitest.vi.fn(),
+    emit: _vitest.vi.fn(),
+    isValidConnection: _vitest.vi.fn(() => true),
+    $el: void 0,
+    usePlugin: _vitest.vi.fn(),
+    removePlugin: _vitest.vi.fn()
+  };
+}
+(0, _vitest.describe)("flow/core/useNodeDistribution", () => {
+  (0, _vitest.it)("should return all distribution functions", () => {
+    const flow = createMockFlowInstance();
+    const {
+      distributeHorizontally,
+      distributeVertically,
+      alignNodesHorizontal,
+      alignNodesVertical
+    } = (0, _useNodeDistribution.useNodeDistribution)({
+      nodes: flow.nodes
+    });
+    (0, _vitest.expect)(typeof distributeHorizontally).toBe("function");
+    (0, _vitest.expect)(typeof distributeVertically).toBe("function");
+    (0, _vitest.expect)(typeof alignNodesHorizontal).toBe("function");
+    (0, _vitest.expect)(typeof alignNodesVertical).toBe("function");
+  });
+  (0, _vitest.describe)("distributeHorizontally", () => {
+    (0, _vitest.it)("should not distribute when fewer than 3 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 100,
+          y: 0
+        },
+        data: {}
+      }];
+      const {
+        distributeHorizontally
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeHorizontally(["1", "2"]);
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[1].position.x).toBe(100);
+    });
+    (0, _vitest.it)("should distribute 3 nodes horizontally with custom gap", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 100,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }];
+      const {
+        distributeHorizontally
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeHorizontally(["1", "2", "3"], 100);
+      const positions = flow.nodes.value.map(n => n.position.x);
+      (0, _vitest.expect)(positions[0]).toBe(0);
+      (0, _vitest.expect)(positions[1]).toBe(150);
+      (0, _vitest.expect)(positions[2]).toBe(300);
+    });
+    (0, _vitest.it)("should distribute nodes that are too close", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 10,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 20,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }];
+      const {
+        distributeHorizontally
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeHorizontally(["1", "2", "3"], 50);
+      const positions = flow.nodes.value.map(n => n.position.x);
+      (0, _vitest.expect)(positions[0]).toBe(0);
+      (0, _vitest.expect)(positions[1]).toBeGreaterThan(positions[0]);
+      (0, _vitest.expect)(positions[2]).toBeGreaterThan(positions[1]);
+    });
+    (0, _vitest.it)("should use selected nodes when no nodeIds provided", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50,
+        selected: true
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50,
+        selected: true
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 100,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50,
+        selected: true
+      }];
+      const {
+        distributeHorizontally
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeHorizontally(void 0, 50);
+      const positions = flow.nodes.value.map(n => n.position.x);
+      (0, _vitest.expect)(positions[0]).toBe(0);
+      (0, _vitest.expect)(positions[1]).toBe(100);
+      (0, _vitest.expect)(positions[2]).toBe(200);
+    });
+  });
+  (0, _vitest.describe)("distributeVertically", () => {
+    (0, _vitest.it)("should not distribute when fewer than 3 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {}
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 100
+        },
+        data: {}
+      }];
+      const {
+        distributeVertically
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeVertically(["1", "2"]);
+      (0, _vitest.expect)(flow.nodes.value[0].position.y).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[1].position.y).toBe(100);
+    });
+    (0, _vitest.it)("should distribute 3 nodes vertically", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 50
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 0,
+          y: 100
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }];
+      const {
+        distributeVertically
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeVertically(["1", "2", "3"], 100);
+      const positions = flow.nodes.value.map(n => n.position.y);
+      (0, _vitest.expect)(positions[0]).toBe(0);
+      (0, _vitest.expect)(positions[1]).toBe(150);
+      (0, _vitest.expect)(positions[2]).toBe(300);
+    });
+    (0, _vitest.it)("should distribute nodes that are too close vertically", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 10
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 0,
+          y: 20
+        },
+        data: {},
+        width: 50,
+        height: 50
+      }];
+      const {
+        distributeVertically
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      distributeVertically(["1", "2", "3"], 50);
+      const positions = flow.nodes.value.map(n => n.position.y);
+      (0, _vitest.expect)(positions[0]).toBe(0);
+      (0, _vitest.expect)(positions[1]).toBeGreaterThan(positions[0]);
+      (0, _vitest.expect)(positions[2]).toBeGreaterThan(positions[1]);
+    });
+  });
+  (0, _vitest.describe)("alignNodesHorizontal", () => {
+    (0, _vitest.it)("should not align when fewer than 2 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesHorizontal
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesHorizontal(["1"]);
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(0);
+    });
+    (0, _vitest.it)("should align to left edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 50
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 100,
+          y: 100
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesHorizontal
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesHorizontal(["1", "2", "3"], "left");
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[1].position.x).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[2].position.x).toBe(0);
+    });
+    (0, _vitest.it)("should align to right edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 50
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesHorizontal
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesHorizontal(["1", "2"], "right");
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(50);
+      (0, _vitest.expect)(flow.nodes.value[1].position.x).toBe(50);
+    });
+    (0, _vitest.it)("should align to center", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 50
+        },
+        data: {},
+        width: 200,
+        height: 50
+      }];
+      const {
+        alignNodesHorizontal
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesHorizontal(["1", "2"], "center");
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(50);
+      (0, _vitest.expect)(flow.nodes.value[1].position.x).toBe(0);
+    });
+    (0, _vitest.it)("should use selected nodes when no nodeIds provided", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50,
+        selected: true
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 50,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50,
+        selected: true
+      }];
+      const {
+        alignNodesHorizontal
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesHorizontal(void 0, "left");
+      (0, _vitest.expect)(flow.nodes.value[0].position.x).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[1].position.x).toBe(0);
+    });
+  });
+  (0, _vitest.describe)("alignNodesVertical", () => {
+    (0, _vitest.it)("should not align when fewer than 2 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesVertical
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesVertical(["1"]);
+      (0, _vitest.expect)(flow.nodes.value[0].position.y).toBe(0);
+    });
+    (0, _vitest.it)("should align to top edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 50
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "3",
+        type: "default",
+        position: {
+          x: 0,
+          y: 100
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesVertical
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesVertical(["1", "2", "3"], "top");
+      (0, _vitest.expect)(flow.nodes.value[0].position.y).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[1].position.y).toBe(0);
+      (0, _vitest.expect)(flow.nodes.value[2].position.y).toBe(0);
+    });
+    (0, _vitest.it)("should align to bottom edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 50
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }];
+      const {
+        alignNodesVertical
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesVertical(["1", "2"], "bottom");
+      (0, _vitest.expect)(flow.nodes.value[0].position.y).toBe(50);
+      (0, _vitest.expect)(flow.nodes.value[1].position.y).toBe(50);
+    });
+    (0, _vitest.it)("should align to middle", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [{
+        id: "1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {},
+        width: 100,
+        height: 50
+      }, {
+        id: "2",
+        type: "default",
+        position: {
+          x: 0,
+          y: 50
+        },
+        data: {},
+        width: 100,
+        height: 100
+      }];
+      const {
+        alignNodesVertical
+      } = (0, _useNodeDistribution.useNodeDistribution)({
+        nodes: flow.nodes
+      });
+      alignNodesVertical(["1", "2"], "middle");
+      (0, _vitest.expect)(flow.nodes.value[0].position.y).toBe(37.5);
+      (0, _vitest.expect)(flow.nodes.value[1].position.y).toBe(12.5);
+    });
+  });
+});

package/dist/__tests__/useNodeDistribution.test.d.ts

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