chore: release v4.2.9.dev12

- Rely on redux + reselect more
- Remove all nanostores that simply "mirrored" redux state in favor of direct subscriptions to redux store
- Add abstractions for creating redux subs and running selectors
- Add `initialize` method to CanvasModuleBase, for post-instantiation tasks
- Reduce local caching of state in modules to a minimum

invokeai/app/api/routers/session_queue.py

@@ -11,7 +11,7 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByDestinationResult,
+    CancelByOriginResult,
     ClearResult,
     EnqueueBatchResult,
     PruneResult,
@@ -107,18 +107,16 @@ async def cancel_by_batch_ids(
 
 
 @session_queue_router.put(
-    "/{queue_id}/cancel_by_destination",
-    operation_id="cancel_by_destination",
+    "/{queue_id}/cancel_by_origin",
+    operation_id="cancel_by_origin",
     responses={200: {"model": CancelByBatchIDsResult}},
 )
-async def cancel_by_destination(
+async def cancel_by_origin(
     queue_id: str = Path(description="The queue id to perform this operation on"),
-    destination: str = Query(description="The destination to cancel all queue items for"),
-) -> CancelByDestinationResult:
+    origin: str = Query(description="The origin to cancel all queue items for"),
+) -> CancelByOriginResult:
     """Immediately cancels all queue items with the given origin"""
-    return ApiDependencies.invoker.services.session_queue.cancel_by_destination(
-        queue_id=queue_id, destination=destination
-    )
+    return ApiDependencies.invoker.services.session_queue.cancel_by_origin(queue_id=queue_id, origin=origin)
 
 
 @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,
-    CancelByDestinationResult,
+    CancelByOriginResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -97,8 +97,8 @@ class SessionQueueBase(ABC):
         pass
 
     @abstractmethod
-    def cancel_by_destination(self, queue_id: str, destination: str) -> CancelByDestinationResult:
-        """Cancels all queue items with the given batch destination"""
+    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
+        """Cancels all queue items with the given batch origin"""
         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 CancelByDestinationResult(CancelByBatchIDsResult):
-    """Result of canceling by a destination"""
+class CancelByOriginResult(BaseModel):
+    """Result of canceling by list of batch ids"""
 
-    pass
+    canceled: int = Field(..., description="Number of queue items canceled")
 
 
 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,
-    CancelByDestinationResult,
+    CancelByOriginResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -426,19 +426,19 @@ class SqliteSessionQueue(SessionQueueBase):
             self.__lock.release()
         return CancelByBatchIDsResult(canceled=count)
 
-    def cancel_by_destination(self, queue_id: str, destination: str) -> CancelByDestinationResult:
+    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
         try:
             current_queue_item = self.get_current(queue_id)
             self.__lock.acquire()
             where = """--sql
                 WHERE
                   queue_id == ?
-                  AND destination == ?
+                  AND origin == ?
                   AND status != 'canceled'
                   AND status != 'completed'
                   AND status != 'failed'
                 """
-            params = (queue_id, destination)
+            params = (queue_id, origin)
             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.destination == destination:
+            if current_queue_item is not None and current_queue_item.origin == origin:
                 self._set_queue_item_status(current_queue_item.item_id, "canceled")
         except Exception:
             self.__conn.rollback()
             raise
         finally:
             self.__lock.release()
-        return CancelByDestinationResult(canceled=count)
+        return CancelByOriginResult(canceled=count)
 
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         try:

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

@@ -32,9 +32,7 @@ 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:
@@ -195,11 +193,6 @@ 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,14 +16,6 @@ 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,8 +11,6 @@ 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.34",
+    "@invoke-ai/ui-library": "^0.0.32",
     "@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.1.2",
+    "react-resizable-panels": "^2.0.23",
     "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.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)
+    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)
   '@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.1.2
-    version: 2.1.2(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^2.0.23
+    version: 2.0.23(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.2(@types/react@18.3.3)(react@18.3.1)
+      react-focus-lock: 2.13.0(@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.6.0(@types/react@18.3.3)(react@18.3.1)
+      react-remove-scroll: 2.5.10(@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.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==}
+  /@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==}
     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.2(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-T/7bsofxYqnod2xadvuwjGKHOoL5GH7/EIPI5UyEvaU/c2CcphvGI371opFtuY/SYdbMsNiuF4HsHQ50nA/TKQ==}
+  /react-focus-lock@2.13.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-w7aIcTwZwNzUp2fYQDMICy+khFwVmKmOrLF8kNsPS+dz4Oi/oxoVJ2wCMVvX6rWGriM/+mYaTyp1MRmkcs2amw==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -10147,6 +10147,25 @@ 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'}
@@ -10166,27 +10185,8 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
     dev: false
 
-  /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==}
+  /react-resizable-panels@2.0.23(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-8ZKTwTU11t/FYwiwhMdtZYYyFxic5U5ysRu2YwfkAgDbUJXFvnWSJqhnzkSlW+mnDoNAzDCrJhdOSXBPA76wug==}
     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,14 +127,7 @@
         "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",
-        "selectForCompare": "Zum Vergleichen auswählen",
-        "compareImage": "Bilder vergleichen",
-        "exitSearch": "Suche beenden",
-        "newestFirst": "Neueste zuerst",
-        "oldestFirst": "Älteste zuerst",
-        "openInViewer": "Im Viewer öffnen",
-        "swapImages": "Bilder tauschen"
+        "alwaysShowImageSizeBadge": "Zeige immer Bilder Größe Abzeichen"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tastenkürzel",
@@ -638,8 +631,7 @@
         "archived": "Archiviert",
         "noBoards": "Kein {boardType}} Ordner",
         "hideBoards": "Ordner verstecken",
-        "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."
+        "viewBoards": "Ordner ansehen"
     },
     "controlnet": {
         "showAdvanced": "Zeige Erweitert",
@@ -789,9 +781,7 @@
         "batchFieldValues": "Stapelverarbeitungswerte",
         "batchQueued": "Stapelverarbeitung eingereiht",
         "graphQueued": "Graph eingereiht",
-        "graphFailedToQueue": "Fehler beim Einreihen des Graphen",
-        "generations_one": "Generation",
-        "generations_other": "Generationen"
+        "graphFailedToQueue": "Fehler beim Einreihen des Graphen"
     },
     "metadata": {
         "negativePrompt": "Negativ Beschreibung",
@@ -1156,10 +1146,5 @@
         "noMatchingTriggers": "Keine passenden Trigger",
         "addPromptTrigger": "Prompt-Trigger hinzufügen",
         "compatibleEmbeddings": "Kompatible Einbettungen"
-    },
-    "ui": {
-        "tabs": {
-            "queue": "Warteschlange"
-        }
     }
 }

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

@@ -93,7 +93,6 @@
         "copy": "Copy",
         "copyError": "$t(gallery.copy) Error",
         "on": "On",
-        "off": "Off",
         "or": "or",
         "checkpoint": "Checkpoint",
         "communityLabel": "Community",
@@ -135,7 +134,6 @@
         "nodes": "Workflows",
         "notInstalled": "Not $t(common.installed)",
         "openInNewTab": "Open in New Tab",
-        "openInViewer": "Open in Viewer",
         "orderBy": "Order By",
         "outpaint": "outpaint",
         "outputs": "Outputs",
@@ -375,7 +373,6 @@
         "useCache": "Use Cache"
     },
     "gallery": {
-        "gallery": "Gallery",
         "alwaysShowImageSizeBadge": "Always Show Image Size Badge",
         "assets": "Assets",
         "autoAssignBoardOnClick": "Auto-Assign Board on Click",
@@ -388,11 +385,11 @@
         "deleteImage_one": "Delete Image",
         "deleteImage_other": "Delete {{count}} Images",
         "deleteImagePermanent": "Deleted images cannot be restored.",
-        "displayBoardSearch": "Board Search",
-        "displaySearch": "Image Search",
+        "displayBoardSearch": "Display Board Search",
+        "displaySearch": "Display Search",
         "download": "Download",
         "exitBoardSearch": "Exit Board Search",
-        "exitSearch": "Exit Image Search",
+        "exitSearch": "Exit Search",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",
         "gallerySettings": "Gallery Settings",
@@ -438,8 +435,7 @@
         "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.",
-        "toggleMiniViewer": "Toggle Mini Viewer"
+        "compareHelp4": "Press <Kbd>Z</Kbd> or <Kbd>Esc</Kbd> to exit."
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",
@@ -1018,8 +1014,6 @@
             "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",
@@ -1051,11 +1045,12 @@
         "scaledHeight": "Scaled H",
         "scaledWidth": "Scaled W",
         "scheduler": "Scheduler",
-        "seamlessXAxis": "Seamless X Axis",
-        "seamlessYAxis": "Seamless Y Axis",
+        "seamlessXAxis": "Seamless Tiling X Axis",
+        "seamlessYAxis": "Seamless Tiling Y Axis",
         "seed": "Seed",
         "imageActions": "Image Actions",
-        "sendToCanvas": "Send To Canvas",
+        "sendToImg2Img": "Send to Image to Image",
+        "sendToUnifiedCanvas": "Send To Unified Canvas",
         "sendToUpscale": "Send To Upscale",
         "showOptionsPanel": "Show Side Panel (O or T)",
         "shuffle": "Shuffle Seed",
@@ -1196,8 +1191,8 @@
         "problemSavingMaskDesc": "Unable to export mask",
         "prunedQueue": "Pruned Queue",
         "resetInitialImage": "Reset Initial Image",
-        "sentToCanvas": "Sent to Canvas",
-        "sentToUpscale": "Sent to Upscale",
+        "sentToImageToImage": "Sent To Image To Image",
+        "sentToUnifiedCanvas": "Sent to Unified Canvas",
         "serverError": "Server Error",
         "sessionRef": "Session: {{sessionId}}",
         "setAsCanvasInitialImage": "Set as canvas initial image",
@@ -1660,14 +1655,9 @@
     },
     "controlLayers": {
         "bookmark": "Bookmark for Quick Switch",
-        "fitBboxToLayers": "Fit Bbox To Layers",
         "removeBookmark": "Remove Bookmark",
-        "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",
+        "saveCanvasToGallery": "Save Canvas To Gallery",
+        "saveBboxToGallery": "Save Bbox To Gallery",
         "savedToGalleryOk": "Saved to Gallery",
         "savedToGalleryError": "Error saving to gallery",
         "mergeVisible": "Merge Visible",
@@ -1720,8 +1710,6 @@
         "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",
@@ -1760,8 +1748,6 @@
         "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",
@@ -1803,19 +1789,9 @@
             "filter": "Filter",
             "filters": "Filters",
             "filterType": "Filter Type",
-            "autoProcess": "Auto Process",
-            "reset": "Reset",
-            "process": "Process",
+            "preview": "Preview",
             "apply": "Apply",
-            "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"
-            }
+            "cancel": "Cancel"
         },
         "transform": {
             "transform": "Transform",
@@ -1823,28 +1799,6 @@
             "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": {
@@ -1931,9 +1885,7 @@
             "queue": "Queue",
             "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
             "upscaling": "Upscaling",
-            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
-            "gallery": "Gallery",
-            "galleryTab": "$t(ui.tabs.gallery) $t(common.tab)"
+            "upscalingTab": "$t(ui.tabs.upscaling) $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": "Eliminar {{count}} Imágenes",
-        "deleteImage_other": "Eliminar {{count}} Imágenes",
+        "deleteImage_many": "",
+        "deleteImage_other": "",
         "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 aplicación",
+        "appHotkeys": "Atajos de applicació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. Al Seleccionar 'Borrar Solo el Panel' transferirá las imágenes a un estado sin categorizar.",
+        "deletedBoardsCannotbeRestored": "Los paneles eliminados no se pueden restaurar",
         "move": "Mover",
         "menuItemAutoAdd": "Agregar automáticamente a este panel",
         "searchBoard": "Buscando paneles…",
@@ -549,13 +549,7 @@
         "imagesWithCount_other": "{{count}} imágenes",
         "assetsWithCount_one": "{{count}} activo",
         "assetsWithCount_many": "{{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"
+        "assetsWithCount_other": "{{count}} activos"
     },
     "accordions": {
         "compositing": {

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

@@ -496,9 +496,7 @@
         "main": "Principali",
         "noModelsInstalledDesc1": "Installa i modelli con",
         "ipAdapters": "Adattatori IP",
-        "noMatchingModels": "Nessun modello corrispondente",
-        "starterModelsInModelManager": "I modelli iniziali possono essere trovati in Gestione Modelli",
-        "spandrelImageToImage": "Immagine a immagine (Spandrel)"
+        "noMatchingModels": "Nessun modello corrispondente"
     },
     "parameters": {
         "images": "Immagini",
@@ -512,7 +510,7 @@
         "perlinNoise": "Rumore Perlin",
         "type": "Tipo",
         "strength": "Forza",
-        "upscaling": "Amplia",
+        "upscaling": "Ampliamento",
         "scale": "Scala",
         "imageFit": "Adatta l'immagine iniziale alle dimensioni di output",
         "scaleBeforeProcessing": "Scala prima dell'elaborazione",
@@ -595,7 +593,7 @@
         "globalPositivePromptPlaceholder": "Prompt positivo globale",
         "globalNegativePromptPlaceholder": "Prompt negativo globale",
         "processImage": "Elabora Immagine",
-        "sendToUpscale": "Invia a Amplia",
+        "sendToUpscale": "Invia a Ampliare",
         "postProcessing": "Post-elaborazione (Shift + U)"
     },
     "settings": {
@@ -1422,7 +1420,7 @@
         "paramUpscaleMethod": {
             "heading": "Metodo di ampliamento",
             "paragraphs": [
-                "Metodo utilizzato per ampliare l'immagine per la correzione ad alta risoluzione."
+                "Metodo utilizzato per eseguire l'ampliamento dell'immagine per la correzione ad alta risoluzione."
             ]
         },
         "patchmatchDownScaleSize": {
@@ -1530,7 +1528,7 @@
         },
         "upscaleModel": {
             "paragraphs": [
-                "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."
+                "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."
             ],
             "heading": "Modello di ampliamento"
         },
@@ -1722,27 +1720,26 @@
             "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
             "queue": "Coda",
             "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
-            "upscaling": "Amplia",
+            "upscaling": "Ampliamento",
             "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 (immagine a immagine)",
+        "upscaleModelDesc": "Modello per l'ampliamento (da 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.",
-        "upscale": "Amplia"
+        "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata."
     },
     "upsell": {
         "inviteTeammates": "Invita collaboratori",
@@ -1792,7 +1789,6 @@
         "positivePromptColumn": "'prompt' o 'positive_prompt'",
         "noTemplates": "Nessun modello",
         "acceptedColumnsKeys": "Colonne/chiavi accettate:",
-        "templateActions": "Azioni modello",
-        "promptTemplateCleared": "Modello di prompt cancellato"
+        "templateActions": "Azioni modello"
     }
 }

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

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

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

@@ -154,8 +154,7 @@
         "displaySearch": "显示搜索",
         "stretchToFit": "拉伸以适应",
         "exitCompare": "退出对比",
-        "compareHelp1": "在点击图库中的图片或使用箭头键切换比较图片时，请按住<Kbd>Alt</Kbd> 键。",
-        "go": "运行"
+        "compareHelp1": "在点击图库中的图片或使用箭头键切换比较图片时，请按住<Kbd>Alt</Kbd> 键。"
     },
     "hotkeys": {
         "keyboardShortcuts": "快捷键",
@@ -495,9 +494,7 @@
         "huggingFacePlaceholder": "所有者或模型名称",
         "huggingFaceRepoID": "HuggingFace仓库ID",
         "loraTriggerPhrases": "LoRA 触发词",
-        "ipAdapters": "IP适配器",
-        "spandrelImageToImage": "图生图(Spandrel)",
-        "starterModelsInModelManager": "您可以在模型管理器中找到初始模型"
+        "ipAdapters": "IP适配器"
     },
     "parameters": {
         "images": "图像",
@@ -698,9 +695,7 @@
         "outOfMemoryErrorDesc": "您当前的生成设置已超出系统处理能力.请调整设置后再次尝试.",
         "parametersSet": "参数已恢复",
         "errorCopied": "错误信息已复制",
-        "modelImportCanceled": "模型导入已取消",
-        "importFailed": "导入失败",
-        "importSuccessful": "导入成功"
+        "modelImportCanceled": "模型导入已取消"
     },
     "unifiedCanvas": {
         "layer": "图层",
@@ -1710,55 +1705,12 @@
         "missingModelsWarning": "请访问<LinkComponent>模型管理器</LinkComponent> 安装所需的模型：",
         "mainModelDesc": "主模型（SD1.5或SDXL架构）",
         "exceedsMaxSize": "放大设置超出了最大尺寸限制",
-        "exceedsMaxSizeDetails": "最大放大限制是 {{maxUpscaleDimension}}x{{maxUpscaleDimension}} 像素.请尝试一个较小的图像或减少您的缩放选择.",
-        "upscale": "放大"
+        "exceedsMaxSizeDetails": "最大放大限制是 {{maxUpscaleDimension}}x{{maxUpscaleDimension}} 像素.请尝试一个较小的图像或减少您的缩放选择."
     },
     "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,16 +21,10 @@ 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:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+          '0px 0px 0px 1px var(--invoke-colors-base-900), 0px 0px 0px 4px var(--invoke-colors-green-400)',
         hoverSelectedForCompare:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+          '0px 0px 0px 1px var(--invoke-colors-base-900), 0px 0px 0px 4px var(--invoke-colors-green-300)',
       },
     });
   }, [direction]);

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

@@ -1,5 +1,5 @@
 import type { TypedStartListening } from '@reduxjs/toolkit';
-import { addListener, createListenerMiddleware } from '@reduxjs/toolkit';
+import { 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,7 +9,6 @@ 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';
@@ -41,8 +40,6 @@ 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.
  *
@@ -122,5 +119,3 @@ addDynamicPromptsListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
 // addControlAdapterPreprocessor(startAppListening);
-
-addCancellationsListeners(startAppListening);

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

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

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

@@ -1,137 +0,0 @@
-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,12 +4,8 @@ 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/store/canvasSlice';
-import {
-  selectIsStaging,
-  stagingAreaReset,
-  stagingAreaStartedStaging,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
+import { sessionStagingAreaReset, sessionStartedStaging } from 'features/controlLayers/store/canvasSessionSlice';
 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';
@@ -35,14 +31,14 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
       let didStartStaging = false;
 
-      if (!selectIsStaging(state) && state.canvasSettings.sendToCanvas) {
-        dispatch(stagingAreaStartedStaging());
+      if (!state.canvasSession.isStaging && state.canvasSettings.sendToCanvas) {
+        dispatch(sessionStartedStaging());
         didStartStaging = true;
       }
 
       const abortStaging = () => {
-        if (didStartStaging && selectIsStaging(getState())) {
-          dispatch(stagingAreaReset());
+        if (didStartStaging && getState().canvasSession.isStaging) {
+          dispatch(sessionStagingAreaReset());
         }
       };
 

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

@@ -1,5 +1,6 @@
 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';
@@ -10,6 +11,7 @@ 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);
@@ -23,6 +25,9 @@ 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 staging area?)
+//TODO(psyche): handle image deletion (canvas sessions?)
 
 // 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,7 +1,6 @@
 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,
@@ -13,7 +12,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, selectionChanged } from 'features/gallery/store/gallerySlice';
+import { imageToCompareChanged, isImageViewerOpenChanged, 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';
@@ -104,14 +103,11 @@ 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(state).bbox.rect;
-        const defaultControlAdapter = selectDefaultControlAdapter(state);
+        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
         const overrides: Partial<CanvasControlLayerState> = {
           objects: [imageObject],
           position: { x, y },
-          controlAdapter: defaultControlAdapter,
         };
         dispatch(controlLayerAdded({ overrides, isSelected: true }));
         return;
@@ -146,6 +142,7 @@ 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,7 +2,6 @@ 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';
@@ -45,8 +44,6 @@ 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(
@@ -70,8 +67,6 @@ 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/Bbox/calculateNewSize';
+import { calculateNewSize } from 'features/parameters/components/DocumentSize/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,12 +6,9 @@ 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';
@@ -66,7 +63,7 @@ const allReducers = {
   [stylePresetSlice.name]: stylePresetSlice.reducer,
   [paramsSlice.name]: paramsSlice.reducer,
   [canvasSettingsSlice.name]: canvasSettingsSlice.reducer,
-  [canvasStagingAreaSlice.name]: canvasStagingAreaSlice.reducer,
+  [canvasSessionSlice.name]: canvasSessionSlice.reducer,
   [lorasSlice.name]: lorasSlice.reducer,
 };
 
@@ -111,7 +108,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [stylePresetPersistConfig.name]: stylePresetPersistConfig,
   [paramsPersistConfig.name]: paramsPersistConfig,
   [canvasSettingsPersistConfig.name]: canvasSettingsPersistConfig,
-  [canvasStagingAreaPersistConfig.name]: canvasStagingAreaPersistConfig,
+  [canvasSessionPersistConfig.name]: canvasSessionPersistConfig,
   [lorasPersistConfig.name]: lorasPersistConfig,
 };
 

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

@@ -6,51 +6,18 @@ 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 } from 'react';
+import { memo, useCallback, useMemo, useState } 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;
@@ -108,11 +75,13 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     ...rest
   } = props;
 
+  const [isHovered, setIsHovered] = useState(false);
   const handleMouseOver = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       if (onMouseOver) {
         onMouseOver(e);
       }
+      setIsHovered(true);
     },
     [onMouseOver]
   );
@@ -121,6 +90,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
       if (onMouseOut) {
         onMouseOut(e);
       }
+      setIsHovered(false);
     },
     [onMouseOut]
   );
@@ -171,13 +141,10 @@ 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'}
@@ -200,6 +167,11 @@ 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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,46 @@
+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,13 +114,4 @@ export const useGlobalHotkeys = () => {
     },
     [dispatch, isModelManagerEnabled]
   );
-
-  useHotkeys(
-    isModelManagerEnabled ? '6' : '5',
-    () => {
-      dispatch(setActiveTab('gallery'));
-      setScopes([]);
-    },
-    [dispatch, isModelManagerEnabled]
-  );
 };

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

@@ -2,7 +2,6 @@ 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';
@@ -18,7 +17,6 @@ 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';
 
@@ -30,7 +28,7 @@ const LAYER_TYPE_TO_TKEY = {
   control_layer: 'controlLayers.globalControlAdapter',
 } as const;
 
-const createSelector = (templates: Templates, isConnected: boolean, canvasIsBusy: boolean) =>
+const createSelector = (templates: Templates, isConnected: boolean) =>
   createMemoizedSelector(
     [
       selectSystemSlice,
@@ -119,10 +117,6 @@ const createSelector = (templates: Templates, isConnected: boolean, canvasIsBusy
           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') });
         }
@@ -246,17 +240,10 @@ const createSelector = (templates: Templates, isConnected: boolean, canvasIsBusy
     }
   );
 
-const dummyAtom = atom(true);
-
 export const useIsReadyToEnqueue = () => {
   const templates = useStore($templates);
   const isConnected = useStore($isConnected);
-  const canvasManager = useCanvasManagerSafe();
-  const canvasIsBusy = useStore(canvasManager?.$isBusy ?? dummyAtom);
-  const selector = useMemo(
-    () => createSelector(templates, isConnected, canvasIsBusy),
-    [templates, isConnected, canvasIsBusy]
-  );
+  const selector = useMemo(() => createSelector(templates, isConnected), [templates, isConnected]);
   const value = useAppSelector(selector);
   return value;
 };

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

@@ -1,9 +1,6 @@
 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,22 +1,34 @@
 import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import {
-  useAddControlLayer,
-  useAddInpaintMask,
-  useAddIPAdapter,
-  useAddRasterLayer,
-  useAddRegionalGuidance,
-} from 'features/controlLayers/hooks/addLayerHooks';
-import { memo } from 'react';
+  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 CanvasAddEntityButtons = memo(() => {
   const { t } = useTranslation();
-  const addInpaintMask = useAddInpaintMask();
-  const addRegionalGuidance = useAddRegionalGuidance();
-  const addRasterLayer = useAddRasterLayer();
-  const addControlLayer = useAddControlLayer();
-  const addIPAdapter = useAddIPAdapter();
+  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]);
 
   return (
     <Flex flexDir="column" w="full" h="full" alignItems="center">

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

@@ -1,49 +0,0 @@
-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,6 +1,7 @@
 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 = {
@@ -14,6 +15,12 @@ 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,51 @@
+/* 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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,39 @@
+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/EntityListActionBarSelectedEntityFill.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 EntityListSelectedEntityActionBarFill = memo(() => {
+export const EntityListActionBarSelectedEntityFill = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
@@ -67,4 +67,4 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
   );
 });
 
-EntityListSelectedEntityActionBarFill.displayName = 'EntityListSelectedEntityActionBarFill';
+EntityListActionBarSelectedEntityFill.displayName = 'EntityListActionBarSelectedEntityFill';

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

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

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

@@ -1,54 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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/EntityListSelectedEntityActionBarFilterButton.tsx

@@ -1,37 +0,0 @@
-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/EntityListSelectedEntityActionBarTransformButton.tsx

@@ -1,37 +0,0 @@
-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 { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
+import { EntityListActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListActionBar';
 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">
-        <EntityListSelectedEntityActionBar />
+        <EntityListActionBar />
         <Divider py={0} />
         {!hasEntities && <CanvasAddEntityButtons />}
         {hasEntities && <CanvasEntityList />}

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

@@ -0,0 +1,145 @@
+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

@@ -1,95 +0,0 @@
-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,76 +1,64 @@
-import {
-  Button,
-  Flex,
-  Icon,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectSendToCanvas, settingsSendToCanvasChanged } from 'features/controlLayers/store/canvasSettingsSlice';
+import { IconSwitch } from 'common/components/IconSwitch';
+import {
+  selectCanvasSettingsSlice,
+  settingsSendToCanvasChanged,
+} from 'features/controlLayers/store/canvasSettingsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCaretDownBold, PiCheckBold } from 'react-icons/pi';
+import { PiImageBold, PiPaintBrushBold } from 'react-icons/pi';
 
-export const CanvasSendToToggle = memo(() => {
+const TooltipSendToGallery = memo(() => {
   const { t } = useTranslation();
-  const sendToCanvas = useAppSelector(selectSendToCanvas);
-  const dispatch = useAppDispatch();
-
-  const enableSendToCanvas = useCallback(() => {
-    dispatch(settingsSendToCanvasChanged(true));
-  }, [dispatch]);
-
-  const disableSendToCanvas = useCallback(() => {
-    dispatch(settingsSendToCanvasChanged(false));
-  }, [dispatch]);
 
   return (
-    <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>
+    <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);
+
+export const CanvasSendToToggle = memo(() => {
+  const dispatch = useAppDispatch();
+  const sendToCanvas = useAppSelector(selectSendToCanvas);
+
+  const onChange = useCallback(
+    (isChecked: boolean) => {
+      dispatch(settingsSendToCanvasChanged(isChecked));
+    },
+    [dispatch]
+  );
+
+  return (
+    <IconSwitch
+      isChecked={sendToCanvas}
+      onChange={onChange}
+      iconUnchecked={<PiImageBold />}
+      tooltipUnchecked={<TooltipSendToGallery />}
+      iconChecked={<PiPaintBrushBold />}
+      tooltipChecked={<TooltipSendToCanvas />}
+      ariaLabel="Toggle canvas mode"
+    />
   );
 });
 

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

@@ -1,104 +0,0 @@
-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,35 +1,21 @@
 import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedAppSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } 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 { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
-import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
-import { memo, useCallback, useMemo } from 'react';
+import type { ControlModeV2 } from 'features/controlLayers/store/types';
+import { memo, useCallback } 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,7 +1,10 @@
 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';
@@ -14,6 +17,8 @@ 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]);
@@ -24,8 +29,29 @@ 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();
+      }
     },
-    [onChangeModel]
+    [canvasManager.filter, entityIdentifier, modelKey, onChangeModel]
   );
 
   const getIsDisabled = useCallback(

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

@@ -1,49 +1,37 @@
-import { Button, ButtonGroup, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, Heading } 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, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiCheckBold, PiShootingStarBold, PiXBold } from 'react-icons/pi';
+import { PiCheckBold, PiShootingStarBold, PiXBold } from 'react-icons/pi';
 
-const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
+export const Filter = memo(() => {
   const { t } = useTranslation();
-  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 canvasManager = useCanvasManager();
+  const config = useStore(canvasManager.filter.$config);
+  const isFiltering = useStore(canvasManager.filter.$isFiltering);
+  const isProcessing = useStore(canvasManager.filter.$isProcessing);
 
   const onChangeFilterConfig = useCallback(
     (filterConfig: FilterConfig) => {
-      adapter.filterer.$filterConfig.set(filterConfig);
+      canvasManager.filter.$config.set(filterConfig);
     },
-    [adapter.filterer.$filterConfig]
+    [canvasManager.filter.$config]
   );
 
   const onChangeFilterType = useCallback(
     (filterType: FilterConfig['type']) => {
-      adapter.filterer.$filterConfig.set(IMAGE_FILTERS[filterType].buildDefaults());
+      canvasManager.filter.$config.set(IMAGE_FILTERS[filterType].buildDefaults());
     },
-    [adapter.filterer.$filterConfig]
+    [canvasManager.filter.$config]
   );
 
-  const onChangeAutoProcessFilter = useCallback(() => {
-    dispatch(settingsAutoProcessFilterToggled());
-  }, [dispatch]);
-
-  const isValid = useMemo(() => {
-    return IMAGE_FILTERS[config.type].validateConfig?.(config as never) ?? true;
-  }, [config]);
+  if (!isFiltering) {
+    return null;
+  }
 
   return (
     <Flex
@@ -58,56 +46,36 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
       transitionProperty="height"
       transitionDuration="normal"
     >
-      <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>
+      <Heading size="md" color="base.300" userSelect="none">
+        {t('controlLayers.filter.filter')}
+      </Heading>
       <FilterTypeSelect filterType={config.type} onChange={onChangeFilterType} />
       <FilterSettings filterConfig={config} onChange={onChangeFilterConfig} />
-      <ButtonGroup isAttached={false} size="sm" w="full">
+      <ButtonGroup isAttached={false} size="sm" alignSelf="self-end">
         <Button
           variant="ghost"
           leftIcon={<PiShootingStarBold />}
-          onClick={adapter.filterer.process}
+          onClick={canvasManager.filter.previewFilter}
           isLoading={isProcessing}
-          loadingText={t('controlLayers.filter.process')}
-          isDisabled={!isValid}
+          loadingText={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')}
+          {t('controlLayers.filter.preview')}
         </Button>
         <Button
           variant="ghost"
           leftIcon={<PiCheckBold />}
-          onClick={adapter.filterer.apply}
+          onClick={canvasManager.filter.applyFilter}
           isLoading={isProcessing}
           loadingText={t('controlLayers.filter.apply')}
-          isDisabled={!isValid || !hasProcessed}
         >
           {t('controlLayers.filter.apply')}
         </Button>
         <Button
           variant="ghost"
           leftIcon={<PiXBold />}
-          onClick={adapter.filterer.cancel}
+          onClick={canvasManager.filter.cancelFilter}
           isLoading={isProcessing}
           loadingText={t('controlLayers.filter.cancel')}
-          isDisabled={!isValid}
         >
           {t('controlLayers.filter.cancel')}
         </Button>
@@ -116,16 +84,4 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
   );
 });
 
-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,7 +10,6 @@ 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';
@@ -65,10 +64,6 @@ 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

@@ -1,125 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -0,0 +1,43 @@
+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/Bbox/calculateNewSize';
+import { calculateNewSize } from 'features/parameters/components/DocumentSize/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={2} insetInlineEnd={2} gap={1}>
+          <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
             <IAIDndImageIcon
               onClick={handleResetControlImage}
               icon={<PiArrowCounterClockwiseBold size={16} />}

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

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

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

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

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

@@ -1,16 +1,17 @@
 import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectAutoSave, settingsAutoSaveToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectCanvasSettingsSlice, 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

@@ -1,24 +0,0 @@
-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,7 +15,6 @@ 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';
@@ -40,7 +39,6 @@ export const CanvasSettingsPopover = memo(() => {
             <CanvasSettingsInvertScrollCheckbox />
             <CanvasSettingsClipToBboxCheckbox />
             <CanvasSettingsCompositeMaskedRegionsCheckbox />
-            <CanvasSettingsSnapToGridCheckbox />
             <CanvasSettingsDynamicGridSwitch />
             <CanvasSettingsShowHUDSwitch />
             <CanvasSettingsResetButton />

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

@@ -1,6 +1,5 @@
 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';
@@ -8,11 +7,9 @@ import { useTranslation } from 'react-i18next';
 export const CanvasSettingsResetButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const canvasManager = useCanvasManager();
   const onClick = useCallback(() => {
     dispatch(canvasReset());
-    canvasManager.stage.fitLayersToStage();
-  }, [canvasManager.stage, dispatch]);
+  }, [dispatch]);
   return (
     <Button onClick={onClick} colorScheme="error" size="sm">
       {t('controlLayers.resetCanvas')}

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

@@ -0,0 +1,109 @@
+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/canvasStagingAreaSlice';
+import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
 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 {
-  selectCanvasStagingAreaSlice,
-  stagingAreaImageAccepted,
-  stagingAreaNextStagedImageSelected,
-  stagingAreaPrevStagedImageSelected,
-  stagingAreaReset,
-  stagingAreaStagedImageDiscarded,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+  selectCanvasSessionSlice,
+  sessionNextStagedImageSelected,
+  sessionPrevStagedImageSelected,
+  sessionStagedImageDiscarded,
+  sessionStagingAreaImageAccepted,
+  sessionStagingAreaReset,
+} from 'features/controlLayers/store/canvasSessionSlice';
 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(
-  selectCanvasStagingAreaSlice,
-  (stagingArea) => stagingArea.selectedStagedImageIndex
+  selectCanvasSessionSlice,
+  (canvasSession) => canvasSession.selectedStagedImageIndex
 );
 
 const selectSelectedImage = createSelector(
-  [selectCanvasStagingAreaSlice, selectStagedImageIndex],
-  (stagingArea, index) => stagingArea.stagedImages[index] ?? null
+  [selectCanvasSessionSlice, selectStagedImageIndex],
+  (canvasSession, index) => canvasSession.stagedImages[index] ?? null
 );
 
-const selectImageCount = createSelector(selectCanvasStagingAreaSlice, (stagingArea) => stagingArea.stagedImages.length);
+const selectImageCount = createSelector(selectCanvasSessionSlice, (canvasSession) => canvasSession.stagedImages.length);
 
 export const StagingAreaToolbar = memo(() => {
   const dispatch = useAppDispatch();
@@ -53,18 +53,18 @@ export const StagingAreaToolbar = memo(() => {
   const { t } = useTranslation();
 
   const onPrev = useCallback(() => {
-    dispatch(stagingAreaPrevStagedImageSelected());
+    dispatch(sessionPrevStagedImageSelected());
   }, [dispatch]);
 
   const onNext = useCallback(() => {
-    dispatch(stagingAreaNextStagedImageSelected());
+    dispatch(sessionNextStagedImageSelected());
   }, [dispatch]);
 
   const onAccept = useCallback(() => {
     if (!selectedImage) {
       return;
     }
-    dispatch(stagingAreaImageAccepted({ index }));
+    dispatch(sessionStagingAreaImageAccepted({ index }));
   }, [dispatch, index, selectedImage]);
 
   const onDiscardOne = useCallback(() => {
@@ -72,14 +72,14 @@ export const StagingAreaToolbar = memo(() => {
       return;
     }
     if (imageCount === 1) {
-      dispatch(stagingAreaReset());
+      dispatch(sessionStagingAreaReset());
     } else {
-      dispatch(stagingAreaStagedImageDiscarded({ index }));
+      dispatch(sessionStagedImageDiscarded({ index }));
     }
   }, [selectedImage, imageCount, dispatch, index]);
 
   const onDiscardAll = useCallback(() => {
-    dispatch(stagingAreaReset());
+    dispatch(sessionStagingAreaReset());
   }, [dispatch]);
 
   const onToggleShouldShowStagedImage = useCallback(() => {

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

@@ -4,7 +4,6 @@ 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';
@@ -14,6 +13,8 @@ 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(() => {
@@ -26,6 +27,7 @@ export const CanvasToolbar = memo(() => {
   return (
     <CanvasManagerProviderGate>
       <Flex w="full" gap={2} alignItems="center">
+        <ToggleProgressButton />
         <ToolChooser />
         <Spacer />
         <ToolSettings />
@@ -34,9 +36,9 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarResetViewButton />
         <Spacer />
         <ToolColorPicker />
-        <CanvasToolbarFitBboxToLayersButton />
         <CanvasToolbarSaveToGalleryButton />
         <CanvasSettingsPopover />
+        <ViewerToggle />
       </Flex>
     </CanvasManagerProviderGate>
   );

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

@@ -1,25 +0,0 @@
-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/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
 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,24 +1,47 @@
 import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
-import {
-  useIsSavingCanvas,
-  useSaveBboxToGallery,
-  useSaveCanvasToGallery,
-} from 'features/controlLayers/hooks/saveCanvasHooks';
-import { memo } from 'react';
+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 { 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 isSaving = useIsSavingCanvas();
-  const saveCanvasToGallery = useSaveCanvasToGallery();
-  const saveBboxToGallery = useSaveBboxToGallery();
+  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]);
 
   return (
     <IconButton
       variant="ghost"
-      onClick={shift ? saveBboxToGallery : saveCanvasToGallery}
+      onClick={onClick}
       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/CanvasEntity/types';
+import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntityAdapter/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,11 +1,12 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
 import {
-  useAddControlLayer,
-  useAddInpaintMask,
-  useAddIPAdapter,
-  useAddRasterLayer,
-  useAddRegionalGuidance,
-} from 'features/controlLayers/hooks/addLayerHooks';
+  controlLayerAdded,
+  inpaintMaskAdded,
+  ipaAdded,
+  rasterLayerAdded,
+  rgAdded,
+} from 'features/controlLayers/store/canvasSlice';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,31 +18,26 @@ type Props = {
 
 export const CanvasEntityAddOfTypeButton = memo(({ type }: Props) => {
   const { t } = useTranslation();
-  const addInpaintMask = useAddInpaintMask();
-  const addRegionalGuidance = useAddRegionalGuidance();
-  const addRasterLayer = useAddRasterLayer();
-  const addControlLayer = useAddControlLayer();
-  const addIPAdapter = useAddIPAdapter();
-
+  const dispatch = useAppDispatch();
   const onClick = useCallback(() => {
     switch (type) {
       case 'inpaint_mask':
-        addInpaintMask();
+        dispatch(inpaintMaskAdded({ isSelected: true }));
         break;
       case 'regional_guidance':
-        addRegionalGuidance();
+        dispatch(rgAdded({ isSelected: true }));
         break;
       case 'raster_layer':
-        addRasterLayer();
+        dispatch(rasterLayerAdded({ isSelected: true }));
         break;
       case 'control_layer':
-        addControlLayer();
+        dispatch(controlLayerAdded({ isSelected: true }));
         break;
       case 'ip_adapter':
-        addIPAdapter();
+        dispatch(ipaAdded({ isSelected: true }));
         break;
     }
-  }, [addControlLayer, addIPAdapter, addInpaintMask, addRasterLayer, addRegionalGuidance, type]);
+  }, [dispatch, 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} />}
-        {canHideAll && <CanvasEntityTypeIsHiddenToggle type={type} />}
         <CanvasEntityAddOfTypeButton type={type} />
+        {canHideAll && <CanvasEntityTypeIsHiddenToggle 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,17 +1,23 @@
 import { MenuItem } from '@invoke-ai/ui-library';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
-import { memo } from 'react';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { memo, useCallback } 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 filter = useEntityFilter(entityIdentifier);
+  const isBusy = useCanvasIsBusy();
+
+  const onClick = useCallback(() => {
+    canvasManager.filter.startFilter(entityIdentifier);
+  }, [canvasManager.filter, entityIdentifier]);
 
   return (
-    <MenuItem onClick={filter.start} icon={<PiShootingStarBold />} isDisabled={filter.isDisabled}>
+    <MenuItem onClick={onClick} icon={<PiShootingStarBold />} isDisabled={isBusy}>
       {t('controlLayers.filter.filter')}
     </MenuItem>
   );

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

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

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

@@ -1,12 +1,10 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } 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';
@@ -25,8 +23,6 @@ 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') {
@@ -43,7 +39,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
               objects: [imageDTOToImageObject(result.value)],
               position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
             },
-            isMergingVisible: true,
+            deleteOthers: true,
           })
         );
         toast({ title: t('controlLayers.mergeVisibleOk') });
@@ -65,7 +61,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
               objects: [imageDTOToImageObject(result.value)],
               position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
             },
-            isMergingVisible: true,
+            deleteOthers: true,
           })
         );
         toast({ title: t('controlLayers.mergeVisibleOk') });
@@ -87,7 +83,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
       icon={<PiStackBold />}
       onClick={onClick}
       alignSelf="stretch"
-      isDisabled={entityCount <= 1 || isStaging || isBusy}
+      isDisabled={entityCount <= 1}
     />
   );
 });

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

@@ -37,20 +37,13 @@ export const CanvasEntityPreviewImage = memo(() => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const cache = useStore(adapter.renderer.$canvasCache);
   useEffect(() => {
-    if (!canvasRef.current) {
+    if (!cache || !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);
@@ -88,7 +81,6 @@ 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, true);
+  const typeString = useEntityTypeString(type);
   const onClick = useCallback<MouseEventHandler>(
     (e) => {
       e.stopPropagation();

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

@@ -1,6 +1,5 @@
 import { useStore } from '@nanostores/react';
-import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager, type CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext } from 'react';
 import { assert } from 'tsafe';
@@ -19,20 +18,8 @@ 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,10 +1,9 @@
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-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 { 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 { PropsWithChildren } from 'react';
 import { createContext, memo, useContext, useMemo, useSyncExternalStore } from 'react';
 import { assert } from 'tsafe';
@@ -106,51 +105,3 @@ 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

@@ -1,158 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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,7 +3,6 @@ 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';
 
@@ -25,8 +24,8 @@ export function useCanvasResetLayerHotkey() {
   }, [dispatch, selectedEntityIdentifier]);
 
   const isResetEnabled = useMemo(
-    () => selectedEntityIdentifier !== null && isMaskEntityIdentifier(selectedEntityIdentifier),
-    [selectedEntityIdentifier]
+    () => selectedEntityIdentifier?.type === 'inpaint_mask',
+    [selectedEntityIdentifier?.type]
   );
 
   useHotkeys('shift+c', resetSelectedLayer, { enabled: isResetEnabled }, [isResetEnabled, resetSelectedLayer]);

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

@@ -0,0 +1,26 @@
+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

@@ -1,75 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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'], plural: boolean = false): string => {
+export const useEntityTypeString = (type: CanvasEntityIdentifier['type']): string => {
   const { t } = useTranslation();
 
   const typeString = useMemo(() => {
     switch (type) {
       case 'control_layer':
-        return plural ? t('controlLayers.controlLayer_withCount_other') : t('controlLayers.controlLayer');
+        return t('controlLayers.controlLayer');
       case 'raster_layer':
-        return plural ? t('controlLayers.rasterLayer_withCount_other') : t('controlLayers.rasterLayer');
+        return t('controlLayers.rasterLayer');
       case 'inpaint_mask':
-        return plural ? t('controlLayers.inpaintMask_withCount_other') : t('controlLayers.inpaintMask');
+        return t('controlLayers.inpaintMask');
       case 'regional_guidance':
-        return plural ? t('controlLayers.regionalGuidance_withCount_other') : t('controlLayers.regionalGuidance');
+        return t('controlLayers.regionalGuidance');
       case 'ip_adapter':
-        return plural ? t('controlLayers.globalIPAdapter_withCount_other') : t('controlLayers.globalIPAdapter');
+        return t('controlLayers.globalIPAdapter');
       default:
         return '';
     }
-  }, [type, plural, t]);
+  }, [type, t]);
 
   return typeString;
 };

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

@@ -1,58 +0,0 @@
-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

@@ -0,0 +1,69 @@
+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,19 +61,16 @@ 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]);
 };