From dc19e848d0871fdd9569bc10dd17fd8753772d78 Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Mon, 23 Mar 2026 10:51:42 +0530 Subject: [PATCH] feat(layout): implement GridStack.js for resizable dashboards and fix p5.js resize stability - Implemented GridStack.js as the core dashboard manager, enabling responsive dragging and resizing of the Radar, Video, and SpeedGraph panels. - Replaced global windowResized events with debounced ResizeObserver instances attached to the specific panel containers. - Fixed a massive memory leak in p5.js sketches by explicitly calling .remove() on old Graphics buffers before recreation. - Optimized zoomSketch.js by removing destructive canvas teardown calls from radarSketch and using smoothed camera coordinates for tooltip bounding logic. - Patched tooltip overflow bugs in drawUtils.js and speedGraphSketch.js to intelligently clamp within panel edges, even in narrow columns. - Disabled native p5 windowResized triggers to prevent double-firing when moving the web app across multiple monitors. --- steps/index.html | 91 +++++++++++++++++++------------- steps/src/drawUtils.js | 15 ++++-- steps/src/p5/radarSketch.js | 36 ++++++++----- steps/src/p5/speedGraphSketch.js | 24 ++++++++- steps/src/p5/zoomSketch.js | 40 +++++++++----- steps/src/ui.js | 11 ++++ 6 files changed, 150 insertions(+), 67 deletions(-) diff --git a/steps/index.html b/steps/index.html index 66bad00..42aac52 100644 --- a/steps/index.html +++ b/steps/index.html @@ -71,6 +71,9 @@ })(); + + +