From 15388f681a3db2fa0cde6fcdb7c71d5c08f5a280 Mon Sep 17 00:00:00 2001 From: Maxim Date: Wed, 22 Apr 2026 17:16:43 +0200 Subject: [PATCH] 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 | 8 ++++++++ src/main.js | 9 +++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/app.js b/src/app.js index ddba80b..fa56af7 100644 --- a/src/app.js +++ b/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 = {}; diff --git a/src/main.js b/src/main.js index 8a92b7f..509272f 100644 --- a/src/main.js +++ b/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(); }); } } });