Sebastian Krüger
5f389c7b71
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>
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
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 (
|
|
<>
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="flex items-center gap-2 px-3 py-2 hover:bg-accent rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
|
aria-label="Image menu"
|
|
aria-expanded={isMenuOpen}
|
|
aria-haspopup="menu"
|
|
>
|
|
<span className="text-sm font-medium">Image</span>
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
|
|
{isMenuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="absolute left-0 top-full mt-1 w-56 bg-card border border-border rounded-md shadow-lg z-20"
|
|
role="menu"
|
|
aria-label="Image operations"
|
|
>
|
|
<button
|
|
onClick={() => {
|
|
setIsAdjustmentsOpen(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"
|
|
>
|
|
<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>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Adjustments Dialog */}
|
|
<AdjustmentsDialog
|
|
isOpen={isAdjustmentsOpen}
|
|
onClose={() => setIsAdjustmentsOpen(false)}
|
|
/>
|
|
|
|
{/* Canvas Resize Dialog */}
|
|
<CanvasResizeDialog
|
|
isOpen={isCanvasResizeOpen}
|
|
onClose={() => setIsCanvasResizeOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|