@canvas-harness/core 0.1.4 → 0.1.6

package/dist/index.d.cts

@@ -1454,9 +1454,33 @@ type InteractionState = {
     resizeLockAspect: boolean;
     /** Whether the user is holding Alt during a resize (resize from center). */
     resizeFromCenter: boolean;
+    /**
+     * Live in-progress geometry of the resized node — written every
+     * pointermove, committed to the store once on pointer-up. While
+     * present, `store.getNode(id)` still returns the original geometry;
+     * the renderer overlays this draft via `mapDragPositions` for the
+     * interactive layer paint. Mirrors how `dragDelta` works for drag.
+     */
+    resizeDraft: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        angle: number;
+    } | null;
     marqueeRect: WorldRect | null;
     /** Whether the marquee should add to (true, shift held) or replace selection. */
     marqueeAdditive: boolean;
+    /**
+     * Live in-progress cubic controls of an edge being mid-point-dragged.
+     * Written every pointermove, committed to the store once on
+     * pointer-up. Same draft+commit model as `resizeDraft` and
+     * `dragDelta` — keeps mid-gesture mutations off the 'change' bus.
+     */
+    midpointDraft: {
+        edgeId: EdgeId;
+        control: [Vec2, Vec2];
+    } | null;
     draftEdge: {
         source: EdgeEnd;
         target: EdgeEnd;

package/dist/index.d.ts

@@ -1454,9 +1454,33 @@ type InteractionState = {
     resizeLockAspect: boolean;
     /** Whether the user is holding Alt during a resize (resize from center). */
     resizeFromCenter: boolean;
+    /**
+     * Live in-progress geometry of the resized node — written every
+     * pointermove, committed to the store once on pointer-up. While
+     * present, `store.getNode(id)` still returns the original geometry;
+     * the renderer overlays this draft via `mapDragPositions` for the
+     * interactive layer paint. Mirrors how `dragDelta` works for drag.
+     */
+    resizeDraft: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        angle: number;
+    } | null;
     marqueeRect: WorldRect | null;
     /** Whether the marquee should add to (true, shift held) or replace selection. */
     marqueeAdditive: boolean;
+    /**
+     * Live in-progress cubic controls of an edge being mid-point-dragged.
+     * Written every pointermove, committed to the store once on
+     * pointer-up. Same draft+commit model as `resizeDraft` and
+     * `dragDelta` — keeps mid-gesture mutations off the 'change' bus.
+     */
+    midpointDraft: {
+        edgeId: EdgeId;
+        control: [Vec2, Vec2];
+    } | null;
     draftEdge: {
         source: EdgeEnd;
         target: EdgeEnd;

package/dist/index.js

@@ -1048,7 +1048,6 @@ var COMPOSITE = /* @__PURE__ */ new Set([
 var isCompositePrimitive = (type) => COMPOSITE.has(type);
 var isDrawablePrimitive = (type) => ATOMIC.has(type) || COMPOSITE.has(type);
 var PLAIN_RECT_CORNER_THRESHOLD_PX = 1.5;
-var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var LAYERED_OFFSET = 12;
 var drawShape = (ctx, node, scale, theme, opts) => {
   if (!isDrawablePrimitive(node.type)) return;
@@ -1067,7 +1066,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const stroke = resolveColor(style, "strokeColor", DEFAULT_STYLE.strokeColor, theme);
   const fillVisible = !isFullyTransparent(fill);
-  const strokeVisible = strokeWidth > 0 && strokeWidth * scale >= STROKE_VISIBILITY_THRESHOLD_PX && !isFullyTransparent(stroke);
+  const strokeVisible = strokeWidth > 0 && !isFullyTransparent(stroke);
   if (!fillVisible && !strokeVisible) return;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   switch (type) {
@@ -1104,7 +1103,7 @@ var drawAtomic = (ctx, type, w, h, style, scale, theme, opts) => {
   }
   if (strokeVisible && !opts?.skipStroke) {
     ctx.strokeStyle = stroke;
-    ctx.lineWidth = strokeWidth;
+    ctx.lineWidth = Math.max(strokeWidth, 1 / scale);
     ctx.setLineDash(dashPatternFor(style?.strokeStyle, strokeWidth));
     ctx.stroke();
   }
@@ -1480,13 +1479,16 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
   const isDark = theme?.("mode") === "dark";
   const fill = resolveColor(style, "backgroundColor", DEFAULT_STYLE.backgroundColor, theme);
   const strokeColor = deriveRoughStrokeColor(rawStroke, fill, isDark);
-  const strokeWidth = resolveStrokeWidth(style, theme);
-  if (strokeWidth <= 0) return;
+  const rawStrokeWidth = resolveStrokeWidth(style, theme);
+  if (rawStrokeWidth <= 0) return;
   const roughness = style?.roughness ?? 0;
   if (roughness <= 0) return;
+  const isNoBorderIntent = isFullyTransparent(rawStroke);
+  const effectiveStrokeStyle = isNoBorderIntent ? "solid" : style?.strokeStyle ?? "solid";
+  const strokeWidth = isNoBorderIntent ? DEFAULT_STYLE.strokeWidth : rawStrokeWidth;
   const cornerRadius = (style?.roundness ?? DEFAULT_STYLE.roundness) * 4;
   const radius = Math.max(0, Math.min(cornerRadius, w / 2, h / 2));
-  const dash = dashPatternFor(style?.strokeStyle, strokeWidth);
+  const dash = dashPatternFor(effectiveStrokeStyle, strokeWidth);
   const detail = apparentDetail(Math.max(w, h), scale);
   const cacheKey = [
     type,
@@ -1495,7 +1497,7 @@ var paintAtomicRough = (rc, ctx, type, w, h, style, scale, theme, seed) => {
     radius.toFixed(1),
     strokeColor,
     strokeWidth.toFixed(2),
-    style?.strokeStyle ?? "solid",
+    effectiveStrokeStyle,
     roughness.toFixed(2),
     seed,
     detail.curveStepCount,
@@ -2646,7 +2648,7 @@ var DEFAULT_EDGE_STYLE = {
   sourceArrowhead: "none",
   targetArrowhead: "arrow-filled"
 };
-var STROKE_VISIBILITY_THRESHOLD_PX2 = 0.5;
+var STROKE_VISIBILITY_THRESHOLD_PX = 0.5;
 var ARROWHEAD_VISIBILITY_THRESHOLD_PX = 2;
 var samplePaintStride = (scale) => {
   if (scale < 0.15) return 8;
@@ -2660,7 +2662,7 @@ var drawEdge = (ctx, edge, geom, sourceNode, targetNode, scale, theme, opts) =>
   if (samples.length < 2) return;
   const style = edge.style;
   const strokeWidth = typeof style?.strokeWidth === "number" ? style.strokeWidth : theme?.("strokeWidth") ?? DEFAULT_EDGE_STYLE.strokeWidth;
-  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX2) return;
+  if (strokeWidth * scale < STROKE_VISIBILITY_THRESHOLD_PX) return;
   const strokeColor = typeof style?.strokeColor === "string" ? style.strokeColor : theme?.("edge.strokeColor") ?? DEFAULT_EDGE_STYLE.strokeColor;
   const sourceArrowhead = style?.sourceArrowhead ?? DEFAULT_EDGE_STYLE.sourceArrowhead;
   const targetArrowhead = style?.targetArrowhead ?? DEFAULT_EDGE_STYLE.targetArrowhead;
@@ -3376,6 +3378,8 @@ var idleInteractionState = () => ({
   resizeHandle: null,
   resizeLockAspect: false,
   resizeFromCenter: false,
+  resizeDraft: null,
+  midpointDraft: null,
   marqueeRect: null,
   marqueeAdditive: false,
   draftEdge: null,
@@ -4884,7 +4888,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 +4905,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 +4937,7 @@ var createRenderer = (opts) => {
   };
   const requestRepaint = () => {
     staticDirty = true;
+    cacheStale = true;
     loop.requestFrame();
   };
   const assetCache = createAssetCache({ onReady: requestRepaint });
@@ -4923,16 +4952,14 @@ 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 });
+    const baseExcludedEdges = excludedNodes ? incidentEdgeIds(excludedNodes) : null;
+    const midpointEdgeId = interaction.midpointDraft?.edgeId ?? null;
+    const excludedEdges = midpointEdgeId !== null ? /* @__PURE__ */ new Set([...baseExcludedEdges ?? [], midpointEdgeId]) : baseExcludedEdges;
+    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 +4981,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 +4995,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 +5053,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 +5063,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 +5075,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, {
@@ -5237,6 +5370,23 @@ var createRenderer = (opts) => {
         }
       }
     }
+    if (interaction.midpointDraft) {
+      const { edgeId, control } = interaction.midpointDraft;
+      const edge = store.getEdge(edgeId);
+      if (edge) {
+        const draftEdge = { ...edge, control };
+        const geom = computeEdgeGeometry(draftEdge, (id) => store.getNode(id));
+        if (geom) {
+          const sourceNode = geom.sourceNodeId ? store.getNode(geom.sourceNodeId) ?? null : null;
+          const targetNode = geom.targetNodeId ? store.getNode(geom.targetNodeId) ?? null : null;
+          drawEdge(ctx, draftEdge, geom, sourceNode, targetNode, scale, theme, {
+            zoom: camera.z,
+            dpr: interactiveSurface.dpr,
+            isMoving: true
+          });
+        }
+      }
+    }
     const selection = store.getSelection();
     const selectedNodeIds = [];
     const selectedEdgeIds = [];
@@ -5309,7 +5459,12 @@ var createRenderer = (opts) => {
           y: orig.y + interaction.dragDelta.y
         });
       } else {
-        m.set(orig.id, live);
+        const d = interaction.resizeDraft;
+        if (d) {
+          m.set(orig.id, { ...live, x: d.x, y: d.y, w: d.w, h: d.h, angle: d.angle });
+        } else {
+          m.set(orig.id, live);
+        }
       }
     }
     return m;
@@ -5340,6 +5495,7 @@ var createRenderer = (opts) => {
   const onStoreChange = () => {
     invalidateSortedCaches();
     staticDirty = true;
+    cacheStale = true;
     interactiveDirty = true;
     loop.requestFrame();
   };
@@ -5356,6 +5512,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 +5522,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 +5543,7 @@ var createRenderer = (opts) => {
     },
     invalidate() {
       staticDirty = true;
+      cacheStale = true;
       interactiveDirty = true;
       loop.requestFrame();
     },
@@ -5391,6 +5552,7 @@ var createRenderer = (opts) => {
       const b = sizeSurface(interactiveSurface, cssW, cssH, maxDpr);
       if (a || b) {
         staticDirty = true;
+        cacheStale = true;
         interactiveDirty = true;
         loop.requestFrame();
       }
@@ -5398,6 +5560,7 @@ var createRenderer = (opts) => {
     setBackground(bg) {
       background = bg;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     setSelectionColor(color) {
@@ -5408,6 +5571,7 @@ var createRenderer = (opts) => {
     setHideFrames(hidden) {
       hideFrames = hidden;
       staticDirty = true;
+      cacheStale = true;
       loop.requestFrame();
     },
     stats: () => loop.stats(),
@@ -5422,6 +5586,11 @@ var createRenderer = (opts) => {
       unsubFontEpoch();
       unsubMathEpoch();
       assetCache.dispose();
+      if (cacheSurface) {
+        cacheSurface.canvas.width = 0;
+        cacheSurface.canvas.height = 0;
+        cacheSurface = null;
+      }
     }
   };
 };