@canvas-harness/core 0.1.20 → 0.1.22

package/dist/index.d.cts

@@ -2311,6 +2311,17 @@ type RendererOptions = {
      */
     onOverlayChange?: (mountedIds: NodeId[]) => void;
 };
+/**
+ * Path the last static-layer paint took through the cache tiers.
+ * Returned by {@link Renderer.getLastDrawPath} for test instrumentation.
+ *   - `'idle'`          no static paint has happened yet
+ *   - `'present'`       cache hit, 1:1 blit (cheapest path)
+ *   - `'extend'`        same-zoom pan past margin, shift + strip blit
+ *   - `'scaled'`        mid-zoom scaled blit (no re-rasterization)
+ *   - `'scaled-extend'` mid-zoom-out, scale-blit center + redraw perimeter
+ *   - `'full'`          full re-render (cache invalidated)
+ */
+type StaticDrawPath = 'idle' | 'present' | 'extend' | 'scaled' | 'scaled-extend' | 'full';
 type Renderer = {
     /** Begin the rAF loop. Idempotent. */
     start(): void;
@@ -2334,6 +2345,13 @@ type Renderer = {
     stats(): FrameStats;
     /** Number of items the most recent paint actually drew. */
     lastDrawCount(): number;
+    /**
+     * Path the last static-layer paint took. Test instrumentation —
+     * lets browser tests assert which cache tier fired. `'present'` =
+     * 1:1 blit, `'extend'` = strip-extend + blit, `'scaled'` = mid-zoom
+     * scaled blit, `'full'` = full re-render.
+     */
+    getLastDrawPath(): StaticDrawPath;
     /** Current overlay-mounted custom-node ids. */
     getOverlaySet(): NodeId[];
     /**

package/dist/index.d.ts

@@ -2311,6 +2311,17 @@ type RendererOptions = {
      */
     onOverlayChange?: (mountedIds: NodeId[]) => void;
 };
+/**
+ * Path the last static-layer paint took through the cache tiers.
+ * Returned by {@link Renderer.getLastDrawPath} for test instrumentation.
+ *   - `'idle'`          no static paint has happened yet
+ *   - `'present'`       cache hit, 1:1 blit (cheapest path)
+ *   - `'extend'`        same-zoom pan past margin, shift + strip blit
+ *   - `'scaled'`        mid-zoom scaled blit (no re-rasterization)
+ *   - `'scaled-extend'` mid-zoom-out, scale-blit center + redraw perimeter
+ *   - `'full'`          full re-render (cache invalidated)
+ */
+type StaticDrawPath = 'idle' | 'present' | 'extend' | 'scaled' | 'scaled-extend' | 'full';
 type Renderer = {
     /** Begin the rAF loop. Idempotent. */
     start(): void;
@@ -2334,6 +2345,13 @@ type Renderer = {
     stats(): FrameStats;
     /** Number of items the most recent paint actually drew. */
     lastDrawCount(): number;
+    /**
+     * Path the last static-layer paint took. Test instrumentation —
+     * lets browser tests assert which cache tier fired. `'present'` =
+     * 1:1 blit, `'extend'` = strip-extend + blit, `'scaled'` = mid-zoom
+     * scaled blit, `'full'` = full re-render.
+     */
+    getLastDrawPath(): StaticDrawPath;
     /** Current overlay-mounted custom-node ids. */
     getOverlaySet(): NodeId[];
     /**

package/dist/index.js

@@ -4752,6 +4752,59 @@ var buildPath = (type, x, y, w, h, radius) => {
   }
 };
 
+// src/render/scene-cache-math.ts
+var computeCacheSourceRect = (cache5, view) => {
+  const ratio = cache5.camZ / view.camZ;
+  const srcX = Math.round(((view.camX - cache5.camX) * cache5.camZ + cache5.marginCssPx) * cache5.dpr);
+  const srcY = Math.round(((view.camY - cache5.camY) * cache5.camZ + cache5.marginCssPx) * cache5.dpr);
+  const srcW = view.widthCssPx * ratio * cache5.dpr;
+  const srcH = view.heightCssPx * ratio * cache5.dpr;
+  return { srcX, srcY, srcW, srcH };
+};
+var cacheCoversViewport = (cache5, view) => {
+  const { srcX, srcY, srcW, srcH } = computeCacheSourceRect(cache5, view);
+  return srcX >= 0 && srcY >= 0 && srcX + srcW <= cache5.widthDevicePx && srcY + srcH <= cache5.heightDevicePx;
+};
+var scaleRatioInBounds = (cacheCamZ, viewCamZ, maxRatio) => {
+  if (viewCamZ <= 0 || cacheCamZ <= 0 || maxRatio <= 0) return false;
+  const ratio = viewCamZ >= cacheCamZ ? viewCamZ / cacheCamZ : cacheCamZ / viewCamZ;
+  return ratio <= maxRatio;
+};
+var cacheReuseLayout = (cache5, view) => {
+  const ratio = view.camZ / cache5.camZ;
+  const cacheW = cache5.widthDevicePx;
+  const cacheH = cache5.heightDevicePx;
+  const marginDev = cache5.marginCssPx * cache5.dpr;
+  const destW = cacheW * ratio;
+  const destH = cacheH * ratio;
+  const destX = (cache5.camX - view.camX) * view.camZ * cache5.dpr + marginDev * (1 - ratio);
+  const destY = (cache5.camY - view.camY) * view.camZ * cache5.dpr + marginDev * (1 - ratio);
+  const dest = { x: destX, y: destY, w: destW, h: destH };
+  const strips = {
+    top: { x: 0, y: 0, w: cacheW, h: Math.max(0, destY) },
+    bottom: {
+      x: 0,
+      y: destY + destH,
+      w: cacheW,
+      h: Math.max(0, cacheH - destY - destH)
+    },
+    left: { x: 0, y: destY, w: Math.max(0, destX), h: destH },
+    right: {
+      x: destX + destW,
+      y: destY,
+      w: Math.max(0, cacheW - destX - destW),
+      h: destH
+    }
+  };
+  const valid = destX >= 0 && destY >= 0 && destX + destW <= cacheW && destY + destH <= cacheH;
+  return { dest, strips, valid };
+};
+var zoomExtendRatioInBounds = (cacheCamZ, viewCamZ, minRatio) => {
+  if (viewCamZ <= 0 || cacheCamZ <= 0 || minRatio <= 0 || minRatio >= 1) return false;
+  const ratio = viewCamZ / cacheCamZ;
+  return ratio >= minRatio && ratio < 1;
+};
+
 // src/render/shapes/content-bounds.ts
 var SQRT2_INV = 1 / Math.SQRT2;
 var contentBounds = (node) => {
@@ -4836,6 +4889,7 @@ var createRenderer = (opts) => {
   let interactiveDirty = false;
   let overlaySet = /* @__PURE__ */ new Set();
   let lastDrawn = 0;
+  let lastDrawPath = "idle";
   let cacheSurface = null;
   let cacheCamX = 0;
   let cacheCamY = 0;
@@ -4893,6 +4947,8 @@ var createRenderer = (opts) => {
     paintBackground(surface.ctx, { viewport, zoom: camera.z, background });
     const visible = visibleNodes(camera, viewport);
     const isMoving2 = isMoving(interaction);
+    const viewMotion = interaction.mode === "panning" || interaction.mode === "zooming" || interaction.mode === "marqueeing";
+    const isStripRender = !fullRender;
     const minOnScreen = MIN_ON_SCREEN_SIZE_PX;
     const nextOverlaySet = /* @__PURE__ */ new Set();
     let drawn = 0;
@@ -4905,9 +4961,8 @@ var createRenderer = (opts) => {
       theme: (token) => theme ? theme(token) : void 0
     };
     const editingNodeId = interaction.editingTarget?.kind === "node" ? interaction.editingTarget.id : null;
-    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;
+    const roughEnabled = 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;
@@ -4982,7 +5037,7 @@ var createRenderer = (opts) => {
       if (!def) continue;
       if (node.w * camera.z < minOnScreen && node.h * camera.z < minOnScreen) continue;
       if (camera.z < def.lod.minZoomForPlaceholder) continue;
-      const preferCanvas = camera.z < def.lod.minZoomForReact || isMoving2;
+      const preferCanvas = camera.z < def.lod.minZoomForReact || viewMotion && isStripRender && !overlaySet.has(node.id);
       if (preferCanvas) {
         if (paintCustomCanvasFallback(surface.ctx, node, def, scale, renderEnv)) {
           drawn++;
@@ -5003,7 +5058,7 @@ var createRenderer = (opts) => {
       }
     }
     const visEdges = visibleEdges(viewport);
-    const edgeRoughEnabled = !cameraIsMoving && movingNodeCount <= ROUGH_MAX_MOVING_NODES && camera.z >= ROUGH_MIN_ZOOM && visEdges.length <= ROUGH_MAX_NODES;
+    const edgeRoughEnabled = 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(surface.ctx, edge, scale, edgeRoughEnabled, camera.z, isMoving2);
@@ -5083,6 +5138,44 @@ var createRenderer = (opts) => {
     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);
   };
+  let scaledExtendScratch = null;
+  const extendCacheScaled = (camera, layout) => {
+    const cache5 = ensureCacheSurface();
+    const cacheW = cache5.canvas.width;
+    const cacheH = cache5.canvas.height;
+    if (!scaledExtendScratch || scaledExtendScratch.width !== cacheW || scaledExtendScratch.height !== cacheH) {
+      scaledExtendScratch = document.createElement("canvas");
+      scaledExtendScratch.width = cacheW;
+      scaledExtendScratch.height = cacheH;
+    }
+    const sctx = scaledExtendScratch.getContext("2d");
+    sctx.setTransform(1, 0, 0, 1, 0, 0);
+    sctx.clearRect(0, 0, cacheW, cacheH);
+    sctx.drawImage(cache5.canvas, 0, 0);
+    cache5.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    cache5.ctx.clearRect(0, 0, cacheW, cacheH);
+    cache5.ctx.drawImage(
+      scaledExtendScratch,
+      layout.dest.x,
+      layout.dest.y,
+      layout.dest.w,
+      layout.dest.h
+    );
+    cacheCamX = camera.x;
+    cacheCamY = camera.y;
+    cacheCamZ = camera.z;
+    const strips = [
+      layout.strips.top,
+      layout.strips.bottom,
+      layout.strips.left,
+      layout.strips.right
+    ];
+    for (const s of strips) {
+      if (s.w > 0 && s.h > 0) {
+        renderCacheStrip(cache5, camera.x, camera.y, camera.z, s.x, s.y, s.w, s.h);
+      }
+    }
+  };
   const cacheSourceOffset = (camera) => {
     const dpr = staticSurface.dpr;
     return {
@@ -5104,21 +5197,72 @@ var createRenderer = (opts) => {
     staticSurface.ctx.clearRect(0, 0, w, h);
     staticSurface.ctx.drawImage(cache5.canvas, srcX, srcY, w, h, 0, 0, w, h);
   };
+  const snapshotCacheCamera = (cache5) => ({
+    camX: cacheCamX,
+    camY: cacheCamY,
+    camZ: cacheCamZ,
+    widthDevicePx: cache5.canvas.width,
+    heightDevicePx: cache5.canvas.height,
+    dpr: cache5.dpr,
+    marginCssPx: SCENE_CACHE_MARGIN_PX
+  });
+  const snapshotView = (camera) => ({
+    camX: camera.x,
+    camY: camera.y,
+    camZ: camera.z,
+    widthCssPx: staticSurface.cssWidth,
+    heightCssPx: staticSurface.cssHeight
+  });
+  const presentStaticScaled = (camera) => {
+    const cache5 = ensureCacheSurface();
+    const w = staticSurface.canvas.width;
+    const h = staticSurface.canvas.height;
+    const { srcX, srcY, srcW, srcH } = computeCacheSourceRect(
+      snapshotCacheCamera(cache5),
+      snapshotView(camera)
+    );
+    staticSurface.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    staticSurface.ctx.clearRect(0, 0, w, h);
+    staticSurface.ctx.drawImage(cache5.canvas, srcX, srcY, srcW, srcH, 0, 0, w, h);
+  };
+  const SCALED_BLIT_MAX_RATIO = 4;
+  const SCALED_EXTEND_MIN_RATIO = 0.5;
   const paintStatic = () => {
     const camera = store.getCamera();
     if (!cacheStale && camera.z === cacheCamZ) {
       if (viewportFitsInCache(camera)) {
         presentStatic(camera);
+        lastDrawPath = "present";
         return;
       }
       if (canExtend(camera)) {
         extendCache(camera);
         presentStatic(camera);
+        lastDrawPath = "extend";
+        return;
+      }
+    }
+    if (!cacheStale && camera.z !== cacheCamZ && store.getInteractionState().mode === "zooming" && cacheSurface) {
+      const cacheCam = snapshotCacheCamera(cacheSurface);
+      const view = snapshotView(camera);
+      if (scaleRatioInBounds(cacheCam.camZ, view.camZ, SCALED_BLIT_MAX_RATIO) && cacheCoversViewport(cacheCam, view)) {
+        presentStaticScaled(camera);
+        lastDrawPath = "scaled";
         return;
       }
+      if (zoomExtendRatioInBounds(cacheCam.camZ, view.camZ, SCALED_EXTEND_MIN_RATIO)) {
+        const layout = cacheReuseLayout(cacheCam, view);
+        if (layout.valid) {
+          extendCacheScaled(camera, layout);
+          presentStatic(camera);
+          lastDrawPath = "scaled-extend";
+          return;
+        }
+      }
     }
     renderFullCache(camera);
     presentStatic(camera);
+    lastDrawPath = "full";
   };
   const paintCustomCanvasFallback = (ctx, node, def, drawScale, env) => {
     if (def.getSnapshot) {
@@ -5441,9 +5585,11 @@ var createRenderer = (opts) => {
   };
   const onInteractionChange = (state) => {
     interactiveDirty = true;
-    if (state.mode === "dragging" || state.mode === "resizing" || state.mode === "rotating" || state.mode === "panning" || state.mode === "zooming" || state.mode === "idle") {
+    if (state.mode === "dragging" || state.mode === "resizing" || state.mode === "rotating" || state.mode === "panning" || state.mode === "idle") {
       staticDirty = true;
       cacheStale = true;
+    } else if (state.mode === "zooming") {
+      staticDirty = true;
     }
     loop.requestFrame();
   };
@@ -5507,6 +5653,7 @@ var createRenderer = (opts) => {
     },
     stats: () => loop.stats(),
     lastDrawCount: () => lastDrawn,
+    getLastDrawPath: () => lastDrawPath,
     getOverlaySet: () => [...overlaySet],
     getAssetCache: () => assetCache,
     dispose() {