Redraw busbar overlay during pan and zoom

Pan/zoom handlers redraw the cell holder canvas but skipped the busbar overlay, which was only drawn from updatePreview(). Cache the last draw args and expose redrawBusbarOverlay() so the overlay stays visible during wheel, drag, and touch interactions.

src/app.js

@@ -17,10 +17,17 @@ import { build3DBusbar } from './busbar-model.js';
 import { renderBusbarList } from './busbar-ui.js';
 
 let lastComputedGeometries = [];
+let lastBusbarDrawArgs = null;
 export function getLastBusbarGeometries() {
     return lastComputedGeometries;
 }
 
+export function redrawBusbarOverlay() {
+    if (!lastBusbarDrawArgs) return;
+    const { positions, cellSize, padRadius, spacing } = lastBusbarDrawArgs;
+    drawBusbarsOverlay(busbarStore.list, lastComputedGeometries, positions, cellSize, padRadius, spacing, busbarStore.activeId);
+}
+
 export function updatePreview(resetView = false) {
     if (resetView) {
         canvasState.zoom = 1.0;
@@ -176,6 +183,7 @@ export function updatePreview(resetView = false) {
         lastComputedGeometries = busbarStore.list.map(bb =>
             computeBusbarGeometry(bb.cellIndices, positions, cellRadius, busbarPadRadius, spacing, busbarKeepoutRadius)
         );
+        lastBusbarDrawArgs = { positions, cellSize, padRadius: busbarPadRadius, spacing };
         drawBusbarsOverlay(busbarStore.list, lastComputedGeometries, positions, cellSize, busbarPadRadius, spacing, busbarStore.activeId);
 
         const blockedByBusbarId = {};

src/main.js

@@ -2,7 +2,7 @@ import { canvasState } from './state.js';
 import { initOC } from './oc.js';
 import { toggleBmsDiameter, initCustomSelects } from './ui.js';
 import { drawPreview } from './preview.js';
-import { updatePreview, generateLayout } from './app.js';
+import { updatePreview, generateLayout, redrawBusbarOverlay } from './app.js';
 import { busbarStore } from './busbars.js';
 import { initBusbarUI, renderBusbarList } from './busbar-ui.js';
 
@@ -49,6 +49,7 @@ function wireInputs() {
 function redrawFromState() {
     if (canvasState.currentPositions.length > 0) {
         drawPreview(canvasState.currentPositions, canvasState.currentCellSize);
+        redrawBusbarOverlay();
     }
 }
 
@@ -126,7 +127,7 @@ function wireCanvasInteractions() {
         canvasState.lastMouseY = e.clientY;
 
         if (canvasState.currentPositions.length > 0) {
-            requestAnimationFrame(() => drawPreview(canvasState.currentPositions, canvasState.currentCellSize));
+            requestAnimationFrame(() => { drawPreview(canvasState.currentPositions, canvasState.currentCellSize); redrawBusbarOverlay(); });
         }
     });
 
@@ -196,7 +197,7 @@ function wireCanvasInteractions() {
             lastTouchX = touch.clientX;
             lastTouchY = touch.clientY;
             if (canvasState.currentPositions.length > 0) {
-                requestAnimationFrame(() => drawPreview(canvasState.currentPositions, canvasState.currentCellSize));
+                requestAnimationFrame(() => { drawPreview(canvasState.currentPositions, canvasState.currentCellSize); redrawBusbarOverlay(); });
             }
         } else if (e.touches.length === 2) {
             const t1 = e.touches[0];
@@ -209,7 +210,7 @@ function wireCanvasInteractions() {
             canvasState.panY = touchCenterY - (touchCenterY - touchStartPanY) * zoomChange;
             canvasState.zoom = newZoom;
             if (canvasState.currentPositions.length > 0) {
-                requestAnimationFrame(() => drawPreview(canvasState.currentPositions, canvasState.currentCellSize));
+                requestAnimationFrame(() => { drawPreview(canvasState.currentPositions, canvasState.currentCellSize); redrawBusbarOverlay(); });
             }
         }
     });