From 5d3a67779ba556311adeedd174942c0a6ca08f58 Mon Sep 17 00:00:00 2001 From: Silvio Tomatis Date: Fri, 29 May 2026 07:05:41 +0200 Subject: [PATCH] fix: geometry-lab angle/pan now repaint the panels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The render effect read gammaRad / experiment.panU / experiment.panV only inside its requestAnimationFrame callback. Svelte 5 tracks dependencies read synchronously during the effect run, not ones read later in an async callback, so changing the angle or panning never re-triggered a render — only the axes overlay (a $derived used directly in the template) updated. Symptoms: pan did nothing; the rotation slider moved only the dashed axis line while the rotated- log image stayed put. Read rot / kTwist / panU / panV synchronously in the effect body so they're tracked; the rAF callback now closes over those locals. Co-Authored-By: Claude Opus 4.8 --- src/components/ui1/PipelinePanel.svelte | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/ui1/PipelinePanel.svelte b/src/components/ui1/PipelinePanel.svelte index e8c0558..417746c 100644 --- a/src/components/ui1/PipelinePanel.svelte +++ b/src/components/ui1/PipelinePanel.svelte @@ -214,6 +214,14 @@ ch = Math.max(1, Math.round(ch * s)); } const pixels = pixelsFor(doc.image); + // Read every reactive input SYNCHRONOUSLY here so the effect re-runs when + // it changes. Values read only inside the rAF callback below are NOT + // tracked by Svelte — that's why angle/pan changes used to repaint the + // axes (a $derived) but never the canvas. + const rot = gammaRad; + const kTwist = Math.tan(gammaRad); + const panU = experiment.panU; + const panV = experiment.panV; const raf = requestAnimationFrame(() => { const ppu = kind === 'escher' ? 0 : panelPxPerUnit(kind, g.ctx.logS, ch); @@ -225,17 +233,11 @@ glRenderer.render({ pixels, ctx: g.ctx, mode: kind, W: cw, H: ch, pxPerUnit: ppu, uRef, scale, lnR0, - rot: gammaRad, kTwist: Math.tan(gammaRad), - panU: experiment.panU, panV: experiment.panV + rot, kTwist, panU, panV }); return; } - const opts = { - panU: experiment.panU, - panV: experiment.panV, - rot: gammaRad, - kTwist: Math.tan(gammaRad) - }; + const opts = { panU, panV, rot, kTwist }; let out: PanelImage; if (kind === 'log') out = renderLogPanel(pixels, g.ctx, ppu, uRef, cw, ch, opts); else if (kind === 'rotlog') out = renderRotatedLogPanel(pixels, g.ctx, ppu, uRef, cw, ch, opts);