virtual-tree-canvas 0.6.0 → 0.7.1

package/src/core/theme-manager.js

@@ -3,7 +3,8 @@ export const darkTheme = {
   indentWidth: 18,
   font: '12px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
   unitFont: '11px ui-monospace, SFMono-Regular, Consolas, monospace',
-  monoFont: '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace',
+  monoFont:
+    '12px "JetBrains Mono", "Cascadia Mono", "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace',
   colors: {
     background: '#0a0f1c',
     row: '#0a0f1c',
@@ -30,44 +31,146 @@ export const darkTheme = {
     badgeText: '#ffffff',
     border: '#1b2637',
     borderStrong: '#2b3b52',
-    shadow: 'rgba(0,0,0,.24)',
+    shadow: 'rgba(0,0,0,.24)'
+  },
+  valueColors: {
+    number: '#8bd5ee',
+    bigint: '#8bd5ee',
+    string: '#dde5ef',
+    boolean: '#86d6b5',
+    enum: '#c4b5fd',
+    null: '#9aa9bc',
+    undefined: '#9aa9bc'
   },
   types: {
-    root: { icon: 'folder', color: '#38bdf8' },
-    system: { icon: 'folder', color: '#818cf8' },
-    platform: { icon: 'aircraft', color: '#60a5fa' },
-    air: { icon: 'aircraft', color: '#60a5fa' },
-    ground: { icon: 'ground', color: '#a3e635' },
-    surface: { icon: 'surface', color: '#22d3ee' },
-    subsurface: { icon: 'subsurface', color: '#38bdf8' },
-    space: { icon: 'space', color: '#c084fc' },
-    munition: { icon: 'munition', color: '#fb7185' },
-    sensor: { icon: 'radar', color: '#34d399' },
-    track: { icon: 'track', color: '#a78bfa' },
-    geometry: { icon: 'point', color: '#38bdf8' },
-    control: { icon: 'control', color: '#f59e0b' },
-    situation: { icon: 'situation', color: '#2dd4bf' },
-    damage: { icon: 'damage', color: '#fb7185' },
-    warning: { icon: 'warning', color: '#facc15' },
-    error: { icon: 'error', color: '#ef4444' },
-    task: { icon: 'task', color: '#f97316' },
-    bus: { icon: 'data-bus', color: '#22d3ee' },
-    object: { icon: 'inspector-object', color: '#7dd3fc' },
-    array: { icon: 'inspector-array', color: '#a78bfa' },
-    string: { icon: 'inspector-value', color: '#94a3b8' },
-    number: { icon: 'inspector-value', color: '#34d399' },
-    boolean: { icon: 'inspector-value', color: '#22c55e' },
-    null: { icon: 'inspector-value', color: '#64748b' },
+    root: {
+      icon: 'folder',
+      color: '#38bdf8'
+    },
+    system: {
+      icon: 'folder',
+      color: '#818cf8'
+    },
+    platform: {
+      icon: 'aircraft',
+      color: '#60a5fa'
+    },
+    air: {
+      icon: 'aircraft',
+      color: '#60a5fa'
+    },
+    ground: {
+      icon: 'ground',
+      color: '#a3e635'
+    },
+    surface: {
+      icon: 'surface',
+      color: '#22d3ee'
+    },
+    subsurface: {
+      icon: 'subsurface',
+      color: '#38bdf8'
+    },
+    space: {
+      icon: 'space',
+      color: '#c084fc'
+    },
+    munition: {
+      icon: 'munition',
+      color: '#fb7185'
+    },
+    sensor: {
+      icon: 'radar',
+      color: '#34d399'
+    },
+    track: {
+      icon: 'track',
+      color: '#a78bfa'
+    },
+    geometry: {
+      icon: 'point',
+      color: '#38bdf8'
+    },
+    control: {
+      icon: 'control',
+      color: '#f59e0b'
+    },
+    situation: {
+      icon: 'situation',
+      color: '#2dd4bf'
+    },
+    damage: {
+      icon: 'damage',
+      color: '#fb7185'
+    },
+    warning: {
+      icon: 'warning',
+      color: '#facc15'
+    },
+    error: {
+      icon: 'error',
+      color: '#ef4444'
+    },
+    task: {
+      icon: 'task',
+      color: '#f97316'
+    },
+    bus: {
+      icon: 'data-bus',
+      color: '#22d3ee'
+    },
+    object: {
+      icon: 'inspector-object',
+      color: '#7dd3fc'
+    },
+    array: {
+      icon: 'inspector-array',
+      color: '#a78bfa'
+    },
+    string: {
+      icon: 'inspector-value',
+      color: '#94a3b8'
+    },
+    number: {
+      icon: 'inspector-value',
+      color: '#34d399'
+    },
+    boolean: {
+      icon: 'inspector-value',
+      color: '#22c55e'
+    },
+    null: {
+      icon: 'inspector-value',
+      color: '#64748b'
+    }
   },
   statuses: {
-    0: { label: 'OK', color: '#22c55e' },
-    1: { label: 'WARN', color: '#facc15' },
-    2: { label: 'ERR', color: '#ef4444' },
-  },
+    0: {
+      label: 'OK',
+      color: '#22c55e'
+    },
+    1: {
+      label: 'WARN',
+      color: '#facc15'
+    },
+    2: {
+      label: 'ERR',
+      color: '#ef4444'
+    }
+  }
 };
 
 export const lightTheme = {
   ...darkTheme,
+  valueColors: {
+    number: '#075985',
+    bigint: '#075985',
+    string: '#182438',
+    boolean: '#176249',
+    enum: '#6b3fa0',
+    null: '#576579',
+    undefined: '#576579'
+  },
   colors: {
     background: '#f8fafc',
     row: '#ffffff',
@@ -94,8 +197,8 @@ export const lightTheme = {
     badgeFill: '#e2e8f0',
     border: '#e2e8f0',
     borderStrong: '#cbd5e1',
-    shadow: 'rgba(15,23,42,.1)',
-  },
+    shadow: 'rgba(15,23,42,.1)'
+  }
 };
 
 export const tacticalTheme = {
@@ -123,34 +226,85 @@ export const tacticalTheme = {
     badgeFill: '#102217',
     border: '#183321',
     borderStrong: '#295337',
-    shadow: 'rgba(0,0,0,.3)',
+    shadow: 'rgba(0,0,0,.3)'
   },
   types: {
     ...darkTheme.types,
-    root: { icon: 'folder', color: '#7ddc92' },
-    platform: { icon: 'aircraft', color: '#93c572' },
-    air: { icon: 'aircraft', color: '#93c572' },
-    ground: { icon: 'ground', color: '#c7f36f' },
-    surface: { icon: 'surface', color: '#67e8f9' },
-    subsurface: { icon: 'subsurface', color: '#7dd3fc' },
-    space: { icon: 'space', color: '#d8b4fe' },
-    munition: { icon: 'munition', color: '#ff8fab' },
-    sensor: { icon: 'radar', color: '#45d483' },
-    track: { icon: 'track', color: '#d6f264' },
-    geometry: { icon: 'point', color: '#7ddc92' },
-    control: { icon: 'control', color: '#ffd166' },
-    situation: { icon: 'situation', color: '#8be9d9' },
-    damage: { icon: 'damage', color: '#ff8fab' },
-    warning: { icon: 'warning', color: '#ffd166' },
-    error: { icon: 'error', color: '#ff5c5c' },
-    bus: { icon: 'data-bus', color: '#67e8f9' },
-  },
+    root: {
+      icon: 'folder',
+      color: '#7ddc92'
+    },
+    platform: {
+      icon: 'aircraft',
+      color: '#93c572'
+    },
+    air: {
+      icon: 'aircraft',
+      color: '#93c572'
+    },
+    ground: {
+      icon: 'ground',
+      color: '#c7f36f'
+    },
+    surface: {
+      icon: 'surface',
+      color: '#67e8f9'
+    },
+    subsurface: {
+      icon: 'subsurface',
+      color: '#7dd3fc'
+    },
+    space: {
+      icon: 'space',
+      color: '#d8b4fe'
+    },
+    munition: {
+      icon: 'munition',
+      color: '#ff8fab'
+    },
+    sensor: {
+      icon: 'radar',
+      color: '#45d483'
+    },
+    track: {
+      icon: 'track',
+      color: '#d6f264'
+    },
+    geometry: {
+      icon: 'point',
+      color: '#7ddc92'
+    },
+    control: {
+      icon: 'control',
+      color: '#ffd166'
+    },
+    situation: {
+      icon: 'situation',
+      color: '#8be9d9'
+    },
+    damage: {
+      icon: 'damage',
+      color: '#ff8fab'
+    },
+    warning: {
+      icon: 'warning',
+      color: '#ffd166'
+    },
+    error: {
+      icon: 'error',
+      color: '#ff5c5c'
+    },
+    bus: {
+      icon: 'data-bus',
+      color: '#67e8f9'
+    }
+  }
 };
 
 export const themes = {
   dark: darkTheme,
   light: lightTheme,
-  tactical: tacticalTheme,
+  tactical: tacticalTheme
 };
 
 export class ThemeManager extends EventTarget {
@@ -168,7 +322,10 @@ export class ThemeManager extends EventTarget {
     return this.theme;
   }
 
-  /** @param {import('./types.js').TreeNode} node @param {import('./types.js').NodeDynamicState} state */
+  /**
+   * @param {import('./types.js').TreeNode} node
+   * @param {import('./types.js').NodeDynamicState} state
+   */
   resolveNodeStyle(node, state = {}) {
     const typeRule = this.theme.types[node?.type ?? ''] ?? {};
     const statusRule = this.resolveStatus(state.status);
@@ -178,14 +335,20 @@ export class ThemeManager extends EventTarget {
       typeColor: typeRule.color ?? this.theme.colors.progressFill,
       status: statusRule,
       font: this.theme.font,
-      colors: this.theme.colors,
+      colors: this.theme.colors
     };
   }
 
   resolveStatus(status) {
     const key = status ?? 0;
-    return this.theme.statuses[key] ?? { label: String(key), color: this.theme.colors.textMuted };
+    return (
+      this.theme.statuses[key] ?? {
+        label: String(key),
+        color: this.theme.colors.textMuted
+      }
+    );
   }
+
 }
 
 export function resolveTheme(theme = {}) {
@@ -193,7 +356,8 @@ export function resolveTheme(theme = {}) {
     if (!Object.hasOwn(themes, theme)) throw new TypeError(`Unknown virtual tree theme: ${theme}`);
     return themes[theme];
   }
-  if (!theme || typeof theme !== 'object' || Array.isArray(theme)) throw new TypeError('theme must be a theme name or object');
+  if (!theme || typeof theme !== 'object' || Array.isArray(theme))
+    throw new TypeError('theme must be a theme name or object');
   return theme;
 }
 
@@ -219,7 +383,7 @@ function normalizeTheme(theme = {}) {
     indentGuide: base.colors.guide,
     chevron: base.colors.chevron,
     chevronMuted: base.colors.textMuted,
-    progress: base.colors.progressFill,
+    progress: base.colors.progressFill
   };
 }
 
@@ -227,8 +391,21 @@ function mergeTheme(base, override) {
   return {
     ...base,
     ...override,
-    colors: { ...base.colors, ...(override.colors ?? {}) },
-    types: { ...base.types, ...(override.types ?? {}) },
-    statuses: { ...base.statuses, ...(override.statuses ?? {}) },
+    colors: {
+      ...base.colors,
+      ...(override.colors ?? {})
+    },
+    valueColors: {
+      ...base.valueColors,
+      ...(override.valueColors ?? {})
+    },
+    types: {
+      ...base.types,
+      ...(override.types ?? {})
+    },
+    statuses: {
+      ...base.statuses,
+      ...(override.statuses ?? {})
+    }
   };
 }

package/src/core/tree-cell-layout.js

@@ -0,0 +1,11 @@
+/**
+ * Share tree-cell positions between painting, hit testing and tooltips.
+ */
+export function treeCellLayout(depth, indentWidth, hasHierarchy) {
+  const indent = depth * indentWidth;
+  return {
+    chevronX: hasHierarchy ? indent + 10 : null,
+    iconX: indent + (hasHierarchy ? 27 : 8),
+    labelX: indent + (hasHierarchy ? 50 : 31)
+  };
+}

package/src/core/tree-column-model.js

@@ -6,7 +6,7 @@ export const builtInColumns = {
     minWidth: 160,
     align: 'left',
     kind: 'tree',
-    value: (node) => node.label ?? node.id,
+    value: (node) => node.label ?? node.id
   },
   status: {
     id: 'status',
@@ -15,7 +15,7 @@ export const builtInColumns = {
     minWidth: 64,
     align: 'center',
     kind: 'status',
-    value: (_node, state) => state.status ?? 0,
+    value: (_node, state) => state.status ?? 0
   },
   value: {
     id: 'value',
@@ -24,7 +24,7 @@ export const builtInColumns = {
     minWidth: 56,
     align: 'right',
     kind: 'value',
-    value: (_node, state) => state.value ?? '',
+    value: (_node, state) => state.value ?? ''
   },
   progress: {
     id: 'progress',
@@ -33,7 +33,7 @@ export const builtInColumns = {
     minWidth: 80,
     align: 'left',
     kind: 'progress',
-    value: (_node, state) => state.progress ?? '',
+    value: (_node, state) => state.progress ?? ''
   },
   type: {
     id: 'type',
@@ -42,7 +42,7 @@ export const builtInColumns = {
     minWidth: 70,
     align: 'left',
     kind: 'type',
-    value: (node) => node.type ?? '',
+    value: (node) => node.type ?? ''
   },
   updated: {
     id: 'updated',
@@ -51,15 +51,18 @@ export const builtInColumns = {
     minWidth: 84,
     align: 'right',
     kind: 'updated',
-    value: (_node, state) => state.updatedAt ?? '',
-  },
+    value: (_node, state) => state.updatedAt ?? ''
+  }
 };
 
 export class TreeColumnModel {
   constructor(columns = [builtInColumns.tree]) {
     this.columns = [];
     this.contentWidth = 0;
-    this.sort = { columnId: null, direction: null };
+    this.sort = {
+      columnId: null,
+      direction: null
+    };
     this.setColumns(columns);
   }
 
@@ -69,21 +72,57 @@ export class TreeColumnModel {
     if (!this.columns.some((column) => column.kind === 'tree' || column.kind === 'inspectorPane')) {
       this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
     }
+    this.setRowActions(this.rowActionCount ?? 0);
     this.setRowReorder(this.rowReorder);
     this.#layout();
   }
 
   setRowReorder(enabled) {
     this.rowReorder = Boolean(enabled);
-    this.columns = this.columns.filter(column => column.id !== '__vtc_row_order');
-    if (this.rowReorder) this.columns.unshift(normalizeColumn({
-      id: '__vtc_row_order', label: '', kind: 'rowOrder', width: 72, minWidth: 72,
-      sortable: false, resizable: false
-    }, 0));
+    this.columns = this.columns.filter((column) => column.id !== '__vtc_row_order');
+    if (this.rowReorder)
+      this.columns.unshift(
+        normalizeColumn(
+          {
+            id: '__vtc_row_order',
+            label: '',
+            kind: 'rowOrder',
+            width: 72,
+            minWidth: 72,
+            sortable: false,
+            resizable: false
+          },
+          0
+        )
+      );
     this.#layout();
   }
 
-  /** @param {number} x */
+  setRowActions(count) {
+    this.rowActionCount = count;
+    this.columns = this.columns.filter((column) => column.id !== '__vtc_actions');
+    if (count)
+      this.columns.push(
+        normalizeColumn(
+          {
+            id: '__vtc_actions',
+            label: '',
+            kind: 'text',
+            width: count * 28,
+            minWidth: count * 28,
+            sortable: false,
+            resizable: false,
+            value: () => ''
+          },
+          0
+        )
+      );
+    this.#layout();
+  }
+
+  /**
+   * @param {number} x
+   */
   getColumnAt(x) {
     return this.columns.find((column) => x >= column.x && x < column.x + column.width) ?? null;
   }
@@ -101,25 +140,37 @@ export class TreeColumnModel {
   }
 
   moveColumn(id, targetIndex) {
-    if (id === '__vtc_row_order') return false;
+    if (id === '__vtc_row_order' || id === '__vtc_actions') return false;
     const currentIndex = this.columns.findIndex((column) => column.id === id);
     if (currentIndex === -1) return false;
     const [column] = this.columns.splice(currentIndex, 1);
-    const nextIndex = Math.max(this.rowReorder ? 1 : 0, Math.min(this.columns.length, targetIndex));
+    const nextIndex = Math.max(
+      this.rowReorder ? 1 : 0,
+      Math.min(this.columns.length - (this.rowActionCount ? 1 : 0), targetIndex)
+    );
     this.columns.splice(nextIndex, 0, column);
-    if (!this.columns.some((item) => item.kind === 'tree')) this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
+    if (!this.columns.some((item) => item.kind === 'tree'))
+      this.columns.unshift(normalizeColumn(builtInColumns.tree, 0));
     this.#layout();
     return true;
   }
 
   setSort(columnId, direction) {
     if (columnId !== null && !this.getColumn(columnId)) return false;
-    this.sort = { columnId, direction };
+    this.sort = {
+      columnId,
+      direction
+    };
     return true;
   }
 
   getResizeHandleAt(x, tolerance = 5) {
-    return this.columns.find((column) => column.resizable !== false && Math.abs(x - (column.x + column.width)) <= tolerance) ?? null;
+    return (
+      this.columns.find(
+        (column) =>
+          column.resizable !== false && Math.abs(x - (column.x + column.width)) <= tolerance
+      ) ?? null
+    );
   }
 
   #layout() {
@@ -130,16 +181,22 @@ export class TreeColumnModel {
     }
     this.contentWidth = x;
   }
+
 }
 
 export function defaultTreeTableColumns() {
   return [
-    { ...builtInColumns.tree, id: 'name', label: 'Name', width: 340 },
+    {
+      ...builtInColumns.tree,
+      id: 'name',
+      label: 'Name',
+      width: 340
+    },
     builtInColumns.type,
     builtInColumns.status,
     builtInColumns.value,
     builtInColumns.progress,
-    builtInColumns.updated,
+    builtInColumns.updated
   ];
 }
 
@@ -158,7 +215,9 @@ function normalizeColumn(column, index) {
     sortable: source.sortable ?? true,
     resizable: source.resizable ?? true,
     value: source.value ?? ((node) => node[source.id] ?? ''),
+    format: source.format,
+    valueType: source.valueType,
     render: source.render,
-    x: 0,
+    x: 0
   };
 }

package/src/core/tree-model.js

@@ -1,5 +1,5 @@
 import { TreeIndex } from './tree-index.js';
-import { mergeDynamicState } from './dynamic-state.js';
+import { mergeDynamicStateChanged } from './dynamic-state.js';
 
 /**
  * Owns structural nodes, expanded state, and per-node dynamic state.
@@ -86,11 +86,13 @@ export class TreeModel extends EventTarget {
    * @param {Array<import('./types.js').DynamicPatch>} patches
    */
   applyDynamicPatches(patches) {
+    const changedIds = new Set();
     for (const patch of patches) {
       const current = this.dynamicState.get(patch.id);
       if (!current) continue;
-      mergeDynamicState(current, patch.state);
+      if (mergeDynamicStateChanged(current, patch.state)) changedIds.add(patch.id);
     }
+    return changedIds;
   }
 
   /** @param {string} id */

package/src/core/types.js

@@ -7,6 +7,7 @@
  * @property {string} [icon]
  * @property {string} [image]
  * @property {string[]} [tags]
+ * @property {boolean} [reorderable] Allow manual reordering of this node (defaults to true).
  * @property {any} [data]
  */