Better drag and drop

src/lib/components/ComfyApp.svelte

@@ -3,7 +3,6 @@
  import { get } from "svelte/store";
  import { Pane, Splitpanes } from 'svelte-splitpanes';
  import { Button } from "@gradio/button";
- import { Backpack, Gear } from 'radix-icons-svelte';
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp from "./ComfyApp";
  import widgetState from "$lib/stores/widgetState";
@@ -12,6 +11,7 @@
 
  let app: ComfyApp = undefined;
  let uiPane: ComfyUIPane = undefined;
+ let containerElem: HTMLDivElement;
 
  function refreshView(event) {
      app.resizeCanvas();
@@ -35,6 +35,12 @@
      }
  }
 
+ function testtr() {
+     console.warn("TESTTR!")
+ }
+
+ let graphResizeTimer: typeof Timer = -1;
+
  onMount(async () => {
      app = new ComfyApp();
 
@@ -47,11 +53,16 @@
      refreshView();
 
      (window as any).app = app;
+
+     let graphPaneDiv = containerElem.querySelector("canvas").parentNode as HTMLDivNode;
+     graphPaneDiv.ontransitionend = () => {
+         app.resizeCanvas()
+     }
  })
 </script>
 
 <div id="dropzone" class="dropzone"></div>
-<div id="container">
+<div id="container" bind:this={containerElem}>
     <Splitpanes theme="comfy" on:resize={refreshView}>
         <Pane size={20} minSize={10}>
             <div>

src/lib/components/ComfyPane.svelte

@@ -2,10 +2,15 @@
  import { onDestroy } from "svelte";
  import { Block, BlockTitle } from "@gradio/atoms";
  import { Dropdown, Range, TextBox } from "@gradio/form";
+ import { Move } from 'radix-icons-svelte';
  import widgetState from "$lib/stores/widgetState";
 
- import { dndzone } from 'svelte-dnd-action';
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
- import {flip} from 'svelte/animate';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
 
  export let dragItems = [];
  let dragDisabled = true;
@@ -46,7 +51,9 @@
         {@const id = node.id}
         <div class="animation-wrapper" animate:flip={{duration:flipDurationMs}}>
             <Block>
-                <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}>
+                    <Move/>
+                </div>
                 <label for={id}>
                     <BlockTitle>{node.title}</BlockTitle>
                 </label>
@@ -94,6 +101,9 @@
                             />
                         </div>
                     {/if}
+                    {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
                 {/each}
             </Block>
         </div>
@@ -113,14 +123,31 @@
  .handle {
      cursor: grab;
      position: absolute;
+     top: 0;
      right: 0;
-     width: 1em;
+     width: 32px;
-     height: 0.5em;
+     height: 32px;
-     background-color: grey;
+     padding: 0.5em;
+     margin-right: 0.5em;
+     margin-top: 0.25em;
+ }
+
+ .handle:hover {
+     background-color: lightblue;
+ }
+
+ .drag-item-shadow {
+     position: absolute;
+     top: 0; left:0; right: 0; bottom: 0;
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
  }
 
  .wrapper {
-     padding: 10px;
+     padding: 2px;
      width: 100%;
  }
 </style>

src/lib/components/ComfyUIPane.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+ import { get } from "svelte/store";
  import { LGraphNode, LGraph } from "@litegraph-ts/core";
  import type { IWidget } from "@litegraph-ts/core";
  import ComfyApp from "./ComfyApp";
@@ -14,7 +15,21 @@
  $: if(app && !dragConfigured) {
      dragConfigured = true;
      app.eventBus.on("nodeAdded", (node: LGraphNode) => {
-         dragItemss[0].push({ id: totalId++, node: node });
+         let minWidgetCount = 2 ** 64;
+         let minIndex = 0;
+         let state = get(widgetState);
+         for (let i = 0; i < dragItemss.length; i++) {
+             let widgetCount = 0;
+             for (let j = 0; j < dragItemss[i].length; j++) {
+                 const nodeID = dragItemss[i][j].node.id;
+                 widgetCount += state[nodeID].length;
+             }
+             if (widgetCount < minWidgetCount) {
+                 minWidgetCount = widgetCount
+                 minIndex = i;
+             }
+         }
+         dragItemss[minIndex].push({ id: totalId++, node: node });
      });
  }
 </script>
@@ -30,27 +45,4 @@
      width: 100%;
      height: 100%;
  }
-
- .v-pane {
-     border: 1px solid grey;
-     float: left;
-     height: 100%;
-     overflow: auto;
-     position: relative;
-     width: 33%;
- }
-
- .handle {
-     cursor: grab;
-     position: absolute;
-     right: 0;
-     width: 1em;
-     height: 1em;
-     background-color: grey;
- }
-
- .wrapper {
-     padding: 10px;
-     width: 100%;
- }
 </style>