diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 8f711da..30896d3 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -8,6 +8,7 @@ import { Checkbox } from "@gradio/form" import nodeState from "$lib/stores/nodeState"; import uiState from "$lib/stores/uiState"; + import layoutState from "$lib/stores/layoutState"; import { ImageViewer } from "$lib/ImageViewer"; import { download } from "$lib/utils" @@ -39,6 +40,9 @@ $: if (app) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked; $: if (app) app.lCanvas.allow_interaction = !$uiState.graphLocked; + $: if ($uiState.uiEditMode) + $layoutState.currentSelection = [] + let graphSize = null; function toggleGraph() { diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte index 65b51ea..37df5e9 100644 --- a/src/lib/components/WidgetContainer.svelte +++ b/src/lib/components/WidgetContainer.svelte @@ -48,11 +48,23 @@ // Ensure dragging is stopped on drag finish }; - const startDrag = () => { - return + const startDrag = (evt: MouseEvent) => { + const dragItemId: string = evt.target.dataset["dragItemId"]; + 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 = () => { - return + + const stopDrag = (evt: MouseEvent) => { }; $: if ($queueState && widget) { @@ -65,6 +77,7 @@ {#if container && children} {@const id = container.id}
1}> @@ -82,12 +95,14 @@
1} + class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId === container.attrs.associatedNode} use:dndzone="{{ items: children, flipDurationMs, + centreDraggedOnCursor: true, morphDisabled: true, dropFromOthersDisabled: zIndex === 0, - dragDisabled: zIndex === 0 + dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled" }}" on:consider="{handleConsider}" on:finalize="{handleFinalize}" @@ -105,16 +120,19 @@ {/each}
{#if $uiState.uiEditMode === "containers" && zIndex > 1} -
+
{/if}
{:else if widget} -
1}> +
1} + class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)} + class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.attrs.associatedNode} + >
{#if $uiState.uiEditMode ==="widgets" && zIndex > 1} -
+
{/if} {/if} @@ -134,7 +152,7 @@ border-color: var(--color-grey-400); border-radius: var(--block-radius); background: var(--color-grey-300); - min-height: 200px; + min-height: 100px; border-style: dashed; } } @@ -179,8 +197,16 @@ } } - .is-executing :global(.block) { - border: 5px dashed var(--color-green-600) !important; + .container, .widget { + &.selected { + background: var(--color-yellow-200); + } + } + + .is-executing { + border: 3px dashed var(--color-green-600) !important; + margin: 0.2em; + padding: 0.2em; } .animation-wrapper { diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts index 4ff3c59..f351bf2 100644 --- a/src/lib/stores/layoutState.ts +++ b/src/lib/stores/layoutState.ts @@ -16,6 +16,7 @@ export type LayoutState = { root: IDragItem | null, allItems: Record, currentId: number, + currentSelection: IDragItem[] } export type Attributes = { @@ -60,7 +61,8 @@ export type WritableLayoutStateStore = Writable & LayoutStateOps; const store: Writable = writable({ root: null, allItems: [], - currentId: 0 + currentId: 0, + currentSelection: [] }) function findDefaultContainerForInsertion(): ContainerLayout | null {