refactor: image editor layer context state

Author: cshum

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

@@ -49,6 +49,7 @@ interface ImageEditorControlsProps {
   imageEditor: ImageEditor
   imagePath: string
   params: ImageEditorState
+  selectedLayerId: string | null
   openSections: EditorOpenSections
   onOpenSectionsChange: (sections: EditorOpenSections) => void
   onUpdateParams: (updates: Partial<ImageEditorState>) => void
@@ -127,6 +128,7 @@ export function ImageEditorControls({
   imageEditor,
   imagePath,
   params,
+  selectedLayerId,
   openSections,
   onOpenSectionsChange,
   onUpdateParams,
@@ -251,6 +253,7 @@ export function ImageEditorControls({
           <LayerPanel
             imageEditor={imageEditor}
             imagePath={imagePath}
+            selectedLayerId={selectedLayerId}
             visualCropEnabled={isVisualCropEnabled}
           />
         ),
@@ -260,6 +263,7 @@ export function ImageEditorControls({
       imageEditor,
       imagePath,
       params,
+      selectedLayerId,
       onUpdateParams,
       onVisualCropToggle,
       isVisualCropEnabled,

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

@@ -33,6 +33,7 @@ import { cn } from '@/lib/utils'
 interface LayerPanelProps {
   imageEditor: ImageEditor
   imagePath: string
+  selectedLayerId: string | null
   visualCropEnabled?: boolean
 }
 
@@ -172,10 +173,14 @@ function BaseImageItem({ imagePath, isSelected, onClick }: BaseImageItemProps) {
   )
 }
 
-export function LayerPanel({ imageEditor, imagePath, visualCropEnabled = false }: LayerPanelProps) {
+export function LayerPanel({
+  imageEditor,
+  imagePath,
+  selectedLayerId,
+  visualCropEnabled = false,
+}: LayerPanelProps) {
   const { t } = useTranslation()
   const layers = imageEditor.getLayers()
-  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null)
   const [editingContext, setEditingContext] = useState<string | null>(
     imageEditor.getEditingContext(),
   )
@@ -228,33 +233,29 @@ export function LayerPanel({ imageEditor, imagePath, visualCropEnabled = false }
 
   const handleDelete = useCallback(
     (layerId: string) => {
-      // Deselect if deleting the selected layer
-      if (selectedLayerId === layerId) {
-        setSelectedLayerId(null)
-      }
       // Exit edit mode if deleting the editing layer
       if (editingContext === layerId) {
         imageEditor.switchContext(null)
         setEditingContext(null)
       }
+      // removeLayer will automatically clear selection if needed
       imageEditor.removeLayer(layerId)
     },
-    [imageEditor, selectedLayerId, editingContext],
+    [imageEditor, editingContext],
   )
 
   const handleSelectLayer = useCallback(
     (layerId: string) => {
       // Toggle selection without entering edit mode
       const newSelection = selectedLayerId === layerId ? null : layerId
-      setSelectedLayerId(newSelection)
+      imageEditor.setSelectedLayerId(newSelection)
     },
-    [selectedLayerId],
+    [imageEditor, selectedLayerId],
   )
 
   const handleEditLayer = useCallback(
     (layerId: string) => {
-      // Enter edit mode for this layer
-      setSelectedLayerId(layerId)
+      // Enter edit mode for this layer (switchContext will auto-select)
       imageEditor.switchContext(layerId)
       setEditingContext(layerId)
     },
@@ -269,7 +270,7 @@ export function LayerPanel({ imageEditor, imagePath, visualCropEnabled = false }
 
   const handleSelectBase = useCallback(() => {
     // Deselect all layers and return to base
-    setSelectedLayerId(null)
+    imageEditor.setSelectedLayerId(null)
     if (editingContext !== null) {
       imageEditor.switchContext(null)
       setEditingContext(null)
@@ -355,7 +356,7 @@ export function LayerPanel({ imageEditor, imagePath, visualCropEnabled = false }
         imageEditor.addLayer(newLayer)
 
         // Auto-select the newly added layer
-        setSelectedLayerId(newLayer.id)
+        imageEditor.setSelectedLayerId(newLayer.id)
       } catch {
         toast.error(t('imageEditor.layers.failedToAddLayer'))
       } finally {

web/src/lib/image-editor.ts

@@ -116,6 +116,7 @@ export interface ImageEditorCallbacks {
   onStateChange?: (state: ImageEditorState) => void
   onLoadingChange?: (isLoading: boolean) => void
   onHistoryChange?: () => void
+  onSelectedLayerChange?: (layerId: string | null) => void
 }
 
 /**
@@ -164,6 +165,8 @@ export class ImageEditor {
     this.undoStack = []
     this.redoStack = []
     this.pendingHistorySnapshot = null
+    // Reset selected layer
+    this.selectedLayerId = null
     // Reset state to defaults when component remounts
     // The page will restore from URL if there's a ?state= parameter
     this.state = {
@@ -1206,6 +1209,13 @@ export class ImageEditor {
    */
   private editingContext: string | null = null
 
+  /**
+   * Currently selected layer (for UI highlighting)
+   * null = base image selected or no selection
+   * string = layer with this ID is selected
+   */
+  private selectedLayerId: string | null = null
+
   /**
    * Saved base image configuration (when editing a layer)
    * Allows restoring the original config when switching back to base
@@ -1221,6 +1231,25 @@ export class ImageEditor {
     return this.editingContext
   }
 
+  /**
+   * Get the currently selected layer ID
+   * @returns null for base image or no selection, or layer ID for selected layer
+   */
+  getSelectedLayerId(): string | null {
+    return this.selectedLayerId
+  }
+
+  /**
+   * Set the currently selected layer ID
+   * Triggers onSelectedLayerChange callback if selection changes
+   * @param layerId - ID of the layer to select, or null for base image
+   */
+  setSelectedLayerId(layerId: string | null): void {
+    if (this.selectedLayerId === layerId) return
+    this.selectedLayerId = layerId
+    this.callbacks.onSelectedLayerChange?.(layerId)
+  }
+
   /**
    * Switch editing context to a layer
    * Loads the layer's transforms into the editor state
@@ -1251,6 +1280,11 @@ export class ImageEditor {
     // Switch context
     this.editingContext = layerId
 
+    // Auto-select the layer when entering edit mode
+    if (layerId !== null) {
+      this.setSelectedLayerId(layerId)
+    }
+
     // Update config and load new context
     if (layerId !== null) {
       // Switching TO a layer
@@ -1410,6 +1444,11 @@ export class ImageEditor {
     // Save current state to history BEFORE removing layer (so undo restores it)
     this.saveHistorySnapshot()
 
+    // Clear selection if removing the selected layer
+    if (this.selectedLayerId === layerId) {
+      this.setSelectedLayerId(null)
+    }
+
     this.state = {
       ...this.state,
       layers: this.state.layers.filter((layer) => layer.id !== layerId),

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

@@ -92,6 +92,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
   const [cropAspectRatio, setCropAspectRatio] = useState<number | null>(null)
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null)
 
   // Unsaved changes warning hook
   const { showDialog, handleConfirm, handleCancel } = useUnsavedChangesWarning(canUndo)
@@ -116,6 +117,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
         const encoded = serializeStateToUrl(state)
         updateLocationState(encoded)
       },
+      onSelectedLayerChange: setSelectedLayerId,
     })
 
     // restore state from URL, after callbacks are set
@@ -346,6 +348,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
                       imageEditor={imageEditor}
                       imagePath={imagePath}
                       params={params}
+                      selectedLayerId={selectedLayerId}
                       openSections={editorOpenSections}
                       onOpenSectionsChange={handleOpenSectionsChange}
                       onUpdateParams={updateParams}
@@ -407,6 +410,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
               imageEditor={imageEditor}
               imagePath={imagePath}
               params={params}
+              selectedLayerId={selectedLayerId}
               openSections={editorOpenSections}
               onOpenSectionsChange={handleOpenSectionsChange}
               onUpdateParams={updateParams}