feat: add four-direction quick-add controls to selected nodes

tests/canvas.test.mjs

@@ -1,6 +1,6 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { canvasReducer, canvasStorageKey, decodeCanvas, emptyCanvas, makeCanvasNode } from "../src/lib/canvas.ts";
+import { branchCanvasNode, canvasReducer, canvasStorageKey, decodeCanvas, emptyCanvas, makeCanvasNode } from "../src/lib/canvas.ts";
 
 function seeded() {
   const document = emptyCanvas();
@@ -87,3 +87,39 @@ test("undo history is bounded and new edits clear the redo stack", () => {
   state = canvasReducer(state, { type: "nodes", changes: [{ type: "add", item: makeCanvasNode("text", { x: 0, y: 0 }) }] });
   assert.equal(state.future.length, 0);
 });
+
+
+test("selected nodes can branch in all four directions with matching connection handles", () => {
+  const opposite = { top: "bottom", right: "left", bottom: "top", left: "right" };
+  for (const direction of Object.keys(opposite)) {
+    const document = emptyCanvas();
+    const parent = makeCanvasNode("text", { x: 100, y: 100 });
+    document.nodes = [parent];
+    const branched = branchCanvasNode(document, parent.id, direction);
+    const child = branched.nodes[1];
+    if (direction === "top") assert(child.position.y < parent.position.y);
+    if (direction === "bottom") assert(child.position.y > parent.position.y);
+    if (direction === "left") assert(child.position.x < parent.position.x);
+    if (direction === "right") assert(child.position.x > parent.position.x);
+    assert.equal(child.selected, true);
+    assert.equal(branched.nodes[0].selected, false);
+    assert.equal(branched.edges[0].source, parent.id);
+    assert.equal(branched.edges[0].target, child.id);
+    assert.equal(branched.edges[0].sourceHandle, direction);
+    assert.equal(branched.edges[0].targetHandle, opposite[direction]);
+    assert.deepEqual(decodeCanvas(JSON.stringify(branched)).edges, branched.edges);
+    const history = canvasReducer({ past: [], present: document, future: [] }, { type: "replace", document: branched });
+    assert.equal(canvasReducer(history, { type: "undo" }).present.nodes.length, 1);
+    assert.equal(canvasReducer(history, { type: "undo" }).present.edges.length, 0);
+  }
+});
+
+test("repeated additions on the same side avoid existing nodes", () => {
+  const document = emptyCanvas();
+  const parent = makeCanvasNode("text", { x: 0, y: 0 });
+  document.nodes = [parent];
+  const first = branchCanvasNode(document, parent.id, "right");
+  const second = branchCanvasNode(first, parent.id, "right");
+  assert.notDeepEqual(first.nodes[1].position, second.nodes[2].position);
+  assert(second.nodes[2].position.y >= first.nodes[1].position.y + 200);
+});