Basic UI layout

2023-04-04 17:51:26 -05:00
parent 3353a2610f
commit a4a37755fa
7 changed files with 150 additions and 15 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 engine-strict=true
+use-node-version=18.8.0
--- a/package.json
+++ b/package.json
@@ -29,8 +29,12 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@svelteuidev/composables": "^0.11.1",
+		"@svelteuidev/core": "^0.11.1",
 		"litegraph.js": "^0.7.12",
+		"radix-icons-svelte": "^1.2.1",
 		"svelte-preprocess": "^5.0.3",
+		"svelte-splitpanes": "^0.7.13",
 		"vite-plugin-full-reload": "^1.0.5"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,23 +3,31 @@ lockfileVersion: 5.4
 specifiers:
  '@sveltejs/adapter-auto': ^2.0.0
  '@sveltejs/kit': ^1.5.0
+  '@svelteuidev/composables': ^0.11.1
+  '@svelteuidev/core': ^0.11.1
  eslint: ^8.28.0
  eslint-config-prettier: ^8.5.0
  eslint-plugin-svelte3: ^4.0.0
  litegraph.js: ^0.7.12
  prettier: ^2.8.0
  prettier-plugin-svelte: ^2.8.1
+  radix-icons-svelte: ^1.2.1
  svelte: ^3.54.0
  svelte-check: ^3.2.0
  svelte-preprocess: ^5.0.3
+  svelte-splitpanes: ^0.7.13
  typescript: ^5.0.0
  vite: ^4.2.0
  vite-plugin-full-reload: ^1.0.5
  vitest: ^0.25.3

 dependencies:
+  '@svelteuidev/composables': 0.11.1
+  '@svelteuidev/core': 0.11.1_37jsqdnf2svoc6irho24bh7xqi
  litegraph.js: 0.7.12
+  radix-icons-svelte: 1.2.1
  svelte-preprocess: 5.0.3_ex2livsgfbezl6rd73hucsky7y
+  svelte-splitpanes: 0.7.13_svelte@3.58.0
  vite-plugin-full-reload: 1.0.5_vite@4.2.1

 devDependencies:
@@ -251,6 +259,16 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

+  /@floating-ui/core/0.7.3:
+    resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
+    dev: false
+
+  /@floating-ui/dom/0.5.2:
+    resolution: {integrity: sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==}
+    dependencies:
+      '@floating-ui/core': 0.7.3
+    dev: false
+
  /@humanwhocodes/config-array/0.11.8:
    resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
    engines: {node: '>=10.10.0'}
@@ -311,6 +329,10 @@ packages:
    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
    dev: true

+  /@stitches/core/1.2.8:
+    resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
+    dev: false
+
  /@sveltejs/adapter-auto/2.0.0_@sveltejs+kit@1.15.0:
    resolution: {integrity: sha512-b+gkHFZgD771kgV3aO4avHFd7y1zhmMYy9i6xOK7m/rwmwaRO8gnF5zBc0Rgca80B2PMU1bKNxyBTHA14OzUAQ==}
    peerDependencies:
@@ -367,6 +389,22 @@ packages:
      - supports-color
    dev: true

+  /@svelteuidev/composables/0.11.1:
+    resolution: {integrity: sha512-TTRGTDlrJD22KT/X8L2he5hu3rDorzzB591sgzDjtCi35vKF6Z/ijuc/ngNCFHA+2WxcDGBGPs7YewEgv2yEKg==}
+    dev: false
+
+  /@svelteuidev/core/0.11.1_37jsqdnf2svoc6irho24bh7xqi:
+    resolution: {integrity: sha512-Dy16B6OaoSgMPyWL+WvrJwFB529N6Gmr4S4qdUWmE3LrJwhm9rNtwoEQn167dhOlmTQhfgJDot+DuIRRwtGXrw==}
+    peerDependencies:
+      '@svelteuidev/composables': 0.11.1
+      svelte: '>=3.55.0'
+    dependencies:
+      '@floating-ui/dom': 0.5.2
+      '@stitches/core': 1.2.8
+      '@svelteuidev/composables': 0.11.1
+      svelte: 3.58.0
+    dev: false
+
  /@types/chai-subset/1.3.3:
    resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
    dependencies:
@@ -709,9 +747,14 @@ packages:
      - supports-color
    dev: true

+  /esm-env-robust/0.0.3:
+    resolution: {integrity: sha512-90Gnuw2DALOqlL1581VxP3GHPUNHX9U+fQ+8FNcTTFClhY5gEggAAnJ3q1b2Oq23knRsjv8YpNeMRPaMLUymOA==}
+    dependencies:
+      esm-env: 1.0.0
+    dev: false
+
  /esm-env/1.0.0:
    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
-    dev: true

  /espree/9.5.1:
    resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
@@ -1192,6 +1235,10 @@ packages:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
    dev: true

+  /radix-icons-svelte/1.2.1:
+    resolution: {integrity: sha512-svmiMd0ocpdTm9cvAz0klcZpnh639lVctj6psQiawd4pYalVzOG4cX+JizAgRckyTAsRVdzObP7D2EBrSfdghA==}
+    dev: false
+
  /readdirp/3.6.0:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}
@@ -1423,6 +1470,15 @@ packages:
      svelte: 3.58.0
      typescript: 5.0.3

+  /svelte-splitpanes/0.7.13_svelte@3.58.0:
+    resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==}
+    peerDependencies:
+      svelte: ^3.54.0
+    dependencies:
+      esm-env-robust: 0.0.3
+      svelte: 3.58.0
+    dev: false
+
  /svelte/3.58.0:
    resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
    engines: {node: '>= 8'}
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -1,24 +1,92 @@
 <script lang="ts">
 import { onMount } from "svelte";
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
+ import { Tabs } from '@svelteuidev/core';
+ import { Backpack, Gear } from 'radix-icons-svelte';
 import ComfyApp from "./ComfyApp";

 let app: ComfyApp = undefined;

+ function refreshView(event) {
+     app.resizeCanvas();
+ }
+
 onMount(async () => {
     app = new ComfyApp();
     await app.setup();
+     refreshView();

     (window as any).app = app;
 })
 </script>

-<div class="container">
-    <canvas id="graph-canvas" tabIndex="1" />
-</div>
+<Tabs>
+    <Tabs.Tab label="Workspace" icon={Backpack}>
+        <div id="container">
+            <Splitpanes on:resize={refreshView}>
+                <Pane class="sidebar" size={20} minSize={20}>I have a min width of 20%</Pane>
+                <Pane>
+                    <Splitpanes on:resize={refreshView} horizontal="{true}">
+                        <Pane minSize={15}>I have a min height of 15%</Pane>
+                        <Pane minSize={10}>
+                            <canvas id="graph-canvas" />
+                        </Pane>
+                    </Splitpanes>
+                </Pane>
+            </Splitpanes>
+        </div>
+    </Tabs.Tab>
+    <Tabs.Tab label="Settings" icon={Gear}>
+    </Tabs.Tab>
+</Tabs>

 <style>
- .container {
+ #container {
+     height: calc(100vh - 60px);
+     display: grid;
+     width: 100%;
+ }
+
+ .panel {
+     overflow: auto;
+     position: relative;
+ }
+
+ .resizer[data-direction='horizontal'] {
+     background-color: #cbd5e0;
+     cursor: ew-resize;
+     height: 100%;
+     width: 2px;
+ }
+ .resizer[data-direction='vertical'] {
+     background-color: #cbd5e0;
+     cursor: ns-resize;
+     height: 2px;
+     width: 100%;
+ }
+
+ #comfy-content {
+     grid-area: content;
+     height: 100vh;
+ }
+
+ #comfy-ui {
+ }
+
+ #comfy-graph {
+ }
+
+ :global(html, body) {
     width: 100%;
     height: 100%;
+     margin: 0px;
+ }
+
+ :global(.splitpanes__pane) {
+     box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
+     justify-content: center;
+     align-items: center;
+     display: flex;
+     position: relative;
 }
 </style>
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -36,10 +36,6 @@ export default class ComfyApp {

 		this.lGraph.start();

-		// Ensure the canvas fills the window
-        this.resizeCanvas();
-		window.addEventListener("resize", this.resizeCanvas.bind(this));
-
 		// await this.#invokeExtensionsAsync("init");
 		await this.registerNodes();

@@ -73,12 +69,16 @@ export default class ComfyApp {

 		// await this.#invokeExtensionsAsync("setup");

+		// Ensure the canvas fills the window
+        this.resizeCanvas();
+		window.addEventListener("resize", this.resizeCanvas.bind(this));
+
        return Promise.resolve();
    }

-    private resizeCanvas() {
-        this.canvasEl.width = window.innerWidth;
-        this.canvasEl.height = window.innerHeight;
+    resizeCanvas() {
+        this.canvasEl.width = this.canvasEl.parentElement.clientWidth;
+        this.canvasEl.height = this.canvasEl.parentElement.clientHeight;
        this.lCanvas.draw(true, true);
    }

--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
+ import { SvelteUIProvider } from '@svelteuidev/core';
 import ComfyApp from "$lib/components/ComfyApp.svelte"
 </script>

-<ComfyApp/>
+<SvelteUIProvider themeObserver="light">
+    <ComfyApp/>
+</SvelteUIProvider>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,9 +4,12 @@ import FullReload from 'vite-plugin-full-reload'

 export default defineConfig({
 	plugins: [
-        sveltekit(),
-        FullReload(["src/**/*.{js,ts,svelte}"])
+        sveltekit()
+        // FullReload(["src/**/*.{js,ts,svelte}"])
    ],
+    build: {
+        sourcemap: true,
+    },
    server: {
        port: 3000
    },