@canvas-harness/core 0.0.4 → 0.1.0

package/dist/index.d.cts

@@ -106,7 +106,7 @@ type EdgeStyle = Style & {
  * Built-in node types — see ARCHITECTURE.md §3.5.
  * Custom node types are arbitrary strings registered via defineNode.
  */
-type BuiltInNodeType = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'capsule' | 'thought-cloud' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'text' | 'image' | 'icon' | 'frame';
+type BuiltInNodeType = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'capsule' | 'thought-cloud' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'soft-diamond' | 'text' | 'image' | 'icon' | 'frame';
 type NodeType = BuiltInNodeType | (string & {
     readonly __nodeType?: never;
 });
@@ -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. */
@@ -2034,7 +2046,7 @@ type AtomicPrimitive = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'thought-cloud';
  * circle and the rect body reads as two stacked hand-drawn shapes
  * (medicine-pill aesthetic), which we want to keep.
  */
-type CompositePrimitive = 'capsule' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond';
+type CompositePrimitive = 'capsule' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'soft-diamond';
 type PrimitiveType = AtomicPrimitive | CompositePrimitive;
 /** Returns true if `node.type` is one of the built-ins drawShape can render. */
 declare const isDrawablePrimitive: (type: string) => type is PrimitiveType;

package/dist/index.d.ts

@@ -106,7 +106,7 @@ type EdgeStyle = Style & {
  * Built-in node types — see ARCHITECTURE.md §3.5.
  * Custom node types are arbitrary strings registered via defineNode.
  */
-type BuiltInNodeType = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'capsule' | 'thought-cloud' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'text' | 'image' | 'icon' | 'frame';
+type BuiltInNodeType = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'capsule' | 'thought-cloud' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'soft-diamond' | 'text' | 'image' | 'icon' | 'frame';
 type NodeType = BuiltInNodeType | (string & {
     readonly __nodeType?: never;
 });
@@ -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. */
@@ -2034,7 +2046,7 @@ type AtomicPrimitive = 'rect' | 'ellipse' | 'diamond' | 'tag' | 'thought-cloud';
  * circle and the rect body reads as two stacked hand-drawn shapes
  * (medicine-pill aesthetic), which we want to keep.
  */
-type CompositePrimitive = 'capsule' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond';
+type CompositePrimitive = 'capsule' | 'layered-rect' | 'layered-ellipse' | 'layered-diamond' | 'soft-diamond';
 type PrimitiveType = AtomicPrimitive | CompositePrimitive;
 /** Returns true if `node.type` is one of the built-ins drawShape can render. */
 declare const isDrawablePrimitive: (type: string) => type is PrimitiveType;

package/dist/index.js

@@ -1053,7 +1053,8 @@ var COMPOSITE = /* @__PURE__ */ new Set([
   "capsule",
   "layered-rect",
   "layered-ellipse",
-  "layered-diamond"
+  "layered-diamond",
+  "soft-diamond"
 ]);
 var isCompositePrimitive = (type) => COMPOSITE.has(type);
 var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
@@ -1159,6 +1160,30 @@ var compositeLayout = (node) => {
       const front = { atomic, x: 0, y: 0, w, h };
       return [back, front];
     }
+    case "soft-diamond": {
+      const backScale = 1.08;
+      const frontScale = 0.96;
+      const bw = w * backScale;
+      const bh = h * backScale;
+      const fw = w * frontScale;
+      const fh = h * frontScale;
+      const back = {
+        atomic: "diamond",
+        x: (w - bw) / 2,
+        y: (h - bh) / 2,
+        w: bw,
+        h: bh,
+        style: darkenedStyle(node.style)
+      };
+      const front = {
+        atomic: "diamond",
+        x: (w - fw) / 2,
+        y: (h - fh) / 2,
+        w: fw,
+        h: fh
+      };
+      return [back, front];
+    }
   }
   return [];
 };
@@ -3217,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;
@@ -3307,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]);
         }
@@ -3318,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) {
@@ -3346,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": {
@@ -3358,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": {
@@ -3445,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;
     },
@@ -3510,7 +3553,6 @@ var createCanvasStore = (opts = {}) => {
         w,
         h,
         angle: 0,
-        z: 0,
         groups: [],
         style: opts2.style,
         data: { src, naturalW, naturalH, alt: opts2.alt }
@@ -3533,7 +3575,6 @@ var createCanvasStore = (opts = {}) => {
         w,
         h,
         angle: 0,
-        z: 0,
         groups: [],
         ...mergedStyle ? { style: mergedStyle } : {},
         data: { src: sanitized, alt: opts2.alt }
@@ -3541,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;
     },
@@ -3565,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 });
         }
       });
     },
@@ -3605,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 });
         }
@@ -4266,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;
@@ -4547,7 +4568,8 @@ var contentBounds = (node) => {
       return { x: rectX, y: 0, w: Math.max(0, w - rectX), h };
     }
     case "diamond":
-    case "layered-diamond": {
+    case "layered-diamond":
+    case "soft-diamond": {
       const cw = w * SQRT2_INV;
       const ch = h * SQRT2_INV;
       return { x: (w - cw) / 2, y: (h - ch) / 2, w: cw, h: ch };