Basic UI layout

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>

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

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>