fix(ui): brush size and layer cycle hotkeys conflict

Closes #6829

invokeai/app/api/routers/session_queue.py

@@ -11,7 +11,7 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
+    CancelByDestinationResult,
     ClearResult,
     EnqueueBatchResult,
     PruneResult,
@@ -107,16 +107,18 @@ async def cancel_by_batch_ids(
 
 
 @session_queue_router.put(
-    "/{queue_id}/cancel_by_origin",
-    operation_id="cancel_by_origin",
+    "/{queue_id}/cancel_by_destination",
+    operation_id="cancel_by_destination",
     responses={200: {"model": CancelByBatchIDsResult}},
 )
-async def cancel_by_origin(
+async def cancel_by_destination(
     queue_id: str = Path(description="The queue id to perform this operation on"),
-    origin: str = Query(description="The origin to cancel all queue items for"),
-) -> CancelByOriginResult:
+    destination: str = Query(description="The destination to cancel all queue items for"),
+) -> CancelByDestinationResult:
     """Immediately cancels all queue items with the given origin"""
-    return ApiDependencies.invoker.services.session_queue.cancel_by_origin(queue_id=queue_id, origin=origin)
+    return ApiDependencies.invoker.services.session_queue.cancel_by_destination(
+        queue_id=queue_id, destination=destination
+    )
 
 
 @session_queue_router.put(

invokeai/app/services/session_queue/session_queue_base.py

@@ -6,7 +6,7 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
+    CancelByDestinationResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -97,8 +97,8 @@ class SessionQueueBase(ABC):
         pass
 
     @abstractmethod
-    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
-        """Cancels all queue items with the given batch origin"""
+    def cancel_by_destination(self, queue_id: str, destination: str) -> CancelByDestinationResult:
+        """Cancels all queue items with the given batch destination"""
         pass
 
     @abstractmethod

invokeai/app/services/session_queue/session_queue_common.py

@@ -346,10 +346,10 @@ class CancelByBatchIDsResult(BaseModel):
     canceled: int = Field(..., description="Number of queue items canceled")
 
 
-class CancelByOriginResult(BaseModel):
-    """Result of canceling by list of batch ids"""
+class CancelByDestinationResult(CancelByBatchIDsResult):
+    """Result of canceling by a destination"""
 
-    canceled: int = Field(..., description="Number of queue items canceled")
+    pass
 
 
 class CancelByQueueIDResult(CancelByBatchIDsResult):

invokeai/app/services/session_queue/session_queue_sqlite.py

@@ -10,7 +10,7 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
+    CancelByDestinationResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -426,19 +426,19 @@ class SqliteSessionQueue(SessionQueueBase):
             self.__lock.release()
         return CancelByBatchIDsResult(canceled=count)
 
-    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
+    def cancel_by_destination(self, queue_id: str, destination: str) -> CancelByDestinationResult:
         try:
             current_queue_item = self.get_current(queue_id)
             self.__lock.acquire()
             where = """--sql
                 WHERE
                   queue_id == ?
-                  AND origin == ?
+                  AND destination == ?
                   AND status != 'canceled'
                   AND status != 'completed'
                   AND status != 'failed'
                 """
-            params = (queue_id, origin)
+            params = (queue_id, destination)
             self.__cursor.execute(
                 f"""--sql
                 SELECT COUNT(*)
@@ -457,14 +457,14 @@ class SqliteSessionQueue(SessionQueueBase):
                 params,
             )
             self.__conn.commit()
-            if current_queue_item is not None and current_queue_item.origin == origin:
+            if current_queue_item is not None and current_queue_item.destination == destination:
                 self._set_queue_item_status(current_queue_item.item_id, "canceled")
         except Exception:
             self.__conn.rollback()
             raise
         finally:
             self.__lock.release()
-        return CancelByOriginResult(canceled=count)
+        return CancelByDestinationResult(canceled=count)
 
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         try:

invokeai/backend/model_manager/load/model_loaders/flux.py

@@ -32,7 +32,9 @@ from invokeai.backend.model_manager.config import (
 )
 from invokeai.backend.model_manager.load.load_default import ModelLoader
 from invokeai.backend.model_manager.load.model_loader_registry import ModelLoaderRegistry
-from invokeai.backend.model_manager.util.model_util import convert_bundle_to_flux_transformer_checkpoint
+from invokeai.backend.model_manager.util.model_util import (
+    convert_bundle_to_flux_transformer_checkpoint,
+)
 from invokeai.backend.util.silence_warnings import SilenceWarnings
 
 try:
@@ -193,6 +195,11 @@ class FluxCheckpointModel(ModelLoader):
             sd = load_file(model_path)
             if "model.diffusion_model.double_blocks.0.img_attn.norm.key_norm.scale" in sd:
                 sd = convert_bundle_to_flux_transformer_checkpoint(sd)
+            new_sd_size = sum([ten.nelement() * torch.bfloat16.itemsize for ten in sd.values()])
+            self._ram_cache.make_room(new_sd_size)
+            for k in sd.keys():
+                # We need to cast to bfloat16 due to it being the only currently supported dtype for inference
+                sd[k] = sd[k].to(torch.bfloat16)
             model.load_state_dict(sd, assign=True)
         return model
 

invokeai/frontend/web/.eslintrc.js

@@ -16,6 +16,14 @@ module.exports = {
     'no-promise-executor-return': 'error',
     // https://eslint.org/docs/latest/rules/require-await
     'require-await': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'crypto',
+        property: 'randomUUID',
+        message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
+      },
+    ],
   },
   overrides: [
     /**

invokeai/frontend/web/knip.ts

@@ -11,6 +11,8 @@ const config: KnipConfig = {
     'src/features/nodes/types/v2/**',
     // TODO(psyche): maybe we can clean up these utils after canvas v2 release
     'src/features/controlLayers/konva/util.ts',
+    // TODO(psyche): restore HRF functionality?
+    'src/features/hrf/**',
   ],
   ignoreBinaries: ['only-allow'],
   paths: {

invokeai/frontend/web/package.json

@@ -58,7 +58,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.20",
-    "@invoke-ai/ui-library": "^0.0.32",
+    "@invoke-ai/ui-library": "^0.0.34",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
@@ -92,7 +92,7 @@
     "react-i18next": "^14.1.3",
     "react-icons": "^5.2.1",
     "react-redux": "9.1.2",
-    "react-resizable-panels": "^2.0.23",
+    "react-resizable-panels": "^2.1.2",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.9.0",
     "reactflow": "^11.11.4",

invokeai/frontend/web/pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^5.0.20
     version: 5.0.20
   '@invoke-ai/ui-library':
-    specifier: ^0.0.32
-    version: 0.0.32(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^0.0.34
+    version: 0.0.34(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1)
   '@nanostores/react':
     specifier: ^0.7.3
     version: 0.7.3(nanostores@0.11.2)(react@18.3.1)
@@ -126,8 +126,8 @@ dependencies:
     specifier: 9.1.2
     version: 9.1.2(@types/react@18.3.3)(react@18.3.1)(redux@5.0.1)
   react-resizable-panels:
-    specifier: ^2.0.23
-    version: 2.0.23(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^2.1.2
+    version: 2.1.2(react-dom@18.3.1)(react@18.3.1)
   react-use:
     specifier: ^17.5.1
     version: 17.5.1(react-dom@18.3.1)(react@18.3.1)
@@ -2056,7 +2056,7 @@ packages:
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
       react: 18.3.1
-      react-focus-lock: 2.13.0(@types/react@18.3.3)(react@18.3.1)
+      react-focus-lock: 2.13.2(@types/react@18.3.3)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -2253,7 +2253,7 @@ packages:
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.10(@types/react@18.3.3)(react@18.3.1)
+      react-remove-scroll: 2.6.0(@types/react@18.3.3)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -3574,8 +3574,8 @@ packages:
       prettier: 3.3.3
     dev: true
 
-  /@invoke-ai/ui-library@0.0.32(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-JxAoblrDu/cZ4ha9KO4ry5OWvyLUE1Dj28i+ciMaDNUpC/cN+IyiTbUBoFoPaoN5JP8Zpd/MYCcmF2qsziHDzg==}
+  /@invoke-ai/ui-library@0.0.34(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-iDSjFQV2U4LfQ8+UdZ9Uy6J1iKKTSsXM0uhkWrwcIghbgN5QwY3ABVLhqJrSWVTwp7puEDhe/lRQ9QhTZBkVzw==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
@@ -10011,8 +10011,8 @@ packages:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
     dev: false
 
-  /react-focus-lock@2.13.0(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-w7aIcTwZwNzUp2fYQDMICy+khFwVmKmOrLF8kNsPS+dz4Oi/oxoVJ2wCMVvX6rWGriM/+mYaTyp1MRmkcs2amw==}
+  /react-focus-lock@2.13.2(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-T/7bsofxYqnod2xadvuwjGKHOoL5GH7/EIPI5UyEvaU/c2CcphvGI371opFtuY/SYdbMsNiuF4HsHQ50nA/TKQ==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -10147,25 +10147,6 @@ packages:
       tslib: 2.7.0
     dev: false
 
-  /react-remove-scroll@2.5.10(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-m3zvBRANPBw3qxVVjEIPEQinkcwlFZ4qyomuWVpNJdv4c6MvHfXV0C3L9Jx5rr3HeBHKNRX+1jreB5QloDIJjA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 18.3.3
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
-      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
-      tslib: 2.7.0
-      use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
-      use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
-    dev: false
-
   /react-remove-scroll@2.5.5(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
@@ -10185,8 +10166,27 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
     dev: false
 
-  /react-resizable-panels@2.0.23(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-8ZKTwTU11t/FYwiwhMdtZYYyFxic5U5ysRu2YwfkAgDbUJXFvnWSJqhnzkSlW+mnDoNAzDCrJhdOSXBPA76wug==}
+  /react-remove-scroll@2.6.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
+      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
+      tslib: 2.7.0
+      use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
+    dev: false
+
+  /react-resizable-panels@2.1.2(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Ku2Bo7JvE8RpHhl4X1uhkdeT9auPBoxAOlGTqomDUUrBAX2mVGuHYZTcWvlnJSgx0QyHIxHECgGB5XVPUbUOkQ==}
     peerDependencies:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0

invokeai/frontend/web/public/locales/de.json

@@ -127,7 +127,14 @@
         "bulkDownloadRequestedDesc": "Dein Download wird vorbereitet. Dies kann ein paar Momente dauern.",
         "bulkDownloadRequestFailed": "Problem beim Download vorbereiten",
         "bulkDownloadFailed": "Download fehlgeschlagen",
-        "alwaysShowImageSizeBadge": "Zeige immer Bilder Größe Abzeichen"
+        "alwaysShowImageSizeBadge": "Zeige immer Bilder Größe Abzeichen",
+        "selectForCompare": "Zum Vergleichen auswählen",
+        "compareImage": "Bilder vergleichen",
+        "exitSearch": "Suche beenden",
+        "newestFirst": "Neueste zuerst",
+        "oldestFirst": "Älteste zuerst",
+        "openInViewer": "Im Viewer öffnen",
+        "swapImages": "Bilder tauschen"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tastenkürzel",
@@ -631,7 +638,8 @@
         "archived": "Archiviert",
         "noBoards": "Kein {boardType}} Ordner",
         "hideBoards": "Ordner verstecken",
-        "viewBoards": "Ordner ansehen"
+        "viewBoards": "Ordner ansehen",
+        "deletedPrivateBoardsCannotbeRestored": "Gelöschte Boards können nicht wiederhergestellt werden. Wenn Sie „Nur Board löschen“ wählen, werden die Bilder in einen privaten, nicht kategorisierten Status für den Ersteller des Bildes versetzt."
     },
     "controlnet": {
         "showAdvanced": "Zeige Erweitert",
@@ -781,7 +789,9 @@
         "batchFieldValues": "Stapelverarbeitungswerte",
         "batchQueued": "Stapelverarbeitung eingereiht",
         "graphQueued": "Graph eingereiht",
-        "graphFailedToQueue": "Fehler beim Einreihen des Graphen"
+        "graphFailedToQueue": "Fehler beim Einreihen des Graphen",
+        "generations_one": "Generation",
+        "generations_other": "Generationen"
     },
     "metadata": {
         "negativePrompt": "Negativ Beschreibung",
@@ -1146,5 +1156,10 @@
         "noMatchingTriggers": "Keine passenden Trigger",
         "addPromptTrigger": "Prompt-Trigger hinzufügen",
         "compatibleEmbeddings": "Kompatible Einbettungen"
+    },
+    "ui": {
+        "tabs": {
+            "queue": "Warteschlange"
+        }
     }
 }

invokeai/frontend/web/public/locales/en.json

@@ -93,6 +93,7 @@
         "copy": "Copy",
         "copyError": "$t(gallery.copy) Error",
         "on": "On",
+        "off": "Off",
         "or": "or",
         "checkpoint": "Checkpoint",
         "communityLabel": "Community",
@@ -134,6 +135,7 @@
         "nodes": "Workflows",
         "notInstalled": "Not $t(common.installed)",
         "openInNewTab": "Open in New Tab",
+        "openInViewer": "Open in Viewer",
         "orderBy": "Order By",
         "outpaint": "outpaint",
         "outputs": "Outputs",
@@ -373,6 +375,7 @@
         "useCache": "Use Cache"
     },
     "gallery": {
+        "gallery": "Gallery",
         "alwaysShowImageSizeBadge": "Always Show Image Size Badge",
         "assets": "Assets",
         "autoAssignBoardOnClick": "Auto-Assign Board on Click",
@@ -385,11 +388,11 @@
         "deleteImage_one": "Delete Image",
         "deleteImage_other": "Delete {{count}} Images",
         "deleteImagePermanent": "Deleted images cannot be restored.",
-        "displayBoardSearch": "Display Board Search",
-        "displaySearch": "Display Search",
+        "displayBoardSearch": "Board Search",
+        "displaySearch": "Image Search",
         "download": "Download",
         "exitBoardSearch": "Exit Board Search",
-        "exitSearch": "Exit Search",
+        "exitSearch": "Exit Image Search",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",
         "gallerySettings": "Gallery Settings",
@@ -435,7 +438,8 @@
         "compareHelp1": "Hold <Kbd>Alt</Kbd> while clicking a gallery image or using the arrow keys to change the compare image.",
         "compareHelp2": "Press <Kbd>M</Kbd> to cycle through comparison modes.",
         "compareHelp3": "Press <Kbd>C</Kbd> to swap the compared images.",
-        "compareHelp4": "Press <Kbd>Z</Kbd> or <Kbd>Esc</Kbd> to exit."
+        "compareHelp4": "Press <Kbd>Z</Kbd> or <Kbd>Esc</Kbd> to exit.",
+        "toggleMiniViewer": "Toggle Mini Viewer"
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",
@@ -1014,6 +1018,8 @@
             "noModelForControlAdapter": "Control Adapter #{{number}} has no model selected.",
             "incompatibleBaseModelForControlAdapter": "Control Adapter #{{number}} model is incompatible with main model.",
             "noModelSelected": "No model selected",
+            "canvasManagerNotLoaded": "Canvas Manager not loaded",
+            "canvasBusy": "Canvas is busy",
             "noPrompts": "No prompts generated",
             "noNodesInGraph": "No nodes in graph",
             "systemDisconnected": "System disconnected",
@@ -1045,12 +1051,11 @@
         "scaledHeight": "Scaled H",
         "scaledWidth": "Scaled W",
         "scheduler": "Scheduler",
-        "seamlessXAxis": "Seamless Tiling X Axis",
-        "seamlessYAxis": "Seamless Tiling Y Axis",
+        "seamlessXAxis": "Seamless X Axis",
+        "seamlessYAxis": "Seamless Y Axis",
         "seed": "Seed",
         "imageActions": "Image Actions",
-        "sendToImg2Img": "Send to Image to Image",
-        "sendToUnifiedCanvas": "Send To Unified Canvas",
+        "sendToCanvas": "Send To Canvas",
         "sendToUpscale": "Send To Upscale",
         "showOptionsPanel": "Show Side Panel (O or T)",
         "shuffle": "Shuffle Seed",
@@ -1191,8 +1196,8 @@
         "problemSavingMaskDesc": "Unable to export mask",
         "prunedQueue": "Pruned Queue",
         "resetInitialImage": "Reset Initial Image",
-        "sentToImageToImage": "Sent To Image To Image",
-        "sentToUnifiedCanvas": "Sent to Unified Canvas",
+        "sentToCanvas": "Sent to Canvas",
+        "sentToUpscale": "Sent to Upscale",
         "serverError": "Server Error",
         "sessionRef": "Session: {{sessionId}}",
         "setAsCanvasInitialImage": "Set as canvas initial image",
@@ -1655,9 +1660,14 @@
     },
     "controlLayers": {
         "bookmark": "Bookmark for Quick Switch",
+        "fitBboxToLayers": "Fit Bbox To Layers",
         "removeBookmark": "Remove Bookmark",
-        "saveCanvasToGallery": "Save Canvas To Gallery",
-        "saveBboxToGallery": "Save Bbox To Gallery",
+        "saveCanvasToGallery": "Save Canvas to Gallery",
+        "saveBboxToGallery": "Save Bbox to Gallery",
+        "sendBboxToRegionalIPAdapter": "Send Bbox to Regional IP Adapter",
+        "sendBboxToGlobalIPAdapter": "Send Bbox to Global IP Adapter",
+        "sendBboxToControlLayer": "Send Bbox to Control Layer",
+        "sendBboxToRasterLayer": "Send Bbox to Raster Layer",
         "savedToGalleryOk": "Saved to Gallery",
         "savedToGalleryError": "Error saving to gallery",
         "mergeVisible": "Merge Visible",
@@ -1710,6 +1720,8 @@
         "inpaintMask": "Inpaint Mask",
         "regionalGuidance": "Regional Guidance",
         "ipAdapter": "IP Adapter",
+        "sendingToCanvas": "Sending to Canvas",
+        "sendingToGallery": "Sending to Gallery",
         "sendToGallery": "Send To Gallery",
         "sendToGalleryDesc": "Generations will be sent to the gallery.",
         "sendToCanvas": "Send To Canvas",
@@ -1748,6 +1760,8 @@
         "noLayersAdded": "No Layers Added",
         "layer_one": "Layer",
         "layer_other": "Layers",
+        "layer_withCount_one": "Layer ({{count}})",
+        "layer_withCount_other": "Layers ({{count}})",
         "objects_zero": "empty",
         "objects_one": "{{count}} object",
         "objects_other": "{{count}} objects",
@@ -1789,9 +1803,19 @@
             "filter": "Filter",
             "filters": "Filters",
             "filterType": "Filter Type",
-            "preview": "Preview",
+            "autoProcess": "Auto Process",
+            "reset": "Reset",
+            "process": "Process",
             "apply": "Apply",
-            "cancel": "Cancel"
+            "cancel": "Cancel",
+            "spandrel": {
+                "label": "Image-to-Image Model",
+                "description": "Run an image-to-image model on the selected layer.",
+                "paramModel": "Model",
+                "paramAutoScale": "Auto Scale",
+                "paramAutoScaleDesc": "The selected model will be run until the target scale is reached.",
+                "paramScale": "Target Scale"
+            }
         },
         "transform": {
             "transform": "Transform",
@@ -1799,6 +1823,28 @@
             "reset": "Reset",
             "apply": "Apply",
             "cancel": "Cancel"
+        },
+        "settings": {
+            "snapToGrid": {
+                "label": "Snap to Grid",
+                "on": "On",
+                "off": "Off"
+            }
+        },
+        "HUD": {
+            "bbox": "Bbox",
+            "scaledBbox": "Scaled Bbox",
+            "autoSave": "Auto Save",
+            "entityStatus": {
+                "selectedEntity": "Selected Entity",
+                "selectedEntityIs": "Selected Entity is",
+                "isFiltering": "is filtering",
+                "isTransforming": "is transforming",
+                "isLocked": "is locked",
+                "isHidden": "is hidden",
+                "isDisabled": "is disabled",
+                "enabled": "Enabled"
+            }
         }
     },
     "upscaling": {
@@ -1885,7 +1931,9 @@
             "queue": "Queue",
             "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
             "upscaling": "Upscaling",
-            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
+            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
+            "gallery": "Gallery",
+            "galleryTab": "$t(ui.tabs.gallery) $t(common.tab)"
         }
     },
     "system": {

invokeai/frontend/web/public/locales/es.json

@@ -86,15 +86,15 @@
         "loadMore": "Cargar más",
         "noImagesInGallery": "No hay imágenes para mostrar",
         "deleteImage_one": "Eliminar Imagen",
-        "deleteImage_many": "",
-        "deleteImage_other": "",
+        "deleteImage_many": "Eliminar {{count}} Imágenes",
+        "deleteImage_other": "Eliminar {{count}} Imágenes",
         "deleteImagePermanent": "Las imágenes eliminadas no se pueden restaurar.",
         "assets": "Activos",
         "autoAssignBoardOnClick": "Asignación automática de tableros al hacer clic"
     },
     "hotkeys": {
         "keyboardShortcuts": "Atajos de teclado",
-        "appHotkeys": "Atajos de applicación",
+        "appHotkeys": "Atajos de aplicación",
         "generalHotkeys": "Atajos generales",
         "galleryHotkeys": "Atajos de galería",
         "unifiedCanvasHotkeys": "Atajos de lienzo unificado",
@@ -535,7 +535,7 @@
         "bottomMessage": "Al eliminar este panel y las imágenes que contiene, se restablecerán las funciones que los estén utilizando actualmente.",
         "deleteBoardAndImages": "Borrar el panel y las imágenes",
         "loading": "Cargando...",
-        "deletedBoardsCannotbeRestored": "Los paneles eliminados no se pueden restaurar",
+        "deletedBoardsCannotbeRestored": "Los paneles eliminados no se pueden restaurar. Al Seleccionar 'Borrar Solo el Panel' transferirá las imágenes a un estado sin categorizar.",
         "move": "Mover",
         "menuItemAutoAdd": "Agregar automáticamente a este panel",
         "searchBoard": "Buscando paneles…",
@@ -549,7 +549,13 @@
         "imagesWithCount_other": "{{count}} imágenes",
         "assetsWithCount_one": "{{count}} activo",
         "assetsWithCount_many": "{{count}} activos",
-        "assetsWithCount_other": "{{count}} activos"
+        "assetsWithCount_other": "{{count}} activos",
+        "hideBoards": "Ocultar Paneles",
+        "addPrivateBoard": "Agregar un tablero privado",
+        "addSharedBoard": "Agregar Panel Compartido",
+        "boards": "Paneles",
+        "archiveBoard": "Archivar Panel",
+        "archived": "Archivado"
     },
     "accordions": {
         "compositing": {

invokeai/frontend/web/public/locales/it.json

@@ -496,7 +496,9 @@
         "main": "Principali",
         "noModelsInstalledDesc1": "Installa i modelli con",
         "ipAdapters": "Adattatori IP",
-        "noMatchingModels": "Nessun modello corrispondente"
+        "noMatchingModels": "Nessun modello corrispondente",
+        "starterModelsInModelManager": "I modelli iniziali possono essere trovati in Gestione Modelli",
+        "spandrelImageToImage": "Immagine a immagine (Spandrel)"
     },
     "parameters": {
         "images": "Immagini",
@@ -510,7 +512,7 @@
         "perlinNoise": "Rumore Perlin",
         "type": "Tipo",
         "strength": "Forza",
-        "upscaling": "Ampliamento",
+        "upscaling": "Amplia",
         "scale": "Scala",
         "imageFit": "Adatta l'immagine iniziale alle dimensioni di output",
         "scaleBeforeProcessing": "Scala prima dell'elaborazione",
@@ -593,7 +595,7 @@
         "globalPositivePromptPlaceholder": "Prompt positivo globale",
         "globalNegativePromptPlaceholder": "Prompt negativo globale",
         "processImage": "Elabora Immagine",
-        "sendToUpscale": "Invia a Ampliare",
+        "sendToUpscale": "Invia a Amplia",
         "postProcessing": "Post-elaborazione (Shift + U)"
     },
     "settings": {
@@ -1420,7 +1422,7 @@
         "paramUpscaleMethod": {
             "heading": "Metodo di ampliamento",
             "paragraphs": [
-                "Metodo utilizzato per eseguire l'ampliamento dell'immagine per la correzione ad alta risoluzione."
+                "Metodo utilizzato per ampliare l'immagine per la correzione ad alta risoluzione."
             ]
         },
         "patchmatchDownScaleSize": {
@@ -1528,7 +1530,7 @@
         },
         "upscaleModel": {
             "paragraphs": [
-                "Il modello di ampliamento (Upscale), scala l'immagine alle dimensioni di uscita prima di aggiungere i dettagli. È possibile utilizzare qualsiasi modello di ampliamento supportato, ma alcuni sono specializzati per diversi tipi di immagini, come foto o disegni al tratto."
+                "Il modello di ampliamento, scala l'immagine alle dimensioni di uscita prima di aggiungere i dettagli. È possibile utilizzare qualsiasi modello di ampliamento supportato, ma alcuni sono specializzati per diversi tipi di immagini, come foto o disegni al tratto."
             ],
             "heading": "Modello di ampliamento"
         },
@@ -1720,26 +1722,27 @@
             "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
             "queue": "Coda",
             "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
-            "upscaling": "Ampliamento",
+            "upscaling": "Amplia",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
         }
     },
     "upscaling": {
         "creativity": "Creatività",
         "structure": "Struttura",
-        "upscaleModel": "Modello di Ampliamento",
+        "upscaleModel": "Modello di ampliamento",
         "scale": "Scala",
         "missingModelsWarning": "Visita <LinkComponent>Gestione modelli</LinkComponent> per installare i modelli richiesti:",
         "mainModelDesc": "Modello principale (architettura SD1.5 o SDXL)",
         "tileControlNetModelDesc": "Modello Tile ControlNet per l'architettura del modello principale scelto",
-        "upscaleModelDesc": "Modello per l'ampliamento (da immagine a immagine)",
+        "upscaleModelDesc": "Modello per l'ampliamento (immagine a immagine)",
         "missingUpscaleInitialImage": "Immagine iniziale mancante per l'ampliamento",
         "missingUpscaleModel": "Modello per l’ampliamento mancante",
         "missingTileControlNetModel": "Nessun modello ControlNet Tile valido installato",
         "postProcessingModel": "Modello di post-elaborazione",
         "postProcessingMissingModelWarning": "Visita <LinkComponent>Gestione modelli</LinkComponent> per installare un modello di post-elaborazione (da immagine a immagine).",
         "exceedsMaxSize": "Le impostazioni di ampliamento superano il limite massimo delle dimensioni",
-        "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata."
+        "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata.",
+        "upscale": "Amplia"
     },
     "upsell": {
         "inviteTeammates": "Invita collaboratori",
@@ -1789,6 +1792,7 @@
         "positivePromptColumn": "'prompt' o 'positive_prompt'",
         "noTemplates": "Nessun modello",
         "acceptedColumnsKeys": "Colonne/chiavi accettate:",
-        "templateActions": "Azioni modello"
+        "templateActions": "Azioni modello",
+        "promptTemplateCleared": "Modello di prompt cancellato"
     }
 }

invokeai/frontend/web/public/locales/ru.json

@@ -501,7 +501,8 @@
         "noModelsInstalled": "Нет установленных моделей",
         "noModelsInstalledDesc1": "Установите модели с помощью",
         "noMatchingModels": "Нет подходящих моделей",
-        "ipAdapters": "IP адаптеры"
+        "ipAdapters": "IP адаптеры",
+        "starterModelsInModelManager": "Стартовые модели можно найти в Менеджере моделей"
     },
     "parameters": {
         "images": "Изображения",
@@ -1758,7 +1759,8 @@
         "postProcessingModel": "Модель постобработки",
         "tileControlNetModelDesc": "Модель ControlNet для выбранной архитектуры основной модели",
         "missingModelsWarning": "Зайдите в <LinkComponent>Менеджер моделей</LinkComponent> чтоб установить необходимые модели:",
-        "postProcessingMissingModelWarning": "Посетите <LinkComponent>Менеджер моделей</LinkComponent>, чтобы установить модель постобработки (img2img)."
+        "postProcessingMissingModelWarning": "Посетите <LinkComponent>Менеджер моделей</LinkComponent>, чтобы установить модель постобработки (img2img).",
+        "upscale": "Увеличить"
     },
     "stylePresets": {
         "noMatchingTemplates": "Нет подходящих шаблонов",
@@ -1804,7 +1806,8 @@
         "noTemplates": "Нет шаблонов",
         "promptTemplatesDesc2": "Используйте строку-заполнитель <Pre>{{placeholder}}</Pre>, чтобы указать место, куда должен быть включен ваш запрос в шаблоне.",
         "searchByName": "Поиск по имени",
-        "shared": "Общий"
+        "shared": "Общий",
+        "promptTemplateCleared": "Шаблон запроса создан"
     },
     "upsell": {
         "inviteTeammates": "Пригласите членов команды",

invokeai/frontend/web/public/locales/zh_CN.json

@@ -154,7 +154,8 @@
         "displaySearch": "显示搜索",
         "stretchToFit": "拉伸以适应",
         "exitCompare": "退出对比",
-        "compareHelp1": "在点击图库中的图片或使用箭头键切换比较图片时，请按住<Kbd>Alt</Kbd> 键。"
+        "compareHelp1": "在点击图库中的图片或使用箭头键切换比较图片时，请按住<Kbd>Alt</Kbd> 键。",
+        "go": "运行"
     },
     "hotkeys": {
         "keyboardShortcuts": "快捷键",
@@ -494,7 +495,9 @@
         "huggingFacePlaceholder": "所有者或模型名称",
         "huggingFaceRepoID": "HuggingFace仓库ID",
         "loraTriggerPhrases": "LoRA 触发词",
-        "ipAdapters": "IP适配器"
+        "ipAdapters": "IP适配器",
+        "spandrelImageToImage": "图生图(Spandrel)",
+        "starterModelsInModelManager": "您可以在模型管理器中找到初始模型"
     },
     "parameters": {
         "images": "图像",
@@ -695,7 +698,9 @@
         "outOfMemoryErrorDesc": "您当前的生成设置已超出系统处理能力.请调整设置后再次尝试.",
         "parametersSet": "参数已恢复",
         "errorCopied": "错误信息已复制",
-        "modelImportCanceled": "模型导入已取消"
+        "modelImportCanceled": "模型导入已取消",
+        "importFailed": "导入失败",
+        "importSuccessful": "导入成功"
     },
     "unifiedCanvas": {
         "layer": "图层",
@@ -1705,12 +1710,55 @@
         "missingModelsWarning": "请访问<LinkComponent>模型管理器</LinkComponent> 安装所需的模型：",
         "mainModelDesc": "主模型（SD1.5或SDXL架构）",
         "exceedsMaxSize": "放大设置超出了最大尺寸限制",
-        "exceedsMaxSizeDetails": "最大放大限制是 {{maxUpscaleDimension}}x{{maxUpscaleDimension}} 像素.请尝试一个较小的图像或减少您的缩放选择."
+        "exceedsMaxSizeDetails": "最大放大限制是 {{maxUpscaleDimension}}x{{maxUpscaleDimension}} 像素.请尝试一个较小的图像或减少您的缩放选择.",
+        "upscale": "放大"
     },
     "upsell": {
         "inviteTeammates": "邀请团队成员",
         "professional": "专业",
         "professionalUpsell": "可在 Invoke 的专业版中使用.点击此处或访问 invoke.com/pricing 了解更多详情.",
         "shareAccess": "共享访问权限"
+    },
+    "stylePresets": {
+        "positivePrompt": "正向提示词",
+        "preview": "预览",
+        "deleteImage": "删除图像",
+        "deleteTemplate": "删除模版",
+        "deleteTemplate2": "您确定要删除这个模板吗？请注意，删除后无法恢复.",
+        "importTemplates": "导入提示模板，支持CSV或JSON格式",
+        "insertPlaceholder": "插入一个占位符",
+        "myTemplates": "我的模版",
+        "name": "名称",
+        "type": "类型",
+        "unableToDeleteTemplate": "无法删除提示模板",
+        "updatePromptTemplate": "更新提示词模版",
+        "exportPromptTemplates": "导出我的提示模板为CSV格式",
+        "exportDownloaded": "导出已下载",
+        "noMatchingTemplates": "无匹配的模版",
+        "promptTemplatesDesc1": "提示模板可以帮助您在编写提示时添加预设的文本内容.",
+        "promptTemplatesDesc3": "如果您没有使用占位符，那么模板的内容将会被添加到您提示的末尾.",
+        "searchByName": "按名称搜索",
+        "shared": "已分享",
+        "sharedTemplates": "已分享的模版",
+        "templateActions": "模版操作",
+        "templateDeleted": "提示模版已删除",
+        "toggleViewMode": "切换显示模式",
+        "uploadImage": "上传图像",
+        "active": "激活",
+        "choosePromptTemplate": "选择提示词模板",
+        "clearTemplateSelection": "清除模版选择",
+        "copyTemplate": "拷贝模版",
+        "createPromptTemplate": "创建提示词模版",
+        "defaultTemplates": "默认模版",
+        "editTemplate": "编辑模版",
+        "exportFailed": "无法生成并下载CSV文件",
+        "flatten": "将选定的模板内容合并到当前提示中",
+        "negativePrompt": "反向提示词",
+        "promptTemplateCleared": "提示模板已清除",
+        "useForTemplate": "用于提示词模版",
+        "viewList": "预览模版列表",
+        "viewModeTooltip": "这是您的提示在当前选定的模板下的预览效果。如需编辑提示，请直接在文本框中点击进行修改.",
+        "noTemplates": "无模版",
+        "private": "私密"
     }
 }

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -21,10 +21,16 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
       direction,
       shadows: {
         ..._theme.shadows,
+        selected:
+          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+        hoverSelected:
+          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+        hoverUnselected:
+          'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
         selectedForCompare:
-          '0px 0px 0px 1px var(--invoke-colors-base-900), 0px 0px 0px 4px var(--invoke-colors-green-400)',
+          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
         hoverSelectedForCompare:
-          '0px 0px 0px 1px var(--invoke-colors-base-900), 0px 0px 0px 4px var(--invoke-colors-green-300)',
+          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
       },
     });
   }, [direction]);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -1,5 +1,5 @@
 import type { TypedStartListening } from '@reduxjs/toolkit';
-import { createListenerMiddleware } from '@reduxjs/toolkit';
+import { addListener, createListenerMiddleware } from '@reduxjs/toolkit';
 import { addAdHocPostProcessingRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
 import { addStagingListeners } from 'app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener';
 import { addAnyEnqueuedListener } from 'app/store/middleware/listenerMiddleware/listeners/anyEnqueued';
@@ -9,6 +9,7 @@ import { addBatchEnqueuedListener } from 'app/store/middleware/listenerMiddlewar
 import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted';
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
+import { addCancellationsListeners } from 'app/store/middleware/listenerMiddleware/listeners/cancellationsListeners';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
@@ -40,6 +41,8 @@ export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
 
 const startAppListening = listenerMiddleware.startListening as AppStartListening;
 
+export const addAppListener = addListener.withTypes<RootState, AppDispatch>();
+
 /**
  * The RTK listener middleware is a lightweight alternative sagas/observables.
  *
@@ -119,3 +122,5 @@ addDynamicPromptsListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
 // addControlAdapterPreprocessor(startAppListening);
+
+addCancellationsListeners(startAppListening);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

@@ -1,37 +1,34 @@
+import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import {
-  sessionStagingAreaImageAccepted,
-  sessionStagingAreaReset,
-} from 'features/controlLayers/store/canvasSessionSlice';
-import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import { canvasReset, rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import { stagingAreaImageAccepted, stagingAreaReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
 import { imageDTOToImageObject } from 'features/controlLayers/store/types';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
-import { $lastCanvasProgressEvent } from 'services/events/setEventListeners';
 import { assert } from 'tsafe';
 
 const log = logger('canvas');
 
+const matchCanvasOrStagingAreaRest = isAnyOf(stagingAreaReset, canvasReset);
+
 export const addStagingListeners = (startAppListening: AppStartListening) => {
   startAppListening({
-    actionCreator: sessionStagingAreaReset,
+    matcher: matchCanvasOrStagingAreaRest,
     effect: async (_, { dispatch }) => {
       try {
         const req = dispatch(
-          queueApi.endpoints.cancelByBatchOrigin.initiate(
-            { origin: 'canvas' },
+          queueApi.endpoints.cancelByBatchDestination.initiate(
+            { destination: 'canvas' },
             { fixedCacheKey: 'cancelByBatchOrigin' }
           )
         );
         const { canceled } = await req.unwrap();
         req.reset();
 
-        $lastCanvasProgressEvent.set(null);
-
         if (canceled > 0) {
           log.debug(`Canceled ${canceled} canvas batches`);
           toast({
@@ -52,11 +49,11 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
   });
 
   startAppListening({
-    actionCreator: sessionStagingAreaImageAccepted,
+    actionCreator: stagingAreaImageAccepted,
     effect: (action, api) => {
       const { index } = action.payload;
       const state = api.getState();
-      const stagingAreaImage = state.canvasSession.stagedImages[index];
+      const stagingAreaImage = state.canvasStagingArea.stagedImages[index];
 
       assert(stagingAreaImage, 'No staged image found to accept');
       const { x, y } = selectCanvasSlice(state).bbox.rect;
@@ -69,7 +66,7 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
       };
 
       api.dispatch(rasterLayerAdded({ overrides, isSelected: false }));
-      api.dispatch(sessionStagingAreaReset());
+      api.dispatch(stagingAreaReset());
     },
   });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/cancellationsListeners.ts

@@ -0,0 +1,137 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { $lastCanvasProgressEvent } from 'features/controlLayers/store/canvasSlice';
+import { queueApi } from 'services/api/endpoints/queue';
+
+/**
+ * To prevent a race condition where a progress event arrives after a successful cancellation, we need to keep track of
+ * cancellations:
+ * - In the route handlers above, we track and update the cancellations object
+ * - When the user queues a, we should reset the cancellations, also handled int he route handlers above
+ * - When we get a progress event, we should check if the event is cancelled before setting the event
+ *
+ * We have a few ways that cancellations are effected, so we need to track them all:
+ * - by queue item id (in this case, we will compare the session_id and not the item_id)
+ * - by batch id
+ * - by destination
+ * - by clearing the queue
+ */
+type Cancellations = {
+  sessionIds: Set<string>;
+  batchIds: Set<string>;
+  destinations: Set<string>;
+  clearQueue: boolean;
+};
+
+const resetCancellations = (): void => {
+  cancellations.clearQueue = false;
+  cancellations.sessionIds.clear();
+  cancellations.batchIds.clear();
+  cancellations.destinations.clear();
+};
+
+const cancellations: Cancellations = {
+  sessionIds: new Set(),
+  batchIds: new Set(),
+  destinations: new Set(),
+  clearQueue: false,
+} as Readonly<Cancellations>;
+
+/**
+ * Checks if an item is cancelled, used to prevent race conditions with event handling.
+ *
+ * To use this, provide the session_id, batch_id and destination from the event payload.
+ */
+export const getIsCancelled = (item: {
+  session_id: string;
+  batch_id: string;
+  destination?: string | null;
+}): boolean => {
+  if (cancellations.clearQueue) {
+    return true;
+  }
+  if (cancellations.sessionIds.has(item.session_id)) {
+    return true;
+  }
+  if (cancellations.batchIds.has(item.batch_id)) {
+    return true;
+  }
+  if (item.destination && cancellations.destinations.has(item.destination)) {
+    return true;
+  }
+  return false;
+};
+
+export const addCancellationsListeners = (startAppListening: AppStartListening) => {
+  // When we get a cancellation, we may need to clear the last progress event - next few listeners handle those cases.
+  // Maybe we could use the `getIsCancelled` util here, but I think that could introduce _another_ race condition...
+  startAppListening({
+    matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
+    effect: () => {
+      resetCancellations();
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelByBatchDestination.matchFulfilled,
+    effect: (action) => {
+      cancellations.destinations.add(action.meta.arg.originalArgs.destination);
+
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled,
+    effect: (action) => {
+      cancellations.sessionIds.add(action.payload.session_id);
+
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelByBatchIds.matchFulfilled,
+    effect: (action) => {
+      for (const batch_id of action.meta.arg.originalArgs.batch_ids) {
+        cancellations.batchIds.add(batch_id);
+      }
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.clearQueue.matchFulfilled,
+    effect: () => {
+      cancellations.clearQueue = true;
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts

@@ -4,8 +4,12 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import type { SerializableObject } from 'common/types';
 import type { Result } from 'common/util/result';
 import { isErr, withResult, withResultAsync } from 'common/util/result';
-import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { sessionStagingAreaReset, sessionStartedStaging } from 'features/controlLayers/store/canvasSessionSlice';
+import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import {
+  selectIsStaging,
+  stagingAreaReset,
+  stagingAreaStartedStaging,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
 import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
@@ -31,14 +35,14 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
       let didStartStaging = false;
 
-      if (!state.canvasSession.isStaging && state.canvasSettings.sendToCanvas) {
-        dispatch(sessionStartedStaging());
+      if (!selectIsStaging(state) && state.canvasSettings.sendToCanvas) {
+        dispatch(stagingAreaStartedStaging());
         didStartStaging = true;
       }
 
       const abortStaging = () => {
-        if (didStartStaging && getState().canvasSession.isStaging) {
-          dispatch(sessionStagingAreaReset());
+        if (didStartStaging && selectIsStaging(getState())) {
+          dispatch(stagingAreaReset());
         }
       };
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedUpscale.ts

@@ -1,6 +1,5 @@
 import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildMultidiffusionUpscaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph';
 import { queueApi } from 'services/api/endpoints/queue';
@@ -11,7 +10,6 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
       enqueueRequested.match(action) && action.payload.tabName === 'upscaling',
     effect: async (action, { getState, dispatch }) => {
       const state = getState();
-      const { shouldShowProgressInViewer } = state.ui;
       const { prepend } = action.payload;
 
       const { g, noise, posCond } = await buildMultidiffusionUpscaleGraph(state);
@@ -25,9 +23,6 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
       );
       try {
         await req.unwrap();
-        if (shouldShowProgressInViewer) {
-          dispatch(isImageViewerOpenChanged(true));
-        }
       } finally {
         req.reset();
       }

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeletionListeners.ts

@@ -17,7 +17,7 @@ import type { ImageDTO } from 'services/api/types';
 
 const log = logger('gallery');
 
-//TODO(psyche): handle image deletion (canvas sessions?)
+//TODO(psyche): handle image deletion (canvas staging area?)
 
 // Some utils to delete images from different parts of the app
 const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts

@@ -1,6 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { selectDefaultControlAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import {
   controlLayerAdded,
   ipaImageChanged,
@@ -12,7 +13,7 @@ import type { CanvasControlLayerState, CanvasRasterLayerState } from 'features/c
 import { imageDTOToImageObject } from 'features/controlLayers/store/types';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { imageToCompareChanged, isImageViewerOpenChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
+import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -103,11 +104,14 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
+        const state = getState();
         const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
+        const { x, y } = selectCanvasSlice(state).bbox.rect;
+        const defaultControlAdapter = selectDefaultControlAdapter(state);
         const overrides: Partial<CanvasControlLayerState> = {
           objects: [imageObject],
           position: { x, y },
+          controlAdapter: defaultControlAdapter,
         };
         dispatch(controlLayerAdded({ overrides, isSelected: true }));
         return;
@@ -142,7 +146,6 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
       ) {
         const { imageDTO } = activeData.payload;
         dispatch(imageToCompareChanged(imageDTO));
-        dispatch(isImageViewerOpenChanged(true));
         return;
       }
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -2,6 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { ipaImageChanged, rgIPAdapterImageChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
+import { boardIdSelected, galleryViewChanged } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { toast } from 'features/toast/toast';
@@ -44,6 +45,8 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         if (!autoAddBoardId || autoAddBoardId === 'none') {
           const title = postUploadAction.title || DEFAULT_UPLOADED_TOAST.title;
           toast({ ...DEFAULT_UPLOADED_TOAST, title });
+          dispatch(boardIdSelected({ boardId: 'none' }));
+          dispatch(galleryViewChanged('assets'));
         } else {
           // Add this image to the board
           dispatch(
@@ -67,6 +70,8 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
             ...DEFAULT_UPLOADED_TOAST,
             description,
           });
+          dispatch(boardIdSelected({ boardId: autoAddBoardId }));
+          dispatch(galleryViewChanged('assets'));
         }
         return;
       }

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -13,7 +13,7 @@ import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import { modelChanged, refinerModelChanged, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier } from 'features/controlLayers/store/types';
-import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize';
+import { calculateNewSize } from 'features/parameters/components/Bbox/calculateNewSize';
 import { postProcessingModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';

invokeai/frontend/web/src/app/store/store.ts

@@ -6,9 +6,12 @@ import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
 import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import { changeBoardModalSlice } from 'features/changeBoardModal/store/slice';
-import { canvasSessionPersistConfig, canvasSessionSlice } from 'features/controlLayers/store/canvasSessionSlice';
 import { canvasSettingsPersistConfig, canvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
 import { canvasPersistConfig, canvasSlice, canvasUndoableConfig } from 'features/controlLayers/store/canvasSlice';
+import {
+  canvasStagingAreaPersistConfig,
+  canvasStagingAreaSlice,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { lorasPersistConfig, lorasSlice } from 'features/controlLayers/store/lorasSlice';
 import { paramsPersistConfig, paramsSlice } from 'features/controlLayers/store/paramsSlice';
 import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
@@ -63,7 +66,7 @@ const allReducers = {
   [stylePresetSlice.name]: stylePresetSlice.reducer,
   [paramsSlice.name]: paramsSlice.reducer,
   [canvasSettingsSlice.name]: canvasSettingsSlice.reducer,
-  [canvasSessionSlice.name]: canvasSessionSlice.reducer,
+  [canvasStagingAreaSlice.name]: canvasStagingAreaSlice.reducer,
   [lorasSlice.name]: lorasSlice.reducer,
 };
 
@@ -108,7 +111,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [stylePresetPersistConfig.name]: stylePresetPersistConfig,
   [paramsPersistConfig.name]: paramsPersistConfig,
   [canvasSettingsPersistConfig.name]: canvasSettingsPersistConfig,
-  [canvasSessionPersistConfig.name]: canvasSessionPersistConfig,
+  [canvasStagingAreaPersistConfig.name]: canvasStagingAreaPersistConfig,
   [lorasPersistConfig.name]: lorasPersistConfig,
 };
 

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -6,18 +6,51 @@ import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
 import type { MouseEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi';
 import type { ImageDTO, PostUploadAction } from 'services/api/types';
 
 import IAIDraggable from './IAIDraggable';
 import IAIDroppable from './IAIDroppable';
-import SelectionOverlay from './SelectionOverlay';
 
 const defaultUploadElement = <Icon as={PiUploadSimpleBold} boxSize={16} />;
 
 const defaultNoContentFallback = <IAINoContentFallback icon={PiImageBold} />;
 
+const sx: SystemStyleObject = {
+  '.gallery-image-container::before': {
+    content: '""',
+    display: 'inline-block',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    borderRadius: 'base',
+  },
+  '&[data-selected="selected"]>.gallery-image-container::before': {
+    boxShadow:
+      'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+  },
+  '&[data-selected="selectedForCompare"]>.gallery-image-container::before': {
+    boxShadow:
+      'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+  },
+  '&:hover>.gallery-image-container::before': {
+    boxShadow:
+      'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
+  },
+  '&:hover[data-selected="selected"]>.gallery-image-container::before': {
+    boxShadow:
+      'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+  },
+  '&:hover[data-selected="selectedForCompare"]>.gallery-image-container::before': {
+    boxShadow:
+      'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+  },
+};
+
 type IAIDndImageProps = FlexProps & {
   imageDTO: ImageDTO | undefined;
   onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
@@ -75,13 +108,11 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     ...rest
   } = props;
 
-  const [isHovered, setIsHovered] = useState(false);
   const handleMouseOver = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       if (onMouseOver) {
         onMouseOver(e);
       }
-      setIsHovered(true);
     },
     [onMouseOver]
   );
@@ -90,7 +121,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
       if (onMouseOut) {
         onMouseOut(e);
       }
-      setIsHovered(false);
     },
     [onMouseOut]
   );
@@ -141,10 +171,13 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           minH={minSize ? minSize : undefined}
           userSelect="none"
           cursor={isDragDisabled || !imageDTO ? 'default' : 'pointer'}
+          sx={withHoverOverlay ? sx : undefined}
+          data-selected={isSelectedForCompare ? 'selectedForCompare' : isSelected ? 'selected' : undefined}
           {...rest}
         >
           {imageDTO && (
             <Flex
+              className="gallery-image-container"
               w="full"
               h="full"
               position={fitContainer ? 'absolute' : 'relative'}
@@ -167,11 +200,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                 data-testid={dataTestId}
               />
               {withMetadataOverlay && <ImageMetadataOverlay imageDTO={imageDTO} />}
-              <SelectionOverlay
-                isSelected={isSelected}
-                isSelectedForCompare={isSelectedForCompare}
-                isHovered={withHoverOverlay ? isHovered : false}
-              />
             </Flex>
           )}
           {!imageDTO && !isUploadDisabled && (

invokeai/frontend/web/src/common/components/IconSwitch.tsx

@@ -1,104 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, Flex, IconButton, Tooltip, useToken } from '@invoke-ai/ui-library';
-import type { ReactElement, ReactNode } from 'react';
-import { memo, useCallback, useMemo } from 'react';
-
-type IconSwitchProps = {
-  isChecked: boolean;
-  onChange: (checked: boolean) => void;
-  iconChecked: ReactElement;
-  tooltipChecked?: ReactNode;
-  iconUnchecked: ReactElement;
-  tooltipUnchecked?: ReactNode;
-  ariaLabel: string;
-};
-
-const getSx = (padding: string | number): SystemStyleObject => ({
-  transition: 'left 0.1s ease-in-out, transform 0.1s ease-in-out',
-  '&[data-checked="true"]': {
-    left: `calc(100% - ${padding})`,
-    transform: 'translateX(-100%)',
-  },
-  '&[data-checked="false"]': {
-    left: padding,
-    transform: 'translateX(0)',
-  },
-});
-
-export const IconSwitch = memo(
-  ({
-    isChecked,
-    onChange,
-    iconChecked,
-    tooltipChecked,
-    iconUnchecked,
-    tooltipUnchecked,
-    ariaLabel,
-  }: IconSwitchProps) => {
-    const onUncheck = useCallback(() => {
-      onChange(false);
-    }, [onChange]);
-    const onCheck = useCallback(() => {
-      onChange(true);
-    }, [onChange]);
-
-    const gap = useToken('space', 1.5);
-    const sx = useMemo(() => getSx(gap), [gap]);
-
-    return (
-      <Flex
-        position="relative"
-        bg="base.800"
-        borderRadius="base"
-        alignItems="center"
-        justifyContent="center"
-        h="full"
-        p={gap}
-        gap={gap}
-      >
-        <Box
-          position="absolute"
-          borderRadius="base"
-          bg="invokeBlue.400"
-          w={12}
-          top={gap}
-          bottom={gap}
-          data-checked={isChecked}
-          sx={sx}
-        />
-        <Tooltip hasArrow label={tooltipUnchecked}>
-          <IconButton
-            size="sm"
-            fontSize={16}
-            icon={iconUnchecked}
-            onClick={onUncheck}
-            variant={!isChecked ? 'solid' : 'ghost'}
-            colorScheme={!isChecked ? 'invokeBlue' : 'base'}
-            aria-label={ariaLabel}
-            data-checked={!isChecked}
-            w={12}
-            alignSelf="stretch"
-            h="auto"
-          />
-        </Tooltip>
-        <Tooltip hasArrow label={tooltipChecked}>
-          <IconButton
-            size="sm"
-            fontSize={16}
-            icon={iconChecked}
-            onClick={onCheck}
-            variant={isChecked ? 'solid' : 'ghost'}
-            colorScheme={isChecked ? 'invokeBlue' : 'base'}
-            aria-label={ariaLabel}
-            data-checked={isChecked}
-            w={12}
-            alignSelf="stretch"
-            h="auto"
-          />
-        </Tooltip>
-      </Flex>
-    );
-  }
-);
-
-IconSwitch.displayName = 'IconSwitch';

invokeai/frontend/web/src/common/components/SelectionOverlay.tsx

@@ -1,46 +0,0 @@
-import { Box } from '@invoke-ai/ui-library';
-import { memo, useMemo } from 'react';
-
-type Props = {
-  isSelected: boolean;
-  isSelectedForCompare: boolean;
-  isHovered: boolean;
-};
-const SelectionOverlay = ({ isSelected, isSelectedForCompare, isHovered }: Props) => {
-  const shadow = useMemo(() => {
-    if (isSelectedForCompare && isHovered) {
-      return 'hoverSelectedForCompare';
-    }
-    if (isSelectedForCompare && !isHovered) {
-      return 'selectedForCompare';
-    }
-    if (isSelected && isHovered) {
-      return 'hoverSelected';
-    }
-    if (isSelected && !isHovered) {
-      return 'selected';
-    }
-    if (!isSelected && isHovered) {
-      return 'hoverUnselected';
-    }
-    return undefined;
-  }, [isHovered, isSelected, isSelectedForCompare]);
-  return (
-    <Box
-      className="selection-box"
-      position="absolute"
-      top={0}
-      insetInlineEnd={0}
-      bottom={0}
-      insetInlineStart={0}
-      borderRadius="base"
-      opacity={isSelected || isSelectedForCompare ? 1 : 0.7}
-      transitionProperty="common"
-      transitionDuration="0.1s"
-      pointerEvents="none"
-      shadow={shadow}
-    />
-  );
-};
-
-export default memo(SelectionOverlay);

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -114,4 +114,13 @@ export const useGlobalHotkeys = () => {
     },
     [dispatch, isModelManagerEnabled]
   );
+
+  useHotkeys(
+    isModelManagerEnabled ? '6' : '5',
+    () => {
+      dispatch(setActiveTab('gallery'));
+      setScopes([]);
+    },
+    [dispatch, isModelManagerEnabled]
+  );
 };

invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts

@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { $isConnected } from 'app/hooks/useSocketIO';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
@@ -17,6 +18,7 @@ import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import i18n from 'i18next';
 import { forEach, upperFirst } from 'lodash-es';
+import { atom } from 'nanostores';
 import { useMemo } from 'react';
 import { getConnectedEdges } from 'reactflow';
 
@@ -28,7 +30,7 @@ const LAYER_TYPE_TO_TKEY = {
   control_layer: 'controlLayers.globalControlAdapter',
 } as const;
 
-const createSelector = (templates: Templates, isConnected: boolean) =>
+const createSelector = (templates: Templates, isConnected: boolean, canvasIsBusy: boolean) =>
   createMemoizedSelector(
     [
       selectSystemSlice,
@@ -117,6 +119,10 @@ const createSelector = (templates: Templates, isConnected: boolean) =>
           reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
         }
       } else {
+        if (canvasIsBusy) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasBusy') });
+        }
+
         if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
           reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
         }
@@ -240,10 +246,17 @@ const createSelector = (templates: Templates, isConnected: boolean) =>
     }
   );
 
+const dummyAtom = atom(true);
+
 export const useIsReadyToEnqueue = () => {
   const templates = useStore($templates);
   const isConnected = useStore($isConnected);
-  const selector = useMemo(() => createSelector(templates, isConnected), [templates, isConnected]);
+  const canvasManager = useCanvasManagerSafe();
+  const canvasIsBusy = useStore(canvasManager?.$isBusy ?? dummyAtom);
+  const selector = useMemo(
+    () => createSelector(templates, isConnected, canvasIsBusy),
+    [templates, isConnected, canvasIsBusy]
+  );
   const value = useAppSelector(selector);
   return value;
 };

invokeai/frontend/web/src/common/util/roundDownToMultiple.ts

@@ -1,6 +1,9 @@
 export const roundDownToMultiple = (num: number, multiple: number): number => {
   return Math.floor(num / multiple) * multiple;
 };
+export const roundUpToMultiple = (num: number, multiple: number): number => {
+  return Math.ceil(num / multiple) * multiple;
+};
 
 export const roundToMultiple = (num: number, multiple: number): number => {
   return Math.round(num / multiple) * multiple;

invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx

@@ -1,34 +1,22 @@
 import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import {
-  controlLayerAdded,
-  inpaintMaskAdded,
-  ipaAdded,
-  rasterLayerAdded,
-  rgAdded,
-} from 'features/controlLayers/store/canvasSlice';
-import { memo, useCallback } from 'react';
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddIPAdapter,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
 export const CanvasAddEntityButtons = memo(() => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const addInpaintMask = useCallback(() => {
-    dispatch(inpaintMaskAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRegionalGuidance = useCallback(() => {
-    dispatch(rgAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRasterLayer = useCallback(() => {
-    dispatch(rasterLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addControlLayer = useCallback(() => {
-    dispatch(controlLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addIPAdapter = useCallback(() => {
-    dispatch(ipaAdded({ isSelected: true }));
-  }, [dispatch]);
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const addIPAdapter = useAddIPAdapter();
 
   return (
     <Flex flexDir="column" w="full" h="full" alignItems="center">

invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItems.tsx

@@ -0,0 +1,49 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import {
+  useIsSavingCanvas,
+  useSaveBboxAsControlLayer,
+  useSaveBboxAsGlobalIPAdapter,
+  useSaveBboxAsRasterLayer,
+  useSaveBboxAsRegionalGuidanceIPAdapter,
+  useSaveBboxToGallery,
+  useSaveCanvasToGallery,
+} from 'features/controlLayers/hooks/saveCanvasHooks';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFloppyDiskBold, PiShareFatBold } from 'react-icons/pi';
+
+export const CanvasContextMenuItems = memo(() => {
+  const { t } = useTranslation();
+  const isSaving = useIsSavingCanvas();
+  const saveCanvasToGallery = useSaveCanvasToGallery();
+  const saveBboxToGallery = useSaveBboxToGallery();
+  const saveBboxAsRegionalGuidanceIPAdapter = useSaveBboxAsRegionalGuidanceIPAdapter();
+  const saveBboxAsIPAdapter = useSaveBboxAsGlobalIPAdapter();
+  const saveBboxAsRasterLayer = useSaveBboxAsRasterLayer();
+  const saveBboxAsControlLayer = useSaveBboxAsControlLayer();
+
+  return (
+    <>
+      <MenuItem icon={<PiFloppyDiskBold />} isLoading={isSaving.isTrue} onClick={saveCanvasToGallery}>
+        {t('controlLayers.saveCanvasToGallery')}
+      </MenuItem>
+      <MenuItem icon={<PiFloppyDiskBold />} isLoading={isSaving.isTrue} onClick={saveBboxToGallery}>
+        {t('controlLayers.saveBboxToGallery')}
+      </MenuItem>
+      <MenuItem icon={<PiShareFatBold />} isLoading={isSaving.isTrue} onClick={saveBboxAsIPAdapter}>
+        {t('controlLayers.sendBboxToGlobalIPAdapter')}
+      </MenuItem>
+      <MenuItem icon={<PiShareFatBold />} isLoading={isSaving.isTrue} onClick={saveBboxAsRegionalGuidanceIPAdapter}>
+        {t('controlLayers.sendBboxToRegionalIPAdapter')}
+      </MenuItem>
+      <MenuItem icon={<PiShareFatBold />} isLoading={isSaving.isTrue} onClick={saveBboxAsControlLayer}>
+        {t('controlLayers.sendBboxToControlLayer')}
+      </MenuItem>
+      <MenuItem icon={<PiShareFatBold />} isLoading={isSaving.isTrue} onClick={saveBboxAsRasterLayer}>
+        {t('controlLayers.sendBboxToRasterLayer')}
+      </MenuItem>
+    </>
+  );
+});
+
+CanvasContextMenuItems.displayName = 'CanvasContextMenuItems';

invokeai/frontend/web/src/features/controlLayers/components/CanvasDropArea.tsx

@@ -1,7 +1,6 @@
 import { Flex } from '@invoke-ai/ui-library';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { AddControlLayerFromImageDropData, AddRasterLayerFromImageDropData } from 'features/dnd/types';
-import { useIsImageViewerOpen } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo } from 'react';
 
 const addRasterLayerFromImageDropData: AddRasterLayerFromImageDropData = {
@@ -15,12 +14,6 @@ const addControlLayerFromImageDropData: AddControlLayerFromImageDropData = {
 };
 
 export const CanvasDropArea = memo(() => {
-  const isImageViewerOpen = useIsImageViewerOpen();
-
-  if (isImageViewerOpen) {
-    return null;
-  }
-
   return (
     <>
       <Flex position="absolute" top={0} right={0} bottom="50%" left={0} gap={2} pointerEvents="none">

invokeai/frontend/web/src/features/controlLayers/components/CanvasEditor.stories.tsx

@@ -1,24 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import type { Meta, StoryObj } from '@storybook/react';
-import { CanvasEditor } from 'features/controlLayers/components/CanvasEditor';
-
-const meta: Meta<typeof CanvasEditor> = {
-  title: 'Feature/ControlLayers',
-  tags: ['autodocs'],
-  component: CanvasEditor,
-};
-
-export default meta;
-type Story = StoryObj<typeof CanvasEditor>;
-
-const Component = () => {
-  return (
-    <Flex w={1500} h={1500}>
-      <CanvasEditor />
-    </Flex>
-  );
-};
-
-export const Default: Story = {
-  render: Component,
-};

invokeai/frontend/web/src/features/controlLayers/components/CanvasEditor.tsx

@@ -1,51 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import { Flex } from '@invoke-ai/ui-library';
-import { useScopeOnFocus } from 'common/hooks/interactionScopes';
-import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
-import { Filter } from 'features/controlLayers/components/Filters/Filter';
-import { StageComponent } from 'features/controlLayers/components/StageComponent';
-import { StagingAreaIsStagingGate } from 'features/controlLayers/components/StagingArea/StagingAreaIsStagingGate';
-import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
-import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
-import { Transform } from 'features/controlLayers/components/Transform/Transform';
-import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useRef } from 'react';
-
-export const CanvasEditor = memo(() => {
-  const ref = useRef<HTMLDivElement>(null);
-  useScopeOnFocus('canvas', ref);
-
-  return (
-    <Flex
-      tabIndex={-1}
-      ref={ref}
-      borderRadius="base"
-      position="relative"
-      flexDirection="column"
-      height="full"
-      width="full"
-      gap={2}
-      alignItems="center"
-      justifyContent="center"
-    >
-      <CanvasToolbar />
-      <StageComponent />
-      <Flex position="absolute" bottom={4} gap={2} align="center" justify="center">
-        <CanvasManagerProviderGate>
-          <StagingAreaIsStagingGate>
-            <StagingAreaToolbar />
-          </StagingAreaIsStagingGate>
-        </CanvasManagerProviderGate>
-      </Flex>
-      <Flex position="absolute" bottom={4}>
-        <CanvasManagerProviderGate>
-          <Filter />
-          <Transform />
-        </CanvasManagerProviderGate>
-      </Flex>
-      <CanvasDropArea />
-    </Flex>
-  );
-});
-
-CanvasEditor.displayName = 'CanvasEditor';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListActionBar.tsx

@@ -1,20 +0,0 @@
-import { Flex, Spacer } from '@invoke-ai/ui-library';
-import { EntityListActionBarAddLayerButton } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuButton';
-import { EntityListActionBarDeleteButton } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarDeleteButton';
-import { EntityListActionBarSelectedEntityFill } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarSelectedEntityFill';
-import { SelectedEntityOpacity } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarSelectedEntityOpacity';
-import { memo } from 'react';
-
-export const EntityListActionBar = memo(() => {
-  return (
-    <Flex w="full" py={1} px={1} gap={2} alignItems="center">
-      <SelectedEntityOpacity />
-      <Spacer />
-      <EntityListActionBarSelectedEntityFill />
-      <EntityListActionBarAddLayerButton />
-      <EntityListActionBarDeleteButton />
-    </Flex>
-  );
-});
-
-EntityListActionBar.displayName = 'EntityListActionBar';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuButton.tsx

@@ -1,28 +0,0 @@
-import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
-import { CanvasEntityListMenuItems } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuItems';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
-
-export const EntityListActionBarAddLayerButton = memo(() => {
-  const { t } = useTranslation();
-
-  return (
-    <Menu>
-      <MenuButton
-        as={IconButton}
-        size="sm"
-        tooltip={t('controlLayers.addLayer')}
-        aria-label={t('controlLayers.addLayer')}
-        icon={<PiPlusBold />}
-        variant="ghost"
-        data-testid="control-layers-add-layer-menu-button"
-      />
-      <MenuList>
-        <CanvasEntityListMenuItems />
-      </MenuList>
-    </Menu>
-  );
-});
-
-EntityListActionBarAddLayerButton.displayName = 'EntityListActionBarAddLayerButton';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListActionBarAddLayerMenuItems.tsx

@@ -1,57 +0,0 @@
-import { MenuItem } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
-import {
-  controlLayerAdded,
-  inpaintMaskAdded,
-  ipaAdded,
-  rasterLayerAdded,
-  rgAdded,
-} from 'features/controlLayers/store/canvasSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
-
-export const CanvasEntityListMenuItems = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useDefaultIPAdapter();
-  const addInpaintMask = useCallback(() => {
-    dispatch(inpaintMaskAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRegionalGuidance = useCallback(() => {
-    dispatch(rgAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRasterLayer = useCallback(() => {
-    dispatch(rasterLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addControlLayer = useCallback(() => {
-    dispatch(controlLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addIPAdapter = useCallback(() => {
-    const overrides = { ipAdapter: defaultIPAdapter };
-    dispatch(ipaAdded({ isSelected: true, overrides }));
-  }, [defaultIPAdapter, dispatch]);
-
-  return (
-    <>
-      <MenuItem icon={<PiPlusBold />} onClick={addInpaintMask}>
-        {t('controlLayers.inpaintMask')}
-      </MenuItem>
-      <MenuItem icon={<PiPlusBold />} onClick={addRegionalGuidance}>
-        {t('controlLayers.regionalGuidance')}
-      </MenuItem>
-      <MenuItem icon={<PiPlusBold />} onClick={addRasterLayer}>
-        {t('controlLayers.rasterLayer')}
-      </MenuItem>
-      <MenuItem icon={<PiPlusBold />} onClick={addControlLayer}>
-        {t('controlLayers.controlLayer')}
-      </MenuItem>
-      <MenuItem icon={<PiPlusBold />} onClick={addIPAdapter}>
-        {t('controlLayers.globalIPAdapter')}
-      </MenuItem>
-    </>
-  );
-});
-
-CanvasEntityListMenuItems.displayName = 'CanvasEntityListMenu';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListActionBarDeleteButton.tsx

@@ -1,39 +0,0 @@
-import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { allEntitiesDeleted, entityDeleted } from 'features/controlLayers/store/canvasSlice';
-import { selectEntityCount, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleFill } from 'react-icons/pi';
-
-export const EntityListActionBarDeleteButton = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
-  const entityCount = useAppSelector(selectEntityCount);
-  const shift = useShiftModifier();
-  const onClick = useCallback(() => {
-    if (shift) {
-      dispatch(allEntitiesDeleted());
-      return;
-    }
-    if (!selectedEntityIdentifier) {
-      return;
-    }
-    dispatch(entityDeleted({ entityIdentifier: selectedEntityIdentifier }));
-  }, [dispatch, selectedEntityIdentifier, shift]);
-
-  return (
-    <IconButton
-      onClick={onClick}
-      isDisabled={shift ? entityCount === 0 : !selectedEntityIdentifier}
-      size="sm"
-      variant="ghost"
-      aria-label={shift ? t('controlLayers.deleteAll') : t('controlLayers.deleteSelected')}
-      tooltip={shift ? t('controlLayers.deleteAll') : t('controlLayers.deleteSelected')}
-      icon={<PiTrashSimpleFill />}
-    />
-  );
-});
-
-EntityListActionBarDeleteButton.displayName = 'EntityListActionBarDeleteButton';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx

@@ -0,0 +1,54 @@
+import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import {
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddIPAdapter,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPlusBold } from 'react-icons/pi';
+
+export const EntityListGlobalActionBarAddLayerMenu = memo(() => {
+  const { t } = useTranslation();
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const addIPAdapter = useAddIPAdapter();
+
+  return (
+    <Menu>
+      <MenuButton
+        as={IconButton}
+        size="sm"
+        variant="link"
+        alignSelf="stretch"
+        tooltip={t('controlLayers.addLayer')}
+        aria-label={t('controlLayers.addLayer')}
+        icon={<PiPlusBold />}
+        data-testid="control-layers-add-layer-menu-button"
+      />
+      <MenuList>
+        <MenuItem icon={<PiPlusBold />} onClick={addInpaintMask}>
+          {t('controlLayers.inpaintMask')}
+        </MenuItem>
+        <MenuItem icon={<PiPlusBold />} onClick={addRegionalGuidance}>
+          {t('controlLayers.regionalGuidance')}
+        </MenuItem>
+        <MenuItem icon={<PiPlusBold />} onClick={addRasterLayer}>
+          {t('controlLayers.rasterLayer')}
+        </MenuItem>
+        <MenuItem icon={<PiPlusBold />} onClick={addControlLayer}>
+          {t('controlLayers.controlLayer')}
+        </MenuItem>
+        <MenuItem icon={<PiPlusBold />} onClick={addIPAdapter}>
+          {t('controlLayers.globalIPAdapter')}
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+});
+
+EntityListGlobalActionBarAddLayerMenu.displayName = 'EntityListGlobalActionBarAddLayerMenu';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -0,0 +1,26 @@
+import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu';
+import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
+import { EntityListSelectedEntityActionBarFill } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill';
+import { EntityListSelectedEntityActionBarFilterButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton';
+import { EntityListSelectedEntityActionBarOpacity } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity';
+import { EntityListSelectedEntityActionBarTransformButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton';
+import { memo } from 'react';
+
+export const EntityListSelectedEntityActionBar = memo(() => {
+  return (
+    <Flex w="full" gap={2} alignItems="center" ps={1}>
+      <EntityListSelectedEntityActionBarOpacity />
+      <Spacer />
+      <EntityListSelectedEntityActionBarFill />
+      <Flex h="full">
+        <EntityListSelectedEntityActionBarFilterButton />
+        <EntityListSelectedEntityActionBarTransformButton />
+        <EntityListSelectedEntityActionBarDuplicateButton />
+        <EntityListGlobalActionBarAddLayerMenu />
+      </Flex>
+    </Flex>
+  );
+});
+
+EntityListSelectedEntityActionBar.displayName = 'EntityListSelectedEntityActionBar';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { entityDuplicated } from 'features/controlLayers/store/canvasSlice';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCopyFill } from 'react-icons/pi';
+
+export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const onClick = useCallback(() => {
+    if (!selectedEntityIdentifier) {
+      return;
+    }
+    dispatch(entityDuplicated({ entityIdentifier: selectedEntityIdentifier }));
+  }, [dispatch, selectedEntityIdentifier]);
+
+  return (
+    <IconButton
+      onClick={onClick}
+      isDisabled={!selectedEntityIdentifier}
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.duplicate')}
+      tooltip={t('controlLayers.duplicate')}
+      icon={<PiCopyFill />}
+    />
+  );
+});
+
+EntityListSelectedEntityActionBarDuplicateButton.displayName = 'EntityListSelectedEntityActionBarDuplicateButton';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx

@@ -9,7 +9,7 @@ import { type FillStyle, isMaskEntityIdentifier, type RgbColor } from 'features/
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const EntityListActionBarSelectedEntityFill = memo(() => {
+export const EntityListSelectedEntityActionBarFill = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
@@ -67,4 +67,4 @@ export const EntityListActionBarSelectedEntityFill = memo(() => {
   );
 });
 
-EntityListActionBarSelectedEntityFill.displayName = 'EntityListActionBarSelectedEntityFill';
+EntityListSelectedEntityActionBarFill.displayName = 'EntityListSelectedEntityActionBarFill';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx

@@ -0,0 +1,37 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiShootingStarBold } from 'react-icons/pi';
+
+export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
+  const { t } = useTranslation();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const filter = useEntityFilter(selectedEntityIdentifier);
+
+  if (!selectedEntityIdentifier) {
+    return null;
+  }
+
+  if (!isFilterableEntityIdentifier(selectedEntityIdentifier)) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={filter.start}
+      isDisabled={filter.isDisabled}
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.filter.filter')}
+      tooltip={t('controlLayers.filter.filter')}
+      icon={<PiShootingStarBold />}
+    />
+  );
+});
+
+EntityListSelectedEntityActionBarFilterButton.displayName = 'EntityListSelectedEntityActionBarFilterButton';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx

@@ -77,7 +77,7 @@ const selectOpacity = createSelector(selectCanvasSlice, (canvas) => {
   return selectedEntity.opacity;
 });
 
-export const SelectedEntityOpacity = memo(() => {
+export const EntityListSelectedEntityActionBarOpacity = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
@@ -193,4 +193,4 @@ export const SelectedEntityOpacity = memo(() => {
   );
 });
 
-SelectedEntityOpacity.displayName = 'SelectedEntityOpacity';
+EntityListSelectedEntityActionBarOpacity.displayName = 'EntityListSelectedEntityActionBarOpacity';

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx

@@ -0,0 +1,37 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useEntityTransform } from 'features/controlLayers/hooks/useEntityTransform';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { isTransformableEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiFrameCornersBold } from 'react-icons/pi';
+
+export const EntityListSelectedEntityActionBarTransformButton = memo(() => {
+  const { t } = useTranslation();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const transform = useEntityTransform(selectedEntityIdentifier);
+
+  if (!selectedEntityIdentifier) {
+    return null;
+  }
+
+  if (!isTransformableEntityIdentifier(selectedEntityIdentifier)) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={transform.start}
+      isDisabled={transform.isDisabled}
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.transform.transform')}
+      tooltip={t('controlLayers.transform.transform')}
+      icon={<PiFrameCornersBold />}
+    />
+  );
+});
+
+EntityListSelectedEntityActionBarTransformButton.displayName = 'EntityListSelectedEntityActionBarTransformButton';

invokeai/frontend/web/src/features/controlLayers/components/CanvasPanelContent.tsx

@@ -2,7 +2,7 @@ import { Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
-import { EntityListActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBar';
+import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo } from 'react';
@@ -13,7 +13,7 @@ export const CanvasPanelContent = memo(() => {
   return (
     <CanvasManagerProviderGate>
       <Flex flexDir="column" gap={2} w="full" h="full">
-        <EntityListActionBar />
+        <EntityListSelectedEntityActionBar />
         <Divider py={0} />
         {!hasEntities && <CanvasAddEntityButtons />}
         {hasEntities && <CanvasEntityList />}

invokeai/frontend/web/src/features/controlLayers/components/CanvasResizer.tsx

@@ -1,145 +0,0 @@
-import { Flex, Grid, GridItem, IconButton } from '@invoke-ai/ui-library';
-import { memo, useCallback, useState } from 'react';
-import {
-  PiArrowDownBold,
-  PiArrowDownLeftBold,
-  PiArrowDownRightBold,
-  PiArrowLeftBold,
-  PiArrowRightBold,
-  PiArrowUpBold,
-  PiArrowUpLeftBold,
-  PiArrowUpRightBold,
-  PiSquareBold,
-} from 'react-icons/pi';
-
-type ResizeDirection =
-  | 'up-left'
-  | 'up'
-  | 'up-right'
-  | 'left'
-  | 'center-out'
-  | 'right'
-  | 'down-left'
-  | 'down'
-  | 'down-right';
-
-export const CanvasResizer = memo(() => {
-  const [resizeDirection, setResizeDirection] = useState<ResizeDirection>('center-out');
-
-  const setDirUpLeft = useCallback(() => {
-    setResizeDirection('up-left');
-  }, []);
-
-  const setDirUp = useCallback(() => {
-    setResizeDirection('up');
-  }, []);
-
-  const setDirUpRight = useCallback(() => {
-    setResizeDirection('up-right');
-  }, []);
-
-  const setDirLeft = useCallback(() => {
-    setResizeDirection('left');
-  }, []);
-
-  const setDirCenterOut = useCallback(() => {
-    setResizeDirection('center-out');
-  }, []);
-
-  const setDirRight = useCallback(() => {
-    setResizeDirection('right');
-  }, []);
-
-  const setDirDownLeft = useCallback(() => {
-    setResizeDirection('down-left');
-  }, []);
-
-  const setDirDown = useCallback(() => {
-    setResizeDirection('down');
-  }, []);
-
-  const setDirDownRight = useCallback(() => {
-    setResizeDirection('down-right');
-  }, []);
-
-  return (
-    <Flex p={2}>
-      <Grid gridTemplateRows="1fr 1fr 1fr" gridTemplateColumns="1fr 1fr 1fr" gap={2}>
-        <GridItem>
-          <IconButton
-            onClick={setDirUpLeft}
-            aria-label="up-left"
-            icon={<PiArrowUpLeftBold />}
-            variant={resizeDirection === 'up-left' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirUp}
-            aria-label="up"
-            icon={<PiArrowUpBold />}
-            variant={resizeDirection === 'up' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirUpRight}
-            aria-label="up-right"
-            icon={<PiArrowUpRightBold />}
-            variant={resizeDirection === 'up-right' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirLeft}
-            aria-label="left"
-            icon={<PiArrowLeftBold />}
-            variant={resizeDirection === 'left' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirCenterOut}
-            aria-label="center-out"
-            icon={<PiSquareBold />}
-            variant={resizeDirection === 'center-out' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirRight}
-            aria-label="right"
-            icon={<PiArrowRightBold />}
-            variant={resizeDirection === 'right' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirDownLeft}
-            aria-label="down-left"
-            icon={<PiArrowDownLeftBold />}
-            variant={resizeDirection === 'down-left' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirDown}
-            aria-label="down"
-            icon={<PiArrowDownBold />}
-            variant={resizeDirection === 'down' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-        <GridItem>
-          <IconButton
-            onClick={setDirDownRight}
-            aria-label="down-right"
-            icon={<PiArrowDownRightBold />}
-            variant={resizeDirection === 'down-right' ? 'solid' : 'ghost'}
-          />
-        </GridItem>
-      </Grid>
-    </Flex>
-  );
-});
-
-CanvasResizer.displayName = 'CanvasResizer';

invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx

@@ -0,0 +1,95 @@
+import { useDndContext } from '@dnd-kit/core';
+import { Box, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useScopeOnFocus } from 'common/hooks/interactionScopes';
+import { CanvasPanelContent } from 'features/controlLayers/components/CanvasPanelContent';
+import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
+import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectEntityCount } from 'features/controlLayers/store/selectors';
+import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasRightPanelContent = memo(() => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [tab, setTab] = useState(0);
+  useScopeOnFocus('gallery', ref);
+
+  return (
+    <Tabs index={tab} onChange={setTab} w="full" h="full" display="flex" flexDir="column">
+      <TabList alignItems="center">
+        <PanelTabs setTab={setTab} />
+        <Spacer />
+        <CanvasSendToToggle />
+      </TabList>
+      <TabPanels w="full" h="full">
+        <TabPanel w="full" h="full" p={0} pt={3}>
+          <CanvasPanelContent />
+        </TabPanel>
+        <TabPanel w="full" h="full" p={0} pt={3}>
+          <GalleryPanelContent />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+});
+
+CanvasRightPanelContent.displayName = 'CanvasRightPanelContent';
+
+const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
+  const { t } = useTranslation();
+  const entityCount = useAppSelector(selectEntityCount);
+  const sendToCanvas = useAppSelector(selectSendToCanvas);
+  const tabTimeout = useRef<number | null>(null);
+  const dndCtx = useDndContext();
+
+  const onOnMouseOverLayersTab = useCallback(() => {
+    tabTimeout.current = window.setTimeout(() => {
+      if (dndCtx.active) {
+        setTab(0);
+      }
+    }, 300);
+  }, [dndCtx.active, setTab]);
+
+  const onOnMouseOverGalleryTab = useCallback(() => {
+    tabTimeout.current = window.setTimeout(() => {
+      if (dndCtx.active) {
+        setTab(1);
+      }
+    }, 300);
+  }, [dndCtx.active, setTab]);
+
+  const onMouseOut = useCallback(() => {
+    if (tabTimeout.current) {
+      clearTimeout(tabTimeout.current);
+    }
+  }, []);
+
+  const layersTabLabel = useMemo(() => {
+    if (entityCount === 0) {
+      return t('controlLayers.layer_other');
+    }
+    return `${t('controlLayers.layer_other')} (${entityCount})`;
+  }, [entityCount, t]);
+
+  return (
+    <>
+      <Tab position="relative" onMouseOver={onOnMouseOverLayersTab} onMouseOut={onMouseOut} w={32}>
+        <Box as="span" w="full">
+          {layersTabLabel}
+        </Box>
+        {sendToCanvas && (
+          <Box position="absolute" top={2} right={2} h={2} w={2} bg="invokeYellow.300" borderRadius="full" />
+        )}
+      </Tab>
+      <Tab position="relative" onMouseOver={onOnMouseOverGalleryTab} onMouseOut={onMouseOut}>
+        {t('gallery.gallery')}
+        {!sendToCanvas && (
+          <Box position="absolute" top={2} right={2} h={2} w={2} bg="invokeYellow.300" borderRadius="full" />
+        )}
+      </Tab>
+    </>
+  );
+});
+
+PanelTabs.displayName = 'PanelTabs';

invokeai/frontend/web/src/features/controlLayers/components/CanvasSendToToggle.tsx

@@ -1,64 +1,76 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { IconSwitch } from 'common/components/IconSwitch';
 import {
-  selectCanvasSettingsSlice,
-  settingsSendToCanvasChanged,
-} from 'features/controlLayers/store/canvasSettingsSlice';
+  Button,
+  Flex,
+  Icon,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectSendToCanvas, settingsSendToCanvasChanged } from 'features/controlLayers/store/canvasSettingsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiImageBold, PiPaintBrushBold } from 'react-icons/pi';
-
-const TooltipSendToGallery = memo(() => {
-  const { t } = useTranslation();
-
-  return (
-    <Flex flexDir="column">
-      <Text fontWeight="semibold">{t('controlLayers.sendToGallery')}</Text>
-      <Text fontWeight="normal">{t('controlLayers.sendToGalleryDesc')}</Text>
-    </Flex>
-  );
-});
-
-TooltipSendToGallery.displayName = 'TooltipSendToGallery';
-
-const TooltipSendToCanvas = memo(() => {
-  const { t } = useTranslation();
-
-  return (
-    <Flex flexDir="column">
-      <Text fontWeight="semibold">{t('controlLayers.sendToCanvas')}</Text>
-      <Text fontWeight="normal">{t('controlLayers.sendToCanvasDesc')}</Text>
-    </Flex>
-  );
-});
-
-TooltipSendToCanvas.displayName = 'TooltipSendToCanvas';
-
-const selectSendToCanvas = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.sendToCanvas);
+import { PiCaretDownBold, PiCheckBold } from 'react-icons/pi';
 
 export const CanvasSendToToggle = memo(() => {
-  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const sendToCanvas = useAppSelector(selectSendToCanvas);
+  const dispatch = useAppDispatch();
 
-  const onChange = useCallback(
-    (isChecked: boolean) => {
-      dispatch(settingsSendToCanvasChanged(isChecked));
-    },
-    [dispatch]
-  );
+  const enableSendToCanvas = useCallback(() => {
+    dispatch(settingsSendToCanvasChanged(true));
+  }, [dispatch]);
+
+  const disableSendToCanvas = useCallback(() => {
+    dispatch(settingsSendToCanvasChanged(false));
+  }, [dispatch]);
 
   return (
-    <IconSwitch
-      isChecked={sendToCanvas}
-      onChange={onChange}
-      iconUnchecked={<PiImageBold />}
-      tooltipUnchecked={<TooltipSendToGallery />}
-      iconChecked={<PiPaintBrushBold />}
-      tooltipChecked={<TooltipSendToCanvas />}
-      ariaLabel="Toggle canvas mode"
-    />
+    <Popover isLazy>
+      <PopoverTrigger>
+        <Button
+          size="sm"
+          variant="link"
+          data-testid="toggle-viewer-menu-button"
+          pointerEvents="auto"
+          rightIcon={<PiCaretDownBold />}
+        >
+          {sendToCanvas ? t('controlLayers.sendingToCanvas') : t('controlLayers.sendingToGallery')}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent p={2} pointerEvents="auto">
+        <PopoverArrow />
+        <PopoverBody>
+          <Flex flexDir="column">
+            <Button onClick={disableSendToCanvas} variant="ghost" h="auto" w="auto" p={2}>
+              <Flex gap={2} w="full">
+                <Icon as={PiCheckBold} visibility={!sendToCanvas ? 'visible' : 'hidden'} />
+                <Flex flexDir="column" gap={2} alignItems="flex-start">
+                  <Text fontWeight="semibold">{t('controlLayers.sendToGallery')}</Text>
+                  <Text fontWeight="normal" variant="subtext">
+                    {t('controlLayers.sendToGalleryDesc')}
+                  </Text>
+                </Flex>
+              </Flex>
+            </Button>
+            <Button onClick={enableSendToCanvas} variant="ghost" h="auto" w="auto" p={2}>
+              <Flex gap={2} w="full">
+                <Icon as={PiCheckBold} visibility={sendToCanvas ? 'visible' : 'hidden'} />
+                <Flex flexDir="column" gap={2} alignItems="flex-start">
+                  <Text fontWeight="semibold">{t('controlLayers.sendToCanvas')}</Text>
+                  <Text fontWeight="normal" variant="subtext">
+                    {t('controlLayers.sendToCanvasDesc')}
+                  </Text>
+                </Flex>
+              </Flex>
+            </Button>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
   );
 });
 

invokeai/frontend/web/src/features/controlLayers/components/CanvasTabContent.tsx

@@ -0,0 +1,104 @@
+import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useScopeOnFocus } from 'common/hooks/interactionScopes';
+import { CanvasContextMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItems';
+import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
+import { Filter } from 'features/controlLayers/components/Filters/Filter';
+import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
+import { CanvasSelectedEntityStatusAlert } from 'features/controlLayers/components/HUD/CanvasSelectedEntityStatusAlert';
+import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
+import { StagingAreaIsStagingGate } from 'features/controlLayers/components/StagingArea/StagingAreaIsStagingGate';
+import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
+import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
+import { Transform } from 'features/controlLayers/components/Transform/Transform';
+import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { TRANSPARENCY_CHECKERBOARD_PATTERN_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
+import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback, useRef } from 'react';
+
+export const CanvasTabContent = memo(() => {
+  const ref = useRef<HTMLDivElement>(null);
+  const dynamicGrid = useAppSelector(selectDynamicGrid);
+  const showHUD = useAppSelector(selectShowHUD);
+
+  const renderMenu = useCallback(() => {
+    return (
+      <CanvasManagerProviderGate>
+        <MenuList>
+          <CanvasContextMenuItems />
+        </MenuList>
+      </CanvasManagerProviderGate>
+    );
+  }, []);
+
+  useScopeOnFocus('canvas', ref);
+
+  return (
+    <Flex
+      tabIndex={-1}
+      ref={ref}
+      borderRadius="base"
+      position="relative"
+      flexDirection="column"
+      height="full"
+      width="full"
+      gap={2}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <CanvasToolbar />
+      <ContextMenu<HTMLDivElement> renderMenu={renderMenu}>
+        {(ref) => (
+          <Flex
+            ref={ref}
+            position="relative"
+            w="full"
+            h="full"
+            bg={dynamicGrid ? 'base.850' : 'base.900'}
+            borderRadius="base"
+          >
+            {!dynamicGrid && (
+              <Flex
+                position="absolute"
+                borderRadius="base"
+                bgImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DATAURL}
+                top={0}
+                right={0}
+                bottom={0}
+                left={0}
+                opacity={0.1}
+              />
+            )}
+            <InvokeCanvasComponent />
+            <CanvasManagerProviderGate>
+              {showHUD && (
+                <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
+                  <CanvasHUD />
+                </Flex>
+              )}
+              <Flex position="absolute" top={1} insetInlineEnd={1} pointerEvents="none">
+                <CanvasSelectedEntityStatusAlert />
+              </Flex>
+            </CanvasManagerProviderGate>
+          </Flex>
+        )}
+      </ContextMenu>
+      <Flex position="absolute" bottom={4} gap={2} align="center" justify="center">
+        <CanvasManagerProviderGate>
+          <StagingAreaIsStagingGate>
+            <StagingAreaToolbar />
+          </StagingAreaIsStagingGate>
+        </CanvasManagerProviderGate>
+      </Flex>
+      <Flex position="absolute" bottom={4}>
+        <CanvasManagerProviderGate>
+          <Filter />
+          <Transform />
+        </CanvasManagerProviderGate>
+      </Flex>
+      <CanvasDropArea />
+    </Flex>
+  );
+});
+
+CanvasTabContent.displayName = 'CanvasTabContent';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx

@@ -1,21 +1,35 @@
 import { Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { createMemoizedAppSelector } from 'app/store/createMemoizedSelector';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
 import { Weight } from 'features/controlLayers/components/common/Weight';
 import { ControlLayerControlAdapterControlMode } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterControlMode';
 import { ControlLayerControlAdapterModel } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useControlLayerControlAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
 import {
   controlLayerBeginEndStepPctChanged,
   controlLayerControlModeChanged,
   controlLayerModelChanged,
   controlLayerWeightChanged,
 } from 'features/controlLayers/store/canvasSlice';
-import type { ControlModeV2 } from 'features/controlLayers/store/types';
-import { memo, useCallback } from 'react';
+import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
+import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
+import { memo, useCallback, useMemo } from 'react';
 import type { ControlNetModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 
+const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) => {
+  const selectControlAdapter = useMemo(
+    () =>
+      createMemoizedAppSelector(selectCanvasSlice, (canvas) => {
+        const layer = selectEntityOrThrow(canvas, entityIdentifier);
+        return layer.controlAdapter;
+      }),
+    [entityIdentifier]
+  );
+  const controlAdapter = useAppSelector(selectControlAdapter);
+  return controlAdapter;
+};
+
 export const ControlLayerControlAdapter = memo(() => {
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext('control_layer');

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx

@@ -1,10 +1,7 @@
 import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
-import { IMAGE_FILTERS, isFilterType } from 'features/controlLayers/store/types';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useControlNetAndT2IAdapterModels } from 'services/api/hooks/modelsByType';
@@ -17,8 +14,6 @@ type Props = {
 
 export const ControlLayerControlAdapterModel = memo(({ modelKey, onChange: onChangeModel }: Props) => {
   const { t } = useTranslation();
-  const entityIdentifier = useEntityIdentifierContext();
-  const canvasManager = useCanvasManager();
   const currentBaseModel = useAppSelector(selectBase);
   const [modelConfigs, { isLoading }] = useControlNetAndT2IAdapterModels();
   const selectedModel = useMemo(() => modelConfigs.find((m) => m.key === modelKey), [modelConfigs, modelKey]);
@@ -29,29 +24,8 @@ export const ControlLayerControlAdapterModel = memo(({ modelKey, onChange: onCha
         return;
       }
       onChangeModel(modelConfig);
-
-      // When we set the model for the first time, we'll set the default filter settings and open the filter popup
-
-      if (modelKey) {
-        // If there is already a model key, this is not the first time we're setting the model
-        return;
-      }
-
-      // Open the filter popup by setting this entity as the filtering entity
-      if (!canvasManager.filter.$adapter.get()) {
-        // Update the filter, preferring the model's default
-        if (isFilterType(modelConfig.default_settings?.preprocessor)) {
-          canvasManager.filter.$config.set(
-            IMAGE_FILTERS[modelConfig.default_settings.preprocessor].buildDefaults(modelConfig.base)
-          );
-        } else {
-          canvasManager.filter.$config.set(IMAGE_FILTERS.canny_image_processor.buildDefaults(modelConfig.base));
-        }
-        canvasManager.filter.startFilter(entityIdentifier);
-        canvasManager.filter.previewFilter();
-      }
     },
-    [canvasManager.filter, entityIdentifier, modelKey, onChangeModel]
+    [onChangeModel]
   );
 
   const getIsDisabled = useCallback(

invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx

@@ -1,37 +1,49 @@
-import { Button, ButtonGroup, Flex, Heading } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { FilterSettings } from 'features/controlLayers/components/Filters/FilterSettings';
 import { FilterTypeSelect } from 'features/controlLayers/components/Filters/FilterTypeSelect';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer';
+import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
+import {
+  selectAutoProcessFilter,
+  settingsAutoProcessFilterToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
 import { type FilterConfig, IMAGE_FILTERS } from 'features/controlLayers/store/types';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCheckBold, PiShootingStarBold, PiXBold } from 'react-icons/pi';
+import { PiArrowsCounterClockwiseBold, PiCheckBold, PiShootingStarBold, PiXBold } from 'react-icons/pi';
 
-export const Filter = memo(() => {
+const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
   const { t } = useTranslation();
-  const canvasManager = useCanvasManager();
-  const config = useStore(canvasManager.filter.$config);
-  const isFiltering = useStore(canvasManager.filter.$isFiltering);
-  const isProcessing = useStore(canvasManager.filter.$isProcessing);
+  const dispatch = useAppDispatch();
+  const config = useStore(adapter.filterer.$filterConfig);
+  const isProcessing = useStore(adapter.filterer.$isProcessing);
+  const hasProcessed = useStore(adapter.filterer.$hasProcessed);
+  const autoProcessFilter = useAppSelector(selectAutoProcessFilter);
 
   const onChangeFilterConfig = useCallback(
     (filterConfig: FilterConfig) => {
-      canvasManager.filter.$config.set(filterConfig);
+      adapter.filterer.$filterConfig.set(filterConfig);
     },
-    [canvasManager.filter.$config]
+    [adapter.filterer.$filterConfig]
   );
 
   const onChangeFilterType = useCallback(
     (filterType: FilterConfig['type']) => {
-      canvasManager.filter.$config.set(IMAGE_FILTERS[filterType].buildDefaults());
+      adapter.filterer.$filterConfig.set(IMAGE_FILTERS[filterType].buildDefaults());
     },
-    [canvasManager.filter.$config]
+    [adapter.filterer.$filterConfig]
   );
 
-  if (!isFiltering) {
-    return null;
-  }
+  const onChangeAutoProcessFilter = useCallback(() => {
+    dispatch(settingsAutoProcessFilterToggled());
+  }, [dispatch]);
+
+  const isValid = useMemo(() => {
+    return IMAGE_FILTERS[config.type].validateConfig?.(config as never) ?? true;
+  }, [config]);
 
   return (
     <Flex
@@ -46,36 +58,56 @@ export const Filter = memo(() => {
       transitionProperty="height"
       transitionDuration="normal"
     >
-      <Heading size="md" color="base.300" userSelect="none">
-        {t('controlLayers.filter.filter')}
-      </Heading>
+      <Flex w="full">
+        <Heading size="md" color="base.300" userSelect="none">
+          {t('controlLayers.filter.filter')}
+        </Heading>
+        <Spacer />
+        <FormControl w="min-content">
+          <FormLabel m={0}>{t('controlLayers.filter.autoProcess')}</FormLabel>
+          <Switch size="sm" isChecked={autoProcessFilter} onChange={onChangeAutoProcessFilter} />
+        </FormControl>
+      </Flex>
       <FilterTypeSelect filterType={config.type} onChange={onChangeFilterType} />
       <FilterSettings filterConfig={config} onChange={onChangeFilterConfig} />
-      <ButtonGroup isAttached={false} size="sm" alignSelf="self-end">
+      <ButtonGroup isAttached={false} size="sm" w="full">
         <Button
           variant="ghost"
           leftIcon={<PiShootingStarBold />}
-          onClick={canvasManager.filter.previewFilter}
+          onClick={adapter.filterer.process}
           isLoading={isProcessing}
-          loadingText={t('controlLayers.filter.preview')}
+          loadingText={t('controlLayers.filter.process')}
+          isDisabled={!isValid}
         >
-          {t('controlLayers.filter.preview')}
+          {t('controlLayers.filter.process')}
+        </Button>
+        <Spacer />
+        <Button
+          leftIcon={<PiArrowsCounterClockwiseBold />}
+          onClick={adapter.filterer.reset}
+          isLoading={isProcessing}
+          loadingText={t('controlLayers.filter.reset')}
+          variant="ghost"
+        >
+          {t('controlLayers.filter.reset')}
         </Button>
         <Button
           variant="ghost"
           leftIcon={<PiCheckBold />}
-          onClick={canvasManager.filter.applyFilter}
+          onClick={adapter.filterer.apply}
           isLoading={isProcessing}
           loadingText={t('controlLayers.filter.apply')}
+          isDisabled={!isValid || !hasProcessed}
         >
           {t('controlLayers.filter.apply')}
         </Button>
         <Button
           variant="ghost"
           leftIcon={<PiXBold />}
-          onClick={canvasManager.filter.cancelFilter}
+          onClick={adapter.filterer.cancel}
           isLoading={isProcessing}
           loadingText={t('controlLayers.filter.cancel')}
+          isDisabled={!isValid}
         >
           {t('controlLayers.filter.cancel')}
         </Button>
@@ -84,4 +116,16 @@ export const Filter = memo(() => {
   );
 });
 
+FilterBox.displayName = 'FilterBox';
+
+export const Filter = () => {
+  const canvasManager = useCanvasManager();
+  const adapter = useStore(canvasManager.stateApi.$filteringAdapter);
+  if (!adapter) {
+    return null;
+  }
+
+  return <FilterBox adapter={adapter} />;
+};
+
 Filter.displayName = 'Filter';

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSettings.tsx

@@ -10,6 +10,7 @@ import { FilterMediapipeFace } from 'features/controlLayers/components/Filters/F
 import { FilterMidasDepth } from 'features/controlLayers/components/Filters/FilterMidasDepth';
 import { FilterMlsdImage } from 'features/controlLayers/components/Filters/FilterMlsdImage';
 import { FilterPidi } from 'features/controlLayers/components/Filters/FilterPidi';
+import { FilterSpandrel } from 'features/controlLayers/components/Filters/FilterSpandrel';
 import type { FilterConfig } from 'features/controlLayers/store/types';
 import { IMAGE_FILTERS } from 'features/controlLayers/store/types';
 import { memo } from 'react';
@@ -64,6 +65,10 @@ export const FilterSettings = memo(({ filterConfig, onChange }: Props) => {
     return <FilterPidi config={filterConfig} onChange={onChange} />;
   }
 
+  if (filterConfig.type === 'spandrel_filter') {
+    return <FilterSpandrel config={filterConfig} onChange={onChange} />;
+  }
+
   return (
     <IAINoContentFallback
       py={4}

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSpandrel.tsx

@@ -0,0 +1,125 @@
+import {
+  Box,
+  Combobox,
+  CompositeNumberInput,
+  CompositeSlider,
+  Flex,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Switch,
+  Tooltip,
+} from '@invoke-ai/ui-library';
+import { useModelCombobox } from 'common/hooks/useModelCombobox';
+import type { SpandrelFilterConfig } from 'features/controlLayers/store/types';
+import { IMAGE_FILTERS } from 'features/controlLayers/store/types';
+import type { ChangeEvent } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
+import type { SpandrelImageToImageModelConfig } from 'services/api/types';
+
+import type { FilterComponentProps } from './types';
+
+type Props = FilterComponentProps<SpandrelFilterConfig>;
+const DEFAULTS = IMAGE_FILTERS['spandrel_filter'].buildDefaults();
+
+export const FilterSpandrel = ({ onChange, config }: Props) => {
+  const { t } = useTranslation();
+
+  const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
+
+  const tooltipLabel = useMemo(() => {
+    if (!modelConfigs.length || !config.model) {
+      return;
+    }
+    return modelConfigs.find((m) => m.key === config.model?.key)?.description;
+  }, [modelConfigs, config.model]);
+
+  const _onChange = useCallback(
+    (v: SpandrelImageToImageModelConfig | null) => {
+      onChange({ ...config, model: v });
+    },
+    [config, onChange]
+  );
+
+  const {
+    options,
+    value,
+    onChange: onChangeModel,
+    placeholder,
+    noOptionsMessage,
+  } = useModelCombobox({
+    modelConfigs,
+    onChange: _onChange,
+    selectedModel: config.model,
+    isLoading,
+  });
+
+  const onScaleChanged = useCallback(
+    (v: number) => {
+      onChange({ ...config, scale: v });
+    },
+    [onChange, config]
+  );
+  const onAutoscaleChanged = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange({ ...config, autoScale: e.target.checked });
+    },
+    [onChange, config]
+  );
+
+  useEffect(() => {
+    if (!config.model) {
+      onChangeModel(options[0] ?? null);
+    }
+  }, [config.model, onChangeModel, options]);
+
+  return (
+    <>
+      <FormControl w="full" orientation="vertical">
+        <Flex w="full" alignItems="center">
+          <FormLabel m={0} flexGrow={1}>
+            {t('controlLayers.filter.spandrel.paramAutoScale')}
+          </FormLabel>
+          <Switch size="sm" isChecked={config.autoScale} onChange={onAutoscaleChanged} />
+        </Flex>
+        <FormHelperText>{t('controlLayers.filter.spandrel.paramAutoScaleDesc')}</FormHelperText>
+      </FormControl>
+      <FormControl isDisabled={!config.autoScale}>
+        <FormLabel m={0}>{t('controlLayers.filter.spandrel.paramScale')}</FormLabel>
+        <CompositeSlider
+          value={config.scale}
+          onChange={onScaleChanged}
+          defaultValue={DEFAULTS.scale}
+          min={1}
+          max={16}
+        />
+        <CompositeNumberInput
+          value={config.scale}
+          onChange={onScaleChanged}
+          defaultValue={DEFAULTS.scale}
+          min={1}
+          max={16}
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel m={0}>{t('controlLayers.filter.spandrel.paramModel')}</FormLabel>
+        <Tooltip label={tooltipLabel}>
+          <Box w="full">
+            <Combobox
+              value={value}
+              placeholder={placeholder}
+              options={options}
+              onChange={onChangeModel}
+              noOptionsMessage={noOptionsMessage}
+              isDisabled={options.length === 0}
+            />
+          </Box>
+        </Tooltip>
+      </FormControl>
+    </>
+  );
+};
+
+FilterSpandrel.displayName = 'FilterSpandrel';

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx

@@ -0,0 +1,24 @@
+import { Grid } from '@invoke-ai/ui-library';
+import { CanvasHUDItemBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemBbox';
+import { CanvasHUDItemScaledBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemScaledBbox';
+import { memo } from 'react';
+
+export const CanvasHUD = memo(() => {
+  return (
+    <Grid
+      bg="base.900"
+      borderBottomEndRadius="base"
+      p={2}
+      gap={1}
+      borderRadius="base"
+      templateColumns="1fr 1fr"
+      opacity={0.6}
+      minW={64}
+    >
+      <CanvasHUDItemBbox />
+      <CanvasHUDItemScaledBbox />
+    </Grid>
+  );
+});
+
+CanvasHUD.displayName = 'CanvasHUD';

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItem.tsx

@@ -0,0 +1,26 @@
+import { GridItem, Text } from '@invoke-ai/ui-library';
+import type { Property } from 'csstype';
+import { memo } from 'react';
+
+type Props = {
+  label: string;
+  value: string | number;
+  color?: Property.Color;
+};
+
+export const CanvasHUDItem = memo(({ label, value, color }: Props) => {
+  return (
+    <>
+      <GridItem>
+        <Text textAlign="end">{label}: </Text>
+      </GridItem>
+      <GridItem fontWeight="semibold">
+        <Text textAlign="end" color={color}>
+          {value}
+        </Text>
+      </GridItem>
+    </>
+  );
+});
+
+CanvasHUDItem.displayName = 'CanvasHUDItem';

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemBbox.tsx

@@ -0,0 +1,17 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasHUDItem } from 'features/controlLayers/components/HUD/CanvasHUDItem';
+import { selectBbox } from 'features/controlLayers/store/selectors';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectBboxRect = createSelector(selectBbox, (bbox) => bbox.rect);
+
+export const CanvasHUDItemBbox = memo(() => {
+  const { t } = useTranslation();
+  const rect = useAppSelector(selectBboxRect);
+
+  return <CanvasHUDItem label={t('controlLayers.HUD.bbox')} value={`${rect.width}×${rect.height} px`} />;
+});
+
+CanvasHUDItemBbox.displayName = 'CanvasHUDItemBbox';

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx

@@ -0,0 +1,19 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasHUDItem } from 'features/controlLayers/components/HUD/CanvasHUDItem';
+import { selectBbox } from 'features/controlLayers/store/selectors';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectScaledSize = createSelector(selectBbox, (bbox) => bbox.scaledSize);
+
+export const CanvasHUDItemScaledBbox = memo(() => {
+  const { t } = useTranslation();
+  const scaledSize = useAppSelector(selectScaledSize);
+
+  return (
+    <CanvasHUDItem label={t('controlLayers.HUD.scaledBbox')} value={`${scaledSize.width}×${scaledSize.height} px`} />
+  );
+});
+
+CanvasHUDItemScaledBbox.displayName = 'CanvasHUDItemScaledBbox';

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasSelectedEntityStatusAlert.tsx

@@ -0,0 +1,133 @@
+import { Box, Flex, Icon, Text } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import type { Property } from 'csstype';
+import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
+import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
+import { useEntityTypeIsHidden } from 'features/controlLayers/hooks/useEntityTypeIsHidden';
+import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
+import {
+  selectCanvasSlice,
+  selectEntityOrThrow,
+  selectSelectedEntityIdentifier,
+} from 'features/controlLayers/store/selectors';
+import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import { atom } from 'nanostores';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiWarningCircleFill } from 'react-icons/pi';
+
+type ContentProps = {
+  entityIdentifier: CanvasEntityIdentifier;
+  adapter: CanvasEntityAdapter;
+};
+
+const $isFilteringFallback = atom(false);
+
+type EntityStatus = {
+  value: string;
+  color?: Property.Color;
+};
+
+const CanvasSelectedEntityStatusAlertContent = memo(({ entityIdentifier, adapter }: ContentProps) => {
+  const { t } = useTranslation();
+  const title = useEntityTitle(entityIdentifier);
+  const selectIsEnabled = useMemo(
+    () => createSelector(selectCanvasSlice, (canvas) => selectEntityOrThrow(canvas, entityIdentifier).isEnabled),
+    [entityIdentifier]
+  );
+  const selectIsLocked = useMemo(
+    () => createSelector(selectCanvasSlice, (canvas) => selectEntityOrThrow(canvas, entityIdentifier).isLocked),
+    [entityIdentifier]
+  );
+  const isEnabled = useAppSelector(selectIsEnabled);
+  const isLocked = useAppSelector(selectIsLocked);
+  const isHidden = useEntityTypeIsHidden(entityIdentifier.type);
+  const isFiltering = useStore(adapter.filterer?.$isFiltering ?? $isFilteringFallback);
+  const isTransforming = useStore(adapter.transformer.$isTransforming);
+
+  const status = useMemo<EntityStatus | null>(() => {
+    if (isFiltering) {
+      return {
+        value: t('controlLayers.HUD.entityStatus.isFiltering'),
+        color: 'invokeBlue.300',
+      };
+    }
+
+    if (isTransforming) {
+      return {
+        value: t('controlLayers.HUD.entityStatus.isTransforming'),
+        color: 'invokeBlue.300',
+      };
+    }
+
+    if (isHidden) {
+      return {
+        value: t('controlLayers.HUD.entityStatus.isHidden'),
+        color: 'invokePurple.300',
+      };
+    }
+
+    if (isLocked) {
+      return {
+        value: t('controlLayers.HUD.entityStatus.isLocked'),
+        color: 'invokeRed.300',
+      };
+    }
+
+    if (!isEnabled) {
+      return {
+        value: t('controlLayers.HUD.entityStatus.isDisabled'),
+        color: 'invokeRed.300',
+      };
+    }
+
+    return null;
+  }, [isFiltering, isTransforming, isHidden, isLocked, isEnabled, t]);
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <Box position="relative" shadow="dark-lg">
+      <Flex
+        position="absolute"
+        top={0}
+        right={0}
+        left={0}
+        bottom={0}
+        bg={status.color}
+        opacity={0.3}
+        borderRadius="base"
+        borderColor="whiteAlpha.400"
+        borderWidth={1}
+      />
+      <Flex px={6} py={4} gap={6} alignItems="center" justifyContent="center">
+        <Icon as={PiWarningCircleFill} />
+        <Text as="span" h={8}>
+          <Text as="span" fontWeight="semibold">
+            {title}
+          </Text>{' '}
+          {status.value}
+        </Text>
+      </Flex>
+    </Box>
+  );
+});
+
+CanvasSelectedEntityStatusAlertContent.displayName = 'CanvasSelectedEntityStatusAlertContent';
+
+export const CanvasSelectedEntityStatusAlert = memo(() => {
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const adapter = useEntityAdapterSafe(selectedEntityIdentifier);
+
+  if (!selectedEntityIdentifier || !adapter) {
+    return null;
+  }
+
+  return <CanvasSelectedEntityStatusAlertContent entityIdentifier={selectedEntityIdentifier} adapter={adapter} />;
+});
+
+CanvasSelectedEntityStatusAlert.displayName = 'CanvasSelectedEntityStatusAlert';

invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx

@@ -1,43 +0,0 @@
-import { Grid, GridItem, Text } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { memo } from 'react';
-
-const selectBbox = createSelector(selectCanvasSlice, (canvas) => canvas.bbox);
-
-export const HeadsUpDisplay = memo(() => {
-  const bbox = useAppSelector(selectBbox);
-
-  return (
-    <Grid
-      bg="base.900"
-      borderBottomEndRadius="base"
-      p={2}
-      gap={2}
-      borderRadius="base"
-      templateColumns="auto auto"
-      opacity={0.6}
-    >
-      <HUDItem label="BBox" value={`${bbox.rect.width}×${bbox.rect.height} px`} />
-      <HUDItem label="Scaled BBox" value={`${bbox.scaledSize.width}×${bbox.scaledSize.height} px`} />
-    </Grid>
-  );
-});
-
-HeadsUpDisplay.displayName = 'HeadsUpDisplay';
-
-const HUDItem = memo(({ label, value }: { label: string; value: string | number }) => {
-  return (
-    <>
-      <GridItem>
-        <Text textAlign="end">{label}: </Text>
-      </GridItem>
-      <GridItem fontWeight="semibold">
-        <Text>{value}</Text>
-      </GridItem>
-    </>
-  );
-});
-
-HUDItem.displayName = 'HUDItem';

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx

@@ -9,7 +9,7 @@ import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/stor
 import { selectOptimalDimension } from 'features/controlLayers/store/selectors';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
 import type { ImageDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize';
+import { calculateNewSize } from 'features/parameters/components/Bbox/calculateNewSize';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiRulerBold } from 'react-icons/pi';
@@ -85,7 +85,7 @@ export const IPAdapterImagePreview = memo(
         />
 
         {controlImage && (
-          <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
+          <Flex position="absolute" flexDir="column" top={2} insetInlineEnd={2} gap={1}>
             <IAIDndImageIcon
               onClick={handleResetControlImage}
               icon={<PiArrowCounterClockwiseBold size={16} />}

invokeai/frontend/web/src/features/controlLayers/components/InvokeCanvasComponent.tsx

@@ -0,0 +1,23 @@
+import { Box } from '@invoke-ai/ui-library';
+import { useInvokeCanvas } from 'features/controlLayers/hooks/useInvokeCanvas';
+import { memo } from 'react';
+
+export const InvokeCanvasComponent = memo(() => {
+  const ref = useInvokeCanvas();
+
+  return (
+    <Box
+      position="absolute"
+      top={0}
+      right={0}
+      bottom={0}
+      left={0}
+      ref={ref}
+      borderRadius="base"
+      overflow="hidden"
+      data-testid="control-layers-canvas"
+    />
+  );
+});
+
+InvokeCanvasComponent.displayName = 'InvokeCanvasComponent';

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx

@@ -1,42 +1,28 @@
 import { Button, Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
-  rgIPAdapterAdded,
-  rgNegativePromptChanged,
-  rgPositivePromptChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
-import { useCallback, useMemo } from 'react';
+  buildSelectValidRegionalGuidanceActions,
+  useAddRegionalGuidanceIPAdapter,
+  useAddRegionalGuidanceNegativePrompt,
+  useAddRegionalGuidancePositivePrompt,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
 export const RegionalGuidanceAddPromptsIPAdapterButtons = () => {
   const entityIdentifier = useEntityIdentifierContext('regional_guidance');
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+  const addRegionalGuidanceIPAdapter = useAddRegionalGuidanceIPAdapter(entityIdentifier);
+  const addRegionalGuidancePositivePrompt = useAddRegionalGuidancePositivePrompt(entityIdentifier);
+  const addRegionalGuidanceNegativePrompt = useAddRegionalGuidanceNegativePrompt(entityIdentifier);
+
   const selectValidActions = useMemo(
-    () =>
-      createMemoizedSelector(selectCanvasSlice, (canvas) => {
-        const entity = selectEntityOrThrow(canvas, entityIdentifier);
-        return {
-          canAddPositivePrompt: entity?.positivePrompt === null,
-          canAddNegativePrompt: entity?.negativePrompt === null,
-        };
-      }),
+    () => buildSelectValidRegionalGuidanceActions(entityIdentifier),
     [entityIdentifier]
   );
   const validActions = useAppSelector(selectValidActions);
-  const addPositivePrompt = useCallback(() => {
-    dispatch(rgPositivePromptChanged({ entityIdentifier, prompt: '' }));
-  }, [dispatch, entityIdentifier]);
-  const addNegativePrompt = useCallback(() => {
-    dispatch(rgNegativePromptChanged({ entityIdentifier, prompt: '' }));
-  }, [dispatch, entityIdentifier]);
-  const addIPAdapter = useCallback(() => {
-    dispatch(rgIPAdapterAdded({ entityIdentifier }));
-  }, [dispatch, entityIdentifier]);
 
   return (
     <Flex w="full" p={2} justifyContent="space-between">
@@ -44,7 +30,7 @@ export const RegionalGuidanceAddPromptsIPAdapterButtons = () => {
         size="sm"
         variant="ghost"
         leftIcon={<PiPlusBold />}
-        onClick={addPositivePrompt}
+        onClick={addRegionalGuidancePositivePrompt}
         isDisabled={!validActions.canAddPositivePrompt}
       >
         {t('common.positivePrompt')}
@@ -53,12 +39,12 @@ export const RegionalGuidanceAddPromptsIPAdapterButtons = () => {
         size="sm"
         variant="ghost"
         leftIcon={<PiPlusBold />}
-        onClick={addNegativePrompt}
+        onClick={addRegionalGuidanceNegativePrompt}
         isDisabled={!validActions.canAddNegativePrompt}
       >
         {t('common.negativePrompt')}
       </Button>
-      <Button size="sm" variant="ghost" leftIcon={<PiPlusBold />} onClick={addIPAdapter}>
+      <Button size="sm" variant="ghost" leftIcon={<PiPlusBold />} onClick={addRegionalGuidanceIPAdapter}>
         {t('common.ipAdapter')}
       </Button>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx

@@ -1,53 +1,38 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import {
-  rgIPAdapterAdded,
-  rgNegativePromptChanged,
-  rgPositivePromptChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
-import { memo, useCallback, useMemo } from 'react';
+  buildSelectValidRegionalGuidanceActions,
+  useAddRegionalGuidanceIPAdapter,
+  useAddRegionalGuidanceNegativePrompt,
+  useAddRegionalGuidancePositivePrompt,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
   const entityIdentifier = useEntityIdentifierContext('regional_guidance');
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
   const isBusy = useCanvasIsBusy();
+  const addRegionalGuidanceIPAdapter = useAddRegionalGuidanceIPAdapter(entityIdentifier);
+  const addRegionalGuidancePositivePrompt = useAddRegionalGuidancePositivePrompt(entityIdentifier);
+  const addRegionalGuidanceNegativePrompt = useAddRegionalGuidanceNegativePrompt(entityIdentifier);
   const selectValidActions = useMemo(
-    () =>
-      createMemoizedSelector(selectCanvasSlice, (canvas) => {
-        const entity = selectEntity(canvas, entityIdentifier);
-        return {
-          canAddPositivePrompt: entity?.positivePrompt === null,
-          canAddNegativePrompt: entity?.negativePrompt === null,
-        };
-      }),
+    () => buildSelectValidRegionalGuidanceActions(entityIdentifier),
     [entityIdentifier]
   );
   const validActions = useAppSelector(selectValidActions);
-  const addPositivePrompt = useCallback(() => {
-    dispatch(rgPositivePromptChanged({ entityIdentifier, prompt: '' }));
-  }, [dispatch, entityIdentifier]);
-  const addNegativePrompt = useCallback(() => {
-    dispatch(rgNegativePromptChanged({ entityIdentifier, prompt: '' }));
-  }, [dispatch, entityIdentifier]);
-  const addIPAdapter = useCallback(() => {
-    dispatch(rgIPAdapterAdded({ entityIdentifier }));
-  }, [dispatch, entityIdentifier]);
 
   return (
     <>
-      <MenuItem onClick={addPositivePrompt} isDisabled={!validActions.canAddPositivePrompt || isBusy}>
+      <MenuItem onClick={addRegionalGuidancePositivePrompt} isDisabled={!validActions.canAddPositivePrompt || isBusy}>
         {t('controlLayers.addPositivePrompt')}
       </MenuItem>
-      <MenuItem onClick={addNegativePrompt} isDisabled={!validActions.canAddNegativePrompt || isBusy}>
+      <MenuItem onClick={addRegionalGuidanceNegativePrompt} isDisabled={!validActions.canAddNegativePrompt || isBusy}>
         {t('controlLayers.addNegativePrompt')}
       </MenuItem>
-      <MenuItem onClick={addIPAdapter} isDisabled={isBusy}>
+      <MenuItem onClick={addRegionalGuidanceIPAdapter} isDisabled={isBusy}>
         {t('controlLayers.addIPAdapter')}
       </MenuItem>
     </>

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsAutoSaveCheckbox.tsx

@@ -1,17 +1,16 @@
 import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectCanvasSettingsSlice, settingsAutoSaveToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectAutoSave, settingsAutoSaveToggled } from 'features/controlLayers/store/canvasSettingsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selectAutoSave = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.autoSave);
-
 export const CanvasSettingsAutoSaveCheckbox = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const autoSave = useAppSelector(selectAutoSave);
-  const onChange = useCallback(() => dispatch(settingsAutoSaveToggled()), [dispatch]);
+  const onChange = useCallback(() => {
+    dispatch(settingsAutoSaveToggled());
+  }, [dispatch]);
   return (
     <FormControl w="full">
       <FormLabel flexGrow={1}>{t('controlLayers.autoSave')}</FormLabel>

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsGridSize.tsx

@@ -0,0 +1,24 @@
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectSnapToGrid, settingsSnapToGridToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import type { ChangeEventHandler } from 'react';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsSnapToGridCheckbox = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const snapToGrid = useAppSelector(selectSnapToGrid);
+  const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(() => {
+    dispatch(settingsSnapToGridToggled());
+  }, [dispatch]);
+
+  return (
+    <FormControl w="full">
+      <FormLabel flexGrow={1}>{t('controlLayers.settings.snapToGrid.label')}</FormLabel>
+      <Checkbox isChecked={snapToGrid} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasSettingsSnapToGridCheckbox.displayName = 'CanvasSettingsSnapToGrid';

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx

@@ -15,6 +15,7 @@ import { CanvasSettingsClearHistoryButton } from 'features/controlLayers/compone
 import { CanvasSettingsClipToBboxCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsClipToBboxCheckbox';
 import { CanvasSettingsCompositeMaskedRegionsCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsCompositeMaskedRegionsCheckbox';
 import { CanvasSettingsDynamicGridSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsDynamicGridSwitch';
+import { CanvasSettingsSnapToGridCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsGridSize';
 import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsInvertScrollCheckbox';
 import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
@@ -39,6 +40,7 @@ export const CanvasSettingsPopover = memo(() => {
             <CanvasSettingsInvertScrollCheckbox />
             <CanvasSettingsClipToBboxCheckbox />
             <CanvasSettingsCompositeMaskedRegionsCheckbox />
+            <CanvasSettingsSnapToGridCheckbox />
             <CanvasSettingsDynamicGridSwitch />
             <CanvasSettingsShowHUDSwitch />
             <CanvasSettingsResetButton />

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsResetButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { canvasReset } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,9 +8,11 @@ import { useTranslation } from 'react-i18next';
 export const CanvasSettingsResetButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const canvasManager = useCanvasManager();
   const onClick = useCallback(() => {
     dispatch(canvasReset());
-  }, [dispatch]);
+    canvasManager.stage.fitLayersToStage();
+  }, [canvasManager.stage, dispatch]);
   return (
     <Button onClick={onClick} colorScheme="error" size="sm">
       {t('controlLayers.resetCanvas')}

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -1,109 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { $socket } from 'app/hooks/useSocketIO';
-import { logger } from 'app/logging/logger';
-import { useAppStore } from 'app/store/nanostores/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { HeadsUpDisplay } from 'features/controlLayers/components/HeadsUpDisplay';
-import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { TRANSPARENCY_CHECKERBOARD_PATTERN_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
-import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
-import Konva from 'konva';
-import { memo, useCallback, useEffect, useLayoutEffect, useState } from 'react';
-import { useDevicePixelRatio } from 'use-device-pixel-ratio';
-
-const log = logger('canvas');
-
-// This will log warnings when layers > 5 - maybe use `import.meta.env.MODE === 'development'` instead?
-Konva.showWarnings = false;
-
-const useStageRenderer = (stage: Konva.Stage, container: HTMLDivElement | null) => {
-  const store = useAppStore();
-  const socket = useStore($socket);
-  const dpr = useDevicePixelRatio({ round: false });
-
-  useLayoutEffect(() => {
-    log.debug('Initializing renderer');
-    if (!container) {
-      // Nothing to clean up
-      log.debug('No stage container, skipping initialization');
-      return () => {};
-    }
-
-    if (!socket) {
-      log.debug('Socket not connected, skipping initialization');
-      return () => {};
-    }
-
-    const manager = new CanvasManager(stage, container, store, socket);
-    manager.initialize();
-    return manager.destroy;
-  }, [container, socket, stage, store]);
-
-  useLayoutEffect(() => {
-    Konva.pixelRatio = dpr;
-  }, [dpr]);
-};
-
-export const StageComponent = memo(() => {
-  const dynamicGrid = useAppSelector(selectDynamicGrid);
-  const showHUD = useAppSelector(selectShowHUD);
-
-  const [stage] = useState(
-    () =>
-      new Konva.Stage({
-        id: getPrefixedId('konva_stage'),
-        container: document.createElement('div'),
-      })
-  );
-  const [container, setContainer] = useState<HTMLDivElement | null>(null);
-
-  const containerRef = useCallback((el: HTMLDivElement | null) => {
-    setContainer(el);
-  }, []);
-
-  useStageRenderer(stage, container);
-
-  useEffect(
-    () => () => {
-      stage.destroy();
-    },
-    [stage]
-  );
-
-  return (
-    <Flex position="relative" w="full" h="full" bg={dynamicGrid ? 'base.850' : 'base.900'} borderRadius="base">
-      {!dynamicGrid && (
-        <Flex
-          position="absolute"
-          borderRadius="base"
-          bgImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DATAURL}
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          opacity={0.1}
-        />
-      )}
-      <Flex
-        position="absolute"
-        top={0}
-        right={0}
-        bottom={0}
-        left={0}
-        ref={containerRef}
-        borderRadius="base"
-        overflow="hidden"
-        data-testid="control-layers-canvas"
-      />
-      {showHUD && (
-        <Flex position="absolute" top={1} insetInlineStart={1} pointerEvents="none">
-          <HeadsUpDisplay />
-        </Flex>
-      )}
-    </Flex>
-  );
-});
-
-StageComponent.displayName = 'StageComponent';

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaIsStagingGate.tsx

@@ -1,5 +1,5 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx

@@ -5,13 +5,13 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { INTERACTION_SCOPES, useScopeOnMount } from 'common/hooks/interactionScopes';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import {
-  selectCanvasSessionSlice,
-  sessionNextStagedImageSelected,
-  sessionPrevStagedImageSelected,
-  sessionStagedImageDiscarded,
-  sessionStagingAreaImageAccepted,
-  sessionStagingAreaReset,
-} from 'features/controlLayers/store/canvasSessionSlice';
+  selectCanvasStagingAreaSlice,
+  stagingAreaImageAccepted,
+  stagingAreaNextStagedImageSelected,
+  stagingAreaPrevStagedImageSelected,
+  stagingAreaReset,
+  stagingAreaStagedImageDiscarded,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -28,16 +28,16 @@ import {
 import { useChangeImageIsIntermediateMutation } from 'services/api/endpoints/images';
 
 const selectStagedImageIndex = createSelector(
-  selectCanvasSessionSlice,
-  (canvasSession) => canvasSession.selectedStagedImageIndex
+  selectCanvasStagingAreaSlice,
+  (stagingArea) => stagingArea.selectedStagedImageIndex
 );
 
 const selectSelectedImage = createSelector(
-  [selectCanvasSessionSlice, selectStagedImageIndex],
-  (canvasSession, index) => canvasSession.stagedImages[index] ?? null
+  [selectCanvasStagingAreaSlice, selectStagedImageIndex],
+  (stagingArea, index) => stagingArea.stagedImages[index] ?? null
 );
 
-const selectImageCount = createSelector(selectCanvasSessionSlice, (canvasSession) => canvasSession.stagedImages.length);
+const selectImageCount = createSelector(selectCanvasStagingAreaSlice, (stagingArea) => stagingArea.stagedImages.length);
 
 export const StagingAreaToolbar = memo(() => {
   const dispatch = useAppDispatch();
@@ -53,18 +53,18 @@ export const StagingAreaToolbar = memo(() => {
   const { t } = useTranslation();
 
   const onPrev = useCallback(() => {
-    dispatch(sessionPrevStagedImageSelected());
+    dispatch(stagingAreaPrevStagedImageSelected());
   }, [dispatch]);
 
   const onNext = useCallback(() => {
-    dispatch(sessionNextStagedImageSelected());
+    dispatch(stagingAreaNextStagedImageSelected());
   }, [dispatch]);
 
   const onAccept = useCallback(() => {
     if (!selectedImage) {
       return;
     }
-    dispatch(sessionStagingAreaImageAccepted({ index }));
+    dispatch(stagingAreaImageAccepted({ index }));
   }, [dispatch, index, selectedImage]);
 
   const onDiscardOne = useCallback(() => {
@@ -72,14 +72,14 @@ export const StagingAreaToolbar = memo(() => {
       return;
     }
     if (imageCount === 1) {
-      dispatch(sessionStagingAreaReset());
+      dispatch(stagingAreaReset());
     } else {
-      dispatch(sessionStagedImageDiscarded({ index }));
+      dispatch(stagingAreaStagedImageDiscarded({ index }));
     }
   }, [selectedImage, imageCount, dispatch, index]);
 
   const onDiscardAll = useCallback(() => {
-    dispatch(sessionStagingAreaReset());
+    dispatch(stagingAreaReset());
   }, [dispatch]);
 
   const onToggleShouldShowStagedImage = useCallback(() => {

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -4,6 +4,7 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
+import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
 import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
 import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
@@ -13,8 +14,6 @@ import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/u
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
 import { useCanvasUndoRedoHotkeys } from 'features/controlLayers/hooks/useCanvasUndoRedoHotkeys';
 import { useNextPrevEntityHotkeys } from 'features/controlLayers/hooks/useNextPrevEntity';
-import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
-import { ViewerToggle } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
 export const CanvasToolbar = memo(() => {
@@ -27,7 +26,6 @@ export const CanvasToolbar = memo(() => {
   return (
     <CanvasManagerProviderGate>
       <Flex w="full" gap={2} alignItems="center">
-        <ToggleProgressButton />
         <ToolChooser />
         <Spacer />
         <ToolSettings />
@@ -36,9 +34,9 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarResetViewButton />
         <Spacer />
         <ToolColorPicker />
+        <CanvasToolbarFitBboxToLayersButton />
         <CanvasToolbarSaveToGalleryButton />
         <CanvasSettingsPopover />
-        <ViewerToggle />
       </Flex>
     </CanvasManagerProviderGate>
   );

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx

@@ -0,0 +1,25 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowsOut } from 'react-icons/pi';
+
+export const CanvasToolbarFitBboxToLayersButton = memo(() => {
+  const { t } = useTranslation();
+  const canvasManager = useCanvasManager();
+  const onClick = useCallback(() => {
+    canvasManager.bbox.fitToLayers();
+  }, [canvasManager.bbox]);
+
+  return (
+    <IconButton
+      onClick={onClick}
+      variant="ghost"
+      aria-label={t('controlLayers.fitBboxToLayers')}
+      tooltip={t('controlLayers.fitBboxToLayers')}
+      icon={<PiArrowsOut />}
+    />
+  );
+});
+
+CanvasToolbarFitBboxToLayersButton.displayName = 'CanvasToolbarFitBboxToLayersButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx

@@ -1,7 +1,7 @@
 import { $alt, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
-import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
+import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx

@@ -1,47 +1,24 @@
 import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
-import { logger } from 'app/logging/logger';
-import { buildUseBoolean } from 'common/hooks/useBoolean';
-import { isOk, withResultAsync } from 'common/util/result';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { toast } from 'features/toast/toast';
-import { memo, useCallback } from 'react';
+import {
+  useIsSavingCanvas,
+  useSaveBboxToGallery,
+  useSaveCanvasToGallery,
+} from 'features/controlLayers/hooks/saveCanvasHooks';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
-import { serializeError } from 'serialize-error';
-
-const log = logger('canvas');
-
-const [useIsSaving] = buildUseBoolean(false);
 
 export const CanvasToolbarSaveToGalleryButton = memo(() => {
   const { t } = useTranslation();
   const shift = useShiftModifier();
-  const canvasManager = useCanvasManager();
-  const isSaving = useIsSaving();
-
-  const onClick = useCallback(async () => {
-    isSaving.setTrue();
-
-    const rect = shift ? canvasManager.stateApi.getBbox().rect : canvasManager.stage.getVisibleRect('raster_layer');
-
-    const result = await withResultAsync(() =>
-      canvasManager.compositor.rasterizeAndUploadCompositeRasterLayer(rect, true)
-    );
-
-    if (isOk(result)) {
-      toast({ title: t('controlLayers.savedToGalleryOk') });
-    } else {
-      log.error({ error: serializeError(result.error) }, 'Failed to save canvas to gallery');
-      toast({ title: t('controlLayers.savedToGalleryError'), status: 'error' });
-    }
-
-    isSaving.setFalse();
-  }, [canvasManager.compositor, canvasManager.stage, canvasManager.stateApi, isSaving, shift, t]);
+  const isSaving = useIsSavingCanvas();
+  const saveCanvasToGallery = useSaveCanvasToGallery();
+  const saveBboxToGallery = useSaveBboxToGallery();
 
   return (
     <IconButton
       variant="ghost"
-      onClick={onClick}
+      onClick={shift ? saveBboxToGallery : saveCanvasToGallery}
       icon={<PiFloppyDiskBold />}
       isLoading={isSaving.isTrue}
       aria-label={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')}

invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntityAdapter/types';
+import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsCounterClockwiseBold, PiArrowsOutBold, PiCheckBold, PiXBold } from 'react-icons/pi';

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx

@@ -1,12 +1,11 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import {
-  controlLayerAdded,
-  inpaintMaskAdded,
-  ipaAdded,
-  rasterLayerAdded,
-  rgAdded,
-} from 'features/controlLayers/store/canvasSlice';
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddIPAdapter,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,26 +17,31 @@ type Props = {
 
 export const CanvasEntityAddOfTypeButton = memo(({ type }: Props) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const addIPAdapter = useAddIPAdapter();
+
   const onClick = useCallback(() => {
     switch (type) {
       case 'inpaint_mask':
-        dispatch(inpaintMaskAdded({ isSelected: true }));
+        addInpaintMask();
         break;
       case 'regional_guidance':
-        dispatch(rgAdded({ isSelected: true }));
+        addRegionalGuidance();
         break;
       case 'raster_layer':
-        dispatch(rasterLayerAdded({ isSelected: true }));
+        addRasterLayer();
         break;
       case 'control_layer':
-        dispatch(controlLayerAdded({ isSelected: true }));
+        addControlLayer();
         break;
       case 'ip_adapter':
-        dispatch(ipaAdded({ isSelected: true }));
+        addIPAdapter();
         break;
     }
-  }, [dispatch, type]);
+  }, [addControlLayer, addIPAdapter, addInpaintMask, addRasterLayer, addRegionalGuidance, type]);
 
   const label = useMemo(() => {
     switch (type) {

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx

@@ -59,8 +59,8 @@ export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props
           <Spacer />
         </Flex>
         {canMergeVisible && <CanvasEntityMergeVisibleButton type={type} />}
-        <CanvasEntityAddOfTypeButton type={type} />
         {canHideAll && <CanvasEntityTypeIsHiddenToggle type={type} />}
+        <CanvasEntityAddOfTypeButton type={type} />
       </Flex>
       <Collapse in={collapse.isTrue}>
         <Flex flexDir="column" gap={2} pt={2}>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx

@@ -1,23 +1,17 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
-import { memo, useCallback } from 'react';
+import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiShootingStarBold } from 'react-icons/pi';
 
 export const CanvasEntityMenuItemsFilter = memo(() => {
   const { t } = useTranslation();
-  const canvasManager = useCanvasManager();
   const entityIdentifier = useEntityIdentifierContext();
-  const isBusy = useCanvasIsBusy();
-
-  const onClick = useCallback(() => {
-    canvasManager.filter.startFilter(entityIdentifier);
-  }, [canvasManager.filter, entityIdentifier]);
+  const filter = useEntityFilter(entityIdentifier);
 
   return (
-    <MenuItem onClick={onClick} icon={<PiShootingStarBold />} isDisabled={isBusy}>
+    <MenuItem onClick={filter.start} icon={<PiShootingStarBold />} isDisabled={filter.isDisabled}>
       {t('controlLayers.filter.filter')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsTransform.tsx

@@ -1,23 +1,17 @@
 import { MenuItem } from '@invoke-ai/ui-library';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
-import { useEntityAdapter } from 'features/controlLayers/hooks/useEntityAdapter';
-import { memo, useCallback } from 'react';
+import { useEntityTransform } from 'features/controlLayers/hooks/useEntityTransform';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFrameCornersBold } from 'react-icons/pi';
 
 export const CanvasEntityMenuItemsTransform = memo(() => {
   const { t } = useTranslation();
   const entityIdentifier = useEntityIdentifierContext();
-  const adapter = useEntityAdapter(entityIdentifier);
-  const isBusy = useCanvasIsBusy();
-
-  const onClick = useCallback(() => {
-    adapter.transformer.startTransform();
-  }, [adapter.transformer]);
+  const transform = useEntityTransform(entityIdentifier);
 
   return (
-    <MenuItem onClick={onClick} icon={<PiFrameCornersBold />} isDisabled={isBusy}>
+    <MenuItem onClick={transform.start} icon={<PiFrameCornersBold />} isDisabled={transform.isDisabled}>
       {t('controlLayers.transform.transform')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx

@@ -1,10 +1,12 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isOk, withResultAsync } from 'common/util/result';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useEntityTypeCount } from 'features/controlLayers/hooks/useEntityTypeCount';
 import { inpaintMaskAdded, rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { imageDTOToImageObject } from 'features/controlLayers/store/types';
 import { toast } from 'features/toast/toast';
@@ -23,6 +25,8 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const canvasManager = useCanvasManager();
+  const isStaging = useAppSelector(selectIsStaging);
+  const isBusy = useCanvasIsBusy();
   const entityCount = useEntityTypeCount(type);
   const onClick = useCallback(async () => {
     if (type === 'raster_layer') {
@@ -39,7 +43,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
               objects: [imageDTOToImageObject(result.value)],
               position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
             },
-            deleteOthers: true,
+            isMergingVisible: true,
           })
         );
         toast({ title: t('controlLayers.mergeVisibleOk') });
@@ -61,7 +65,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
               objects: [imageDTOToImageObject(result.value)],
               position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
             },
-            deleteOthers: true,
+            isMergingVisible: true,
           })
         );
         toast({ title: t('controlLayers.mergeVisibleOk') });
@@ -83,7 +87,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
       icon={<PiStackBold />}
       onClick={onClick}
       alignSelf="stretch"
-      isDisabled={entityCount <= 1}
+      isDisabled={entityCount <= 1 || isStaging || isBusy}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx

@@ -37,13 +37,20 @@ export const CanvasEntityPreviewImage = memo(() => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const cache = useStore(adapter.renderer.$canvasCache);
   useEffect(() => {
-    if (!cache || !canvasRef.current) {
+    if (!canvasRef.current) {
       return;
     }
     const ctx = canvasRef.current.getContext('2d');
     if (!ctx) {
       return;
     }
+
+    if (!cache) {
+      // Draw an empty canvas
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+      return;
+    }
+
     const { rect, canvas } = cache;
 
     ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
@@ -81,6 +88,7 @@ export const CanvasEntityPreviewImage = memo(() => {
       borderRadius="sm"
       borderWidth={1}
       bg="base.900"
+      flexShrink={0}
     >
       <Box
         position="absolute"

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx

@@ -17,7 +17,7 @@ export const CanvasEntityTypeIsHiddenToggle = memo(({ type }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isHidden = useEntityTypeIsHidden(type);
-  const typeString = useEntityTypeString(type);
+  const typeString = useEntityTypeString(type, true);
   const onClick = useCallback<MouseEventHandler>(
     (e) => {
       e.stopPropagation();

invokeai/frontend/web/src/features/controlLayers/contexts/CanvasManagerProviderGate.tsx

@@ -1,5 +1,6 @@
 import { useStore } from '@nanostores/react';
-import { $canvasManager, type CanvasManager } from 'features/controlLayers/konva/CanvasManager';
+import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
+import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext } from 'react';
 import { assert } from 'tsafe';
@@ -18,8 +19,20 @@ export const CanvasManagerProviderGate = memo(({ children }: PropsWithChildren)
 
 CanvasManagerProviderGate.displayName = 'CanvasManagerProviderGate';
 
+/**
+ * Consumes the CanvasManager from the context. This hook must be used within the CanvasManagerProviderGate, otherwise
+ * it will throw an error.
+ */
 export const useCanvasManager = (): CanvasManager => {
   const canvasManager = useContext(CanvasManagerContext);
   assert(canvasManager, 'useCanvasManagerContext must be used within a CanvasManagerProviderGate');
   return canvasManager;
 };
+
+/**
+ * Consumes the CanvasManager from the context. If the CanvasManager is not available, it will return null.
+ */
+export const useCanvasManagerSafe = (): CanvasManager | null => {
+  const canvasManager = useStore($canvasManager);
+  return canvasManager;
+};

invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx

@@ -1,9 +1,10 @@
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterControlLayer';
-import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterInpaintMask';
-import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterRasterLayer';
-import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterRegionalGuidance';
+import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer';
+import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterInpaintMask';
+import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
+import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
+import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext, useMemo, useSyncExternalStore } from 'react';
 import { assert } from 'tsafe';
@@ -105,3 +106,51 @@ export const useEntityAdapter = ():
   assert(adapter, 'useEntityAdapter must be used within a CanvasRasterLayerAdapterGate');
   return adapter;
 };
+
+export const useEntityAdapterSafe = (
+  entityIdentifier: CanvasEntityIdentifier | null
+):
+  | CanvasEntityAdapterRasterLayer
+  | CanvasEntityAdapterControlLayer
+  | CanvasEntityAdapterInpaintMask
+  | CanvasEntityAdapterRegionalGuidance
+  | null => {
+  const canvasManager = useCanvasManager();
+  const regionalGuidanceAdapters = useSyncExternalStore(
+    canvasManager.adapters.regionMasks.subscribe,
+    canvasManager.adapters.regionMasks.getSnapshot
+  );
+  const rasterLayerAdapters = useSyncExternalStore(
+    canvasManager.adapters.rasterLayers.subscribe,
+    canvasManager.adapters.rasterLayers.getSnapshot
+  );
+  const controlLayerAdapters = useSyncExternalStore(
+    canvasManager.adapters.controlLayers.subscribe,
+    canvasManager.adapters.controlLayers.getSnapshot
+  );
+  const inpaintMaskAdapters = useSyncExternalStore(
+    canvasManager.adapters.inpaintMasks.subscribe,
+    canvasManager.adapters.inpaintMasks.getSnapshot
+  );
+
+  const adapter = useMemo(() => {
+    if (!entityIdentifier) {
+      return null;
+    }
+    if (entityIdentifier.type === 'raster_layer') {
+      return rasterLayerAdapters.get(entityIdentifier.id) ?? null;
+    }
+    if (entityIdentifier.type === 'control_layer') {
+      return controlLayerAdapters.get(entityIdentifier.id) ?? null;
+    }
+    if (entityIdentifier.type === 'inpaint_mask') {
+      return inpaintMaskAdapters.get(entityIdentifier.id) ?? null;
+    }
+    if (entityIdentifier.type === 'regional_guidance') {
+      return regionalGuidanceAdapters.get(entityIdentifier.id) ?? null;
+    }
+    return null;
+  }, [controlLayerAdapters, entityIdentifier, inpaintMaskAdapters, rasterLayerAdapters, regionalGuidanceAdapters]);
+
+  return adapter;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts

@@ -0,0 +1,158 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { deepClone } from 'common/util/deepClone';
+import {
+  controlLayerAdded,
+  inpaintMaskAdded,
+  ipaAdded,
+  rasterLayerAdded,
+  rgAdded,
+  rgIPAdapterAdded,
+  rgNegativePromptChanged,
+  rgPositivePromptChanged,
+} from 'features/controlLayers/store/canvasSlice';
+import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
+import type {
+  CanvasEntityIdentifier,
+  ControlNetConfig,
+  IPAdapterConfig,
+  T2IAdapterConfig,
+} from 'features/controlLayers/store/types';
+import { initialControlNet, initialIPAdapter, initialT2IAdapter } from 'features/controlLayers/store/types';
+import { zModelIdentifierField } from 'features/nodes/types/common';
+import { useCallback } from 'react';
+import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/api/endpoints/models';
+import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import { isControlNetOrT2IAdapterModelConfig, isIPAdapterModelConfig } from 'services/api/types';
+
+export const selectDefaultControlAdapter = createSelector(
+  selectModelConfigsQuery,
+  selectBase,
+  (query, base): ControlNetConfig | T2IAdapterConfig => {
+    const { data } = query;
+    let model: ControlNetModelConfig | T2IAdapterModelConfig | null = null;
+    if (data) {
+      const modelConfigs = modelConfigsAdapterSelectors
+        .selectAll(data)
+        .filter(isControlNetOrT2IAdapterModelConfig)
+        .sort((a) => (a.type === 'controlnet' ? -1 : 1)); // Prefer ControlNet models
+      const compatibleModels = modelConfigs.filter((m) => (base ? m.base === base : true));
+      model = compatibleModels[0] ?? modelConfigs[0] ?? null;
+    }
+    const controlAdapter = model?.type === 't2i_adapter' ? deepClone(initialT2IAdapter) : deepClone(initialControlNet);
+    if (model) {
+      controlAdapter.model = zModelIdentifierField.parse(model);
+    }
+    return controlAdapter;
+  }
+);
+
+export const selectDefaultIPAdapter = createSelector(
+  selectModelConfigsQuery,
+  selectBase,
+  (query, base): IPAdapterConfig => {
+    const { data } = query;
+    let model: IPAdapterModelConfig | null = null;
+    if (data) {
+      const modelConfigs = modelConfigsAdapterSelectors.selectAll(data).filter(isIPAdapterModelConfig);
+      const compatibleModels = modelConfigs.filter((m) => (base ? m.base === base : true));
+      model = compatibleModels[0] ?? modelConfigs[0] ?? null;
+    }
+    const ipAdapter = deepClone(initialIPAdapter);
+    if (model) {
+      ipAdapter.model = zModelIdentifierField.parse(model);
+    }
+    return ipAdapter;
+  }
+);
+
+export const useAddControlLayer = () => {
+  const dispatch = useAppDispatch();
+  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
+  const addControlLayer = useCallback(() => {
+    const overrides = { controlAdapter: defaultControlAdapter };
+    dispatch(controlLayerAdded({ isSelected: true, overrides }));
+  }, [defaultControlAdapter, dispatch]);
+
+  return addControlLayer;
+};
+
+export const useAddRasterLayer = () => {
+  const dispatch = useAppDispatch();
+  const addRasterLayer = useCallback(() => {
+    dispatch(rasterLayerAdded({ isSelected: true }));
+  }, [dispatch]);
+
+  return addRasterLayer;
+};
+
+export const useAddInpaintMask = () => {
+  const dispatch = useAppDispatch();
+  const addInpaintMask = useCallback(() => {
+    dispatch(inpaintMaskAdded({ isSelected: true }));
+  }, [dispatch]);
+
+  return addInpaintMask;
+};
+
+export const useAddRegionalGuidance = () => {
+  const dispatch = useAppDispatch();
+  const addRegionalGuidance = useCallback(() => {
+    dispatch(rgAdded({ isSelected: true }));
+  }, [dispatch]);
+
+  return addRegionalGuidance;
+};
+
+export const useAddIPAdapter = () => {
+  const dispatch = useAppDispatch();
+  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+  const addControlLayer = useCallback(() => {
+    const overrides = { ipAdapter: defaultIPAdapter };
+    dispatch(ipaAdded({ isSelected: true, overrides }));
+  }, [defaultIPAdapter, dispatch]);
+
+  return addControlLayer;
+};
+
+export const useAddRegionalGuidanceIPAdapter = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
+  const dispatch = useAppDispatch();
+  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+  const addRegionalGuidanceIPAdapter = useCallback(() => {
+    dispatch(rgIPAdapterAdded({ entityIdentifier, overrides: defaultIPAdapter }));
+  }, [defaultIPAdapter, dispatch, entityIdentifier]);
+
+  return addRegionalGuidanceIPAdapter;
+};
+
+export const useAddRegionalGuidancePositivePrompt = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
+  const dispatch = useAppDispatch();
+  const addRegionalGuidancePositivePrompt = useCallback(() => {
+    dispatch(rgPositivePromptChanged({ entityIdentifier, prompt: '' }));
+  }, [dispatch, entityIdentifier]);
+
+  return addRegionalGuidancePositivePrompt;
+};
+
+export const useAddRegionalGuidanceNegativePrompt = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
+  const dispatch = useAppDispatch();
+  const addRegionalGuidanceNegativePrompt = useCallback(() => {
+    dispatch(rgNegativePromptChanged({ entityIdentifier, prompt: '' }));
+  }, [dispatch, entityIdentifier]);
+
+  return addRegionalGuidanceNegativePrompt;
+};
+
+export const buildSelectValidRegionalGuidanceActions = (
+  entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>
+) => {
+  return createMemoizedSelector(selectCanvasSlice, (canvas) => {
+    const entity = selectEntityOrThrow(canvas, entityIdentifier);
+    return {
+      canAddPositivePrompt: entity?.positivePrompt === null,
+      canAddNegativePrompt: entity?.negativePrompt === null,
+    };
+  });
+};

invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts

@@ -0,0 +1,167 @@
+import { logger } from 'app/logging/logger';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { buildUseBoolean } from 'common/hooks/useBoolean';
+import { isOk, withResultAsync } from 'common/util/result';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { selectDefaultControlAdapter, selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { controlLayerAdded, ipaAdded, rasterLayerAdded, rgAdded } from 'features/controlLayers/store/canvasSlice';
+import type {
+  CanvasControlLayerState,
+  CanvasIPAdapterState,
+  CanvasRasterLayerState,
+  CanvasRegionalGuidanceState,
+  Rect,
+  RegionalGuidanceIPAdapterConfig,
+} from 'features/controlLayers/store/types';
+import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/types';
+import { toast } from 'features/toast/toast';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { serializeError } from 'serialize-error';
+import type { ImageDTO } from 'services/api/types';
+
+const log = logger('canvas');
+
+export const [useIsSavingCanvas] = buildUseBoolean(false);
+
+type UseSaveCanvasArg = {
+  region: 'canvas' | 'bbox';
+  saveToGallery: boolean;
+  onSave?: (imageDTO: ImageDTO, rect: Rect) => void;
+};
+
+const useSaveCanvas = ({ region, saveToGallery, onSave }: UseSaveCanvasArg) => {
+  const { t } = useTranslation();
+
+  const canvasManager = useCanvasManager();
+  const isSaving = useIsSavingCanvas();
+
+  const saveCanvas = useCallback(async () => {
+    isSaving.setTrue();
+
+    const rect =
+      region === 'bbox' ? canvasManager.stateApi.getBbox().rect : canvasManager.stage.getVisibleRect('raster_layer');
+
+    const result = await withResultAsync(() =>
+      canvasManager.compositor.rasterizeAndUploadCompositeRasterLayer(rect, saveToGallery)
+    );
+
+    if (isOk(result)) {
+      if (onSave) {
+        onSave(result.value, rect);
+      }
+      toast({ title: t('controlLayers.savedToGalleryOk') });
+    } else {
+      log.error({ error: serializeError(result.error) }, 'Failed to save canvas to gallery');
+      toast({ title: t('controlLayers.savedToGalleryError'), status: 'error' });
+    }
+
+    isSaving.setFalse();
+  }, [
+    canvasManager.compositor,
+    canvasManager.stage,
+    canvasManager.stateApi,
+    isSaving,
+    onSave,
+    region,
+    saveToGallery,
+    t,
+  ]);
+
+  return saveCanvas;
+};
+
+export const useSaveCanvasToGallery = () => {
+  const saveCanvasToGalleryArg = useMemo<UseSaveCanvasArg>(() => ({ region: 'canvas', saveToGallery: true }), []);
+  const saveCanvasToGallery = useSaveCanvas(saveCanvasToGalleryArg);
+  return saveCanvasToGallery;
+};
+
+export const useSaveBboxToGallery = () => {
+  const saveBboxToGalleryArg = useMemo<UseSaveCanvasArg>(() => ({ region: 'bbox', saveToGallery: true }), []);
+  const saveBboxToGallery = useSaveCanvas(saveBboxToGalleryArg);
+  return saveBboxToGallery;
+};
+
+export const useSaveBboxAsRegionalGuidanceIPAdapter = () => {
+  const dispatch = useAppDispatch();
+  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+
+  const saveBboxAsRegionalGuidanceIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
+    const onSave = (imageDTO: ImageDTO) => {
+      const ipAdapter: RegionalGuidanceIPAdapterConfig = {
+        ...defaultIPAdapter,
+        id: getPrefixedId('regional_guidance_ip_adapter'),
+        image: imageDTOToImageWithDims(imageDTO),
+      };
+      const overrides: Partial<CanvasRegionalGuidanceState> = {
+        ipAdapters: [ipAdapter],
+      };
+
+      dispatch(rgAdded({ overrides, isSelected: true }));
+    };
+
+    return { region: 'bbox', saveToGallery: true, onSave };
+  }, [defaultIPAdapter, dispatch]);
+  const saveBboxAsRegionalGuidanceIPAdapter = useSaveCanvas(saveBboxAsRegionalGuidanceIPAdapterArg);
+  return saveBboxAsRegionalGuidanceIPAdapter;
+};
+
+export const useSaveBboxAsGlobalIPAdapter = () => {
+  const dispatch = useAppDispatch();
+  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+
+  const saveBboxAsIPAdapterArg = useMemo<UseSaveCanvasArg>(() => {
+    const onSave = (imageDTO: ImageDTO) => {
+      const overrides: Partial<CanvasIPAdapterState> = {
+        ipAdapter: {
+          ...defaultIPAdapter,
+          image: imageDTOToImageWithDims(imageDTO),
+        },
+      };
+      dispatch(ipaAdded({ overrides, isSelected: true }));
+    };
+
+    return { region: 'bbox', saveToGallery: true, onSave };
+  }, [defaultIPAdapter, dispatch]);
+  const saveBboxAsIPAdapter = useSaveCanvas(saveBboxAsIPAdapterArg);
+  return saveBboxAsIPAdapter;
+};
+
+export const useSaveBboxAsRasterLayer = () => {
+  const dispatch = useAppDispatch();
+  const saveBboxAsRasterLayerArg = useMemo<UseSaveCanvasArg>(() => {
+    const onSave = (imageDTO: ImageDTO, rect: Rect) => {
+      const overrides: Partial<CanvasRasterLayerState> = {
+        objects: [imageDTOToImageObject(imageDTO)],
+        position: { x: rect.x, y: rect.y },
+      };
+      dispatch(rasterLayerAdded({ overrides, isSelected: true }));
+    };
+
+    return { region: 'bbox', saveToGallery: true, onSave };
+  }, [dispatch]);
+  const saveBboxAsRasterLayer = useSaveCanvas(saveBboxAsRasterLayerArg);
+  return saveBboxAsRasterLayer;
+};
+
+export const useSaveBboxAsControlLayer = () => {
+  const dispatch = useAppDispatch();
+  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
+
+  const saveBboxAsControlLayerArg = useMemo<UseSaveCanvasArg>(() => {
+    const onSave = (imageDTO: ImageDTO, rect: Rect) => {
+      const overrides: Partial<CanvasControlLayerState> = {
+        objects: [imageDTOToImageObject(imageDTO)],
+        controlAdapter: defaultControlAdapter,
+        position: { x: rect.x, y: rect.y },
+      };
+      dispatch(controlLayerAdded({ overrides, isSelected: true }));
+    };
+
+    return { region: 'bbox', saveToGallery: true, onSave };
+  }, [defaultControlAdapter, dispatch]);
+  const saveBboxAsControlLayer = useSaveCanvas(saveBboxAsControlLayerArg);
+  return saveBboxAsControlLayer;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts

@@ -1,7 +1,7 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasResetLayerHotkey.ts

@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { entityReset } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { isMaskEntityIdentifier } from 'features/controlLayers/store/types';
 import { useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -24,8 +25,8 @@ export function useCanvasResetLayerHotkey() {
   }, [dispatch, selectedEntityIdentifier]);
 
   const isResetEnabled = useMemo(
-    () => selectedEntityIdentifier?.type === 'inpaint_mask',
-    [selectedEntityIdentifier?.type]
+    () => selectedEntityIdentifier !== null && isMaskEntityIdentifier(selectedEntityIdentifier),
+    [selectedEntityIdentifier]
   );
 
   useHotkeys('shift+c', resetSelectedLayer, { enabled: isResetEnabled }, [isResetEnabled, resetSelectedLayer]);

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityAdapter.ts

@@ -1,26 +0,0 @@
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterControlLayer';
-import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterInpaintMask';
-import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterRasterLayer';
-import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterRegionalGuidance';
-import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import { useMemo } from 'react';
-import { assert } from 'tsafe';
-
-export const useEntityAdapter = (
-  entityIdentifier: CanvasEntityIdentifier
-):
-  | CanvasEntityAdapterRasterLayer
-  | CanvasEntityAdapterControlLayer
-  | CanvasEntityAdapterInpaintMask
-  | CanvasEntityAdapterRegionalGuidance => {
-  const canvasManager = useCanvasManager();
-
-  const adapter = useMemo(() => {
-    const adapter = canvasManager.getAdapter(entityIdentifier);
-    assert(adapter, 'Entity adapter not found');
-    return adapter;
-  }, [canvasManager, entityIdentifier]);
-
-  return adapter;
-};

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityFilter.ts

@@ -0,0 +1,75 @@
+import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import type { AnyObjectRenderer } from 'features/controlLayers/konva/CanvasObject/types';
+import { getEmptyRect } from 'features/controlLayers/konva/util';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import type { CanvasEntityIdentifier, Rect } from 'features/controlLayers/store/types';
+import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
+import { atom } from 'nanostores';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+
+// When the entity is empty (the rect has no size) or there are no renderers, we have nothing to filter. Because the
+// entity is dynamic, and we need reactivity on these values, we need to do a little hack. These fallback objects
+// can be used to provide a default value for the useStore and useSyncExternalStore hooks, which require _some_ value
+// to be used.
+const $fallbackPixelRect = atom<Rect>(getEmptyRect());
+const fallbackRenderersMap = new SyncableMap<string, AnyObjectRenderer>();
+
+export const useEntityFilter = (entityIdentifier: CanvasEntityIdentifier | null) => {
+  const canvasManager = useCanvasManager();
+  const adapter = useEntityAdapterSafe(entityIdentifier);
+  const isStaging = useAppSelector(selectIsStaging);
+  const isBusy = useCanvasIsBusy();
+  // Use the fallback pixel rect if the adapter is not available
+  const pixelRect = useStore(adapter?.transformer.$pixelRect ?? $fallbackPixelRect);
+  // Use the fallback renderers map if the adapter is not available
+  const renderers = useSyncExternalStore(
+    adapter?.renderer.renderers.subscribe ?? fallbackRenderersMap.subscribe,
+    adapter?.renderer.renderers.getSnapshot ?? fallbackRenderersMap.getSnapshot
+  );
+
+  const isDisabled = useMemo(() => {
+    if (!entityIdentifier) {
+      return true;
+    }
+    if (!isFilterableEntityIdentifier(entityIdentifier)) {
+      return true;
+    }
+    if (!adapter) {
+      return true;
+    }
+    if (isBusy || isStaging) {
+      return true;
+    }
+    if (pixelRect.width === 0 || pixelRect.height === 0) {
+      return true;
+    }
+    if (renderers.size === 0) {
+      return true;
+    }
+    return false;
+  }, [entityIdentifier, adapter, isBusy, isStaging, pixelRect.width, pixelRect.height, renderers.size]);
+
+  const start = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    if (!entityIdentifier) {
+      return;
+    }
+    if (!isFilterableEntityIdentifier(entityIdentifier)) {
+      return;
+    }
+    const adapter = canvasManager.getAdapter(entityIdentifier);
+    if (!adapter) {
+      return;
+    }
+    adapter.filterer.start();
+  }, [isDisabled, entityIdentifier, canvasManager]);
+
+  return { isDisabled, start } as const;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityTransform.ts

@@ -0,0 +1,72 @@
+import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import type { AnyObjectRenderer } from 'features/controlLayers/konva/CanvasObject/types';
+import { getEmptyRect } from 'features/controlLayers/konva/util';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import type { CanvasEntityIdentifier, Rect } from 'features/controlLayers/store/types';
+import { isTransformableEntityIdentifier } from 'features/controlLayers/store/types';
+import { atom } from 'nanostores';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+
+// When the entity is empty (the rect has no size) or there are no renderers, we have nothing to transform. Because the
+// entity is dynamic, and we need reactivity on these values, we need to do a little hack. These fallback objects
+// can be used to provide a default value for the useStore and useSyncExternalStore hooks, which require _some_ value
+// to be used.
+const $fallbackPixelRect = atom<Rect>(getEmptyRect());
+const fallbackRenderersMap = new SyncableMap<string, AnyObjectRenderer>();
+
+export const useEntityTransform = (entityIdentifier: CanvasEntityIdentifier | null) => {
+  const canvasManager = useCanvasManager();
+  const adapter = useEntityAdapterSafe(entityIdentifier);
+  const isStaging = useAppSelector(selectIsStaging);
+  const isBusy = useCanvasIsBusy();
+  // Use the fallback pixel rect if the adapter is not available
+  const pixelRect = useStore(adapter?.transformer.$pixelRect ?? $fallbackPixelRect);
+  // Use the fallback renderers map if the adapter is not available
+  const renderers = useSyncExternalStore(
+    adapter?.renderer.renderers.subscribe ?? fallbackRenderersMap.subscribe,
+    adapter?.renderer.renderers.getSnapshot ?? fallbackRenderersMap.getSnapshot
+  );
+
+  const start = useCallback(() => {
+    if (!entityIdentifier) {
+      return;
+    }
+    if (!isTransformableEntityIdentifier(entityIdentifier)) {
+      return;
+    }
+    const adapter = canvasManager.getAdapter(entityIdentifier);
+    if (!adapter) {
+      return;
+    }
+    adapter.transformer.startTransform();
+  }, [entityIdentifier, canvasManager]);
+
+  const isDisabled = useMemo(() => {
+    if (!entityIdentifier) {
+      return true;
+    }
+    if (!isTransformableEntityIdentifier(entityIdentifier)) {
+      return true;
+    }
+    if (!adapter) {
+      return true;
+    }
+    if (isBusy || isStaging) {
+      return true;
+    }
+    if (pixelRect.width === 0 || pixelRect.height === 0) {
+      return true;
+    }
+    if (renderers.size === 0) {
+      return true;
+    }
+    return false;
+  }, [entityIdentifier, adapter, isBusy, isStaging, pixelRect.width, pixelRect.height, renderers.size]);
+
+  return { isDisabled, start } as const;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityTypeString.ts

@@ -2,25 +2,25 @@ import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const useEntityTypeString = (type: CanvasEntityIdentifier['type']): string => {
+export const useEntityTypeString = (type: CanvasEntityIdentifier['type'], plural: boolean = false): string => {
   const { t } = useTranslation();
 
   const typeString = useMemo(() => {
     switch (type) {
       case 'control_layer':
-        return t('controlLayers.controlLayer');
+        return plural ? t('controlLayers.controlLayer_withCount_other') : t('controlLayers.controlLayer');
       case 'raster_layer':
-        return t('controlLayers.rasterLayer');
+        return plural ? t('controlLayers.rasterLayer_withCount_other') : t('controlLayers.rasterLayer');
       case 'inpaint_mask':
-        return t('controlLayers.inpaintMask');
+        return plural ? t('controlLayers.inpaintMask_withCount_other') : t('controlLayers.inpaintMask');
       case 'regional_guidance':
-        return t('controlLayers.regionalGuidance');
+        return plural ? t('controlLayers.regionalGuidance_withCount_other') : t('controlLayers.regionalGuidance');
       case 'ip_adapter':
-        return t('controlLayers.globalIPAdapter');
+        return plural ? t('controlLayers.globalIPAdapter_withCount_other') : t('controlLayers.globalIPAdapter');
       default:
         return '';
     }
-  }, [type, t]);
+  }, [type, plural, t]);
 
   return typeString;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts

@@ -0,0 +1,58 @@
+import { useStore } from '@nanostores/react';
+import { $socket } from 'app/hooks/useSocketIO';
+import { logger } from 'app/logging/logger';
+import { useAppStore } from 'app/store/nanostores/store';
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
+import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import Konva from 'konva';
+import { useLayoutEffect, useState } from 'react';
+import { useDevicePixelRatio } from 'use-device-pixel-ratio';
+
+const log = logger('canvas');
+
+// This will log warnings when layers > 5
+Konva.showWarnings = import.meta.env.MODE === 'development';
+
+const useKonvaPixelRatioWatcher = () => {
+  useAssertSingleton('useKonvaPixelRatioWatcher');
+
+  const dpr = useDevicePixelRatio({ round: false });
+
+  useLayoutEffect(() => {
+    Konva.pixelRatio = dpr;
+  }, [dpr]);
+};
+
+export const useInvokeCanvas = (): ((el: HTMLDivElement | null) => void) => {
+  useAssertSingleton('useInvokeCanvas');
+  useKonvaPixelRatioWatcher();
+  const store = useAppStore();
+  const socket = useStore($socket);
+  const [container, containerRef] = useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    log.debug('Initializing renderer');
+    if (!container) {
+      // Nothing to clean up
+      log.debug('No stage container, skipping initialization');
+      return () => {};
+    }
+
+    if (!socket) {
+      log.debug('Socket not connected, skipping initialization');
+      return () => {};
+    }
+
+    const currentManager = $canvasManager.get();
+    if (currentManager) {
+      currentManager.stage.setContainer(container);
+      return;
+    }
+
+    const manager = new CanvasManager(container, store, socket);
+    manager.initialize();
+  }, [container, socket, store]);
+
+  return containerRef;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts

@@ -1,69 +0,0 @@
-import { createMemoizedAppSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { deepClone } from 'common/util/deepClone';
-import { selectBase } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
-import type {
-  CanvasEntityIdentifier,
-  ControlNetConfig,
-  IPAdapterConfig,
-  T2IAdapterConfig,
-} from 'features/controlLayers/store/types';
-import { initialControlNet, initialIPAdapter, initialT2IAdapter } from 'features/controlLayers/store/types';
-import { zModelIdentifierField } from 'features/nodes/types/common';
-import { useMemo } from 'react';
-import { useControlNetAndT2IAdapterModels, useIPAdapterModels } from 'services/api/hooks/modelsByType';
-
-export const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIdentifier<'control_layer'>) => {
-  const selectControlAdapter = useMemo(
-    () =>
-      createMemoizedAppSelector(selectCanvasSlice, (canvas) => {
-        const layer = selectEntityOrThrow(canvas, entityIdentifier);
-        return layer.controlAdapter;
-      }),
-    [entityIdentifier]
-  );
-  const controlAdapter = useAppSelector(selectControlAdapter);
-  return controlAdapter;
-};
-
-/** @knipignore */
-export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig => {
-  const [modelConfigs] = useControlNetAndT2IAdapterModels();
-
-  const baseModel = useAppSelector(selectBase);
-
-  const defaultControlAdapter = useMemo(() => {
-    const compatibleModels = modelConfigs.filter((m) => (baseModel ? m.base === baseModel : true));
-    const model = compatibleModels[0] ?? modelConfigs[0] ?? null;
-    const controlAdapter = model?.type === 't2i_adapter' ? deepClone(initialT2IAdapter) : deepClone(initialControlNet);
-
-    if (model) {
-      controlAdapter.model = zModelIdentifierField.parse(model);
-    }
-
-    return controlAdapter;
-  }, [baseModel, modelConfigs]);
-
-  return defaultControlAdapter;
-};
-
-export const useDefaultIPAdapter = (): IPAdapterConfig => {
-  const [modelConfigs] = useIPAdapterModels();
-
-  const baseModel = useAppSelector(selectBase);
-
-  const defaultControlAdapter = useMemo(() => {
-    const compatibleModels = modelConfigs.filter((m) => (baseModel ? m.base === baseModel : true));
-    const model = compatibleModels[0] ?? modelConfigs[0] ?? null;
-    const ipAdapter = deepClone(initialIPAdapter);
-
-    if (model) {
-      ipAdapter.model = zModelIdentifierField.parse(model);
-    }
-
-    return ipAdapter;
-  }, [baseModel, modelConfigs]);
-
-  return defaultControlAdapter;
-};

invokeai/frontend/web/src/features/controlLayers/hooks/useNextPrevEntity.ts

@@ -61,16 +61,19 @@ export const useNextPrevEntityHotkeys = () => {
 
   useHotkeys(
     // “ === alt+[
-    ['alt+[', '“'],
+    ['“'],
     selectPrevEntity,
     { preventDefault: true, ignoreModifiers: true },
     [selectPrevEntity]
   );
+
+  useHotkeys(['alt+['], selectPrevEntity, { preventDefault: true }, [selectPrevEntity]);
   useHotkeys(
     // ‘ === alt+]
-    ['alt+]', '‘'],
+    ['‘'],
     selectNextEntity,
     { preventDefault: true, ignoreModifiers: true },
     [selectNextEntity]
   );
+  useHotkeys(['alt+]'], selectNextEntity, { preventDefault: true }, [selectNextEntity]);
 };