neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Switchable sidebars

Browse Source
This commit is contained in:
space-nuko
2023-05-24 15:04:23 -05:00
parent f793630064
commit da917a2a50
4 changed files with 95 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/components/ComfyBoxWorkflowsView.svelte
View File

@@ -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

87
src/lib/components/ComfyPaneView.svelte
View File

@@ -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>

3
src/lib/components/ComfyQueue.svelte
View File

@@ -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 {

2
src/lib/widgets/MultiRegionWidget.svelte
View File

@@ -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);