virtual-tree-canvas 0.1.0

package/src/core/icon-registry.js

@@ -0,0 +1,173 @@
+export class IconRegistry {
+  constructor() {
+    this.icons = new Map();
+    this.loading = new Map();
+    this.#registerBuiltIns();
+  }
+
+  register(name, icon) {
+    if (!name) throw new Error('Icon name is required');
+    if (this.icons.has(name)) return this.icons.get(name);
+    if (typeof icon === 'function') {
+      this.icons.set(name, { kind: 'vector', draw: icon });
+      return this.icons.get(name);
+    }
+    if (typeof icon === 'string') {
+      if (icon.trim().startsWith('<svg')) return this.#registerSvgString(name, icon);
+      return this.#registerUrl(name, icon);
+    }
+    this.icons.set(name, { kind: 'image', image: icon, loaded: true });
+    return this.icons.get(name);
+  }
+
+  get(name) {
+    return this.icons.get(name) ?? this.icons.get('placeholder');
+  }
+
+  draw(ctx, name, x, y, size, color) {
+    const icon = this.get(name);
+    if (!icon) return;
+    if (icon.kind === 'vector') {
+      icon.draw(ctx, x, y, size, color);
+      return;
+    }
+    if (icon.loaded && icon.image) {
+      ctx.drawImage(icon.image, x, y, size, size);
+      return;
+    }
+    this.get('placeholder')?.draw(ctx, x, y, size, color);
+  }
+
+  #registerUrl(name, url) {
+    if (this.icons.has(name)) return this.icons.get(name);
+    const entry = { kind: 'image', image: null, loaded: false, url };
+    this.icons.set(name, entry);
+    if (typeof Image !== 'undefined' && !this.loading.has(url)) {
+      const image = new Image();
+      image.decoding = 'async';
+      image.onload = () => {
+        entry.image = image;
+        entry.loaded = true;
+        this.loading.delete(url);
+      };
+      image.src = url;
+      this.loading.set(url, image);
+    }
+    return entry;
+  }
+
+  #registerSvgString(name, svg) {
+    if (typeof Blob === 'undefined' || typeof URL === 'undefined') {
+      this.icons.set(name, { kind: 'svg', svg, loaded: false });
+      return this.icons.get(name);
+    }
+    const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
+    return this.#registerUrl(name, url);
+  }
+
+  #registerBuiltIns() {
+    this.register('placeholder', drawPlaceholder);
+    this.register('folder', drawFolder);
+    this.register('aircraft', drawAircraft);
+    this.register('radar', drawRadar);
+    this.register('warning', drawWarning);
+    this.register('error', drawError);
+    this.register('task', drawTask);
+    this.register('track', drawTrack);
+  }
+}
+
+function drawPlaceholder(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.strokeRect(x + 2.5, y + 2.5, size - 5, size - 5);
+}
+
+function drawFolder(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x + 1, y + 5);
+  ctx.lineTo(x + size * 0.38, y + 5);
+  ctx.lineTo(x + size * 0.48, y + 8);
+  ctx.lineTo(x + size - 1, y + 8);
+  ctx.lineTo(x + size - 1, y + size - 2);
+  ctx.lineTo(x + 1, y + size - 2);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawAircraft(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x + size * 0.5, y + 1);
+  ctx.lineTo(x + size * 0.62, y + size * 0.58);
+  ctx.lineTo(x + size - 1, y + size * 0.72);
+  ctx.lineTo(x + size * 0.58, y + size * 0.78);
+  ctx.lineTo(x + size * 0.54, y + size - 1);
+  ctx.lineTo(x + size * 0.46, y + size - 1);
+  ctx.lineTo(x + size * 0.42, y + size * 0.78);
+  ctx.lineTo(x + 1, y + size * 0.72);
+  ctx.lineTo(x + size * 0.38, y + size * 0.58);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawRadar(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.arc(x + size / 2, y + size / 2, size * 0.34, -0.4, Math.PI * 1.4);
+  ctx.moveTo(x + size / 2, y + size / 2);
+  ctx.lineTo(x + size * 0.84, y + size * 0.28);
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(x + size / 2, y + size / 2, 2, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function drawWarning(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x + size / 2, y + 1);
+  ctx.lineTo(x + size - 1, y + size - 2);
+  ctx.lineTo(x + 1, y + size - 2);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawError(ctx, x, y, size, color) {
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(x + size / 2, y + size / 2, size * 0.42, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.strokeStyle = '#ffffff';
+  ctx.beginPath();
+  ctx.moveTo(x + 5, y + 5);
+  ctx.lineTo(x + size - 5, y + size - 5);
+  ctx.moveTo(x + size - 5, y + 5);
+  ctx.lineTo(x + 5, y + size - 5);
+  ctx.stroke();
+}
+
+function drawTask(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.strokeRect(x + 3, y + 2, size - 6, size - 4);
+  ctx.beginPath();
+  ctx.moveTo(x + 5, y + size * 0.52);
+  ctx.lineTo(x + size * 0.42, y + size - 5);
+  ctx.lineTo(x + size - 5, y + 5);
+  ctx.stroke();
+}
+
+function drawTrack(ctx, x, y, size, color) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.arc(x + size / 2, y + size / 2, size * 0.34, 0, Math.PI * 2);
+  ctx.moveTo(x + size / 2, y + 1);
+  ctx.lineTo(x + size / 2, y + size - 1);
+  ctx.moveTo(x + 1, y + size / 2);
+  ctx.lineTo(x + size - 1, y + size / 2);
+  ctx.stroke();
+}

package/src/core/index.js

@@ -0,0 +1,19 @@
+export * from './asset-manager.js';
+export * from './culling.js';
+export * from './event-emitter.js';
+export * from './icon-registry.js';
+export * from './layout-engine.js';
+export * from './patch-batcher.js';
+export * from './scene.js';
+export * from './search-index.js';
+export * from './selection-manager.js';
+export * from './theme-manager.js';
+export * from './tree-column-model.js';
+export * from './tree-expansion-manager.js';
+export * from './tree-index.js';
+export * from './tree-model.js';
+export * from './tree-worker-client.js';
+export * from './tree-worker-operations.js';
+export * from './tree-view-viewport.js';
+export * from './viewport.js';
+export * from './visible-row-model.js';

package/src/core/layout-engine.js

@@ -0,0 +1,64 @@
+/**
+ * Simple top-down hierarchical layout. Replaceable by design.
+ */
+export class TreeLayoutEngine {
+  constructor(options = {}) {
+    this.nodeWidth = options.nodeWidth ?? 132;
+    this.nodeHeight = options.nodeHeight ?? 26;
+    this.levelGap = options.levelGap ?? 92;
+    this.rowGap = options.rowGap ?? 12;
+  }
+
+  /**
+   * @param {import('./tree-model.js').TreeModel} model
+   */
+  layout(model) {
+    /** @type {import('./types.js').LayoutNode[]} */
+    const layoutNodes = [];
+    /** @type {{ sourceIndex: number, targetIndex: number }[]} */
+    const edges = [];
+    const typeMap = new Map();
+    const iconMap = new Map();
+    let row = 0;
+
+    const typeIndex = (value = '') => {
+      if (!typeMap.has(value)) typeMap.set(value, typeMap.size);
+      return typeMap.get(value);
+    };
+    const iconIndex = (value = '') => {
+      if (!iconMap.has(value)) iconMap.set(value, iconMap.size);
+      return iconMap.get(value);
+    };
+
+    const visit = (id, depth, parentIndex) => {
+      if (!model.isVisibleByExpansion(id)) return;
+      const node = model.index.getNode(id);
+      if (!node) return;
+      const index = layoutNodes.length;
+      const item = {
+        index,
+        id: node.id,
+        parentIndex,
+        x: depth * this.levelGap,
+        y: row * (this.nodeHeight + this.rowGap),
+        width: this.nodeWidth,
+        height: this.nodeHeight,
+        depth,
+        iconIndex: iconIndex(node.icon),
+        typeIndex: typeIndex(node.type),
+      };
+      layoutNodes.push(item);
+      if (parentIndex >= 0) edges.push({ sourceIndex: parentIndex, targetIndex: index });
+      row++;
+      if (!model.expanded.has(id)) return;
+      for (const childId of model.index.getChildren(id)) visit(childId, depth + 1, index);
+    };
+
+    for (const rootId of model.index.roots) visit(rootId, 0, -1);
+
+    const width = layoutNodes.reduce((max, node) => Math.max(max, node.x + node.width), 0);
+    const height = layoutNodes.reduce((max, node) => Math.max(max, node.y + node.height), 0);
+    return { nodes: layoutNodes, edges, bounds: { x: 0, y: 0, width, height }, typeMap, iconMap };
+  }
+}
+

package/src/core/patch-batcher.js

@@ -0,0 +1,29 @@
+export class PatchBatcher {
+  constructor() {
+    /** @type {Map<string, import('./types.js').NodeDynamicState>} */
+    this.pending = new Map();
+  }
+
+  /** @param {string} id @param {import('./types.js').NodeDynamicState} state */
+  set(id, state) {
+    const current = this.pending.get(id);
+    if (current) Object.assign(current, state);
+    else this.pending.set(id, { ...state });
+  }
+
+  /** @param {Array<import('./types.js').DynamicPatch>} patches */
+  addMany(patches) {
+    for (const patch of patches) this.set(patch.id, patch.state);
+  }
+
+  flush() {
+    const patches = Array.from(this.pending, ([id, state]) => ({ id, state }));
+    this.pending.clear();
+    return patches;
+  }
+
+  get size() {
+    return this.pending.size;
+  }
+}
+

package/src/core/scene.js

@@ -0,0 +1,13 @@
+/**
+ * Builds the renderer scene from cold-path layout data and hot-path state maps.
+ */
+export function createScene(model, layout) {
+  const idToLayoutIndex = new Map(layout.nodes.map((node) => [node.id, node.index]));
+  return {
+    model,
+    layout,
+    idToLayoutIndex,
+    dynamicState: model.dynamicState,
+  };
+}
+

package/src/core/search-index.js

@@ -0,0 +1,70 @@
+export class TreeSearchIndex {
+  constructor() {
+    this.records = [];
+    this.results = [];
+    this.cursor = -1;
+    this.lastQuery = '';
+  }
+
+  /** @param {import('./tree-model.js').TreeModel} model */
+  rebuild(model) {
+    this.records = model.nodes.map((node) => ({
+      id: node.id,
+      label: (node.label ?? '').toLowerCase(),
+      path: (model.index.pathById.get(node.id) ?? '').toLowerCase(),
+      tags: (node.tags ?? []).join(' ').toLowerCase(),
+      type: (node.type ?? '').toLowerCase(),
+    }));
+  }
+
+  /**
+   * @param {string} query
+   * @param {{ fields?: string[], limit?: number }} options
+   */
+  search(query, options = {}) {
+    const q = query.trim().toLowerCase();
+    this.lastQuery = query;
+    if (!q) {
+      this.results = [];
+      this.cursor = -1;
+      return [];
+    }
+    const fields = options.fields ?? ['label', 'id', 'path', 'tags', 'type'];
+    const limit = options.limit ?? 100;
+    const results = [];
+    for (const record of this.records) {
+      for (const field of fields) {
+        if (String(record[field] ?? '').includes(q)) {
+          results.push(record.id);
+          break;
+        }
+      }
+      if (results.length >= limit) break;
+    }
+    this.results = results;
+    this.cursor = results.length ? 0 : -1;
+    return results;
+  }
+
+  nextSearchResult() {
+    if (!this.results.length) return null;
+    this.cursor = (this.cursor + 1) % this.results.length;
+    return this.results[this.cursor];
+  }
+
+  previousSearchResult() {
+    if (!this.results.length) return null;
+    this.cursor = (this.cursor - 1 + this.results.length) % this.results.length;
+    return this.results[this.cursor];
+  }
+
+  currentSearchResult() {
+    return this.cursor >= 0 ? this.results[this.cursor] ?? null : null;
+  }
+
+  clear() {
+    this.results = [];
+    this.cursor = -1;
+    this.lastQuery = '';
+  }
+}

package/src/core/selection-manager.js

@@ -0,0 +1,38 @@
+export class TreeSelectionManager extends EventTarget {
+  constructor() {
+    super();
+    this.selected = new Set();
+    this.hovered = null;
+    this.focused = null;
+  }
+
+  setHover(id) {
+    if (this.hovered === id) return;
+    this.hovered = id;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  select(id, additive = false) {
+    if (!additive) this.selected.clear();
+    if (id) this.selected.add(id);
+    this.focused = id;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  toggle(id) {
+    if (this.selected.has(id)) this.selected.delete(id);
+    else this.selected.add(id);
+    this.focused = id;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  clear() {
+    this.selected.clear();
+    this.focused = null;
+    this.dispatchEvent(new Event('change'));
+  }
+
+  toPatches() {
+    return Array.from(this.selected, (id) => ({ id, state: { selected: true } }));
+  }
+}

package/src/core/theme-manager.js

@@ -0,0 +1,162 @@
+export const darkTheme = {
+  rowHeight: 28,
+  indentWidth: 18,
+  font: '12px system-ui, sans-serif',
+  colors: {
+    background: '#0b1020',
+    row: '#0b1020',
+    rowHover: '#111827',
+    rowSelected: '#1e3a8a',
+    rowHighlighted: '#3b0764',
+    text: '#e5e7eb',
+    textMuted: '#94a3b8',
+    guide: '#1f2937',
+    chevron: '#94a3b8',
+    focus: '#38bdf8',
+    progressTrack: '#1f2937',
+    progressFill: '#22c55e',
+    badgeText: '#ffffff',
+    border: '#1f2937',
+  },
+  types: {
+    root: { icon: 'folder', color: '#38bdf8' },
+    system: { icon: 'folder', color: '#818cf8' },
+    platform: { icon: 'aircraft', color: '#60a5fa' },
+    sensor: { icon: 'radar', color: '#34d399' },
+    track: { icon: 'track', color: '#a78bfa' },
+    warning: { icon: 'warning', color: '#facc15' },
+    error: { icon: 'error', color: '#ef4444' },
+    task: { icon: 'task', color: '#f97316' },
+  },
+  statuses: {
+    0: { label: 'OK', color: '#22c55e' },
+    1: { label: 'WARN', color: '#facc15' },
+    2: { label: 'ERR', color: '#ef4444' },
+  },
+};
+
+export const lightTheme = {
+  ...darkTheme,
+  colors: {
+    background: '#f8fafc',
+    row: '#ffffff',
+    rowHover: '#e2e8f0',
+    rowSelected: '#bfdbfe',
+    rowHighlighted: '#f3e8ff',
+    text: '#0f172a',
+    textMuted: '#64748b',
+    guide: '#cbd5e1',
+    chevron: '#64748b',
+    focus: '#0284c7',
+    progressTrack: '#e2e8f0',
+    progressFill: '#16a34a',
+    badgeText: '#ffffff',
+    border: '#e2e8f0',
+  },
+};
+
+export const tacticalTheme = {
+  ...darkTheme,
+  colors: {
+    background: '#050806',
+    row: '#050806',
+    rowHover: '#0d1f13',
+    rowSelected: '#12351f',
+    rowHighlighted: '#372b0a',
+    text: '#d7ffe3',
+    textMuted: '#7fa88c',
+    guide: '#183321',
+    chevron: '#7fa88c',
+    focus: '#7ddc92',
+    progressTrack: '#102217',
+    progressFill: '#45d483',
+    badgeText: '#031006',
+    border: '#183321',
+  },
+  types: {
+    ...darkTheme.types,
+    root: { icon: 'folder', color: '#7ddc92' },
+    platform: { icon: 'aircraft', color: '#93c572' },
+    sensor: { icon: 'radar', color: '#45d483' },
+    track: { icon: 'track', color: '#d6f264' },
+    warning: { icon: 'warning', color: '#ffd166' },
+    error: { icon: 'error', color: '#ff5c5c' },
+  },
+};
+
+export const themes = {
+  dark: darkTheme,
+  light: lightTheme,
+  tactical: tacticalTheme,
+};
+
+export class ThemeManager extends EventTarget {
+  constructor(theme = darkTheme) {
+    super();
+    this.theme = normalizeTheme(theme);
+  }
+
+  setTheme(theme) {
+    this.theme = normalizeTheme(theme);
+    this.dispatchEvent(new Event('change'));
+  }
+
+  get() {
+    return this.theme;
+  }
+
+  /** @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);
+    return {
+      icon: state.icon ?? node?.icon ?? typeRule.icon ?? 'placeholder',
+      color: state.color ?? typeRule.color ?? this.theme.colors.progressFill,
+      typeColor: typeRule.color ?? this.theme.colors.progressFill,
+      status: statusRule,
+      font: this.theme.font,
+      colors: this.theme.colors,
+    };
+  }
+
+  resolveStatus(status) {
+    const key = status ?? 0;
+    return this.theme.statuses[key] ?? { label: String(key), color: this.theme.colors.textMuted };
+  }
+}
+
+function normalizeTheme(theme = {}) {
+  const base = mergeTheme(darkTheme, theme);
+  return {
+    ...base,
+    // Compatibility aliases for the graph renderer and older row renderer code.
+    background: base.colors.background,
+    nodeFill: base.colors.progressTrack,
+    nodeStroke: base.colors.border,
+    edge: base.colors.guide,
+    label: base.colors.text,
+    mutedLabel: base.colors.textMuted,
+    selected: base.colors.focus,
+    selectedRow: base.colors.rowSelected,
+    highlighted: base.colors.rowHighlighted,
+    highlightedRow: base.colors.rowHighlighted,
+    hoverRow: base.colors.rowHover,
+    rowBorder: base.colors.border,
+    focusOutline: base.colors.focus,
+    indentGuide: base.colors.guide,
+    chevron: base.colors.chevron,
+    chevronMuted: base.colors.textMuted,
+    progress: base.colors.progressFill,
+  };
+}
+
+function mergeTheme(base, override) {
+  return {
+    ...base,
+    ...override,
+    colors: { ...base.colors, ...(override.colors ?? {}) },
+    types: { ...base.types, ...(override.types ?? {}) },
+    statuses: { ...base.statuses, ...(override.statuses ?? {}) },
+  };
+}
+