fix: ensure canvas renders when dialog opens
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>
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user