@canvas-harness/core 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -3133,6 +3133,8 @@ var inverseOp = (op) => {
       return { type: "group.remove", group: op.group };
     case "group.remove":
       return { type: "group.upsert", group: op.group };
+    case "frame.reorder":
+      return { type: "frame.reorder", ids: op.prev, prev: op.ids };
   }
 };
 var inverseBatch = (batch) => {
@@ -3200,6 +3202,7 @@ var createCanvasStore = (opts = {}) => {
   const groupIdsAtom = signia.atom("groupIds", []);
   const cameraAtom = signia.atom("camera", initial.camera);
   const selectionAtom = signia.atom("selection", initial.selection);
+  const frameOrderAtom = signia.atom("frameOrder", initial.frameOrder ?? []);
   const interactionAtom = signia.atom("interaction", idleInteractionState());
   const localPresenceAtom = signia.atom("presence", emptyPresenceState(clientId));
   const remotePresence = /* @__PURE__ */ new Map();
@@ -3306,6 +3309,9 @@ var createCanvasStore = (opts = {}) => {
         nodeAtoms.set(op.node.id, a);
         nodeIdsAtom.update((ids) => [...ids, op.node.id]);
         reindexNode(op.node);
+        if (op.node.type === "frame") {
+          frameOrderAtom.update((ids) => ids.includes(op.node.id) ? ids : [...ids, op.node.id]);
+        }
         break;
       }
       case "node.update": {
@@ -3330,6 +3336,9 @@ var createCanvasStore = (opts = {}) => {
         nodeIdsAtom.update((ids) => ids.filter((x) => x !== id));
         unindexNode(id);
         incidentEdges.delete(id);
+        if (op.node.type === "frame") {
+          frameOrderAtom.update((ids) => ids.filter((x) => x !== id));
+        }
         break;
       }
       case "edge.add": {
@@ -3379,6 +3388,10 @@ var createCanvasStore = (opts = {}) => {
         groupIdsAtom.update((ids) => ids.filter((x) => x !== id));
         break;
       }
+      case "frame.reorder": {
+        frameOrderAtom.set([...op.ids]);
+        break;
+      }
     }
   };
   const enqueueOp = (op) => {
@@ -3401,6 +3414,7 @@ var createCanvasStore = (opts = {}) => {
     return prev;
   };
   const populateInitial = (scene) => {
+    const seededFrameOrder = [];
     for (const id of Object.keys(scene.nodes)) {
       const node = scene.nodes[id];
       if (!node) continue;
@@ -3408,7 +3422,9 @@ var createCanvasStore = (opts = {}) => {
       nodeAtoms.set(node.id, a);
       nodeIdsAtom.update((ids) => [...ids, node.id]);
       reindexNode(node);
+      if (node.type === "frame") seededFrameOrder.push(node.id);
     }
+    if (!scene.frameOrder) frameOrderAtom.set(seededFrameOrder);
     for (const id of Object.keys(scene.edges)) {
       const edge = scene.edges[id];
       if (!edge) continue;
@@ -3710,6 +3726,53 @@ var createCanvasStore = (opts = {}) => {
     getNodeCount: () => nodeIdsAtom.value.length,
     getEdgeCount: () => edgeIdsAtom.value.length,
     getGroupCount: () => groupIdsAtom.value.length,
+    getFrames: () => {
+      const out = [];
+      for (const id of frameOrderAtom.value) {
+        const n = nodeAtoms.get(id)?.value;
+        if (n && n.type === "frame") out.push(n);
+      }
+      return out;
+    },
+    setFrameOrder(ids) {
+      const valid = /* @__PURE__ */ new Set();
+      for (const a of nodeAtoms.values()) {
+        if (a.value.type === "frame") valid.add(a.value.id);
+      }
+      const filtered = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const id of ids) {
+        if (valid.has(id) && !seen.has(id)) {
+          filtered.push(id);
+          seen.add(id);
+        }
+      }
+      for (const id of valid) {
+        if (!seen.has(id)) filtered.push(id);
+      }
+      const prev = [...frameOrderAtom.value];
+      if (filtered.length === prev.length && filtered.every((id, i) => id === prev[i])) {
+        return;
+      }
+      enqueueOp({ type: "frame.reorder", ids: filtered, prev });
+    },
+    getNodesInFrame(id) {
+      const frame = nodeAtoms.get(id)?.value;
+      if (!frame || frame.type !== "frame") return [];
+      const frameAabb = nodeAABB(frame);
+      const candidates = nodeIndex.queryRect(frameAabb);
+      const out = [];
+      for (const cid of candidates) {
+        if (cid === id) continue;
+        const node = nodeAtoms.get(cid)?.value;
+        if (!node || node.type === "frame") continue;
+        const a = nodeAABB(node);
+        if (a.x >= frameAabb.x && a.y >= frameAabb.y && a.x + a.w <= frameAabb.x + frameAabb.w && a.y + a.h <= frameAabb.y + frameAabb.h) {
+          out.push(node);
+        }
+      }
+      return out;
+    },
     getEdgeGeometry(id) {
       const edge = edgeAtoms.get(id)?.value;
       if (!edge) return void 0;
@@ -3871,7 +3934,8 @@ var toSerialized = (scene) => ({
   edges: Object.values(scene.edges),
   groups: Object.values(scene.groups),
   camera: scene.camera,
-  selection: scene.selection
+  selection: scene.selection,
+  ...scene.frameOrder && scene.frameOrder.length > 0 ? { frameOrder: scene.frameOrder } : {}
 });
 var fromSerialized = (raw) => {
   let working = raw;
@@ -3893,7 +3957,8 @@ var fromSerialized = (raw) => {
     edges: Object.fromEntries(ser.edges.map((e) => [asEdgeId(e.id), e])),
     groups: Object.fromEntries(ser.groups.map((g) => [asGroupId(g.id), g])),
     camera: ser.camera,
-    selection: ser.selection
+    selection: ser.selection,
+    ...ser.frameOrder ? { frameOrder: ser.frameOrder } : {}
   };
 };
 var storeToJSON = (store) => ({
@@ -4438,6 +4503,40 @@ var drawMarquee = (ctx, rect, scale, color) => {
   ctx.restore();
 };
 
+// src/render/paint-frame.ts
+var FRAME_BORDER_PX = 1.5;
+var FRAME_BORDER_COLOR_DEFAULT = "#94a3b8";
+var FRAME_FILL_DEFAULT = "rgba(148, 163, 184, 0.06)";
+var FRAME_LABEL_FONT_PX = 12;
+var FRAME_LABEL_GAP_PX = 6;
+var FRAME_LABEL_COLOR = "#64748b";
+var paintFrameNode = (ctx, node, scale, theme) => {
+  if (node.w <= 0 || node.h <= 0) return;
+  const opacity = resolveOpacity(node.style, theme);
+  const needsScope = opacity !== 1;
+  if (needsScope) {
+    ctx.save();
+    ctx.globalAlpha = opacity;
+  }
+  const fill = node.style?.backgroundColor ?? (theme ? theme("frame.background") : void 0) ?? FRAME_FILL_DEFAULT;
+  ctx.fillStyle = fill;
+  ctx.fillRect(0, 0, node.w, node.h);
+  const stroke = resolveColor(node.style, "strokeColor", FRAME_BORDER_COLOR_DEFAULT, theme);
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = FRAME_BORDER_PX / scale;
+  ctx.setLineDash([]);
+  ctx.strokeRect(0, 0, node.w, node.h);
+  const labelPx = FRAME_LABEL_FONT_PX / scale;
+  const gapPx = FRAME_LABEL_GAP_PX / scale;
+  const label = node.content?.trim() || "Frame";
+  ctx.fillStyle = FRAME_LABEL_COLOR;
+  ctx.textBaseline = "bottom";
+  ctx.textAlign = "left";
+  ctx.font = `500 ${labelPx}px system-ui, -apple-system, sans-serif`;
+  ctx.fillText(label, 0, -gapPx);
+  if (needsScope) ctx.restore();
+};
+
 // src/render/shapes/content-bounds.ts
 var SQRT2_INV = 1 / Math.SQRT2;
 var contentBounds = (node) => {
@@ -4511,6 +4610,7 @@ var createRenderer = (opts) => {
   const interactiveSurface = setupSurface(opts.interactiveCanvas);
   let background = opts.background;
   let selectionColor = opts.selectionColor ?? DEFAULT_SELECTION_COLOR;
+  let hideFrames = false;
   sizeSurface(staticSurface, opts.width, opts.height);
   sizeSurface(interactiveSurface, opts.width, opts.height);
   let staticDirty = true;
@@ -4560,7 +4660,18 @@ var createRenderer = (opts) => {
     const cameraIsMoving = interaction.mode === "panning" || interaction.mode === "zooming";
     const movingNodeCount = excludedNodes?.size ?? 0;
     const roughEnabled = !cameraIsMoving && movingNodeCount <= ROUGH_MAX_MOVING_NODES && camera.z >= ROUGH_MIN_ZOOM && visible.length <= ROUGH_MAX_NODES;
+    if (!hideFrames) {
+      for (const node of visible) {
+        if (node.type !== "frame") continue;
+        if (excludedNodes?.has(node.id)) continue;
+        drawWithNodeTransform(staticSurface.ctx, node, () => {
+          paintFrameNode(staticSurface.ctx, node, scale, theme);
+        });
+        drawn++;
+      }
+    }
     for (const node of visible) {
+      if (node.type === "frame") continue;
       if (excludedNodes?.has(node.id)) continue;
       const isEditingThis = editingNodeId === node.id;
       if (isDrawablePrimitive(node.type)) {
@@ -4763,9 +4874,13 @@ var createRenderer = (opts) => {
         isMoving: true};
       const dragRoughEnabled = inDragMap.size <= ROUGH_MAX_MOVING_NODES && camera.z >= ROUGH_MIN_ZOOM;
       for (const node of inDragMap.values()) {
-        if (!isDrawablePrimitive(node.type) && node.type !== "text" && node.type !== "image" && node.type !== "icon")
+        if (!isDrawablePrimitive(node.type) && node.type !== "text" && node.type !== "image" && node.type !== "icon" && node.type !== "frame")
           continue;
         drawWithNodeTransform(ctx, node, () => {
+          if (node.type === "frame") {
+            paintFrameNode(ctx, node, scale, theme);
+            return;
+          }
           if (node.type === "image") {
             paintImageNode(ctx, node, assetCache, theme);
             return;
@@ -4967,6 +5082,11 @@ var createRenderer = (opts) => {
       interactiveDirty = true;
       loop.requestFrame();
     },
+    setHideFrames(hidden) {
+      hideFrames = hidden;
+      staticDirty = true;
+      loop.requestFrame();
+    },
     stats: () => loop.stats(),
     lastDrawCount: () => lastDrawn,
     getOverlaySet: () => [...overlaySet],
@@ -4997,6 +5117,7 @@ var sceneBounds = (store) => {
   let maxY = Number.NEGATIVE_INFINITY;
   for (const n of nodes) {
     if (n.hidden) continue;
+    if (n.type === "frame") continue;
     const r = nodeAABB(n);
     if (r.x < minX) minX = r.x;
     if (r.y < minY) minY = r.y;
@@ -5027,6 +5148,7 @@ var renderMinimapContent = (ctx, store, mapWidth, mapHeight, opts = {}) => {
   const defaultColor = opts.defaultNodeColor ?? "#94a3b8";
   for (const node of store.getAllNodes()) {
     if (node.hidden) continue;
+    if (node.type === "frame") continue;
     const r = nodeAABB(node);
     const x = offX + (r.x - bx) * scale;
     const y = offY + (r.y - by) * scale;