Refactor & handle node lifecycle
This commit is contained in:
space-nuko
@@ -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}
|
||||
{@const id = container.id}
|
||||
<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>
|
||||
{#if container}
|
||||
<BlockContainer {container} {classes} {zIndex} {showHandles} />
|
||||
{: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>
|
||||
|
||||
Reference in New Issue
Block a user