From da917a2a506df0c00fc5ccc834edf49f2a22fefe Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 24 May 2023 15:04:23 -0500
Subject: [PATCH] Switchable sidebars

---
 .../components/ComfyBoxWorkflowsView.svelte   | 36 ++++----
 src/lib/components/ComfyPaneView.svelte       | 87 ++++++++++++++++---
 src/lib/components/ComfyQueue.svelte          |  3 +-
 src/lib/widgets/MultiRegionWidget.svelte      |  2 +-
 4 files changed, 95 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/ComfyBoxWorkflowsView.svelte b/src/lib/components/ComfyBoxWorkflowsView.svelte
index 1e5f949..1a80588 100644
--- a/src/lib/components/ComfyBoxWorkflowsView.svelte
+++ b/src/lib/components/ComfyBoxWorkflowsView.svelte
@@ -98,27 +98,27 @@
      }
  }
 
- let propsSidebarSize = 0;
+ let leftSidebarSize = 0;
 
- function toggleProps() {
-     if (propsSidebarSize == 0) {
-         propsSidebarSize = 15;
+ function toggleLeft() {
+     if (leftSidebarSize == 0) {
+         leftSidebarSize = 15;
          app.resizeCanvas();
      }
      else {
-         propsSidebarSize = 0;
+         leftSidebarSize = 0;
      }
  }
 
- let queueSidebarSize = 20;
+ let rightSidebarSize = 20;
 
- function toggleQueue() {
-     if (queueSidebarSize == 0) {
-         queueSidebarSize = 20;
+ function toggleRight() {
+     if (rightSidebarSize == 0) {
+         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}>
-            <ComfyPaneView {app} mode="properties"/>
+        <Pane bind:size={leftSidebarSize}>
+            <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}>
-            <ComfyPaneView {app} mode="queue"/>
+        <Pane bind:size={rightSidebarSize}>
+            <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}>
-                    Toggle Props
+                <Button variant="secondary" disabled={loading} on:click={toggleLeft}>
+                    Toggle Left
                 </Button>
-                <Button variant="secondary" disabled={loading} on:click={toggleQueue}>
-                    Toggle Queue
+                <Button variant="secondary" disabled={loading} on:click={toggleRight}>
+                    Toggle Right
                 </Button>
                 <Button variant="secondary" disabled={loading} on:click={doSave}>
                     Save
diff --git a/src/lib/components/ComfyPaneView.svelte b/src/lib/components/ComfyPaneView.svelte
index e6c5d01..3deda40 100644
--- a/src/lib/components/ComfyPaneView.svelte
+++ b/src/lib/components/ComfyPaneView.svelte
@@ -8,36 +8,97 @@
   */
  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">
-    {#if mode === "activeWorkflow"}
-        <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
-    {:else if mode === "graph"}
-        <ComfyGraphView {app} />
-    {:else if mode === "properties"}
-        <ComfyProperties workflow={$workflowState.activeWorkflow} />
-    {:else if mode === "queue"}
-        <ComfyQueue {app} />
-    {:else}
-        <div class="blank-panel">(Blank)</div>
+<div class="pane">
+    <div class="pane-wrapper" class:has-switcher={showSwitcher}>
+        {#if mode === "activeWorkflow"}
+            <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
+        {:else if mode === "graph"}
+            <ComfyGraphView {app} />
+        {:else if mode === "properties"}
+            <ComfyProperties workflow={$workflowState.activeWorkflow} />
+        {:else if mode === "queue"}
+            <ComfyQueue {app} />
+        {: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">
- .pane-wrapper {
+ $button-height: 2.5rem;
+
+ .pane {
      width: 100%;
      height: 100%;
-     overflow: auto;
+
+     .pane-wrapper {
+         width: 100%;
+         height: 100%;
+         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>
diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte
index 3999f9b..2cb91c0 100644
--- a/src/lib/components/ComfyQueue.svelte
+++ b/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 {
diff --git a/src/lib/widgets/MultiRegionWidget.svelte b/src/lib/widgets/MultiRegionWidget.svelte
index 2cf8cfb..1bb5551 100644
--- a/src/lib/widgets/MultiRegionWidget.svelte
+++ b/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);