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

Improve sidebars

Browse Source
This commit is contained in:
space-nuko
2023-04-07 07:05:40 -05:00
parent e62994aa86
commit abcdfb7345
4 changed files with 98 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -22,6 +22,7 @@
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.7",
"prettier-plugin-svelte": "^2.10.0",
"sass": "^1.61.0",
"svelte": "^3.58.0",
"svelte-check": "^3.2.0",
"svelte-dnd-action": "^0.9.22",

111
pnpm-lock.yaml generated
View File

@@ -23,6 +23,7 @@ importers:
prettier: ^2.8.7
prettier-plugin-svelte: ^2.10.0
radix-icons-svelte: ^1.2.1
sass: ^1.61.0
svelte: ^3.58.0
svelte-check: ^3.2.0
svelte-dnd-action: ^0.9.22
@@ -48,7 +49,7 @@ importers:
events: 3.3.0
pollen-css: 4.6.2
radix-icons-svelte: 1.2.1
svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
svelte-preprocess: 5.0.3_3gubijbxbisgisegeglxqngyuq
svelte-splitpanes: 0.7.13_svelte@3.58.0
tailwindcss: 3.3.1
typed-emitter: github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4
@@ -61,13 +62,14 @@ importers:
eslint-plugin-svelte3: 4.0.0_4gllgxcu6gmiyy5rrmqexpx7de
prettier: 2.8.7
prettier-plugin-svelte: 2.10.0_ur5pqdgn24bclu6l6i7qojopk4
sass: 1.61.0
svelte: 3.58.0
svelte-check: 3.2.0_svelte@3.58.0
svelte-check: 3.2.0_sass@1.61.0+svelte@3.58.0
svelte-dnd-action: 0.9.22_svelte@3.58.0
typescript: 5.0.3
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
vite-tsconfig-paths: 4.0.8_mqt6hr36lqfsnn3kcfure5ceka
vitest: 0.25.8
vitest: 0.25.8_sass@1.61.0
packages:
@@ -381,7 +383,7 @@ packages:
svelte: 3.58.0
tiny-glob: 0.2.9
undici: 5.20.0
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
transitivePeerDependencies:
- supports-color
dev: true
@@ -399,7 +401,7 @@ packages:
magic-string: 0.30.0
svelte: 3.58.0
svelte-hmr: 0.15.1_svelte@3.58.0
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
vitefu: 0.2.4_vite@4.2.1
transitivePeerDependencies:
- supports-color
@@ -989,6 +991,9 @@ packages:
engines: {node: '>= 4'}
dev: true
/immutable/4.3.0:
resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
/import-fresh/3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -1492,6 +1497,15 @@ packages:
mkdirp: 0.5.6
rimraf: 2.7.1
/sass/1.61.0:
resolution: {integrity: sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.0
source-map-js: 1.0.2
/set-cookie-parser/2.6.0:
resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
dev: true
@@ -1588,7 +1602,7 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
/svelte-check/3.2.0_svelte@3.58.0:
/svelte-check/3.2.0_sass@1.61.0+svelte@3.58.0:
resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
hasBin: true
peerDependencies:
@@ -1601,7 +1615,7 @@ packages:
picocolors: 1.0.0
sade: 1.8.1
svelte: 3.58.0
svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
svelte-preprocess: 5.0.3_3gubijbxbisgisegeglxqngyuq
typescript: 5.0.3
transitivePeerDependencies:
- '@babel/core'
@@ -1632,7 +1646,7 @@ packages:
svelte: 3.58.0
dev: true
/svelte-preprocess/5.0.3_ex2livsgfbezl6rd73hucsky7y:
/svelte-preprocess/5.0.3_3gubijbxbisgisegeglxqngyuq:
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
@@ -1673,6 +1687,7 @@ packages:
'@types/pug': 2.0.6
detect-indent: 6.1.0
magic-string: 0.27.0
sass: 1.61.0
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 3.58.0
@@ -1841,7 +1856,7 @@ packages:
dependencies:
picocolors: 1.0.0
picomatch: 2.3.1
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
dev: false
/vite-tsconfig-paths/4.0.8_mqt6hr36lqfsnn3kcfure5ceka:
@@ -1855,45 +1870,13 @@ packages:
debug: 4.3.4
globrex: 0.1.2
tsconfck: 2.1.1_typescript@5.0.3
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
transitivePeerDependencies:
- supports-color
- typescript
dev: true
/vite/4.2.1:
resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.17.15
postcss: 8.4.21
resolve: 1.22.2
rollup: 3.20.2
optionalDependencies:
fsevents: 2.3.2
/vite/4.2.1_@types+node@18.15.11:
/vite/4.2.1_4q5mxzltflcgkzvnigcbiggbqa:
resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@@ -1923,10 +1906,44 @@ packages:
postcss: 8.4.21
resolve: 1.22.2
rollup: 3.20.2
sass: 1.61.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/vite/4.2.1_sass@1.61.0:
resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.17.15
postcss: 8.4.21
resolve: 1.22.2
rollup: 3.20.2
sass: 1.61.0
optionalDependencies:
fsevents: 2.3.2
/vitefu/0.2.4_vite@4.2.1:
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
peerDependencies:
@@ -1935,10 +1952,10 @@ packages:
vite:
optional: true
dependencies:
vite: 4.2.1
vite: 4.2.1_sass@1.61.0
dev: true
/vitest/0.25.8:
/vitest/0.25.8_sass@1.61.0:
resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
engines: {node: '>=v14.16.0'}
hasBin: true
@@ -1973,7 +1990,7 @@ packages:
tinybench: 2.4.0
tinypool: 0.3.1
tinyspy: 1.1.1
vite: 4.2.1_@types+node@18.15.11
vite: 4.2.1_4q5mxzltflcgkzvnigcbiggbqa
transitivePeerDependencies:
- less
- sass

38
src/lib/components/ComfyApp.svelte
View File

@@ -37,6 +37,18 @@
}
}
let sidebarSize = 20;
function toggleSidebar() {
if (sidebarSize == 0) {
sidebarSize = 20;
app.resizeCanvas();
}
else {
sidebarSize = 0;
}
}
let graphResizeTimer: typeof Timer = -1;
onMount(async () => {
@@ -64,17 +76,17 @@
<Splitpanes theme="comfy" on:resize={refreshView}>
<Pane>
<Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
<Pane minSize={15}>
<Pane>
<ComfyUIPane bind:this={uiPane} {app} />
</Pane>
<Pane snapSize={10} bind:size={graphSize}>
<Pane bind:size={graphSize}>
<div class="canvas-wrapper">
<canvas id="graph-canvas" />
</div>
</Pane>
</Splitpanes>
</Pane>
<Pane size={20} snapSize={10}>
<Pane bind size={sidebarSize}>
<div>
Sidebar
</div>
@@ -86,11 +98,16 @@
Run
</Button>
<Button variant="secondary" on:click={toggleGraph}>
Show/Hide Graph
Toggle Graph
</Button>
<Button variant="secondary" on:click={toggleSidebar}>
Toggle Sidebar
</Button>
</div>
<style>
<style lang="scss">
@import '../../scss/shared.scss';
#container {
height: calc(100vh - 60px);
max-width: 100vw;
@@ -142,6 +159,17 @@
font-family: Arial;
}
:global(.splitpanes.comfy>.splitpanes__splitter) {
background-color: var(--secondary-100);
&:hover:not([disabled]) {
background-color: var(--secondary-300);
}
&:active:not([disabled]) {
background-color: var(--secondary-400);
}
}
:global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
min-height: 20px;
cursor: row-resize;

0
src/scss/shared.scss Normal file
View File