feat(phase-13): implement canvas resize dialog with multiple methods

Add comprehensive canvas resize functionality with three resize methods.

Features:
- Canvas Size dialog accessible from Image menu
- Three resize methods:
  * Scale: Stretch/shrink content to fit new size
  * Crop: Crop or center content without scaling
  * Expand: Expand canvas, center existing content
- Maintain aspect ratio toggle with link/unlink button
- Dimension validation (1-10000 pixels)
- Real-time preview of new dimensions
- Applies to all layers simultaneously
- Toast notifications for success/errors

Changes:
- Created components/modals/canvas-resize-dialog.tsx
- Added "Canvas Size..." menu item to Image menu
- Integrated with useLayerStore for layer updates
- Uses toast utility for user feedback
- Validates dimensions before applying
- Supports linked/unlinked aspect ratio

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 20:09:52 +01:00
parent 19baa730c7
commit 5f389c7b71
2 changed files with 258 additions and 0 deletions

View File

@@ -2,14 +2,17 @@
import { useState } from 'react';
import { AdjustmentsDialog } from '@/components/modals/adjustments-dialog';
import { CanvasResizeDialog } from '@/components/modals/canvas-resize-dialog';
import {
Sliders,
ChevronDown,
Maximize2,
} from 'lucide-react';
export function ImageMenu() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isAdjustmentsOpen, setIsAdjustmentsOpen] = useState(false);
const [isCanvasResizeOpen, setIsCanvasResizeOpen] = useState(false);
return (
<>
@@ -48,6 +51,17 @@ export function ImageMenu() {
<Sliders className="h-4 w-4" aria-hidden="true" />
Filters & Adjustments...
</button>
<button
onClick={() => {
setIsCanvasResizeOpen(true);
setIsMenuOpen(false);
}}
className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors focus:outline-none focus:bg-accent text-left"
role="menuitem"
>
<Maximize2 className="h-4 w-4" aria-hidden="true" />
Canvas Size...
</button>
</div>
</>
)}
@@ -58,6 +72,12 @@ export function ImageMenu() {
isOpen={isAdjustmentsOpen}
onClose={() => setIsAdjustmentsOpen(false)}
/>
{/* Canvas Resize Dialog */}
<CanvasResizeDialog
isOpen={isCanvasResizeOpen}
onClose={() => setIsCanvasResizeOpen(false)}
/>
</>
);
}