Refactor & handle node lifecycle

src/lib/components/BlockContainer.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ 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';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ let children: IDragItem[] | null = null;
+ const flipDurationMs = 100;
+
+ $: if (container) {
+     children = $layoutState.allItems[container.id].children;
+ }
+ else {
+     children = null;
+ }
+
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // console.log(dragItems);
+ };
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // Ensure dragging is stopped on drag finish
+ };
+</script>
+
+{#if container && children}
+<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+     class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
+     class:root-container={zIndex === 0}
+     class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+    <Block>
+        {#if container.attrs.showTitle}
+            <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
+                <BlockTitle>
+                    {#if $uiState.uiEditMode === "widgets"}
+                        <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
+                    {:else}
+                        {container.attrs.title}
+                    {/if}
+                </BlockTitle>
+            </label>
+        {/if}
+        <div class="v-pane"
+             class:empty={children.length === 0}
+             class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
+            use:dndzone="{{
+                         items: children,
+                         flipDurationMs,
+                         centreDraggedOnCursor: true,
+                         morphDisabled: true,
+                         dropFromOthersDisabled: zIndex === 0,
+                         dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
+                         }}"
+            on:consider="{handleConsider}"
+            on:finalize="{handleFinalize}"
+            >
+            {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                <div class="animation-wrapper"
+                     class:is-executing={item.isNodeExecuting}
+                     animate:flip={{duration:flipDurationMs}}>
+                    <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+        {#if showHandles}
+            <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+        {/if}
+    </Block>
+</div>
+{/if}
+
+<style lang="scss">
+ .v-pane {
+     height: 100%;
+     width: 100%;
+     overflow: visible;
+     display: flex;
+
+     .edit {
+         min-width: 200px;
+     }
+
+     &.empty {
+         border-width: 3px;
+         border-color: var(--color-grey-400);
+         border-radius: var(--block-radius);
+         background: var(--color-grey-300);
+         min-height: 100px;
+         border-style: dashed;
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .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;
+ }
+
+ .container {
+     display: flex;
+
+     :global(.block) {
+         height: fit-content;
+     }
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         .v-pane {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         .v-pane {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
+ }
+
+ .is-executing {
+     border: 3px dashed var(--color-green-600) !important;
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .animation-wrapper {
+     position: relative;
+
+     &:not(.edit) {
+         flex-grow: 1;
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle-widget:hover {
+     background-color: #add8e680;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .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;
+ }
+
+ .node-type {
+     font-size: smaller;
+     color: var(--neutral-400);
+ }
+
+ .edit-title-label {
+     z-index: 10000;
+     position: relative;
+ }
+
+ .edit-title {
+     z-index: 10000;
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
+
+ .container-edit-outline > :global(.block) {
+     border-color: var(--color-pink-500);
+     border-width: 2px;
+     border-style: dashed !important;
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .widget-edit-outline {
+     border: 2px dashed var(--color-blue-400);
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .root-container > :global(.block) {
+     padding: 0px;
+ }
+</style>

src/lib/components/ComfyApp.svelte

@@ -110,6 +110,11 @@
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.clear);
 
+     app.eventBus.on("nodeAdded", layoutState.nodeAdded);
+     app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
+     app.eventBus.on("configured", layoutState.configureFinished);
+     app.eventBus.on("cleared", layoutState.clear);
+
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 

src/lib/components/ComfyUIPane.svelte

@@ -33,18 +33,11 @@
   * Serialize UI panel order so it can be restored when workflow is loaded
   */
  export function serialize(): any {
+     // TODO
  }
 
  export function restore(panels: SerializedPanes) {
-     const id = 0;
+     // TODO
-     $layoutState.root = layoutState.addContainer(null, { direction: "horizontal", showTitle: false });
-     const left = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
-     const right = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
-
-     for (const node of app.lGraph.computeExecutionOrder(false, null)) {
-         layoutState.nodeAdded(node)
-     }
-     console.warn($layoutState)
  }
 
  function groupWidgets() {

src/lib/components/WidgetContainer.svelte

@@ -1,47 +1,34 @@
 <script lang="ts">
- import { Block, BlockTitle } from "@gradio/atoms";
  import queueState from "$lib/stores/queueState";
  import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
 
- import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
-
- 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';
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
- import { getComponentForWidgetState } from "$lib/utils"
+ import { startDrag, stopDrag, getComponentForWidgetState } from "$lib/utils"
+ import BlockContainer from "./BlockContainer.svelte"
 
  export let dragItem: IDragItem | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
- export let isRoot: boolean = false;
- let dragDisabled: boolean = false;
  let container: ContainerLayout | null = null;
  let widget: WidgetLayout | null = null;
  let widgetState: WidgetUIState | null = null;
- let children: IDragItem[] | null = null;
  let showHandles: boolean = false;
- const flipDurationMs = 100;
 
  $: if (dragItem) {
      if (!$layoutState.allItems[dragItem.id]) {
          dragItem = null;
          widget = null;
          widgetState = null;
-         children = null;
          container = null;
      }
      else if (dragItem.type === "container") {
          container = dragItem as ContainerLayout;
-         children = $layoutState.allItems[dragItem.id].children;
          widget = null;
      }
      else if (dragItem.type === "widget") {
          widget = dragItem as WidgetLayout;
          widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
-         children = null;
          container = null;
      }
  }
@@ -50,99 +37,15 @@
                && zIndex > 1
                && !$layoutState.isMenuOpen
 
- function handleConsider(evt: any) {
-     children = layoutState.updateChildren(dragItem, evt.detail.items)
-     // console.log(dragItems);
- };
-
- function handleFinalize(evt: any) {
-     children = layoutState.updateChildren(dragItem, evt.detail.items)
-     // Ensure dragging is stopped on drag finish
- };
-
- const startDrag = (evt: MouseEvent) => {
-     const dragItemId: string = evt.target.dataset["dragItemId"];
-
-     if (evt.button !== 0) {
-         if ($layoutState.currentSelection.length <= 1 && !$layoutState.isMenuOpen)
-             $layoutState.currentSelection = [dragItemId]
-         return;
-     }
-
-     const item = $layoutState.allItems[dragItemId].dragItem
-
-     if (evt.ctrlKey) {
-         const index = $layoutState.currentSelection.indexOf(item.id)
-         if (index === -1)
-             $layoutState.currentSelection.push(item.id);
-         else
-             $layoutState.currentSelection.splice(index, 1);
-         $layoutState.currentSelection = $layoutState.currentSelection;
-     }
-     else {
-         $layoutState.currentSelection = [item.id]
-     }
- };
-
- const stopDrag = (evt: MouseEvent) => {
- };
 
  $: if ($queueState && widget) {
      widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
-     children = $layoutState.allItems[widget.id].children;
  }
 </script>
 
 
-{#if container && children}
+{#if container}
-    {@const id = container.id}
+    <BlockContainer {container} {classes} {zIndex} {showHandles} />
-    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
-         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
-         class:root-container={isRoot}
-         class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
-        <Block>
-            {#if container.attrs.showTitle}
-                <label for={String(id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
-                    <BlockTitle>
-                        {#if $uiState.uiEditMode === "widgets"}
-                            <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
-                        {:else}
-                            {container.attrs.title}
-                        {/if}
-                    </BlockTitle>
-                </label>
-            {/if}
-            <div class="v-pane"
-                 class:empty={children.length === 0}
-                 class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
-                 use:dndzone="{{
-                              items: children,
-                              flipDurationMs,
-                              centreDraggedOnCursor: true,
-                              morphDisabled: true,
-                              dropFromOthersDisabled: zIndex === 0,
-                              dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
-                              }}"
-                 on:consider="{handleConsider}"
-                 on:finalize="{handleFinalize}"
-            >
-                {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                    <div class="animation-wrapper"
-                         class:edit={$uiState.unlocked}
-                         class:is-executing={item.isNodeExecuting}
-                         animate:flip={{duration:flipDurationMs}}>
-                        <svelte:self dragItem={item} zIndex={zIndex+1} />
-                        {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                        {/if}
-                    </div>
-                {/each}
-            </div>
-            {#if showHandles}
-                <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-            {/if}
-        </Block>
-    </div>
 {:else if widget}
     <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
@@ -160,88 +63,16 @@
 {/if}
 
 <style lang="scss">
- .v-pane {
-     height: 100%;
-     width: 100%;
-     overflow: visible;
-     display: flex;
-
-     .edit {
-         min-width: 200px;
-     }
-
-     &.empty {
-         border-width: 3px;
-         border-color: var(--color-grey-400);
-         border-radius: var(--block-radius);
-         background: var(--color-grey-300);
-         min-height: 100px;
-         border-style: dashed;
-     }
- }
-
- .container {
-     display: flex;
-
-     :global(.block) {
-         height: fit-content;
-     }
-
-     &.container-edit-outline {
-         /* width: 20rem; */
-     }
-
-     &.horizontal {
-         flex-wrap: wrap;
-         gap: var(--layout-gap);
-         width: var(--size-full);
-
-         .v-pane {
-             flex-direction: row;
-         }
-
-         > :global(*), > :global(.form > *) {
-             flex: 1 1 0%;
-             flex-wrap: wrap;
-             min-width: min(160px, 100%);
-         }
-     }
-
-     &.vertical {
-         position: relative;
-
-         .v-pane {
-             flex-direction: column;
-         }
-
-         > :global(*), > :global(.form > *), .v-pane {
-             width: var(--size-full);
-         }
-     }
- }
-
  .widget.selected {
      background: var(--color-yellow-200);
  }
 
- .container.selected > :global(.block) {
-     background: var(--color-yellow-300);
- }
-
  .is-executing {
      border: 3px dashed var(--color-green-600) !important;
      margin: 0.2em;
      padding: 0.2em;
  }
 
- .animation-wrapper {
-     position: relative;
-
-     &:not(.edit) {
-         flex-grow: 1;
-     }
- }
-
  .handle {
      cursor: grab;
      z-index: 99999;
@@ -256,71 +87,14 @@
      background-color: #add8e680;
  }
 
- .handle-container:hover {
-     background-color: #d8ade680;
- }
-
- .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;
- }
-
  .node-type {
      font-size: smaller;
      color: var(--neutral-400);
  }
 
- .edit-title-label {
-     z-index: 10000;
-     position: relative;
- }
-
- .edit-title {
-     z-index: 10000;
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--input-padding);
-     width: 100%;
-     color: var(--body-text-color);
-     font-weight: var(--input-text-weight);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
- }
-
- .edit-title:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
-
- .edit-title::placeholder {
-     color: var(--input-placeholder-color);
- }
-
- .container-edit-outline > :global(.block) {
-     border-color: var(--color-pink-500);
-     border-width: 2px;
-     border-style: dashed !important;
-     margin: 0.2em;
-     padding: 0.2em;
- }
-
  .widget-edit-outline {
      border: 2px dashed var(--color-blue-400);
      margin: 0.2em;
      padding: 0.2em;
  }
-
- .root-container > :global(.block) {
-     padding: 0px;
- }
 </style>

src/lib/stores/layoutState.ts

@@ -1,7 +1,7 @@
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
-import type { LGraphNode, IWidget } from "@litegraph-ts/core"
+import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
 import nodeState from "$lib/state/nodeState";
 import type { NodeStateStore } from './nodeState';
  import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -17,9 +17,62 @@ export type LayoutState = {
     allItems: Record<DragItemID, DragItemEntry>,
     currentId: number,
     currentSelection: DragItemID[],
+    isConfiguring: boolean,
     isMenuOpen: boolean
 }
 
+export type AttributesSpec = {
+    name: string,
+    type: string,
+    editable: boolean
+}
+
+export type AttributesCategorySpec = {
+    categoryName: string,
+    specs: AttributesSpec[]
+}
+
+export type AttributesSpecList = AttributesCategorySpec[]
+
+const ALL_ATTRIBUTES: AttributesSpecList = [
+    {
+        categoryName: "appearance",
+        specs: [
+            {
+                name: "title",
+                type: "string",
+                editable: true,
+            },
+            {
+                name: "showTitle",
+                type: "boolean",
+                editable: true,
+            },
+            {
+                name: "direction",
+                type: "string",
+                editable: true,
+            },
+            {
+                name: "classes",
+                type: "string",
+                editable: true,
+            },
+        ]
+    },
+    {
+        categoryName: "behavior",
+        specs: [
+            {
+                name: "associatedNode",
+                type: "number",
+                editable: false,
+            },
+        ]
+    }
+];
+export { ALL_ATTRIBUTES };
+
 export type Attributes = {
     direction: string,
     title: string,
@@ -54,6 +107,7 @@ type LayoutStateOps = {
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
+    configureFinished: (graph: LGraph) => void,
     groupItems: (dragItems: IDragItem[]) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
@@ -64,11 +118,12 @@ type LayoutStateOps = {
 export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
 const store: Writable<LayoutState> = writable({
     root: null,
-    allItems: [],
+    allItems: {},
     currentId: 0,
     currentSelection: [],
     isMenuOpen: false
 })
+addContainer(null, { direction: "horizontal", showTitle: false });
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {
     const state = get(store);
@@ -160,6 +215,10 @@ function updateChildren(parent: IDragItem, newChildren?: IDragItem[]): IDragItem
 }
 
 function nodeAdded(node: LGraphNode) {
+    const state = get(store)
+    if (state.isConfiguring)
+        return;
+
     const parent = findDefaultContainerForInsertion();
     // Add default node panel containing all widgets
     if (node.widgets && node.widgets.length > 0) {
@@ -187,11 +246,14 @@ function removeEntry(state: LayoutState, id: DragItemID) {
 function nodeRemoved(node: LGraphNode) {
     const state = get(store)
 
+    console.debug("[layoutState] nodeRemoved", node)
+
     // Remove widgets bound to the node
     let del = Object.entries(state.allItems).filter(pair =>
         pair[1].dragItem.type === "widget"
         && pair[1].dragItem.attrs.associatedNode === node.id)
-    for (const id in del) {
+    for (const item of del) {
+        const [id, dragItem] = item;
         console.debug("[layoutState] Remove widget", id, state.allItems[id])
         removeEntry(state, id)
     }
@@ -209,7 +271,7 @@ function nodeRemoved(node: LGraphNode) {
     }
 
     // Remove empty containers bound to the node
-    for (const id in delContainers) {
+    for (const id of delContainers) {
         console.debug("[layoutState] Remove container", id, state.allItems[id])
         removeEntry(state, id)
     }
@@ -217,6 +279,24 @@ function nodeRemoved(node: LGraphNode) {
     store.set(state)
 }
 
+function configureFinished(graph: LGraph) {
+    const state = get(store)
+    const id = 0;
+
+    state.isConfiguring = false;
+
+    state.root = addContainer(null, { direction: "horizontal", showTitle: false });
+    const left = addContainer(state.root.id, { direction: "vertical", showTitle: false });
+    const right = addContainer(state.root.id, { direction: "vertical", showTitle: false });
+
+    for (const node of graph.computeExecutionOrder(false, null)) {
+        nodeAdded(node)
+    }
+
+    console.debug("[layoutState] configureFinished", state)
+    store.set(state)
+}
+
 function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
     const state = get(store)
     const entry = state.allItems[target.id]
@@ -311,6 +391,15 @@ function ungroup(container: ContainerLayout) {
 }
 
 function clear() {
+    store.set({
+        root: null,
+        allItems: {},
+        currentId: 0,
+        currentSelection: [],
+        isMenuOpen: false,
+        isConfiguring: true,
+    })
+    addContainer(null, { direction: "horizontal", showTitle: false });
 }
 
 function resetLayout() {
@@ -326,6 +415,7 @@ const layoutStateStore: WritableLayoutStateStore =
     updateChildren,
     nodeAdded,
     nodeRemoved,
+    configureFinished,
     getCurrentSelection,
     groupItems,
     ungroup,

src/lib/utils.ts

@@ -3,6 +3,8 @@ import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
 import { type WidgetUIState } from "$lib/stores/nodeState";
+import { get } from "svelte/store"
+import layoutState from "$lib/stores/layoutState"
 
 export function download(filename: string, text: string, type: string = "text/plain") {
     const blob = new Blob([text], { type: type });
@@ -39,3 +41,32 @@ export function getComponentForWidgetState(item: WidgetUIState): any {
 
     return null;
 }
+
+export function startDrag(evt: MouseEvent) {
+    const dragItemId: string = evt.target.dataset["dragItemId"];
+    const ls = get(layoutState)
+
+    if (evt.button !== 0) {
+        if (ls.currentSelection.length <= 1 && !ls.isMenuOpen)
+            ls.currentSelection = [dragItemId]
+        return;
+    }
+
+    const item = ls.allItems[dragItemId].dragItem
+
+    if (evt.ctrlKey) {
+        const index = ls.currentSelection.indexOf(item.id)
+        if (index === -1)
+            ls.currentSelection.push(item.id);
+        else
+            ls.currentSelection.splice(index, 1);
+        ls.currentSelection = ls.currentSelection;
+    }
+    else {
+        ls.currentSelection = [item.id]
+    }
+    layoutState.set(ls)
+};
+
+export function stopDrag(evt: MouseEvent) {
+};