virtual-tree-canvas 0.3.9 → 0.4.0

package/src/core/tree-worker-client.js

@@ -6,6 +6,8 @@ export class TreeWorkerClient {
     this.pending = new Map();
     this.ready = Promise.resolve();
     this.worker.addEventListener('message', this.#onMessage);
+    this.worker.addEventListener('error', this.#onError);
+    this.worker.addEventListener('messageerror', this.#onMessageError);
   }
 
   setData(nodes) {
@@ -27,6 +29,8 @@ export class TreeWorkerClient {
     for (const { reject } of this.pending.values()) reject(new Error('Tree worker destroyed'));
     this.pending.clear();
     this.worker.removeEventListener('message', this.#onMessage);
+    this.worker.removeEventListener('error', this.#onError);
+    this.worker.removeEventListener('messageerror', this.#onMessageError);
     this.worker.terminate();
   }
 
@@ -47,4 +51,17 @@ export class TreeWorkerClient {
     if (ok) pending.resolve(result);
     else pending.reject(new Error(error || 'Tree worker request failed'));
   };
+
+  #onError = (event) => {
+    this.#rejectPending(new Error(event.message || 'Tree worker failed'));
+  };
+
+  #onMessageError = () => {
+    this.#rejectPending(new Error('Tree worker returned an unreadable message'));
+  };
+
+  #rejectPending(error) {
+    for (const { reject } of this.pending.values()) reject(error);
+    this.pending.clear();
+  }
 }

package/src/index.d.ts

@@ -1,5 +1,17 @@
 export type TreeViewAlign = 'start' | 'center' | 'end' | 'nearest';
 
+export type IconDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, size: number, color: string) => void;
+export type IconSource = string | CanvasImageSource | IconDrawFunction;
+
+export class IconRegistry {
+  constructor(options?: { pixelRatio?: number });
+  register(name: string, icon: IconSource): any;
+  get(name: string): any;
+  onChange(listener: () => void): () => void;
+  prepare(options?: { icons?: Iterable<string>; size?: number; color?: string; pixelRatio?: number }): Promise<any[]>;
+  draw(ctx: CanvasRenderingContext2D, name: string, x: number, y: number, size: number, color: string): void;
+}
+
 export type TreeNode = {
   id: string;
   parentId?: string | null;
@@ -86,6 +98,7 @@ export class TreeViewController {
   setDynamicState(patches: DynamicPatch[]): void;
   setTheme(theme: any): void;
   setLayoutMetrics(options?: { rowHeight?: number; indentWidth?: number; headerHeight?: number }): void;
+  registerIcon(name: string, icon: IconSource): any;
   resize(width: number, height: number): void;
   render(time?: number): void;
   renderMeasured(time?: number): any;

package/src/renderers/tree-row-renderer.js

@@ -9,6 +9,9 @@ export class TreeRowRenderer {
     this.scene = null;
     this.iconRegistry = iconRegistry ?? new IconRegistry();
     this.renderedRows = 0;
+    this.iconRenderQueued = false;
+    this.preparedIconThemeKey = null;
+    this.stopIconListener = this.iconRegistry.onChange?.(() => this.#scheduleIconRender()) ?? null;
   }
 
   /** @param {HTMLCanvasElement} canvas */
@@ -22,6 +25,14 @@ export class TreeRowRenderer {
     this.scene = scene;
   }
 
+  destroy() {
+    this.stopIconListener?.();
+    this.stopIconListener = null;
+    this.canvas = null;
+    this.ctx = null;
+    this.scene = null;
+  }
+
   updateDynamicState(_patches) {
     // Canvas2D reads the state map directly; patches still stay on the hot path.
   }
@@ -43,6 +54,7 @@ export class TreeRowRenderer {
 
     const ctx = this.ctx;
     const colors = theme.colors;
+    this.#prepareThemeIcons(theme, dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.fillStyle = colors.background;
     ctx.fillRect(0, 0, viewportWidth, viewportHeight);
@@ -55,6 +67,29 @@ export class TreeRowRenderer {
     ctx.restore();
   }
 
+  #scheduleIconRender() {
+    if (this.iconRenderQueued) return;
+    this.iconRenderQueued = true;
+    const schedule = globalThis.requestAnimationFrame ?? ((callback) => setTimeout(callback, 0));
+    schedule(() => {
+      this.iconRenderQueued = false;
+      this.render();
+    });
+  }
+
+  #prepareThemeIcons(theme, pixelRatio) {
+    const iconColors = new Map([['placeholder', theme.colors.textMuted]]);
+    for (const style of Object.values(theme.types ?? {})) {
+      if (style?.icon) iconColors.set(style.icon, style.color ?? theme.colors.progressFill);
+    }
+    const key = `${pixelRatio}|${[...iconColors].map(([icon, color]) => `${icon}:${color}`).join(',')}`;
+    if (key === this.preparedIconThemeKey) return;
+    this.preparedIconThemeKey = key;
+    for (const [icon, color] of iconColors) {
+      this.iconRegistry.prepare?.({ icons: [icon], size: 15, color, pixelRatio });
+    }
+  }
+
   #drawHeader(ctx) {
     const { viewport, columns, theme, sort, headerFilter, filterQuery } = this.scene;
     if (viewport.headerHeight <= 0) return;

package/src/tree-view-controller.js

@@ -113,6 +113,7 @@ export class TreeViewController {
     this.#nativeScroll = null;
     this.inputController = null;
     this.cellEditor = null;
+    this.renderer?.destroy?.();
     this.canvas = null;
   }
 
@@ -212,8 +213,14 @@ export class TreeViewController {
 
   enableWorkers(workerUrl) {
     if (this.workerClient) return Promise.resolve(this);
-    this.workerClient = new TreeWorkerClient(workerUrl);
-    return this.workerClient.setData(this.model.nodes).then(() => this);
+    const client = new TreeWorkerClient(workerUrl);
+    this.workerClient = client;
+    return client.setData(this.model.nodes)
+      .then(() => this)
+      .catch((error) => {
+        if (this.workerClient === client) this.disableWorkers();
+        throw error;
+      });
   }
 
   disableWorkers() {