From 39624ca9cf84b12a0e34c28f1de9d0d393fbd8d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 20:53:59 +0100
Subject: [PATCH] fix: ensure canvas renders when dialog opens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed canvas visualization not painting sometimes by:
- Adding `open` prop check before rendering
- Adding `open` to useEffect dependencies
- Adding dimension validation for dynamic canvas sizes
- Ensures canvas properly renders when dialog becomes visible

Affected dialogs: DynamicsParameterDialog, TimeBasedParameterDialog,
AdvancedParameterDialog

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/effects/AdvancedParameterDialog.tsx  | 4 +++-
 components/effects/DynamicsParameterDialog.tsx  | 7 +++++--
 components/effects/TimeBasedParameterDialog.tsx | 7 +++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/effects/AdvancedParameterDialog.tsx b/components/effects/AdvancedParameterDialog.tsx
index ffca2d6..bba3dfe 100644
--- a/components/effects/AdvancedParameterDialog.tsx
+++ b/components/effects/AdvancedParameterDialog.tsx
@@ -91,6 +91,8 @@ export function AdvancedParameterDialog({
 
   // Draw visual feedback
   React.useEffect(() => {
+    if (!open) return;
+
     const canvas = canvasRef.current;
     if (!canvas) return;
 
@@ -210,7 +212,7 @@ export function AdvancedParameterDialog({
     ctx.moveTo(0, height / 2);
     ctx.lineTo(width, height / 2);
     ctx.stroke();
-  }, [parameters, effectType]);
+  }, [parameters, effectType, open]);
 
   const handleApply = () => {
     onApply({ ...parameters, type: effectType } as AdvancedParameters);
diff --git a/components/effects/DynamicsParameterDialog.tsx b/components/effects/DynamicsParameterDialog.tsx
index 91d26ba..63ed5cf 100644
--- a/components/effects/DynamicsParameterDialog.tsx
+++ b/components/effects/DynamicsParameterDialog.tsx
@@ -139,7 +139,7 @@ export function DynamicsParameterDialog({
 
   // Draw transfer curve (input level vs output level)
   React.useEffect(() => {
-    if (!canvasRef.current) return;
+    if (!open || !canvasRef.current) return;
 
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
@@ -149,6 +149,9 @@ export function DynamicsParameterDialog({
     const rect = canvas.getBoundingClientRect();
     const dpr = window.devicePixelRatio || 1;
 
+    // Ensure canvas has dimensions before drawing
+    if (rect.width === 0 || rect.height === 0) return;
+
     // Set actual size in memory (scaled to account for extra pixel density)
     canvas.width = rect.width * dpr;
     canvas.height = rect.height * dpr;
@@ -296,7 +299,7 @@ export function DynamicsParameterDialog({
       ctx.fillText(db.toString(), x, height - 20);
     }
 
-  }, [parameters, effectType]);
+  }, [parameters, effectType, open]);
 
   const handleApply = () => {
     onApply(parameters);
diff --git a/components/effects/TimeBasedParameterDialog.tsx b/components/effects/TimeBasedParameterDialog.tsx
index 3308aa0..8f04c07 100644
--- a/components/effects/TimeBasedParameterDialog.tsx
+++ b/components/effects/TimeBasedParameterDialog.tsx
@@ -125,7 +125,7 @@ export function TimeBasedParameterDialog({
 
   // Draw visualization
   React.useEffect(() => {
-    if (!canvasRef.current) return;
+    if (!open || !canvasRef.current) return;
 
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
@@ -135,6 +135,9 @@ export function TimeBasedParameterDialog({
     const rect = canvas.getBoundingClientRect();
     const dpr = window.devicePixelRatio || 1;
 
+    // Ensure canvas has dimensions before drawing
+    if (rect.width === 0 || rect.height === 0) return;
+
     // Set actual size in memory
     canvas.width = rect.width * dpr;
     canvas.height = rect.height * dpr;
@@ -255,7 +258,7 @@ export function TimeBasedParameterDialog({
       ctx.setLineDash([]);
     }
 
-  }, [parameters, effectType]);
+  }, [parameters, effectType, open]);
 
   const handleApply = () => {
     onApply(parameters);