refactor: image editor layer context state

Author: cshum

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

@@ -50,6 +50,7 @@ interface ImageEditorControlsProps {
   imagePath: string
   params: ImageEditorState
   selectedLayerId: string | null
+  editingContext: string | null
   openSections: EditorOpenSections
   onOpenSectionsChange: (sections: EditorOpenSections) => void
   onUpdateParams: (updates: Partial<ImageEditorState>) => void
@@ -129,6 +130,7 @@ export function ImageEditorControls({
   imagePath,
   params,
   selectedLayerId,
+  editingContext,
   openSections,
   onOpenSectionsChange,
   onUpdateParams,
@@ -141,9 +143,6 @@ export function ImageEditorControls({
   // Track the active dragged section for DragOverlay
   const [activeId, setActiveId] = useState<SectionKey | null>(null)
 
-  // Track editing context (which layer is being edited)
-  const editingContext = imageEditor.getEditingContext()
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -254,6 +253,7 @@ export function ImageEditorControls({
             imageEditor={imageEditor}
             imagePath={imagePath}
             selectedLayerId={selectedLayerId}
+            editingContext={editingContext}
             visualCropEnabled={isVisualCropEnabled}
           />
         ),
@@ -264,6 +264,7 @@ export function ImageEditorControls({
       imagePath,
       params,
       selectedLayerId,
+      editingContext,
       onUpdateParams,
       onVisualCropToggle,
       isVisualCropEnabled,

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

@@ -34,6 +34,7 @@ interface LayerPanelProps {
   imageEditor: ImageEditor
   imagePath: string
   selectedLayerId: string | null
+  editingContext: string | null
   visualCropEnabled?: boolean
 }
 
@@ -177,13 +178,11 @@ export function LayerPanel({
   imageEditor,
   imagePath,
   selectedLayerId,
+  editingContext,
   visualCropEnabled = false,
 }: LayerPanelProps) {
   const { t } = useTranslation()
   const layers = imageEditor.getLayers()
-  const [editingContext, setEditingContext] = useState<string | null>(
-    imageEditor.getEditingContext(),
-  )
   const [activeId, setActiveId] = useState<string | null>(null)
   const [filePickerOpen, setFilePickerOpen] = useState(false)
   const [isAddingLayer, setIsAddingLayer] = useState(false)
@@ -236,7 +235,6 @@ export function LayerPanel({
       // 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)
@@ -255,25 +253,22 @@ export function LayerPanel({
 
   const handleEditLayer = useCallback(
     (layerId: string) => {
-      // Enter edit mode for this layer (switchContext will auto-select)
+      // Enter edit mode for this layer (switchContext will auto-select and notify via callback)
       imageEditor.switchContext(layerId)
-      setEditingContext(layerId)
     },
     [imageEditor],
   )
 
   const handleExitEditMode = useCallback(() => {
-    // Exit edit mode, return to base
+    // Exit edit mode and return to base
     imageEditor.switchContext(null)
-    setEditingContext(null)
   }, [imageEditor])
 
   const handleSelectBase = useCallback(() => {
     // Deselect all layers and return to base
     imageEditor.setSelectedLayerId(null)
     if (editingContext !== null) {
       imageEditor.switchContext(null)
-      setEditingContext(null)
     }
   }, [editingContext, imageEditor])
 

web/src/lib/image-editor.ts

@@ -117,6 +117,7 @@ export interface ImageEditorCallbacks {
   onLoadingChange?: (isLoading: boolean) => void
   onHistoryChange?: () => void
   onSelectedLayerChange?: (layerId: string | null) => void
+  onEditingContextChange?: (layerId: string | null) => void
 }
 
 /**
@@ -1280,6 +1281,9 @@ export class ImageEditor {
     // Switch context
     this.editingContext = layerId
 
+    // Notify editing context change
+    this.callbacks.onEditingContextChange?.(layerId)
+
     // Auto-select the layer when entering edit mode
     if (layerId !== null) {
       this.setSelectedLayerId(layerId)

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

@@ -93,6 +93,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
   const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null)
+  const [editingContext, setEditingContext] = useState<string | null>(null)
 
   // Unsaved changes warning hook
   const { showDialog, handleConfirm, handleCancel } = useUnsavedChangesWarning(canUndo)
@@ -118,6 +119,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
         updateLocationState(encoded)
       },
       onSelectedLayerChange: setSelectedLayerId,
+      onEditingContextChange: setEditingContext,
     })
 
     // restore state from URL, after callbacks are set
@@ -349,6 +351,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
                       imagePath={imagePath}
                       params={params}
                       selectedLayerId={selectedLayerId}
+                      editingContext={editingContext}
                       openSections={editorOpenSections}
                       onOpenSectionsChange={handleOpenSectionsChange}
                       onUpdateParams={updateParams}
@@ -411,6 +414,7 @@ export function ImageEditorPage({ galleryKey, imageKey, loaderData }: ImageEdito
               imagePath={imagePath}
               params={params}
               selectedLayerId={selectedLayerId}
+              editingContext={editingContext}
               openSections={editorOpenSections}
               onOpenSectionsChange={handleOpenSectionsChange}
               onUpdateParams={updateParams}