From e62994aa868e2b899130cfac78fa9b30958e0886 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 7 Apr 2023 06:30:21 -0500
Subject: [PATCH] Fix sidebar

---
 src/lib/components/ComfyApp.svelte | 34 ++++++++++++++++++------------
 src/lib/components/ComfyApp.ts     | 17 ++++-----------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 79fd711..3c4dcad 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/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}>
-                    <canvas id="graph-canvas" />
+                    <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) {
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 4ec1fa9..38fa604 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -108,19 +108,10 @@ export default class ComfyApp {
     }
 
     resizeCanvas() {
-        // get current size of the canvas
-        let rect = this.canvasEl.parentElement.getBoundingClientRect();
-
-        // increase the actual size of our canvas
-        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.canvasEl.width = this.canvasEl.parentElement.offsetWidth;
+        this.canvasEl.height = this.canvasEl.parentElement.offsetHeight;
+        this.canvasEl.style.width = ""
+        this.canvasEl.style.height = ""
         this.lCanvas.draw(true, true);
     }