@canvas-harness/core 0.1.4 → 0.1.5

package/dist/index.js

@@ -4884,7 +4884,7 @@ var drawWithNodeTransform = (ctx, node, fn) => {
 };
 
 // src/render/renderer.ts
-var VIEWPORT_OVERSCAN_PX = 64;
+var SCENE_CACHE_MARGIN_PX = 256;
 var MIN_ON_SCREEN_SIZE_PX = 1.5;
 var MIN_READABLE_FONT_PX = 3;
 var createRenderer = (opts) => {
@@ -4901,6 +4901,30 @@ var createRenderer = (opts) => {
   let interactiveDirty = false;
   let overlaySet = /* @__PURE__ */ new Set();
   let lastDrawn = 0;
+  let cacheSurface = null;
+  let cacheCamX = 0;
+  let cacheCamY = 0;
+  let cacheCamZ = 1;
+  let cacheStale = true;
+  const ensureCacheSurface = () => {
+    const dpr = staticSurface.dpr;
+    const cssW = staticSurface.cssWidth + 2 * SCENE_CACHE_MARGIN_PX;
+    const cssH = staticSurface.cssHeight + 2 * SCENE_CACHE_MARGIN_PX;
+    if (!cacheSurface) {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Canvas 2d context unavailable");
+      cacheSurface = { canvas, ctx, cssWidth: 0, cssHeight: 0, dpr: 1 };
+    }
+    if (cacheSurface.cssWidth !== cssW || cacheSurface.cssHeight !== cssH || cacheSurface.dpr !== dpr) {
+      cacheSurface.cssWidth = cssW;
+      cacheSurface.cssHeight = cssH;
+      cacheSurface.dpr = dpr;
+      cacheSurface.canvas.width = Math.max(1, Math.round(cssW * dpr));
+      cacheSurface.canvas.height = Math.max(1, Math.round(cssH * dpr));
+    }
+    return cacheSurface;
+  };
   let sortedNodeIdsCache = null;
   let sortedEdgeIdsCache = null;
   const invalidateSortedCaches = () => {
@@ -4909,6 +4933,7 @@ var createRenderer = (opts) => {
   };
   const requestRepaint = () => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   };
   const assetCache = createAssetCache({ onReady: requestRepaint });
@@ -4923,16 +4948,12 @@ var createRenderer = (opts) => {
       interactiveDirty = false;
     }
   };
-  const paintStatic = () => {
-    const camera = store.getCamera();
-    clearSurface(staticSurface);
-    applyCameraTransform(staticSurface, camera);
-    const scale = camera.z * staticSurface.dpr;
+  const paintSceneBody = (surface, camera, viewport, fullRender = true) => {
+    const scale = camera.z * surface.dpr;
     const interaction = store.getInteractionState();
     const excludedNodes = interaction.mode === "dragging" || interaction.mode === "resizing" ? new Set(interaction.draggedIds) : null;
     const excludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
-    const viewport = inflateRect(worldViewport(staticSurface, camera), VIEWPORT_OVERSCAN_PX);
-    paintBackground(staticSurface.ctx, { viewport, zoom: camera.z, background });
+    paintBackground(surface.ctx, { viewport, zoom: camera.z, background });
     const visible = visibleNodes(camera, viewport);
     const isMoving2 = interaction.mode === "panning" || interaction.mode === "zooming" || interaction.mode === "dragging" || interaction.mode === "resizing" || interaction.mode === "rotating";
     const minOnScreen = MIN_ON_SCREEN_SIZE_PX;
@@ -4954,8 +4975,8 @@ var createRenderer = (opts) => {
       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);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintFrameNode(surface.ctx, node, scale, theme);
         });
         drawn++;
       }
@@ -4968,52 +4989,53 @@ var createRenderer = (opts) => {
         const useRough = roughEnabled && (node.style?.roughness ?? 0) > 0;
         const roughReady = useRough ? getRoughCanvasCtor() !== null : false;
         const composite = isCompositePrimitive(node.type);
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
+        drawWithNodeTransform(surface.ctx, node, () => {
           if (useRough && roughReady) {
             if (composite) {
-              drawCompositeRough(staticSurface.ctx, node, camera.z, theme);
+              drawCompositeRough(surface.ctx, node, camera.z, theme);
             } else {
-              staticSurface.ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
-              drawShape(staticSurface.ctx, node, scale, theme, { skipStroke: true });
-              staticSurface.ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
-              drawRoughShape(staticSurface.ctx, node, camera.z, theme);
+              surface.ctx.translate(ROUGH_FILL_MISREGISTER_X, ROUGH_FILL_MISREGISTER_Y);
+              drawShape(surface.ctx, node, scale, theme, { skipStroke: true });
+              surface.ctx.translate(-ROUGH_FILL_MISREGISTER_X, -ROUGH_FILL_MISREGISTER_Y);
+              drawRoughShape(surface.ctx, node, camera.z, theme);
             }
           } else {
-            drawShape(staticSurface.ctx, node, scale, theme);
+            drawShape(surface.ctx, node, scale, theme);
             if (useRough && !roughReady) {
               onRoughReady(() => {
                 staticDirty = true;
+                cacheStale = true;
                 loop.requestFrame();
               });
             }
           }
-          if (!isEditingThis) paintNodeContent(staticSurface.ctx, node, renderEnv);
+          if (!isEditingThis) paintNodeContent(surface.ctx, node, renderEnv);
         });
         drawn++;
         continue;
       }
       if (node.type === "image") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          paintImageNode(staticSurface.ctx, node, assetCache, theme);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintImageNode(surface.ctx, node, assetCache, theme);
         });
         drawn++;
         continue;
       }
       if (node.type === "icon") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          paintIconNode(staticSurface.ctx, node, assetCache, scale, theme);
+        drawWithNodeTransform(surface.ctx, node, () => {
+          paintIconNode(surface.ctx, node, assetCache, scale, theme);
         });
         drawn++;
         continue;
       }
       if (node.type === "text") {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
+        drawWithNodeTransform(surface.ctx, node, () => {
           if (isEditingThis) return;
           const hasContent = node.content && node.content.trim().length > 0;
           if (hasContent) {
-            paintNodeContent(staticSurface.ctx, node, renderEnv);
+            paintNodeContent(surface.ctx, node, renderEnv);
           } else {
-            paintEmptyTextPlaceholder(staticSurface.ctx, node, camera.z);
+            paintEmptyTextPlaceholder(surface.ctx, node, camera.z);
           }
         });
         drawn++;
@@ -5025,7 +5047,7 @@ var createRenderer = (opts) => {
       if (camera.z < def.lod.minZoomForPlaceholder) continue;
       const preferCanvas = camera.z < def.lod.minZoomForReact || isMoving2;
       if (preferCanvas) {
-        if (paintCustomCanvasFallback(staticSurface.ctx, node, def, scale, renderEnv)) {
+        if (paintCustomCanvasFallback(surface.ctx, node, def, scale, renderEnv)) {
           drawn++;
         }
         continue;
@@ -5035,10 +5057,10 @@ var createRenderer = (opts) => {
         continue;
       }
       if (def.renderCanvas) {
-        drawWithNodeTransform(staticSurface.ctx, node, () => {
-          staticSurface.ctx.save();
-          def.renderCanvas(staticSurface.ctx, node, renderEnv);
-          staticSurface.ctx.restore();
+        drawWithNodeTransform(surface.ctx, node, () => {
+          surface.ctx.save();
+          def.renderCanvas(surface.ctx, node, renderEnv);
+          surface.ctx.restore();
         });
         drawn++;
       }
@@ -5047,15 +5069,120 @@ var createRenderer = (opts) => {
     const edgeRoughEnabled = !cameraIsMoving && movingNodeCount <= ROUGH_MAX_MOVING_NODES && camera.z >= ROUGH_MIN_ZOOM && visEdges.length <= ROUGH_MAX_NODES;
     for (const edge of visEdges) {
       if (excludedEdges?.has(edge.id)) continue;
-      paintOneEdge(staticSurface.ctx, edge, scale, edgeRoughEnabled, camera.z, isMoving2);
+      paintOneEdge(surface.ctx, edge, scale, edgeRoughEnabled, camera.z, isMoving2);
       drawn++;
     }
+    if (!fullRender) return;
     lastDrawn = drawn;
     if (!setsEqual(nextOverlaySet, overlaySet)) {
       overlaySet = nextOverlaySet;
       onOverlayChange?.([...overlaySet]);
     }
   };
+  const applyCacheTransform = (cache5, centerX, centerY, z) => {
+    const s = z * cache5.dpr;
+    const m = SCENE_CACHE_MARGIN_PX * cache5.dpr;
+    cache5.ctx.setTransform(s, 0, 0, s, -centerX * s + m, -centerY * s + m);
+  };
+  const renderFullCache = (camera) => {
+    const cache5 = ensureCacheSurface();
+    clearSurface(cache5);
+    applyCacheTransform(cache5, camera.x, camera.y, camera.z);
+    const marginWorld = SCENE_CACHE_MARGIN_PX / camera.z;
+    const viewport = inflateRect(worldViewport(staticSurface, camera), marginWorld);
+    paintSceneBody(cache5, camera, viewport);
+    cacheCamX = camera.x;
+    cacheCamY = camera.y;
+    cacheCamZ = camera.z;
+    cacheStale = false;
+  };
+  const canExtend = (camera) => {
+    if (!cacheSurface) return false;
+    const s = camera.z * staticSurface.dpr;
+    const dx = Math.abs((cacheCamX - camera.x) * s);
+    const dy = Math.abs((cacheCamY - camera.y) * s);
+    return dx < cacheSurface.canvas.width && dy < cacheSurface.canvas.height;
+  };
+  const renderCacheStrip = (cache5, centerX, centerY, z, px, py, pw, ph) => {
+    const ctx = cache5.ctx;
+    const s = z * cache5.dpr;
+    const m = SCENE_CACHE_MARGIN_PX * cache5.dpr;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.beginPath();
+    ctx.rect(px, py, pw, ph);
+    ctx.clip();
+    ctx.clearRect(px, py, pw, ph);
+    applyCacheTransform(cache5, centerX, centerY, z);
+    const viewport = {
+      x: (px - m) / s + centerX,
+      y: (py - m) / s + centerY,
+      w: pw / s,
+      h: ph / s
+    };
+    paintSceneBody(cache5, { z }, viewport, false);
+    ctx.restore();
+  };
+  const extendCache = (camera) => {
+    const cache5 = ensureCacheSurface();
+    const s = camera.z * cache5.dpr;
+    const cacheW = cache5.canvas.width;
+    const cacheH = cache5.canvas.height;
+    const dx = Math.round((cacheCamX - camera.x) * s);
+    const dy = Math.round((cacheCamY - camera.y) * s);
+    const newCamX = cacheCamX - dx / s;
+    const newCamY = cacheCamY - dy / s;
+    cache5.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    cache5.ctx.drawImage(cache5.canvas, 0, 0, cacheW, cacheH, dx, dy, cacheW, cacheH);
+    cacheCamX = newCamX;
+    cacheCamY = newCamY;
+    cacheCamZ = camera.z;
+    const hw = Math.abs(dx);
+    const vh = Math.abs(dy);
+    const hx = dx > 0 ? 0 : cacheW - hw;
+    const vy = dy > 0 ? 0 : cacheH - vh;
+    const vx = dx > 0 ? hw : 0;
+    const vw = cacheW - hw;
+    if (hw > 0) renderCacheStrip(cache5, newCamX, newCamY, camera.z, hx, 0, hw, cacheH);
+    if (vh > 0 && vw > 0) renderCacheStrip(cache5, newCamX, newCamY, camera.z, vx, vy, vw, vh);
+  };
+  const cacheSourceOffset = (camera) => {
+    const dpr = staticSurface.dpr;
+    return {
+      x: Math.round(((camera.x - cacheCamX) * cacheCamZ + SCENE_CACHE_MARGIN_PX) * dpr),
+      y: Math.round(((camera.y - cacheCamY) * cacheCamZ + SCENE_CACHE_MARGIN_PX) * dpr)
+    };
+  };
+  const viewportFitsInCache = (camera) => {
+    if (!cacheSurface) return false;
+    const { x, y } = cacheSourceOffset(camera);
+    return x >= 0 && y >= 0 && x + staticSurface.canvas.width <= cacheSurface.canvas.width && y + staticSurface.canvas.height <= cacheSurface.canvas.height;
+  };
+  const presentStatic = (camera) => {
+    const cache5 = ensureCacheSurface();
+    const w = staticSurface.canvas.width;
+    const h = staticSurface.canvas.height;
+    const { x: srcX, y: srcY } = cacheSourceOffset(camera);
+    staticSurface.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    staticSurface.ctx.clearRect(0, 0, w, h);
+    staticSurface.ctx.drawImage(cache5.canvas, srcX, srcY, w, h, 0, 0, w, h);
+  };
+  const paintStatic = () => {
+    const camera = store.getCamera();
+    if (!cacheStale && camera.z === cacheCamZ) {
+      if (viewportFitsInCache(camera)) {
+        presentStatic(camera);
+        return;
+      }
+      if (canExtend(camera)) {
+        extendCache(camera);
+        presentStatic(camera);
+        return;
+      }
+    }
+    renderFullCache(camera);
+    presentStatic(camera);
+  };
   const paintCustomCanvasFallback = (ctx, node, def, drawScale, env) => {
     if (def.getSnapshot) {
       const snap = def.getSnapshot(node, {
@@ -5340,6 +5467,7 @@ var createRenderer = (opts) => {
   const onStoreChange = () => {
     invalidateSortedCaches();
     staticDirty = true;
+    cacheStale = true;
     interactiveDirty = true;
     loop.requestFrame();
   };
@@ -5356,6 +5484,7 @@ var createRenderer = (opts) => {
     interactiveDirty = true;
     if (state.mode === "dragging" || state.mode === "resizing" || state.mode === "rotating" || state.mode === "panning" || state.mode === "zooming" || state.mode === "idle") {
       staticDirty = true;
+      cacheStale = true;
     }
     loop.requestFrame();
   };
@@ -5365,16 +5494,19 @@ var createRenderer = (opts) => {
   const unsubInteraction = store.subscribe("interaction", onInteractionChange);
   const unsubFontEpoch = subscribeFontEpoch(() => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   });
   const unsubMathEpoch = subscribeMathEpoch(() => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   });
   return {
     start() {
       loop.start();
       staticDirty = true;
+      cacheStale = true;
       interactiveDirty = isInteractive(store.getInteractionState());
       loop.requestFrame();
     },
@@ -5383,6 +5515,7 @@ var createRenderer = (opts) => {
     },
     invalidate() {
       staticDirty = true;
+      cacheStale = true;
       interactiveDirty = true;
       loop.requestFrame();
     },
@@ -5391,6 +5524,7 @@ var createRenderer = (opts) => {
       const b = sizeSurface(interactiveSurface, cssW, cssH, maxDpr);
       if (a || b) {
         staticDirty = true;
+        cacheStale = true;
         interactiveDirty = true;
         loop.requestFrame();
       }
@@ -5398,6 +5532,7 @@ var createRenderer = (opts) => {
     setBackground(bg) {
       background = bg;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     setSelectionColor(color) {
@@ -5408,6 +5543,7 @@ var createRenderer = (opts) => {
     setHideFrames(hidden) {
       hideFrames = hidden;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     stats: () => loop.stats(),
@@ -5422,6 +5558,11 @@ var createRenderer = (opts) => {
       unsubFontEpoch();
       unsubMathEpoch();
       assetCache.dispose();
+      if (cacheSurface) {
+        cacheSurface.canvas.width = 0;
+        cacheSurface.canvas.height = 0;
+        cacheSurface = null;
+      }
     }
   };
 };