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:
@@ -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)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user