rakadu1
/
visualizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(p5): Resolve zoom sketch blanking on window resize 

The zoom sketch canvas would turn blank after the browser window was resized.

The root cause was a race condition between the JavaScript `windowResized` event and the browser's layout rendering. The resize event was triggering the `zoomSketch` to resize its own canvas before its parent container (`#zoom-panel`) had been assigned its new, non-zero dimensions by the layout engine. This resulted in the zoom canvas being recreated with a size of 0x0 pixels.

This commit resolves the issue by:
1.  In `radarSketch.js`, deferring the resize call for the zoom sketch using `setTimeout`. This pushes the execution to the end of the event loop, giving the browser time to update the container's dimensions first.
2.  In `zoomSketch.js`, modifying the `handleResize` function to destroy the old, invalid canvas. The canvas is now correctly recreated with the proper dimensions on the next `updateAndDraw` call (triggered by mouse movement), making the solution robust and independent of specific timings.
refactor/modularize
RUSHIL AMBARISH KADU 7 months ago
parent
27726c29ae
commit
cdae44016a
2 changed files with 99 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      steps/src/p5/radarSketch.js
  2. 31
      steps/src/p5/zoomSketch.js

48
steps/src/p5/radarSketch.js
View File

@ -204,10 +204,7 @@ export const radarSketch = function (p) {
if (toggleClusterColor.checked) { if (toggleClusterColor.checked) {
drawClusterCentroids(p, frameData.clusters, plotScales); drawClusterCentroids(p, frameData.clusters, plotScales);
} }
} }
} }
p.pop(); p.pop();
@ -309,17 +306,43 @@ export const radarSketch = function (p) {
}; };
// Handle window resizing event // Handle window resizing event
p.windowResized = function () {
/* p.windowResized = function () {
p.resizeCanvas(canvasContainer.offsetWidth, canvasContainer.offsetHeight); p.resizeCanvas(canvasContainer.offsetWidth, canvasContainer.offsetHeight);
// BUG FIX 2: Re-create the buffer instead of resizing it // BUG FIX 2: Re-create the buffer instead of resizing it
staticBackgroundBuffer = p.createGraphics(p.width, p.height); staticBackgroundBuffer = p.createGraphics(p.width, p.height);
// 6. Re-create and re-draw the track legend buffer on resize
trackLegendBuffer = p.createGraphics(100, 100); trackLegendBuffer = p.createGraphics(100, 100);
p.drawTrackLegendToBuffer(); p.drawTrackLegendToBuffer();
calculatePlotScales();
drawStaticRegionsToBuffer(p, staticBackgroundBuffer, plotScales);
if (appState.zoomSketchInstance) {
appState.zoomSketchInstance.handleResize();
}
if (appState.vizData) {
p.redraw();
}
}; */
// In src/p5/radarSketch.js
p.windowResized = function () {
console.log("radarSketch: windowResized triggered!");
// Immediately resize the elements that we know are stable.
p.resizeCanvas(canvasContainer.offsetWidth, canvasContainer.offsetHeight);
staticBackgroundBuffer = p.createGraphics(p.width, p.height);
trackLegendBuffer = p.createGraphics(120, 120);
p.drawTrackLegendToBuffer();
calculatePlotScales(); calculatePlotScales();
drawStaticRegionsToBuffer(p, staticBackgroundBuffer, plotScales); drawStaticRegionsToBuffer(p, staticBackgroundBuffer, plotScales);
// Defer the call to destroy the zoom canvas.
if (appState.zoomSketchInstance && appState.isCloseUpMode) {
setTimeout(() => {
console.log("radarSketch: Executing deferred call to zoomSketch.handleResize().");
appState.zoomSketchInstance.handleResize();
}, 10); // A 10ms delay is slightly more robust than 0.
}
if (appState.vizData) { if (appState.vizData) {
p.redraw(); p.redraw();
} }
@ -375,17 +398,4 @@ export const radarSketch = function (p) {
b.text("SNR", lx, ly - 10); b.text("SNR", lx, ly - 10);
b.pop(); b.pop();
}; };
// Handle window resizing event
p.windowResized = function () {
p.resizeCanvas(canvasContainer.offsetWidth, canvasContainer.offsetHeight);
// BUG FIX 2: Re-create the buffer instead of resizing it
staticBackgroundBuffer = p.createGraphics(p.width, p.height);
trackLegendBuffer = p.createGraphics(120, 120);
p.drawTrackLegendToBuffer();
calculatePlotScales();
// Re-draw the static content to the new buffer
drawStaticRegionsToBuffer(p, staticBackgroundBuffer, plotScales);
if (appState.vizData) p.redraw();
};
}; };

31
steps/src/p5/zoomSketch.js
View File

@ -284,6 +284,7 @@ export const zoomSketch = function (p) {
appState.zoomFactor = 4; // Set a default zoom factor in the global state appState.zoomFactor = 4; // Set a default zoom factor in the global state
p.setup = function () { p.setup = function () {
console.log("zoomSketch: Setup function has been called."); //debug
p.noLoop(); p.noLoop();
}; };
@ -295,15 +296,28 @@ export const zoomSketch = function (p) {
if (container && container.offsetWidth > 0) { if (container && container.offsetWidth > 0) {
canvas = p.createCanvas(container.offsetWidth, container.offsetHeight); canvas = p.createCanvas(container.offsetWidth, container.offsetHeight);
canvas.parent(containerId); canvas.parent(containerId);
console.log(`zoomSketch: Canvas CREATED with dimensions ${p.width}x${p.height}`); // debug
} else { } else {
console.warn("zoomSketch: updateAndDraw called, but container is not ready. Aborting draw."); //debug
return; return;
} }
} }
console.log(`zoomSketch: updateAndDraw is running. Canvas dimensions are ${p.width}x${p.height}. Hovered items: ${hoveredItems.length}`); //debug
p.redraw(); p.redraw();
}; };
p.handleResize = function() {
console.log("zoomSketch: handleResize triggered. Destroying old canvas.");
if (canvas) {
canvas.remove(); // p5.js function to properly remove the canvas from the DOM
canvas = null; // Set the internal reference to null
}
// The canvas will be recreated automatically the next time updateAndDraw() is called,
// at which point the container will have its correct, final dimensions.
}
p.draw = function () { p.draw = function () {
if (!appState.vizData || !canvas) return; if (!appState.vizData || !canvas) return;
console.log("zoomSketch: Draw function is executing."); //debug
p.background( p.background(
document.documentElement.classList.contains("dark") document.documentElement.classList.contains("dark")
@ -385,9 +399,11 @@ export const zoomSketch = function (p) {
// This code runs *after* the zoom transformations have been popped, // This code runs *after* the zoom transformations have been popped,
// so it draws directly onto the canvas as a fixed UI element. // so it draws directly onto the canvas as a fixed UI element.
p.push(); p.push();
const titleLabel = document.getElementById('toggle-close-up').parentElement;
const titleText = titleLabel ? titleLabel.textContent.trim() : 'Zoom Mode';
const textColor = document.documentElement.classList.contains("dark") ? 220 : 80;
const titleLabel = document.getElementById("toggle-close-up").parentElement;
const titleText = titleLabel ? titleLabel.textContent.trim() : "Zoom Mode";
const textColor = document.documentElement.classList.contains("dark")
? 220
: 80;
p.fill(textColor); p.fill(textColor);
p.noStroke(); p.noStroke();
p.textSize(16); p.textSize(16);
@ -397,7 +413,6 @@ export const zoomSketch = function (p) {
p.pop(); p.pop();
// --- END: DRAW TITLE OVERLAY --- // --- END: DRAW TITLE OVERLAY ---
// --- Draw Crosshairs --- // --- Draw Crosshairs ---
p.stroke(255, 0, 0, 150); p.stroke(255, 0, 0, 150);
p.strokeWeight(1.5); p.strokeWeight(1.5);
@ -405,12 +420,4 @@ export const zoomSketch = function (p) {
p.line(p.width / 2, p.height / 2 - 15, p.width / 2, p.height / 2 + 15); p.line(p.width / 2, p.height / 2 - 15, p.width / 2, p.height / 2 + 15);
}; };
p.windowResized = function () {
if (canvas) {
const container = document.getElementById(containerId);
if (container) {
p.resizeCanvas(container.offsetWidth, container.offsetHeight);
}
}
};
}; };
Write Preview
Loading…
Cancel
Save