Switchable sidebars

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -98,27 +98,27 @@
      }
  }
 
- let propsSidebarSize = 0;
+ let leftSidebarSize = 0;
 
- function toggleProps() {
+ function toggleLeft() {
-     if (propsSidebarSize == 0) {
+     if (leftSidebarSize == 0) {
-         propsSidebarSize = 15;
+         leftSidebarSize = 15;
          app.resizeCanvas();
      }
      else {
-         propsSidebarSize = 0;
+         leftSidebarSize = 0;
      }
  }
 
- let queueSidebarSize = 20;
+ let rightSidebarSize = 20;
 
- function toggleQueue() {
+ function toggleRight() {
-     if (queueSidebarSize == 0) {
+     if (rightSidebarSize == 0) {
-         queueSidebarSize = 20;
+         rightSidebarSize = 20;
          app.resizeCanvas();
      }
      else {
-         queueSidebarSize = 0;
+         rightSidebarSize = 0;
      }
  }
 
@@ -186,8 +186,8 @@
 
 <div id="comfy-content" bind:this={containerElem} class:loading>
     <Splitpanes theme="comfy" on:resize={refreshView}>
-        <Pane bind:size={propsSidebarSize}>
+        <Pane bind:size={leftSidebarSize}>
-            <ComfyPaneView {app} mode="properties"/>
+            <ComfyPaneView {app} mode="properties" showSwitcher={true} />
         </Pane>
         <Pane>
             <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
@@ -199,8 +199,8 @@
                 </Pane>
             </Splitpanes>
         </Pane>
-        <Pane bind:size={queueSidebarSize}>
+        <Pane bind:size={rightSidebarSize}>
-            <ComfyPaneView {app} mode="queue"/>
+            <ComfyPaneView {app} mode="queue" showSwitcher={true} />
         </Pane>
     </Splitpanes>
     <div id="workflow-tabs">
@@ -252,11 +252,11 @@
                 <Button variant="secondary" disabled={loading} on:click={toggleGraph}>
                     Toggle Graph
                 </Button>
-                <Button variant="secondary" disabled={loading} on:click={toggleProps}>
+                <Button variant="secondary" disabled={loading} on:click={toggleLeft}>
-                    Toggle Props
+                    Toggle Left
                 </Button>
-                <Button variant="secondary" disabled={loading} on:click={toggleQueue}>
+                <Button variant="secondary" disabled={loading} on:click={toggleRight}>
-                    Toggle Queue
+                    Toggle Right
                 </Button>
                 <Button variant="secondary" disabled={loading} on:click={doSave}>
                     Save

src/lib/components/ComfyPaneView.svelte

@@ -8,18 +8,31 @@
   */
  import workflowState from "$lib/stores/workflowState";
  import type ComfyApp from "./ComfyApp";
+ import { Sliders2, LayoutTextSidebarReverse } from "svelte-bootstrap-icons";
 
  import ComfyBoxWorkflowView from "./ComfyBoxWorkflowView.svelte";
  import ComfyGraphView from "./ComfyGraphView.svelte";
  import ComfyProperties from "./ComfyProperties.svelte";
  import ComfyQueue from "./ComfyQueue.svelte";
+	import { SvelteComponent } from "svelte";
 
  export let app: ComfyApp
  export let mode: ComfyPaneMode = "none";
+ export let showSwitcher: boolean = false;
 
+ const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
+     ["properties", Sliders2],
+     ["queue", LayoutTextSidebarReverse]
+ ]
+
+ function switchMode(newMode: ComfyPaneMode) {
+     console.warn("switch", mode, newMode)
+     mode = newMode;
+ }
 </script>
 
-<div class="pane-wrapper">
+<div class="pane">
+    <div class="pane-wrapper" class:has-switcher={showSwitcher}>
         {#if mode === "activeWorkflow"}
             <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
         {:else if mode === "graph"}
@@ -31,13 +44,61 @@
         {:else}
             <div class="blank-panel">(Blank)</div>
         {/if}
+    </div>
+    {#if showSwitcher}
+        <div class="switcher">
+            {#each MODES as [theMode, icon]}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <button class="mode-button ternary"
+                        disabled={mode === theMode}
+                        class:selected={mode === theMode}
+                        on:click={() => switchMode(theMode)}>
+                    <svelte:component this={icon} width="100%" height="100%" />
+                </button>
+            {/each}
+        </div>
+    {/if}
 </div>
 
 
 <style lang="scss">
+ $button-height: 2.5rem;
+
+ .pane {
+     width: 100%;
+     height: 100%;
+
      .pane-wrapper {
          width: 100%;
          height: 100%;
-     overflow: auto;
+         overflow-x: hidden;
+         overflow-y: auto;
+         &.has-switcher {
+             height: calc(100% - $button-height);
+         }
+     }
+
+     .switcher {
+         height: $button-height;
+         display: flex;
+         flex-direction: row;
+         color: var(--comfy-accent-soft);
+
+         .mode-button {
+             height: 100%;
+             width: 100%;
+             padding: 0.5rem;
+
+             @include square-button;
+
+             &:hover {
+                 color: var(--body-text-color);
+             }
+             &.selected {
+                 color: var(--body-text-color);
+                 background-color: var(--panel-background-fill);
+             }
+         }
+     }
  }
 </style>

src/lib/components/ComfyQueue.svelte

@@ -354,10 +354,11 @@
 <style lang="scss">
  $pending-height: 200px;
  $display-mode-buttons-height: 2rem;
+ $pane-mode-buttons-height: 2.5rem;
  $bottom-bar-height: 70px;
  $workflow-tabs-height: 2.5rem;
  $mode-buttons-height: 30px;
- $queue-height: calc(100vh - #{$pending-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem);
+ $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem);
  $queue-height-history: calc(#{$queue-height} - #{$display-mode-buttons-height});
 
  .prompt-modal-header {

src/lib/widgets/MultiRegionWidget.svelte

@@ -86,7 +86,7 @@ const COLOR_MAP: [string, string][] = [
      _node ||= node;
      bboxes ||= $nodeValue
 
-     console.debug("[MultiRegionWidget] Recreate!", bboxes, imageElem, _node)
+     // console.debug("[MultiRegionWidget] Recreate!", bboxes, _node)
 
      if (_node != null && imageElem != null && imageContainer != null) {
          selectedIndex = clamp(selectedIndex, 0, bboxes.length - 1);