@canvas-harness/core 0.1.20 → 0.1.22

package/dist/index.cjs

@@ -4754,6 +4754,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) => {
@@ -4838,6 +4891,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;
@@ -4895,6 +4949,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;
@@ -4907,9 +4963,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;
@@ -4984,7 +5039,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++;
@@ -5005,7 +5060,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);
@@ -5085,6 +5140,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 {
@@ -5106,21 +5199,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) {
@@ -5443,9 +5587,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();
   };
@@ -5509,6 +5655,7 @@ var createRenderer = (opts) => {
     },
     stats: () => loop.stats(),
     lastDrawCount: () => lastDrawn,
+    getLastDrawPath: () => lastDrawPath,
     getOverlaySet: () => [...overlaySet],
     getAssetCache: () => assetCache,
     dispose() {