refactor: image editor layer context state

Author: cshum

web/src/components/image-editor/controls/layer-controls.tsx

@@ -30,6 +30,8 @@ import type { BlendMode, ImageLayer } from '@/lib/image-editor'
 interface LayerControlsProps {
   layer: ImageLayer
   isEditing: boolean
+  aspectRatioLocked: boolean
+  onAspectRatioLockChange: (locked: boolean) => void
   visualCropEnabled?: boolean
   onUpdate: (updates: Partial<ImageLayer>) => void
   onEditLayer: () => void
@@ -50,6 +52,8 @@ const BLEND_MODES: BlendMode[] = [
 export function LayerControls({
   layer,
   isEditing,
+  aspectRatioLocked,
+  onAspectRatioLockChange,
   visualCropEnabled = false,
   onUpdate,
   onEditLayer,
@@ -62,9 +66,6 @@ export function LayerControls({
     return layer.originalDimensions.width / layer.originalDimensions.height
   })
 
-  // Default to locked
-  const [aspectRatioLocked, setAspectRatioLocked] = useState(true)
-
   // Get current width/height from transforms or use original dimensions
   const currentWidth = layer.transforms?.width || layer.originalDimensions.width
   const currentHeight = layer.transforms?.height || layer.originalDimensions.height
@@ -420,7 +421,7 @@ export function LayerControls({
               <Button
                 variant='outline'
                 size='sm'
-                onClick={() => setAspectRatioLocked(!aspectRatioLocked)}
+                onClick={() => onAspectRatioLockChange(!aspectRatioLocked)}
                 className='h-8 w-8 p-0'
                 title={
                   aspectRatioLocked

web/src/components/image-editor/imagor-editor-controls.tsx

@@ -51,6 +51,8 @@ interface ImageEditorControlsProps {
   params: ImageEditorState
   selectedLayerId: string | null
   editingContext: string | null
+  layerAspectRatioLocked: boolean
+  onLayerAspectRatioLockChange: (locked: boolean) => void
   openSections: EditorOpenSections
   onOpenSectionsChange: (sections: EditorOpenSections) => void
   onUpdateParams: (updates: Partial<ImageEditorState>) => void
@@ -131,6 +133,8 @@ export function ImageEditorControls({
   params,
   selectedLayerId,
   editingContext,
+  layerAspectRatioLocked,
+  onLayerAspectRatioLockChange,
   openSections,
   onOpenSectionsChange,
   onUpdateParams,
@@ -254,6 +258,8 @@ export function ImageEditorControls({
             imagePath={imagePath}
             selectedLayerId={selectedLayerId}
             editingContext={editingContext}
+            layerAspectRatioLocked={layerAspectRatioLocked}
+            onLayerAspectRatioLockChange={onLayerAspectRatioLockChange}
             visualCropEnabled={isVisualCropEnabled}
           />
         ),
@@ -265,6 +271,8 @@ export function ImageEditorControls({
       params,
       selectedLayerId,
       editingContext,
+      layerAspectRatioLocked,
+      onLayerAspectRatioLockChange,
       onUpdateParams,
       onVisualCropToggle,
       isVisualCropEnabled,

web/src/components/image-editor/layer-panel.tsx

@@ -35,6 +35,8 @@ interface LayerPanelProps {
   imagePath: string
   selectedLayerId: string | null
   editingContext: string | null
+  layerAspectRatioLocked: boolean
+  onLayerAspectRatioLockChange: (locked: boolean) => void
   visualCropEnabled?: boolean
 }
 
@@ -179,6 +181,8 @@ export function LayerPanel({
   imagePath,
   selectedLayerId,
   editingContext,
+  layerAspectRatioLocked,
+  onLayerAspectRatioLockChange,
   visualCropEnabled = false,
 }: LayerPanelProps) {
   const { t } = useTranslation()
@@ -450,6 +454,8 @@ export function LayerPanel({
           <LayerControls
             layer={selectedLayer}
             isEditing={editingContext === selectedLayer.id}
+            aspectRatioLocked={layerAspectRatioLocked}
+            onAspectRatioLockChange={onLayerAspectRatioLockChange}
             visualCropEnabled={visualCropEnabled}
             onUpdate={(updates) => handleUpdateLayer(selectedLayer.id, updates)}
             onEditLayer={() => handleEditLayer(selectedLayer.id)}

web/src/pages/image-editor-page.tsx

@@ -94,13 +94,19 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
   const [canRedo, setCanRedo] = useState(false)
   const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null)
   const [editingContext, setEditingContext] = useState<string | null>(null)
+  const [layerAspectRatioLocked, setLayerAspectRatioLocked] = useState(true)
 
   // Unsaved changes warning hook
   const { showDialog, handleConfirm, handleCancel } = useUnsavedChangesWarning(canUndo)
 
   // Derive visualCropEnabled from params state (single source of truth)
   const visualCropEnabled = params.visualCropEnabled ?? false
 
+  // Reset aspect ratio lock when switching layers
+  useEffect(() => {
+    setLayerAspectRatioLocked(true)
+  }, [selectedLayerId])
+
   useEffect(() => {
     // Initialize editor FIRST (this resets state to defaults)
     imageEditor.initialize({
@@ -352,6 +358,8 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
                       params={params}
                       selectedLayerId={selectedLayerId}
                       editingContext={editingContext}
+                      layerAspectRatioLocked={layerAspectRatioLocked}
+                      onLayerAspectRatioLockChange={setLayerAspectRatioLocked}
                       openSections={editorOpenSections}
                       onOpenSectionsChange={handleOpenSectionsChange}
                       onUpdateParams={updateParams}
@@ -415,6 +423,8 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
               params={params}
               selectedLayerId={selectedLayerId}
               editingContext={editingContext}
+              layerAspectRatioLocked={layerAspectRatioLocked}
+              onLayerAspectRatioLockChange={setLayerAspectRatioLocked}
               openSections={editorOpenSections}
               onOpenSectionsChange={handleOpenSectionsChange}
               onUpdateParams={updateParams}