From ae7440b721381ebcef10d62d28ca083105e32d02 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 14 Sep 2024 11:32:29 +1000
Subject: [PATCH] fix(ui): cursor sometimes hidden during staging

Need a to track a few more things to ensure we update the cursor correctly in all situations.
---
 .../controlLayers/konva/CanvasManager.ts      | 38 +++++++++----------
 .../controlLayers/konva/CanvasStageModule.ts  |  3 ++
 .../konva/CanvasTool/CanvasToolModule.ts      |  5 +--
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
index 0654a24215..3ad18a6ec8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasManager.ts
@@ -73,7 +73,7 @@ export class CanvasManager extends CanvasModuleBase {
   _isDebugging: boolean = false;
 
   /**
-   * Whether the canvas is currently busy with a transformation or filtering operation.
+   * Whether the canvas is currently busy with a transformation, filter, rasterization, staging or compositing operation.
    */
   $isBusy: Atom<boolean>;
 
@@ -104,25 +104,7 @@ export class CanvasManager extends CanvasModuleBase {
     this.entityRenderer = new CanvasEntityRendererModule(this);
 
     this.compositor = new CanvasCompositorModule(this);
-
-    this.background = new CanvasBackgroundModule(this);
-    this.stage.addLayer(this.background.konva.layer);
-
-    this.konva = {
-      previewLayer: new Konva.Layer({ listening: false, imageSmoothingEnabled: false }),
-    };
-    this.stage.addLayer(this.konva.previewLayer);
-
-    this.tool = new CanvasToolModule(this);
     this.stagingArea = new CanvasStagingAreaModule(this);
-    this.progressImage = new CanvasProgressImageModule(this);
-    this.bbox = new CanvasBboxModule(this);
-
-    // Must add in this order for correct z-index
-    this.konva.previewLayer.add(this.stagingArea.konva.group);
-    this.konva.previewLayer.add(this.progressImage.konva.group);
-    this.konva.previewLayer.add(this.bbox.konva.group);
-    this.konva.previewLayer.add(this.tool.konva.group);
 
     this.$isBusy = computed(
       [
@@ -136,6 +118,24 @@ export class CanvasManager extends CanvasModuleBase {
         return isFiltering || isTransforming || isRasterizing || isStaging || isCompositing;
       }
     );
+
+    this.background = new CanvasBackgroundModule(this);
+    this.stage.addLayer(this.background.konva.layer);
+
+    this.konva = {
+      previewLayer: new Konva.Layer({ listening: false, imageSmoothingEnabled: false }),
+    };
+    this.stage.addLayer(this.konva.previewLayer);
+
+    this.tool = new CanvasToolModule(this);
+    this.progressImage = new CanvasProgressImageModule(this);
+    this.bbox = new CanvasBboxModule(this);
+
+    // Must add in this order for correct z-index
+    this.konva.previewLayer.add(this.stagingArea.konva.group);
+    this.konva.previewLayer.add(this.progressImage.konva.group);
+    this.konva.previewLayer.add(this.bbox.konva.group);
+    this.konva.previewLayer.add(this.tool.konva.group);
   }
 
   getAdapter = <T extends CanvasEntityType = CanvasEntityType>(
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
index 049eedb25b..404964bb1d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
@@ -366,6 +366,9 @@ export class CanvasStageModule extends CanvasModuleBase {
   };
 
   setCursor = (cursor: Property.Cursor) => {
+    if (this.container.style.cursor === cursor) {
+      return;
+    }
     this.container.style.cursor = cursor;
   };
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts
index 267a33061a..e819202282 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts
@@ -106,10 +106,9 @@ export class CanvasToolModule extends CanvasModuleBase {
     this.konva.group.add(this.colorPickerToolPreview.konva.group);
 
     this.subscriptions.add(this.manager.stage.$stageAttrs.listen(this.render));
-    this.subscriptions.add(this.manager.stateApi.$isTransforming.listen(this.render));
-    this.subscriptions.add(this.manager.stateApi.$isFiltering.listen(this.render));
+    this.subscriptions.add(this.manager.$isBusy.listen(this.render));
     this.subscriptions.add(this.manager.stateApi.createStoreSubscription(selectCanvasSettingsSlice, this.render));
-    this.subscriptions.add(this.manager.stateApi.createStoreSubscription(selectCanvasSlice, this.syncCursorStyle));
+    this.subscriptions.add(this.manager.stateApi.createStoreSubscription(selectCanvasSlice, this.render));
     this.subscriptions.add(
       this.$tool.listen(() => {
         // On tool switch, reset mouse state