Invalidate canvas Page cache to redraw on changes

Author: wouterlucas

examples/tests/text-canvas.ts

@@ -1,9 +1,14 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 
-export async function automation(settings: ExampleSettings) {
-  await test(settings);
-  await settings.snapshot();
-}
+const Colors = {
+  Black: 0x000000ff,
+  Red: 0xff0000ff,
+  Green: 0x00ff00ff,
+  Blue: 0x0000ffff,
+  Magenta: 0xff00ffff,
+  Gray: 0x7f7f7fff,
+  White: 0xffffffff,
+};
 
 const randomIntBetween = (from: number, to: number) =>
   Math.floor(Math.random() * (to - from + 1) + from);
@@ -33,13 +38,18 @@ export default async function test(settings: ExampleSettings) {
       x: Math.random() * 1900,
       y: Math.random() * 1080,
       text: 'CANVAS ' + t,
-      color: 0x000000ff,
       fontFamily: 'sans-serif',
       parent: testRoot,
       fontSize: 80,
     });
 
     nodes.push(node);
+
+    // pick random color from Colors
+    node.color =
+      Object.values(Colors)[
+        randomIntBetween(0, Object.keys(Colors).length - 1)
+      ] || 0xff0000ff;
   };
 
   const spawn = (amount = 100) => {
@@ -58,8 +68,18 @@ export default async function test(settings: ExampleSettings) {
   const move = () => {
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
-      node.x = randomIntBetween(0, 1900);
-      node.y = randomIntBetween(0, 1080);
+      node.x = randomIntBetween(0, 1600);
+      node.y = randomIntBetween(0, 880);
+    }
+  };
+
+  const newColor = () => {
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      node.color =
+        Object.values(Colors)[
+          randomIntBetween(0, Object.keys(Colors).length - 1)
+        ] || 0x000000ff;
     }
   };
 
@@ -72,6 +92,8 @@ export default async function test(settings: ExampleSettings) {
       move();
     } else if (event.key === 'ArrowRight') {
       move();
+    } else if (event.key === '1') {
+      newColor();
     }
   });
 

src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -75,11 +75,6 @@ function getFontCssString(props: TrProps): string {
   );
 }
 
-function getFontCacheString(props: TrProps): string {
-  const { fontFamily, fontStyle, fontWeight, fontStretch } = props;
-  return [fontFamily, fontWeight, fontStyle, fontStretch].join(' ');
-}
-
 export interface CanvasTextRendererState extends TextRendererState {
   props: TrProps;
 
@@ -315,7 +310,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     let containedMaxLines = 0;
     let calcMaxLines = 0;
 
-    if (state.props.contain === 'both') {
+    if (state.props.contain === 'both' || state.props.contain === 'width') {
       containedMaxLines = Math.floor(
         (state.props.height - state.props.offsetY) / state.props.lineHeight,
       );
@@ -584,6 +579,12 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       return;
     }
 
+    // if our canvasPage texture is still valid, return early
+    if (state.canvasPage?.valid) {
+      this.setStatus(state, 'loaded');
+      return;
+    }
+
     if (state.canvasPage === undefined) {
       state.canvasPage = {
         texture: undefined,
@@ -841,11 +842,6 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
    * @param state
    */
   protected invalidateVisibleWindowCache(state: CanvasTextRendererState): void {
-    // only needed for scrollable text
-    if (state.isScrollable !== true) {
-      return;
-    }
-
     state.visibleWindow.valid = false;
     this.setStatus(state, 'loading');
     this.scheduleUpdateState(state);
@@ -861,8 +857,19 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
    * @param state
    */
   private invalidateLayoutCache(state: CanvasTextRendererState): void {
+    state.canvasPage?.texture?.free();
+
+    if (state.canvasPages) {
+      state.canvasPages.forEach((pageInfo) => {
+        pageInfo.texture?.free();
+      });
+    }
+
+    state.canvasPage = undefined;
+    state.canvasPages = undefined;
     state.renderInfo = undefined;
     state.visibleWindow.valid = false;
+
     this.setStatus(state, 'loading');
     this.scheduleUpdateState(state);
   }

src/core/textures/ImageTexture.ts

@@ -145,18 +145,14 @@ export class ImageTexture extends Texture {
   }
 
   override free(): void {
-    const cacheKey = ImageTexture.makeCacheKey(this.props);
-    if (cacheKey) {
-      this.txManager.removeTextureCacheKeyFromCache(cacheKey);
-    }
-
     if (this.props.src instanceof ImageData) {
       // ImageData is a non-cacheable texture, so we need to free it manually
       const texture = this.txManager.getCtxTexture(this);
       texture?.free();
+
+      this.props.src = '';
     }
 
-    this.props.src = '';
     this.setState('freed');
   }