Fix sidebar

src/lib/components/ComfyApp.svelte

@@ -12,9 +12,11 @@
  let app: ComfyApp = undefined;
  let uiPane: ComfyUIPane = undefined;
  let containerElem: HTMLDivElement;
+ let resizeTimeout: typeof Timer = -1;
 
  function refreshView(event) {
-     app.resizeCanvas();
+     clearTimeout(resizeTimeout);
+     resizeTimeout = setTimeout(app.resizeCanvas.bind(app), 250);
  }
 
  function queuePrompt() {
@@ -35,10 +37,6 @@
      }
  }
 
- function testtr() {
-     console.warn("TESTTR!")
- }
-
  let graphResizeTimer: typeof Timer = -1;
 
  onMount(async () => {
@@ -54,7 +52,7 @@
 
      (window as any).app = app;
 
-     let graphPaneDiv = containerElem.querySelector("canvas").parentNode as HTMLDivNode;
+     let graphPaneDiv = containerElem.querySelector(".canvas-wrapper").parentNode as HTMLDivNode;
      graphPaneDiv.ontransitionend = () => {
          app.resizeCanvas()
      }
@@ -64,21 +62,23 @@
 <div id="dropzone" class="dropzone"></div>
 <div id="container" bind:this={containerElem}>
     <Splitpanes theme="comfy" on:resize={refreshView}>
-        <Pane size={20} minSize={10}>
-            <div>
-                Sidebar
-            </div>
-        </Pane>
         <Pane>
             <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
                 <Pane minSize={15}>
                     <ComfyUIPane bind:this={uiPane} {app} />
                 </Pane>
                 <Pane snapSize={10} bind:size={graphSize}>
+                    <div class="canvas-wrapper">
                         <canvas id="graph-canvas" />
+                    </div>
                 </Pane>
             </Splitpanes>
         </Pane>
+        <Pane size={20} snapSize={10}>
+            <div>
+                Sidebar
+            </div>
+        </Pane>
     </Splitpanes>
 </div>
 <div id="bottombar">
@@ -93,6 +93,7 @@
 <style>
  #container {
      height: calc(100vh - 60px);
+     max-width: 100vw;
      display: grid;
      width: 100%;
  }
@@ -109,14 +110,18 @@
  }
 
  #graph-canvas {
-     width: 100%;
-     height: 100%;
  }
 
  #bottombar {
      margin: 10px;
  }
 
+ .canvas-wrapper {
+     width: 100%;
+     height: 100%;
+     background-color: #333;
+ }
+
  .dropzone {
      box-sizing: border-box;
      display: none;
@@ -149,6 +154,7 @@
 
  :global(.splitpanes.comfy) {
      max-height: calc(100vh - 60px);
+     max-width: 100vw;
  }
 
  :global(.splitpanes__pane) {

src/lib/components/ComfyApp.ts

@@ -108,19 +108,10 @@ export default class ComfyApp {
     }
 
     resizeCanvas() {
-        // get current size of the canvas
+        this.canvasEl.width = this.canvasEl.parentElement.offsetWidth;
-        let rect = this.canvasEl.parentElement.getBoundingClientRect();
+        this.canvasEl.height = this.canvasEl.parentElement.offsetHeight;
-
+        this.canvasEl.style.width = ""
-        // increase the actual size of our canvas
+        this.canvasEl.style.height = ""
-        this.canvasEl.width = rect.width * window.devicePixelRatio;
-        this.canvasEl.height = rect.height * window.devicePixelRatio;
-
-        // ensure all drawing operations are scaled
-        this.canvasCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-        // scale everything down using CSS
-        this.canvasEl.style.width = rect.width + 'px';
-        this.canvasEl.style.height = rect.height + 'px';
         this.lCanvas.draw(true, true);
     }