Basic UI layout

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+use-node-version=18.8.0

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"
 	}
 }

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'}

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">
+<Tabs>
-    <canvas id="graph-canvas" tabIndex="1" />
+    <Tabs.Tab label="Workspace" icon={Backpack}>
-</div>
+        <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>

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() {
+    resizeCanvas() {
-        this.canvasEl.width = window.innerWidth;
+        this.canvasEl.width = this.canvasEl.parentElement.clientWidth;
-        this.canvasEl.height = window.innerHeight;
+        this.canvasEl.height = this.canvasEl.parentElement.clientHeight;
         this.lCanvas.draw(true, true);
     }
 

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>

vite.config.ts

@@ -4,9 +4,12 @@ import FullReload from 'vite-plugin-full-reload'
 
 export default defineConfig({
 	plugins: [
-        sveltekit(),
+        sveltekit()
-        FullReload(["src/**/*.{js,ts,svelte}"])
+        // FullReload(["src/**/*.{js,ts,svelte}"])
     ],
+    build: {
+        sourcemap: true,
+    },
     server: {
         port: 3000
     },