From abcdfb7345ca5555e659d7268fa869d5b59b8a67 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Fri, 7 Apr 2023 07:05:40 -0500 Subject: [PATCH] Improve sidebars --- package.json | 1 + pnpm-lock.yaml | 111 +++++++++++++++++------------ src/lib/components/ComfyApp.svelte | 38 ++++++++-- src/scss/shared.scss | 0 4 files changed, 98 insertions(+), 52 deletions(-) create mode 100644 src/scss/shared.scss diff --git a/package.json b/package.json index d5a2fa6..9db4bf1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb12ade..aca1d3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 3c4dcad..e620c7a 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -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 @@ - + - +
- +
Sidebar
@@ -86,11 +98,16 @@ Run + -