@canvas-harness/core 0.0.5 → 0.1.0

package/dist/index.d.cts

@@ -1495,14 +1495,21 @@ interface CanvasStore {
      * Adds a node. Returns its id. If `node.style.autoFit !== false` and
      * `node.content` is set, height is grown to fit.
      *
+     * `z` is optional — omit to land on top of the current stack (uses
+     * the internal `topZ` counter). Pass a literal value (incl. `0` or
+     * negative) to place the node at that exact z.
+     *
      * @example
+     * // Omit z → goes on top of the current stack.
      * const id = store.addNode({
      *   id: asNodeId(store.generateId()),
      *   type: 'rect', x: 0, y: 0, w: 200, h: 100,
-     *   angle: 0, z: 0, groups: [],
+     *   angle: 0, groups: [],
      * })
      */
-    addNode(node: Node): NodeId;
+    addNode(node: Omit<Node, 'z'> & {
+        z?: number;
+    }): NodeId;
     /**
      * Patches fields on an existing node. Captures the previous slice on
      * the op so undo is free. Autofit re-runs when `content` or font
@@ -1566,8 +1573,13 @@ interface CanvasStore {
         alt?: string;
         style?: Style;
     }): Promise<NodeId>;
-    /** Adds an edge. Returns its id. */
-    addEdge(edge: Edge): EdgeId;
+    /**
+     * Adds an edge. Returns its id. `z` is optional — same auto-top
+     * semantics as {@link CanvasStore.addNode}.
+     */
+    addEdge(edge: Omit<Edge, 'z'> & {
+        z?: number;
+    }): EdgeId;
     /** Patches fields on an existing edge. */
     updateEdge(id: EdgeId, patch: Partial<Edge>): void;
     /** Removes an edge. */

package/dist/index.d.ts

@@ -1495,14 +1495,21 @@ interface CanvasStore {
      * Adds a node. Returns its id. If `node.style.autoFit !== false` and
      * `node.content` is set, height is grown to fit.
      *
+     * `z` is optional — omit to land on top of the current stack (uses
+     * the internal `topZ` counter). Pass a literal value (incl. `0` or
+     * negative) to place the node at that exact z.
+     *
      * @example
+     * // Omit z → goes on top of the current stack.
      * const id = store.addNode({
      *   id: asNodeId(store.generateId()),
      *   type: 'rect', x: 0, y: 0, w: 200, h: 100,
-     *   angle: 0, z: 0, groups: [],
+     *   angle: 0, groups: [],
      * })
      */
-    addNode(node: Node): NodeId;
+    addNode(node: Omit<Node, 'z'> & {
+        z?: number;
+    }): NodeId;
     /**
      * Patches fields on an existing node. Captures the previous slice on
      * the op so undo is free. Autofit re-runs when `content` or font
@@ -1566,8 +1573,13 @@ interface CanvasStore {
         alt?: string;
         style?: Style;
     }): Promise<NodeId>;
-    /** Adds an edge. Returns its id. */
-    addEdge(edge: Edge): EdgeId;
+    /**
+     * Adds an edge. Returns its id. `z` is optional — same auto-top
+     * semantics as {@link CanvasStore.addNode}.
+     */
+    addEdge(edge: Omit<Edge, 'z'> & {
+        z?: number;
+    }): EdgeId;
     /** Patches fields on an existing edge. */
     updateEdge(id: EdgeId, patch: Partial<Edge>): void;
     /** Removes an edge. */

package/dist/index.js

@@ -3242,8 +3242,15 @@ var createCanvasStore = (opts = {}) => {
   };
   const incidentEdges = /* @__PURE__ */ new Map();
   let topZ = 0;
-  for (const n of Object.values(initial.nodes)) if (n.z > topZ) topZ = n.z;
-  for (const e of Object.values(initial.edges)) if (e.z > topZ) topZ = e.z;
+  let bottomZ = 0;
+  for (const n of Object.values(initial.nodes)) {
+    if (n.z > topZ) topZ = n.z;
+    if (n.z < bottomZ) bottomZ = n.z;
+  }
+  for (const e of Object.values(initial.edges)) {
+    if (e.z > topZ) topZ = e.z;
+    if (e.z < bottomZ) bottomZ = e.z;
+  }
   const getNodeForGeo = (id) => nodeAtoms.get(id)?.value;
   let currentBatchOps = null;
   let batchDepth = 0;
@@ -3332,6 +3339,8 @@ var createCanvasStore = (opts = {}) => {
         nodeAtoms.set(op.node.id, a);
         nodeIdsAtom.update((ids) => [...ids, op.node.id]);
         reindexNode(op.node);
+        if (op.node.z > topZ) topZ = op.node.z;
+        if (op.node.z < bottomZ) bottomZ = op.node.z;
         if (op.node.type === "frame") {
           frameOrderAtom.update((ids) => ids.includes(op.node.id) ? ids : [...ids, op.node.id]);
         }
@@ -3343,6 +3352,10 @@ var createCanvasStore = (opts = {}) => {
         const next = { ...a.value, ...op.patch };
         a.set(next);
         reindexNode(next);
+        if (op.patch.z !== void 0) {
+          if (op.patch.z > topZ) topZ = op.patch.z;
+          if (op.patch.z < bottomZ) bottomZ = op.patch.z;
+        }
         const incident = incidentEdges.get(op.id);
         if (incident) {
           for (const eid of incident) {
@@ -3371,6 +3384,8 @@ var createCanvasStore = (opts = {}) => {
         trackIncidence(op.edge);
         bumpEdgeVersion(op.edge.id);
         reindexEdge(op.edge);
+        if (op.edge.z > topZ) topZ = op.edge.z;
+        if (op.edge.z < bottomZ) bottomZ = op.edge.z;
         break;
       }
       case "edge.update": {
@@ -3383,6 +3398,10 @@ var createCanvasStore = (opts = {}) => {
         a.set(next);
         bumpEdgeVersion(op.id);
         reindexEdge(next);
+        if (op.patch.z !== void 0) {
+          if (op.patch.z > topZ) topZ = op.patch.z;
+          if (op.patch.z < bottomZ) bottomZ = op.patch.z;
+        }
         break;
       }
       case "edge.remove": {
@@ -3470,9 +3489,8 @@ var createCanvasStore = (opts = {}) => {
     clientId,
     generateId: () => idGenerator(),
     addNode(node) {
-      const withZ = node.z === 0 ? { ...node, z: ++topZ } : node;
-      if (withZ.z > topZ) topZ = withZ.z;
-      const fitted = withAutoFitHeight(withZ);
+      const z = node.z ?? ++topZ;
+      const fitted = withAutoFitHeight({ ...node, z });
       enqueueOp({ type: "node.add", node: fitted });
       return fitted.id;
     },
@@ -3535,7 +3553,6 @@ var createCanvasStore = (opts = {}) => {
         w,
         h,
         angle: 0,
-        z: 0,
         groups: [],
         style: opts2.style,
         data: { src, naturalW, naturalH, alt: opts2.alt }
@@ -3558,7 +3575,6 @@ var createCanvasStore = (opts = {}) => {
         w,
         h,
         angle: 0,
-        z: 0,
         groups: [],
         ...mergedStyle ? { style: mergedStyle } : {},
         data: { src: sanitized, alt: opts2.alt }
@@ -3566,8 +3582,8 @@ var createCanvasStore = (opts = {}) => {
       return id;
     },
     addEdge(edge) {
-      const withZ = edge.z === 0 ? { ...edge, z: ++topZ } : edge;
-      if (withZ.z > topZ) topZ = withZ.z;
+      const z = edge.z ?? ++topZ;
+      const withZ = { ...edge, z };
       enqueueOp({ type: "edge.add", edge: withZ });
       return withZ.id;
     },
@@ -3590,29 +3606,10 @@ var createCanvasStore = (opts = {}) => {
       });
     },
     sendToBack(ids) {
-      const targets = new Set(ids);
-      let minZ = 0;
-      let initialized = false;
-      for (const a of nodeAtoms.values()) {
-        if (targets.has(a.value.id)) continue;
-        if (!initialized || a.value.z < minZ) {
-          minZ = a.value.z;
-          initialized = true;
-        }
-      }
-      for (const a of edgeAtoms.values()) {
-        if (targets.has(a.value.id)) continue;
-        if (!initialized || a.value.z < minZ) {
-          minZ = a.value.z;
-          initialized = true;
-        }
-      }
       this.batch(() => {
-        let next = (initialized ? minZ : 0) - 1;
         for (const id of ids) {
-          if (nodeAtoms.has(id)) this.updateNode(id, { z: next });
-          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: next });
-          next -= 1;
+          if (nodeAtoms.has(id)) this.updateNode(id, { z: --bottomZ });
+          else if (edgeAtoms.has(id)) this.updateEdge(id, { z: --bottomZ });
         }
       });
     },
@@ -3630,7 +3627,6 @@ var createCanvasStore = (opts = {}) => {
           if (currentZ === void 0) continue;
           const idx = binaryFirstGreater(allZ, currentZ);
           const nextZ = idx >= 0 ? allZ[idx] + 1 : currentZ + 1;
-          if (nextZ > topZ) topZ = nextZ;
           if (node) this.updateNode(id, { z: nextZ });
           else this.updateEdge(id, { z: nextZ });
         }
@@ -4291,7 +4287,7 @@ var paintBackground = (ctx, opts) => {
   }
 };
 var paintDots = (ctx, minX, minY, maxX, maxY, gap, color, zoom) => {
-  const sizeWorld = Math.max(1, 2.4 / zoom);
+  const sizeWorld = Math.max(1, 1.6 / zoom);
   const half = sizeWorld / 2;
   ctx.save();
   ctx.fillStyle = color;