popiart-node-canvas/.planning/phases/10-node-autosizing/10-01-PLAN.md

phase	plan	type
10-node-autosizing	1	execute

Auto-size generate nodes to match output image/video aspect ratio after generation completes.

Purpose: Nodes should visually reflect their output dimensions, making the canvas layout more intuitive and allowing users to see aspect ratios at a glance. Output: GenerateImageNode and GenerateVideoNode automatically resize to match output aspect ratio.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Prior phase context

@.planning/phases/09-video-history/09-01-SUMMARY.md

Key source files

@src/store/workflowStore.ts @src/components/nodes/BaseNode.tsx @src/components/nodes/GenerateImageNode.tsx @src/components/nodes/GenerateVideoNode.tsx

Relevant codebase patterns:

• Node dimensions set via node.style.width/height in workflowStore.ts:469-494
• defaultDimensions defines initial sizes per node type
• useReactFlow().setNodes() updates node styles from within components
• Generate nodes already use setNodes for parameter panel expansion (GenerateImageNode.tsx:244)
• Output images stored in outputImage (NanoBananaNodeData) and outputVideo (GenerateVideoNodeData)

Constraints from prior phases:

• Phase 9 noted: "Carousel UI may need adjustment when node autosizing is implemented"

Task 1: Create node dimension calculation utility src/utils/nodeDimensions.ts Create a utility module with functions to:

1. getImageDimensions(base64DataUrl: string): Promise<{width: number, height: number}> - Extract dimensions from base64 image by loading into Image element
2. calculateNodeSize(aspectRatio: number, baseWidth: number = 300): {width: number, height: number} - Calculate node dimensions that maintain aspect ratio with constraints:
   • Minimum width: 200px
   • Maximum width: 500px
   • Minimum height: 200px
   • Maximum height: 600px
   • Base width defaults to 300px

The utility should handle edge cases:

• Return null/default for invalid input
• Handle both portrait and landscape orientations
• Account for node chrome (header ~40px, controls ~60px) when calculating content area

Export both functions for use in generate nodes. File exists at src/utils/nodeDimensions.ts with both exported functions. TypeScript compiles without errors: npm run build Utility module exists with getImageDimensions and calculateNodeSize functions, build passes

Task 2: Auto-resize generate nodes on output src/components/nodes/GenerateImageNode.tsx, src/components/nodes/GenerateVideoNode.tsx Update both generate node components to resize when output is set:

GenerateImageNode.tsx:

1. Import the utility functions from nodeDimensions.ts
2. Add useEffect that triggers when nodeData.outputImage changes:
   • If outputImage exists, call getImageDimensions()
   • Calculate appropriate node size with calculateNodeSize()
   • Use setNodes() to update the node's style.width and style.height
   • Only resize if dimensions actually changed (avoid infinite loops)

GenerateVideoNode.tsx:

1. Same pattern as GenerateImageNode
2. For videos, use a hidden video element to get dimensions:
   • Create video element, set src to outputVideo
   • On loadedmetadata event, read videoWidth and videoHeight
   • Calculate and apply node size

Important considerations:

• Don't resize while loading (only on complete output)
• Preserve user's manual resize if they've adjusted the node (track with a userResized flag in node data, or skip resize if current size differs significantly from default)
• Use requestAnimationFrame or setTimeout(0) to avoid React Flow update conflicts

1. npm run build passes
2. Manual test: Generate an image with different aspect ratios (1:1, 16:9, 9:16) and verify node resizes appropriately

• GenerateImageNode resizes to match output image aspect ratio
• GenerateVideoNode resizes to match output video aspect ratio
• Build passes without errors

Before declaring plan complete: - [ ] `npm run build` succeeds without errors - [ ] No TypeScript errors in new/modified files - [ ] Generate nodes resize when output is set - [ ] Aspect ratio is maintained in node dimensions

<success_criteria>

• All tasks completed
• All verification checks pass
• No errors or warnings introduced
• Generate nodes auto-size to output aspect ratio </success_criteria>

After completion, create `.planning/phases/10-node-autosizing/10-01-SUMMARY.md`