@yh-ui/flow 0.1.21

package/dist/__tests__/useEdges.test.mjs

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { ref } from "vue";
+import { useEdges } from "../core/useEdges.mjs";
+const node = (id) => ({ id, type: "default", position: { x: 0, y: 0 }, data: {} });
+const edge = (id, source, target) => ({
+  id,
+  source,
+  target,
+  type: "bezier"
+});
+describe("flow/core/useEdges", () => {
+  it("should add and remove edge", () => {
+    const edges = ref([]);
+    const nodes = ref([node("1"), node("2")]);
+    const e = useEdges({ edges, nodes });
+    e.addEdge(edge("e1", "1", "2"));
+    expect(edges.value).toHaveLength(1);
+    expect(e.getEdge("e1")).toBeDefined();
+    e.removeEdge("e1");
+    expect(edges.value).toHaveLength(0);
+  });
+  it("should not add duplicate connection", () => {
+    const edges = ref([edge("e1", "1", "2")]);
+    const nodes = ref([node("1"), node("2")]);
+    const e = useEdges({ edges, nodes });
+    e.addEdge(edge("e2", "1", "2"));
+    expect(edges.value).toHaveLength(1);
+  });
+  it("should respect isValidConnection", () => {
+    const edges = ref([]);
+    const nodes = ref([node("1"), node("2"), node("3")]);
+    const e = useEdges({
+      edges,
+      nodes,
+      isValidConnection: (c) => c.target !== "2"
+    });
+    e.addEdge(edge("e1", "1", "2"));
+    expect(edges.value).toHaveLength(0);
+    e.addEdge(edge("e2", "1", "3"));
+    expect(edges.value).toHaveLength(1);
+  });
+  it("should update edge", () => {
+    const edges = ref([edge("e1", "1", "2")]);
+    const nodes = ref([node("1"), node("2")]);
+    const e = useEdges({ edges, nodes });
+    e.updateEdge("e1", { label: "updated", type: "straight" });
+    expect(edges.value[0].label).toBe("updated");
+    expect(edges.value[0].type).toBe("straight");
+  });
+  it("should select edge single and multi", () => {
+    const edges = ref([
+      { ...edge("e1", "1", "2"), selected: true },
+      { ...edge("e2", "2", "3"), selected: false }
+    ]);
+    const nodes = ref([node("1"), node("2"), node("3")]);
+    const e = useEdges({ edges, nodes });
+    e.selectEdge("e2", true, false);
+    expect(edges.value.find((x) => x.id === "e1")?.selected).toBe(false);
+    expect(edges.value.find((x) => x.id === "e2")?.selected).toBe(true);
+    e.selectEdge("e1", true, true);
+    expect(edges.value.filter((x) => x.selected)).toHaveLength(2);
+  });
+  it("should getEdgesForNode and getConnectedEdges", () => {
+    const edges = ref([edge("e1", "1", "2"), edge("e2", "2", "3"), edge("e3", "1", "3")]);
+    const nodes = ref([node("1"), node("2"), node("3")]);
+    const e = useEdges({ edges, nodes });
+    expect(e.getEdgesForNode("1")).toHaveLength(2);
+    expect(e.getConnectedEdges("2")).toHaveLength(2);
+  });
+  it("should clearSelection and setEdges", () => {
+    const edges = ref([{ ...edge("e1", "1", "2"), selected: true }]);
+    const nodes = ref([node("1"), node("2")]);
+    const e = useEdges({ edges, nodes });
+    e.clearSelection();
+    expect(edges.value[0].selected).toBeFalsy();
+    e.setEdges([edge("e2", "1", "2")]);
+    expect(edges.value).toHaveLength(1);
+    expect(edges.value[0].id).toBe("e2");
+  });
+});

package/dist/__tests__/useKeyboard.test.cjs

@@ -0,0 +1,88 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _useKeyboard = require("../core/useKeyboard.cjs");
+(0, _vitest.describe)("flow/core/useKeyboard", () => {
+  const createKeyEvent = (key, opts = {}) => new KeyboardEvent("keydown", {
+    key,
+    ctrlKey: opts.ctrlKey ?? false,
+    metaKey: opts.metaKey ?? false,
+    shiftKey: opts.shiftKey ?? false
+  });
+  (0, _vitest.it)("should call onDelete on Delete key", () => {
+    const onDelete = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onDelete
+    });
+    k.handleKeyDown(createKeyEvent("Delete"));
+    (0, _vitest.expect)(onDelete).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)("should call onUndo on Ctrl+Z", () => {
+    const onUndo = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onUndo
+    });
+    k.handleKeyDown(createKeyEvent("z", {
+      ctrlKey: true
+    }));
+    (0, _vitest.expect)(onUndo).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)("should call onRedo on Ctrl+Shift+Z", () => {
+    const onRedo = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onRedo
+    });
+    k.handleKeyDown(createKeyEvent("z", {
+      ctrlKey: true,
+      shiftKey: true
+    }));
+    (0, _vitest.expect)(onRedo).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)("should call onSelectAll on Ctrl+A", () => {
+    const onSelectAll = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onSelectAll
+    });
+    k.handleKeyDown(createKeyEvent("a", {
+      ctrlKey: true
+    }));
+    (0, _vitest.expect)(onSelectAll).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)("should call onEscape on Escape", () => {
+    const onEscape = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onEscape
+    });
+    k.handleKeyDown(createKeyEvent("Escape"));
+    (0, _vitest.expect)(onEscape).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)("should not fire when enabled false", () => {
+    const onDelete = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      enabled: false,
+      onDelete
+    });
+    k.handleKeyDown(createKeyEvent("Delete"));
+    (0, _vitest.expect)(onDelete).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)("should call onCopy on Ctrl+C and onPaste on Ctrl+V", () => {
+    const onCopy = _vitest.vi.fn();
+    const onPaste = _vitest.vi.fn();
+    const k = (0, _useKeyboard.useKeyboard)({
+      onCopy,
+      onPaste
+    });
+    k.handleKeyDown(createKeyEvent("c", {
+      ctrlKey: true
+    }));
+    (0, _vitest.expect)(onCopy).toHaveBeenCalledTimes(1);
+    k.handleKeyDown(createKeyEvent("v", {
+      ctrlKey: true
+    }));
+    (0, _vitest.expect)(onPaste).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onPaste).toHaveBeenCalledWith({
+      nodes: [],
+      edges: []
+    });
+  });
+});

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

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

package/dist/__tests__/useKeyboard.test.mjs

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { useKeyboard } from "../core/useKeyboard.mjs";
+describe("flow/core/useKeyboard", () => {
+  const createKeyEvent = (key, opts = {}) => new KeyboardEvent("keydown", {
+    key,
+    ctrlKey: opts.ctrlKey ?? false,
+    metaKey: opts.metaKey ?? false,
+    shiftKey: opts.shiftKey ?? false
+  });
+  it("should call onDelete on Delete key", () => {
+    const onDelete = vi.fn();
+    const k = useKeyboard({ onDelete });
+    k.handleKeyDown(createKeyEvent("Delete"));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+  it("should call onUndo on Ctrl+Z", () => {
+    const onUndo = vi.fn();
+    const k = useKeyboard({ onUndo });
+    k.handleKeyDown(createKeyEvent("z", { ctrlKey: true }));
+    expect(onUndo).toHaveBeenCalledTimes(1);
+  });
+  it("should call onRedo on Ctrl+Shift+Z", () => {
+    const onRedo = vi.fn();
+    const k = useKeyboard({ onRedo });
+    k.handleKeyDown(createKeyEvent("z", { ctrlKey: true, shiftKey: true }));
+    expect(onRedo).toHaveBeenCalledTimes(1);
+  });
+  it("should call onSelectAll on Ctrl+A", () => {
+    const onSelectAll = vi.fn();
+    const k = useKeyboard({ onSelectAll });
+    k.handleKeyDown(createKeyEvent("a", { ctrlKey: true }));
+    expect(onSelectAll).toHaveBeenCalledTimes(1);
+  });
+  it("should call onEscape on Escape", () => {
+    const onEscape = vi.fn();
+    const k = useKeyboard({ onEscape });
+    k.handleKeyDown(createKeyEvent("Escape"));
+    expect(onEscape).toHaveBeenCalledTimes(1);
+  });
+  it("should not fire when enabled false", () => {
+    const onDelete = vi.fn();
+    const k = useKeyboard({ enabled: false, onDelete });
+    k.handleKeyDown(createKeyEvent("Delete"));
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+  it("should call onCopy on Ctrl+C and onPaste on Ctrl+V", () => {
+    const onCopy = vi.fn();
+    const onPaste = vi.fn();
+    const k = useKeyboard({ onCopy, onPaste });
+    k.handleKeyDown(createKeyEvent("c", { ctrlKey: true }));
+    expect(onCopy).toHaveBeenCalledTimes(1);
+    k.handleKeyDown(createKeyEvent("v", { ctrlKey: true }));
+    expect(onPaste).toHaveBeenCalledTimes(1);
+    expect(onPaste).toHaveBeenCalledWith({ nodes: [], edges: [] });
+  });
+});

package/dist/__tests__/useNodes.test.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _useNodes = require("../core/useNodes.cjs");
+const defaultNode = (id, x = 0, y = 0) => ({
+  id,
+  type: "default",
+  position: {
+    x,
+    y
+  },
+  data: {
+    label: id
+  },
+  width: 160,
+  height: 50
+});
+(0, _vitest.describe)("flow/core/useNodes", () => {
+  (0, _vitest.it)("should add and remove node", () => {
+    const nodes = (0, _vue.ref)([]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.addNode(defaultNode("1"));
+    (0, _vitest.expect)(nodes.value).toHaveLength(1);
+    (0, _vitest.expect)(n.getNode("1")).toBeDefined();
+    n.removeNode("1");
+    (0, _vitest.expect)(nodes.value).toHaveLength(0);
+    (0, _vitest.expect)(n.getNode("1")).toBeUndefined();
+  });
+  (0, _vitest.it)("should update node and position", () => {
+    const nodes = (0, _vue.ref)([defaultNode("1", 10, 20)]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.updateNode("1", {
+      data: {
+        label: "updated"
+      }
+    });
+    (0, _vitest.expect)(nodes.value[0].data?.label).toBe("updated");
+    n.updateNodePosition("1", {
+      x: 100,
+      y: 200
+    });
+    (0, _vitest.expect)(nodes.value[0].position).toEqual({
+      x: 100,
+      y: 200
+    });
+  });
+  (0, _vitest.it)("should snap position to grid when snapToGrid true", () => {
+    const nodes = (0, _vue.ref)([defaultNode("1", 0, 0)]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes,
+      snapToGrid: true,
+      snapGrid: [20, 20]
+    });
+    n.updateNodePosition("1", {
+      x: 17,
+      y: 23
+    });
+    (0, _vitest.expect)(nodes.value[0].position.x).toBe(20);
+    (0, _vitest.expect)(nodes.value[0].position.y).toBe(20);
+  });
+  (0, _vitest.it)("should select single node (clear others when multi false)", () => {
+    const nodes = (0, _vue.ref)([{
+      ...defaultNode("1"),
+      selected: true
+    }, {
+      ...defaultNode("2"),
+      selected: false
+    }]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.selectNode("2", true, false);
+    (0, _vitest.expect)(nodes.value.find(x => x.id === "1")?.selected).toBe(false);
+    (0, _vitest.expect)(nodes.value.find(x => x.id === "2")?.selected).toBe(true);
+  });
+  (0, _vitest.it)("should multi-select when multi true", () => {
+    const nodes = (0, _vue.ref)([{
+      ...defaultNode("1"),
+      selected: true
+    }, {
+      ...defaultNode("2"),
+      selected: false
+    }]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.selectNode("2", true, true);
+    (0, _vitest.expect)(nodes.value.find(x => x.id === "1")?.selected).toBe(true);
+    (0, _vitest.expect)(nodes.value.find(x => x.id === "2")?.selected).toBe(true);
+  });
+  (0, _vitest.it)("should selectNodes and clearSelection", () => {
+    const nodes = (0, _vue.ref)([defaultNode("1"), defaultNode("2"), defaultNode("3")]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.selectNodes(["1", "3"], true);
+    (0, _vitest.expect)(n.getSelectedNodes()).toHaveLength(2);
+    n.clearSelection();
+    (0, _vitest.expect)(n.getSelectedNodes()).toHaveLength(0);
+  });
+  (0, _vitest.it)("should setNodes and findNode", () => {
+    const nodes = (0, _vue.ref)([]);
+    const viewport = (0, _vue.ref)({
+      x: 0,
+      y: 0,
+      zoom: 1
+    });
+    const n = (0, _useNodes.useNodes)(viewport, {
+      nodes
+    });
+    n.setNodes([defaultNode("a"), defaultNode("b")]);
+    (0, _vitest.expect)(nodes.value).toHaveLength(2);
+    (0, _vitest.expect)(n.findNode("b")?.id).toBe("b");
+  });
+});

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

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

package/dist/__tests__/useNodes.test.mjs

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { ref } from "vue";
+import { useNodes } from "../core/useNodes.mjs";
+const defaultNode = (id, x = 0, y = 0) => ({
+  id,
+  type: "default",
+  position: { x, y },
+  data: { label: id },
+  width: 160,
+  height: 50
+});
+describe("flow/core/useNodes", () => {
+  it("should add and remove node", () => {
+    const nodes = ref([]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.addNode(defaultNode("1"));
+    expect(nodes.value).toHaveLength(1);
+    expect(n.getNode("1")).toBeDefined();
+    n.removeNode("1");
+    expect(nodes.value).toHaveLength(0);
+    expect(n.getNode("1")).toBeUndefined();
+  });
+  it("should update node and position", () => {
+    const nodes = ref([defaultNode("1", 10, 20)]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.updateNode("1", { data: { label: "updated" } });
+    expect(nodes.value[0].data?.label).toBe("updated");
+    n.updateNodePosition("1", { x: 100, y: 200 });
+    expect(nodes.value[0].position).toEqual({ x: 100, y: 200 });
+  });
+  it("should snap position to grid when snapToGrid true", () => {
+    const nodes = ref([defaultNode("1", 0, 0)]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes, snapToGrid: true, snapGrid: [20, 20] });
+    n.updateNodePosition("1", { x: 17, y: 23 });
+    expect(nodes.value[0].position.x).toBe(20);
+    expect(nodes.value[0].position.y).toBe(20);
+  });
+  it("should select single node (clear others when multi false)", () => {
+    const nodes = ref([
+      { ...defaultNode("1"), selected: true },
+      { ...defaultNode("2"), selected: false }
+    ]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.selectNode("2", true, false);
+    expect(nodes.value.find((x) => x.id === "1")?.selected).toBe(false);
+    expect(nodes.value.find((x) => x.id === "2")?.selected).toBe(true);
+  });
+  it("should multi-select when multi true", () => {
+    const nodes = ref([
+      { ...defaultNode("1"), selected: true },
+      { ...defaultNode("2"), selected: false }
+    ]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.selectNode("2", true, true);
+    expect(nodes.value.find((x) => x.id === "1")?.selected).toBe(true);
+    expect(nodes.value.find((x) => x.id === "2")?.selected).toBe(true);
+  });
+  it("should selectNodes and clearSelection", () => {
+    const nodes = ref([defaultNode("1"), defaultNode("2"), defaultNode("3")]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.selectNodes(["1", "3"], true);
+    expect(n.getSelectedNodes()).toHaveLength(2);
+    n.clearSelection();
+    expect(n.getSelectedNodes()).toHaveLength(0);
+  });
+  it("should setNodes and findNode", () => {
+    const nodes = ref([]);
+    const viewport = ref({ x: 0, y: 0, zoom: 1 });
+    const n = useNodes(viewport, { nodes });
+    n.setNodes([defaultNode("a"), defaultNode("b")]);
+    expect(nodes.value).toHaveLength(2);
+    expect(n.findNode("b")?.id).toBe("b");
+  });
+});

package/dist/__tests__/useSelection.test.cjs

@@ -0,0 +1,112 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _vue = require("vue");
+var _useSelection = require("../core/useSelection.cjs");
+const node = (id, x, y, w = 100, h = 50) => ({
+  id,
+  type: "default",
+  position: {
+    x,
+    y
+  },
+  data: {},
+  width: w,
+  height: h,
+  selected: false
+});
+const edge = (id, source, target) => ({
+  id,
+  source,
+  target,
+  type: "bezier",
+  selected: false
+});
+(0, _vitest.describe)("flow/core/useSelection", () => {
+  (0, _vitest.it)("should start and update selection rect", () => {
+    const nodes = (0, _vue.ref)([node("1", 0, 0), node("2", 200, 100)]);
+    const edges = (0, _vue.ref)([]);
+    const s = (0, _useSelection.useSelection)({
+      nodes,
+      edges
+    });
+    s.startSelection(10, 20);
+    (0, _vitest.expect)(s.isSelecting.value).toBe(true);
+    (0, _vitest.expect)(s.selectionRect.value).toEqual({
+      x: 10,
+      y: 20,
+      width: 0,
+      height: 0
+    });
+    s.updateSelection(50, 60);
+    (0, _vitest.expect)(s.selectionRect.value).toEqual({
+      x: 10,
+      y: 20,
+      width: 40,
+      height: 40
+    });
+  });
+  (0, _vitest.it)("should select nodes inside rect on updateSelection", () => {
+    const nodes = (0, _vue.ref)([node("1", 20, 20, 50, 50), node("2", 100, 100, 50, 50)]);
+    const edges = (0, _vue.ref)([]);
+    const s = (0, _useSelection.useSelection)({
+      nodes,
+      edges
+    });
+    s.startSelection(0, 0);
+    s.updateSelection(80, 80);
+    (0, _vitest.expect)(nodes.value.find(n => n.id === "1")?.selected).toBe(true);
+    (0, _vitest.expect)(nodes.value.find(n => n.id === "2")?.selected).toBe(false);
+  });
+  (0, _vitest.it)("should end selection and clear rect", () => {
+    const nodes = (0, _vue.ref)([node("1", 0, 0)]);
+    const edges = (0, _vue.ref)([]);
+    const s = (0, _useSelection.useSelection)({
+      nodes,
+      edges
+    });
+    s.startSelection(0, 0);
+    s.updateSelection(10, 10);
+    s.endSelection();
+    (0, _vitest.expect)(s.isSelecting.value).toBe(false);
+    (0, _vitest.expect)(s.selectionRect.value).toBeNull();
+  });
+  (0, _vitest.it)("should clearSelection clear nodes and edges selected", () => {
+    const nodes = (0, _vue.ref)([{
+      ...node("1", 0, 0),
+      selected: true
+    }]);
+    const edges = (0, _vue.ref)([{
+      ...edge("e1", "1", "2"),
+      selected: true
+    }]);
+    const s = (0, _useSelection.useSelection)({
+      nodes,
+      edges
+    });
+    s.clearSelection();
+    (0, _vitest.expect)(nodes.value[0].selected).toBeFalsy();
+    (0, _vitest.expect)(edges.value[0].selected).toBeFalsy();
+  });
+  (0, _vitest.it)("should call onSelectionChange on endSelection", () => {
+    const nodes = (0, _vue.ref)([node("1", 20, 20, 50, 50)]);
+    const edges = (0, _vue.ref)([]);
+    let captured = null;
+    const s = (0, _useSelection.useSelection)({
+      nodes,
+      edges,
+      onSelectionChange: (selectedNodes, selectedEdges) => {
+        captured = {
+          nodes: selectedNodes,
+          edges: selectedEdges
+        };
+      }
+    });
+    s.startSelection(0, 0);
+    s.updateSelection(80, 80);
+    s.endSelection();
+    (0, _vitest.expect)(captured).not.toBeNull();
+    (0, _vitest.expect)(Array.isArray(captured.nodes)).toBe(true);
+    (0, _vitest.expect)(Array.isArray(captured.edges)).toBe(true);
+  });
+});

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

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

package/dist/__tests__/useSelection.test.mjs

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import { ref } from "vue";
+import { useSelection } from "../core/useSelection.mjs";
+const node = (id, x, y, w = 100, h = 50) => ({
+  id,
+  type: "default",
+  position: { x, y },
+  data: {},
+  width: w,
+  height: h,
+  selected: false
+});
+const edge = (id, source, target) => ({
+  id,
+  source,
+  target,
+  type: "bezier",
+  selected: false
+});
+describe("flow/core/useSelection", () => {
+  it("should start and update selection rect", () => {
+    const nodes = ref([node("1", 0, 0), node("2", 200, 100)]);
+    const edges = ref([]);
+    const s = useSelection({ nodes, edges });
+    s.startSelection(10, 20);
+    expect(s.isSelecting.value).toBe(true);
+    expect(s.selectionRect.value).toEqual({ x: 10, y: 20, width: 0, height: 0 });
+    s.updateSelection(50, 60);
+    expect(s.selectionRect.value).toEqual({ x: 10, y: 20, width: 40, height: 40 });
+  });
+  it("should select nodes inside rect on updateSelection", () => {
+    const nodes = ref([node("1", 20, 20, 50, 50), node("2", 100, 100, 50, 50)]);
+    const edges = ref([]);
+    const s = useSelection({ nodes, edges });
+    s.startSelection(0, 0);
+    s.updateSelection(80, 80);
+    expect(nodes.value.find((n) => n.id === "1")?.selected).toBe(true);
+    expect(nodes.value.find((n) => n.id === "2")?.selected).toBe(false);
+  });
+  it("should end selection and clear rect", () => {
+    const nodes = ref([node("1", 0, 0)]);
+    const edges = ref([]);
+    const s = useSelection({ nodes, edges });
+    s.startSelection(0, 0);
+    s.updateSelection(10, 10);
+    s.endSelection();
+    expect(s.isSelecting.value).toBe(false);
+    expect(s.selectionRect.value).toBeNull();
+  });
+  it("should clearSelection clear nodes and edges selected", () => {
+    const nodes = ref([{ ...node("1", 0, 0), selected: true }]);
+    const edges = ref([{ ...edge("e1", "1", "2"), selected: true }]);
+    const s = useSelection({ nodes, edges });
+    s.clearSelection();
+    expect(nodes.value[0].selected).toBeFalsy();
+    expect(edges.value[0].selected).toBeFalsy();
+  });
+  it("should call onSelectionChange on endSelection", () => {
+    const nodes = ref([node("1", 20, 20, 50, 50)]);
+    const edges = ref([]);
+    let captured = null;
+    const s = useSelection({
+      nodes,
+      edges,
+      onSelectionChange: (selectedNodes, selectedEdges) => {
+        captured = { nodes: selectedNodes, edges: selectedEdges };
+      }
+    });
+    s.startSelection(0, 0);
+    s.updateSelection(80, 80);
+    s.endSelection();
+    expect(captured).not.toBeNull();
+    expect(Array.isArray(captured.nodes)).toBe(true);
+    expect(Array.isArray(captured.edges)).toBe(true);
+  });
+});