fix(ui): do not allow drawing if layer disabled

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool.ts

@@ -194,20 +194,24 @@ export class CanvasTool {
 
     const tool = toolState.selected;
 
-    const isDrawable = selectedEntity && isDrawableEntity(selectedEntity.state);
+    const isDrawable = selectedEntity && selectedEntity.state.isEnabled && isDrawableEntity(selectedEntity.state);
 
     // Update the stage's pointer style
-    if (tool === 'view') {
+    if (Boolean(this.manager.stateApi.$transformingEntity.get()) || renderedEntityCount === 0) {
-      // View gets a hand
+      // We are transforming and/or have no layers, so we should not render any tool
-      stage.container().style.cursor = isMouseDown ? 'grabbing' : 'grab';
-    } else if (renderedEntityCount === 0) {
-      // We have no layers, so we should not render any tool
       stage.container().style.cursor = 'default';
-    } else if (!isDrawable) {
+    } else if (tool === 'view') {
-      // Non-drawable layers don't have tools
+      // view tool gets a hand
-      stage.container().style.cursor = 'not-allowed';
+      stage.container().style.cursor = isMouseDown ? 'grabbing' : 'grab';
-    } else if (tool === 'move' || Boolean(this.manager.stateApi.$transformingEntity.get())) {
+      // Bbox tool gets default
-      // Move tool gets a pointer
+    } else if (tool === 'bbox') {
+      stage.container().style.cursor = 'default';
+    } else if (tool === 'eyeDropper') {
+      // Eyedropper gets none
+      stage.container().style.cursor = 'none';
+    } else if (isDrawable) {
+      if (tool === 'move') {
+        // Move gets default arrow
         stage.container().style.cursor = 'default';
       } else if (tool === 'rect') {
         // Rect gets a crosshair
@@ -215,10 +219,11 @@ export class CanvasTool {
       } else if (tool === 'brush' || tool === 'eraser') {
         // Hide the native cursor and use the konva-rendered brush preview
         stage.container().style.cursor = 'none';
-    } else if (tool === 'bbox') {
+      }
-      stage.container().style.cursor = 'default';
+    } else {
-    } else if (tool === 'eyeDropper') {
+      // isDrawable === 'false'
-      stage.container().style.cursor = 'none';
+      // Non-drawable layers don't have tools
+      stage.container().style.cursor = 'not-allowed';
     }
 
     stage.draggable(tool === 'view');

invokeai/frontend/web/src/features/controlLayers/konva/events.ts

@@ -15,7 +15,6 @@ import type {
   RgbaColor,
   Tool,
 } from 'features/controlLayers/store/types';
-import { isDrawableEntity, isDrawableEntityAdapter } from 'features/controlLayers/store/types';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import { clamp } from 'lodash-es';
@@ -200,15 +199,10 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
       if (color) {
         manager.stateApi.setFill(color);
       }
-    }
+      manager.preview.tool.render();
-
+    } else {
-    if (
+      const isDrawable = selectedEntity?.state.isEnabled;
-      pos &&
+      if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
-      selectedEntity &&
-      isDrawableEntity(selectedEntity.state) &&
-      !$spaceKey.get() &&
-      getIsPrimaryMouseDown(e)
-    ) {
         $lastMouseDownPos.set(pos);
         const normalizedPoint = offsetCoord(pos, selectedEntity.state.position);
 
@@ -299,7 +293,7 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
           });
         }
       }
-    manager.preview.tool.render();
+    }
   });
 
   //#region mouseup
@@ -307,8 +301,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
     $isMouseDown.set(false);
     const pos = $lastCursorPos.get();
     const selectedEntity = getSelectedEntity();
-
+    const isDrawable = selectedEntity?.state.isEnabled;
-    if (pos && selectedEntity && isDrawableEntity(selectedEntity.state) && !$spaceKey.get()) {
+    if (pos && isDrawable && !$spaceKey.get()) {
       const toolState = getToolState();
 
       if (toolState.selected === 'brush') {
@@ -340,7 +334,6 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
 
       $lastMouseDownPos.set(null);
     }
-
     manager.preview.tool.render();
   });
 
@@ -353,17 +346,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
     if (toolState.selected === 'eyeDropper') {
       const color = getColorUnderCursor(stage);
       manager.stateApi.$colorUnderCursor.set(color);
-    }
+    } else {
-
+      const isDrawable = selectedEntity?.state.isEnabled;
-    if (
+      if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
-      pos &&
-      selectedEntity &&
-      isDrawableEntity(selectedEntity.state) &&
-      selectedEntity.adapter &&
-      isDrawableEntityAdapter(selectedEntity.adapter) &&
-      !$spaceKey.get() &&
-      getIsPrimaryMouseDown(e)
-    ) {
         if (toolState.selected === 'brush') {
           const drawingBuffer = selectedEntity.adapter.renderer.bufferState;
           if (drawingBuffer) {
@@ -451,6 +436,8 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
           }
         }
       }
+    }
+
     manager.preview.tool.render();
   });
 
@@ -461,14 +448,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
     $lastMouseDownPos.set(null);
     const selectedEntity = getSelectedEntity();
     const toolState = getToolState();
+    const isDrawable = selectedEntity?.state.isEnabled;
 
-    if (
+    if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {
-      pos &&
-      selectedEntity &&
-      isDrawableEntity(selectedEntity.state) &&
-      !$spaceKey.get() &&
-      getIsPrimaryMouseDown(e)
-    ) {
       const drawingBuffer = selectedEntity.adapter.renderer.bufferState;
       const normalizedPoint = offsetCoord(pos, selectedEntity.state.position);
       if (toolState.selected === 'brush' && drawingBuffer?.type === 'brush_line') {