@yh-ui/flow 0.1.21

package/dist/__tests__/node-edit-panel.ssr.test.cjs

@@ -0,0 +1,168 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _NodeEditPanel = _interopRequireDefault(require("../components/NodeEditPanel.vue"));
+var _ssr = require("./utils/ssr.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)("NodeEditPanel SSR", () => {
+  (0, _vitest.it)("should render NodeEditPanel in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Test Node"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render with label field in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "My Node"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render with style fields in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Style Node"
+        },
+        style: {
+          backgroundColor: "#ff0000"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render with selected class when selected in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Selected Node"
+        },
+        selected: true
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should not render when visible is false in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: false,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Hidden Node"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render close button in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Test"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render with width and height fields in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Sized Node"
+        },
+        width: 200,
+        height: 100
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should render with node ID field in SSR", async () => {
+    const html = await (0, _ssr.renderSSR)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "custom-node-id",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "ID Node"
+        }
+      }
+    });
+    (0, _vitest.expect)(html).toBeDefined();
+  });
+  (0, _vitest.it)("should hydrate without mismatch", async () => {
+    const result = await (0, _ssr.testHydration)(_NodeEditPanel.default, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: {
+          x: 0,
+          y: 0
+        },
+        data: {
+          label: "Hydrate Test"
+        }
+      }
+    });
+    (0, _vitest.expect)(result.ssrHtml).toBeDefined();
+    (0, _vitest.expect)(result.csrHtml).toBeDefined();
+  });
+});

package/dist/__tests__/node-edit-panel.ssr.test.d.ts

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

package/dist/__tests__/node-edit-panel.ssr.test.mjs

@@ -0,0 +1,118 @@
+import { describe, it, expect } from "vitest";
+import NodeEditPanel from "../components/NodeEditPanel.vue";
+import { renderSSR, testHydration } from "./utils/ssr.mjs";
+describe("NodeEditPanel SSR", () => {
+  it("should render NodeEditPanel in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Test Node" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render with label field in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "My Node" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render with style fields in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Style Node" },
+        style: { backgroundColor: "#ff0000" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render with selected class when selected in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Selected Node" },
+        selected: true
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should not render when visible is false in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: false,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Hidden Node" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render close button in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Test" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render with width and height fields in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Sized Node" },
+        width: 200,
+        height: 100
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should render with node ID field in SSR", async () => {
+    const html = await renderSSR(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "custom-node-id",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "ID Node" }
+      }
+    });
+    expect(html).toBeDefined();
+  });
+  it("should hydrate without mismatch", async () => {
+    const result = await testHydration(NodeEditPanel, {
+      visible: true,
+      node: {
+        id: "node-1",
+        type: "default",
+        position: { x: 0, y: 0 },
+        data: { label: "Hydrate Test" }
+      }
+    });
+    expect(result.ssrHtml).toBeDefined();
+    expect(result.csrHtml).toBeDefined();
+  });
+});

package/dist/__tests__/node-group-plugin.test.cjs

@@ -0,0 +1,235 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _nodeGroup = require("../plugins/plugins/node-group.cjs");
+function createMockFlow(initialNodes = [], initialEdges = []) {
+  const nodes = (0, _vue.ref)(initialNodes);
+  const edges = (0, _vue.ref)(initialEdges);
+  const flow = {
+    nodes,
+    edges,
+    viewport: (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    }),
+    addNode: _vitest.vi.fn(node => {
+      nodes.value = [...nodes.value, node];
+    }),
+    removeNode: _vitest.vi.fn(id => {
+      nodes.value = nodes.value.filter(n => n.id !== id);
+    }),
+    updateNode: _vitest.vi.fn((id, data) => {
+      nodes.value = nodes.value.map(n => n.id === id ? {
+        ...n,
+        ...data
+      } : n);
+    }),
+    getNode: _vitest.vi.fn(id => nodes.value.find(n => n.id === id)),
+    addEdge: _vitest.vi.fn(),
+    removeEdge: _vitest.vi.fn(),
+    updateEdge: _vitest.vi.fn((id, data) => {
+      edges.value = edges.value.map(e => e.id === id ? {
+        ...e,
+        ...data
+      } : e);
+    }),
+    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: () => nodes.value,
+    getEdges: () => edges.value,
+    getViewport: () => ({
+      x: 0,
+      y: 0,
+      zoom: 1
+    }),
+    screenToCanvas: _vitest.vi.fn().mockReturnValue({
+      x: 0,
+      y: 0
+    }),
+    canvasToScreen: _vitest.vi.fn().mockReturnValue({
+      x: 0,
+      y: 0
+    }),
+    on: _vitest.vi.fn(),
+    off: _vitest.vi.fn(),
+    emit: _vitest.vi.fn(),
+    isValidConnection: _vitest.vi.fn().mockReturnValue(true),
+    $el: void 0,
+    draggingNodeId: (0, _vue.ref)(null),
+    draggingPosition: (0, _vue.ref)(null),
+    usePlugin: _vitest.vi.fn(),
+    removePlugin: _vitest.vi.fn()
+  };
+  return flow;
+}
+(0, _vitest.describe)("createNodeGroupPlugin", () => {
+  (0, _vitest.it)("should be created with correct metadata", () => {
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    (0, _vitest.expect)(plugin.id).toBe("node-group");
+    (0, _vitest.expect)(plugin.name).toBe("NodeGroup");
+  });
+  (0, _vitest.it)("should expose groupSelectedNodes on flow instance after install", () => {
+    const flow = createMockFlow();
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    plugin.install(flow);
+    (0, _vitest.expect)(typeof flow.groupSelectedNodes).toBe("function");
+    (0, _vitest.expect)(typeof flow.ungroupNodes).toBe("function");
+    (0, _vitest.expect)(typeof flow.toggleGroupCollapse).toBe("function");
+    (0, _vitest.expect)(typeof flow.isGroupCollapsed).toBe("function");
+    (0, _vitest.expect)(typeof flow.getGroupChildren).toBe("function");
+    (0, _vitest.expect)(typeof flow.getGroupRegistry).toBe("function");
+  });
+  (0, _vitest.it)("should return null when fewer than 2 nodes are selected", () => {
+    const nodes = [{
+      id: "1",
+      type: "default",
+      position: {
+        x: 0,
+        y: 0
+      },
+      data: {},
+      selected: true
+    }];
+    const flow = createMockFlow(nodes);
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    plugin.install(flow);
+    const result = flow.groupSelectedNodes;
+    (0, _vitest.expect)(result()).toBeNull();
+  });
+  (0, _vitest.it)("should create a group node when 2+ nodes are selected", () => {
+    const nodes = [{
+      id: "1",
+      type: "default",
+      position: {
+        x: 100,
+        y: 100
+      },
+      data: {},
+      selected: true,
+      width: 150,
+      height: 50
+    }, {
+      id: "2",
+      type: "default",
+      position: {
+        x: 300,
+        y: 100
+      },
+      data: {},
+      selected: true,
+      width: 150,
+      height: 50
+    }];
+    const flow = createMockFlow(nodes);
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)({
+      groupIdPrefix: "grp"
+    });
+    plugin.install(flow);
+    const groupSelected = flow.groupSelectedNodes;
+    const groupId = groupSelected("Test Group");
+    (0, _vitest.expect)(groupId).toBeTruthy();
+    (0, _vitest.expect)(groupId).toMatch(/^grp-/);
+    (0, _vitest.expect)(flow.addNode).toHaveBeenCalled();
+  });
+  (0, _vitest.it)("should register group info in registry after grouping", () => {
+    const nodes = [{
+      id: "a",
+      type: "default",
+      position: {
+        x: 50,
+        y: 50
+      },
+      data: {},
+      selected: true,
+      width: 100,
+      height: 50
+    }, {
+      id: "b",
+      type: "default",
+      position: {
+        x: 200,
+        y: 50
+      },
+      data: {},
+      selected: true,
+      width: 100,
+      height: 50
+    }];
+    const flow = createMockFlow(nodes);
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    plugin.install(flow);
+    const groupSelected = flow.groupSelectedNodes;
+    const groupId = groupSelected();
+    const registry = flow.getGroupRegistry();
+    (0, _vitest.expect)(registry.has(groupId)).toBe(true);
+  });
+  (0, _vitest.it)("should toggle group collapse and hide children", () => {
+    const childNodes = [{
+      id: "c1",
+      type: "default",
+      position: {
+        x: 20,
+        y: 20
+      },
+      data: {},
+      parentId: "group-1",
+      width: 100,
+      height: 40
+    }];
+    const flow = createMockFlow(childNodes);
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    plugin.install(flow);
+    const registry = flow.getGroupRegistry();
+    registry.set("group-1", {
+      groupId: "group-1",
+      childIds: ["c1"],
+      collapsed: false,
+      originalPositions: {}
+    });
+    flow.nodes.value.push({
+      id: "group-1",
+      type: "group",
+      position: {
+        x: 0,
+        y: 0
+      },
+      data: {},
+      style: {
+        width: 200,
+        height: 150
+      },
+      width: 200,
+      height: 150
+    });
+    const toggleCollapse = flow.toggleGroupCollapse;
+    toggleCollapse("group-1");
+    (0, _vitest.expect)(flow.updateNode).toHaveBeenCalledWith("c1", _vitest.expect.objectContaining({
+      hidden: true
+    }));
+  });
+  (0, _vitest.it)("should cleanup registry on destroy", () => {
+    const flow = createMockFlow();
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)();
+    plugin.install(flow);
+    plugin.destroy?.();
+    const registry = flow.getGroupRegistry();
+    (0, _vitest.expect)(registry.size).toBe(0);
+  });
+  (0, _vitest.it)("should not install when disabled", () => {
+    const flow = createMockFlow();
+    const plugin = (0, _nodeGroup.createNodeGroupPlugin)({
+      enabled: false
+    });
+    plugin.install(flow);
+    (0, _vitest.expect)(flow.groupSelectedNodes).toBeUndefined();
+  });
+});

package/dist/__tests__/node-group-plugin.test.d.ts

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

package/dist/__tests__/node-group-plugin.test.mjs

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref } from "vue";
+import { createNodeGroupPlugin } from "../plugins/plugins/node-group.mjs";
+function createMockFlow(initialNodes = [], initialEdges = []) {
+  const nodes = ref(initialNodes);
+  const edges = ref(initialEdges);
+  const flow = {
+    nodes,
+    edges,
+    viewport: ref({ x: 0, y: 0, zoom: 1 }),
+    addNode: vi.fn((node) => {
+      nodes.value = [...nodes.value, node];
+    }),
+    removeNode: vi.fn((id) => {
+      nodes.value = nodes.value.filter((n) => n.id !== id);
+    }),
+    updateNode: vi.fn((id, data) => {
+      nodes.value = nodes.value.map((n) => n.id === id ? { ...n, ...data } : n);
+    }),
+    getNode: vi.fn((id) => nodes.value.find((n) => n.id === id)),
+    addEdge: vi.fn(),
+    removeEdge: vi.fn(),
+    updateEdge: vi.fn((id, data) => {
+      edges.value = edges.value.map((e) => e.id === id ? { ...e, ...data } : e);
+    }),
+    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: () => nodes.value,
+    getEdges: () => edges.value,
+    getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
+    screenToCanvas: vi.fn().mockReturnValue({ x: 0, y: 0 }),
+    canvasToScreen: vi.fn().mockReturnValue({ x: 0, y: 0 }),
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+    isValidConnection: vi.fn().mockReturnValue(true),
+    $el: void 0,
+    draggingNodeId: ref(null),
+    draggingPosition: ref(null),
+    usePlugin: vi.fn(),
+    removePlugin: vi.fn()
+  };
+  return flow;
+}
+describe("createNodeGroupPlugin", () => {
+  it("should be created with correct metadata", () => {
+    const plugin = createNodeGroupPlugin();
+    expect(plugin.id).toBe("node-group");
+    expect(plugin.name).toBe("NodeGroup");
+  });
+  it("should expose groupSelectedNodes on flow instance after install", () => {
+    const flow = createMockFlow();
+    const plugin = createNodeGroupPlugin();
+    plugin.install(flow);
+    expect(typeof flow.groupSelectedNodes).toBe("function");
+    expect(typeof flow.ungroupNodes).toBe("function");
+    expect(typeof flow.toggleGroupCollapse).toBe("function");
+    expect(typeof flow.isGroupCollapsed).toBe("function");
+    expect(typeof flow.getGroupChildren).toBe("function");
+    expect(typeof flow.getGroupRegistry).toBe("function");
+  });
+  it("should return null when fewer than 2 nodes are selected", () => {
+    const nodes = [
+      { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, selected: true }
+    ];
+    const flow = createMockFlow(nodes);
+    const plugin = createNodeGroupPlugin();
+    plugin.install(flow);
+    const result = flow.groupSelectedNodes;
+    expect(result()).toBeNull();
+  });
+  it("should create a group node when 2+ nodes are selected", () => {
+    const nodes = [
+      {
+        id: "1",
+        type: "default",
+        position: { x: 100, y: 100 },
+        data: {},
+        selected: true,
+        width: 150,
+        height: 50
+      },
+      {
+        id: "2",
+        type: "default",
+        position: { x: 300, y: 100 },
+        data: {},
+        selected: true,
+        width: 150,
+        height: 50
+      }
+    ];
+    const flow = createMockFlow(nodes);
+    const plugin = createNodeGroupPlugin({ groupIdPrefix: "grp" });
+    plugin.install(flow);
+    const groupSelected = flow.groupSelectedNodes;
+    const groupId = groupSelected("Test Group");
+    expect(groupId).toBeTruthy();
+    expect(groupId).toMatch(/^grp-/);
+    expect(flow.addNode).toHaveBeenCalled();
+  });
+  it("should register group info in registry after grouping", () => {
+    const nodes = [
+      {
+        id: "a",
+        type: "default",
+        position: { x: 50, y: 50 },
+        data: {},
+        selected: true,
+        width: 100,
+        height: 50
+      },
+      {
+        id: "b",
+        type: "default",
+        position: { x: 200, y: 50 },
+        data: {},
+        selected: true,
+        width: 100,
+        height: 50
+      }
+    ];
+    const flow = createMockFlow(nodes);
+    const plugin = createNodeGroupPlugin();
+    plugin.install(flow);
+    const groupSelected = flow.groupSelectedNodes;
+    const groupId = groupSelected();
+    const registry = flow.getGroupRegistry();
+    expect(registry.has(groupId)).toBe(true);
+  });
+  it("should toggle group collapse and hide children", () => {
+    const childNodes = [
+      {
+        id: "c1",
+        type: "default",
+        position: { x: 20, y: 20 },
+        data: {},
+        parentId: "group-1",
+        width: 100,
+        height: 40
+      }
+    ];
+    const flow = createMockFlow(childNodes);
+    const plugin = createNodeGroupPlugin();
+    plugin.install(flow);
+    const registry = flow.getGroupRegistry();
+    registry.set("group-1", {
+      groupId: "group-1",
+      childIds: ["c1"],
+      collapsed: false,
+      originalPositions: {}
+    });
+    flow.nodes.value.push({
+      id: "group-1",
+      type: "group",
+      position: { x: 0, y: 0 },
+      data: {},
+      style: { width: 200, height: 150 },
+      width: 200,
+      height: 150
+    });
+    const toggleCollapse = flow.toggleGroupCollapse;
+    toggleCollapse("group-1");
+    expect(flow.updateNode).toHaveBeenCalledWith("c1", expect.objectContaining({ hidden: true }));
+  });
+  it("should cleanup registry on destroy", () => {
+    const flow = createMockFlow();
+    const plugin = createNodeGroupPlugin();
+    plugin.install(flow);
+    plugin.destroy?.();
+    const registry = flow.getGroupRegistry();
+    expect(registry.size).toBe(0);
+  });
+  it("should not install when disabled", () => {
+    const flow = createMockFlow();
+    const plugin = createNodeGroupPlugin({ enabled: false });
+    plugin.install(flow);
+    expect(flow.groupSelectedNodes).toBeUndefined();
+  });
+});