virtual-tree-canvas 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-tree-canvas",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "High-performance Canvas2D virtual tree/table widget for very large hierarchical datasets.",
   "type": "module",
   "main": "./src/index.js",

package/src/core/icon-registry.js

@@ -73,6 +73,7 @@ export class IconRegistry {
     this.register('warning', drawWarning);
     this.register('error', drawError);
     this.register('task', drawTask);
+    this.register('bus', drawBus);
     this.register('track', drawTrack);
     this.register('point', drawPoint);
     this.register('munition', drawMunition);
@@ -173,6 +174,33 @@ function drawTask(ctx, x, y, size, color) {
   ctx.stroke();
 }
 
+function drawBus(ctx, x, y, size, color) {
+  const left = x + size * 0.22;
+  const right = x + size * 0.82;
+  const ys = [y + size * 0.32, y + size * 0.5, y + size * 0.68];
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1.25;
+
+  ctx.beginPath();
+  ctx.moveTo(left, ys[0]);
+  ctx.lineTo(right, ys[0]);
+  ctx.moveTo(left, ys[1]);
+  ctx.lineTo(right, ys[1]);
+  ctx.moveTo(left, ys[2]);
+  ctx.lineTo(right, ys[2]);
+  ctx.moveTo(left, ys[0]);
+  ctx.lineTo(left, ys[2]);
+  ctx.stroke();
+
+  for (const cy of ys) {
+    ctx.beginPath();
+    ctx.arc(left, cy, size * 0.075, 0, Math.PI * 2);
+    ctx.arc(right, cy, size * 0.075, 0, Math.PI * 2);
+    ctx.fill();
+  }
+}
+
 function drawTrack(ctx, x, y, size, color) {
   ctx.strokeStyle = color;
   ctx.lineWidth = 1.5;

package/src/core/theme-manager.js

@@ -38,6 +38,7 @@ export const darkTheme = {
     warning: { icon: 'warning', color: '#facc15' },
     error: { icon: 'error', color: '#ef4444' },
     task: { icon: 'task', color: '#f97316' },
+    bus: { icon: 'bus', color: '#22d3ee' },
     object: { icon: 'inspector-object', color: '#7dd3fc' },
     array: { icon: 'inspector-array', color: '#a78bfa' },
     string: { icon: 'inspector-value', color: '#94a3b8' },
@@ -108,6 +109,7 @@ export const tacticalTheme = {
     damage: { icon: 'damage', color: '#ff8fab' },
     warning: { icon: 'warning', color: '#ffd166' },
     error: { icon: 'error', color: '#ff5c5c' },
+    bus: { icon: 'bus', color: '#67e8f9' },
   },
 };
 

package/src/inspector/cell-editor-manager.js

@@ -101,7 +101,10 @@ export class CellEditorManager {
       padding: data.editorType === 'color' ? '0 2px' : data.editorType === 'select' ? '0 22px 0 8px' : '0 8px',
       textAlign: data.editorType === 'number' || data.editorType === 'range' ? 'right' : 'left',
     });
+    let committed = false;
     const commit = () => {
+      if (committed) return;
+      committed = true;
       const nextValue = parseEditorValue(element, data);
       this.controller.updateInspectorValue(node.id, nextValue, data.editorType);
       this.#removeOverlay();
@@ -110,6 +113,9 @@ export class CellEditorManager {
       if (event.key === 'Enter') commit();
       else if (event.key === 'Escape') this.#removeOverlay();
     });
+    if (data.editorType === 'select') {
+      element.addEventListener('change', commit);
+    }
     element.addEventListener('blur', commit);
     ensureOverlayHost(this.host);
     this.host.append(element);