windmill-components 1.379.4 → 1.382.3

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import Button from '../../../common/button/Button.svelte';
 import { twMerge } from 'tailwind-merge';
 import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte';
@@ -6,69 +6,76 @@ import { Badge } from '../../../common';
 import { X } from 'lucide-svelte';
 import { getStateColor } from '../../../graph';
 import Tooltip from '../../../Tooltip.svelte';
-export let node;
-export let selected = false;
-export let canDelete = true;
-export let canAddBranch = true;
-export let index;
-export let darkMode;
+import NodeWrapper from '../../../graph/renderers/nodes/NodeWrapper.svelte';
+export let data;
 let open = false;
-const dispatch = createEventDispatcher();
 const { selectedNodeId } = getContext('DecisionTreeEditor');
-$: selected = $selectedNodeId === node.id;
+$: selected = $selectedNodeId === data.node.id;
 </script>
 
-<div class="relative rounded-sm group">
-	<Button
-		class={twMerge(
-			'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
-			selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
-			'flex flex-row gap-2 items-center justify-between'
-		)}
-		style="width: 275px; height: 34px; background-color: {getStateColor(undefined, darkMode)};"
-		on:click={() => {
-			selected = true
-			dispatch('select', node.id)
-		}}
-	>
-		<div class="ml-2 text-xs font-normal text-primary truncate">
-			{node.label === '' ? `Tab: ${node.id}` : node.label}
-		</div>
-		<Badge color="indigo" small>
-			Tab index: {index}
-			<Tooltip>
-				You can manually select a node using the <b>setTab</b> function with this index in a frontend
-				runnable.
-			</Tooltip>
-		</Badge>
-	</Button>
-
-	{#if canDelete}
-		<button
+<NodeWrapper let:darkMode>
+	<div class="rounded-sm group">
+		<Button
 			class={twMerge(
-				'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
-				'border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white hover:border-red-700',
-				'group-hover:opacity-100 opacity-0'
+				'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
+				selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
+				'flex flex-row gap-2 items-center justify-between'
 			)}
-			on:click|preventDefault|stopPropagation={() => dispatch('delete')}
+			style="width: 275px; height: 34px; background-color: {getStateColor(
+				undefined,
+				darkMode,
+				'#fff'
+			)};"
+			on:click={() => {
+				selected = true
+				data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
+			}}
 		>
-			<X class="mx-[3px]" size={14} strokeWidth={2} />
-		</button>
-	{/if}
+			<div class="ml-2 text-xs font-normal text-primary truncate">
+				{data.node.label === '' ? `Tab: ${data.node.id}` : data.node.label}
+			</div>
+			<Badge color="indigo" small>
+				Tab index: {data.index}
+				<Tooltip>
+					You can manually select a node using the <b>setTab</b> function with this index in a frontend
+					runnable.
+				</Tooltip>
+			</Badge>
+		</Button>
 
-	{#if node.id !== 'end'}
-		<div
-			class={twMerge(
-				'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
-				open ? 'z-20' : ''
-			)}
-		>
-			<InsertDecisionTreeNode
-				on:node={() => dispatch('nodeInsert')}
-				on:addBranch={() => dispatch('addBranch')}
-				canAddBranch={canAddBranch || node.next.length > 1}
-				canAddNode={node.next.length <= 1}
-			/>
-		</div>
-	{/if}
-</div>
+		{#if data.canDelete}
+			<button
+				class={twMerge(
+					'absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary',
+					'border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white hover:border-red-700',
+					'group-hover:opacity-100 opacity-0'
+				)}
+				on:click|preventDefault|stopPropagation={() => {
+					data.nodeCallbackHandler('delete', data.node.id, data.node, data.parentIds, false)
+				}}
+			>
+				<X class="mx-[3px]" size={14} strokeWidth={2} />
+			</button>
+		{/if}
+
+		{#if data.node.id !== 'end'}
+			<div
+				class={twMerge(
+					'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
+					open ? 'z-20' : ''
+				)}
+			>
+				<InsertDecisionTreeNode
+					on:node={() => {
+						data.nodeCallbackHandler('nodeInsert', data.node.id, data.node, data.parentIds, false)
+					}}
+					on:addBranch={() => {
+						data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
+					}}
+					canAddBranch={data.canAddBranch || data.node.next.length > 1}
+					canAddNode={data.node.next.length <= 1}
+				/>
+			</div>
+		{/if}
+	</div>
+</NodeWrapper>

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte.d.ts

@@ -2,19 +2,17 @@ import { SvelteComponent } from "svelte";
 import type { DecisionTreeNode } from '../component';
 declare const __propDef: {
     props: {
-        node: DecisionTreeNode;
-        selected?: boolean | undefined;
-        canDelete?: boolean | undefined;
-        canAddBranch?: boolean | undefined;
-        index: number;
-        darkMode: boolean;
+        data: {
+            node: DecisionTreeNode;
+            canDelete: boolean;
+            canAddBranch: boolean;
+            selected: boolean;
+            index: number;
+            nodeCallbackHandler: (event: string, detail: string, graphNode: DecisionTreeNode | undefined, parentIds: string[], branchInsert: boolean) => void;
+            parentIds: string[];
+        };
     };
     events: {
-        select: CustomEvent<string>;
-        nodeInsert: CustomEvent<void>;
-        delete: CustomEvent<void>;
-        addBranch: CustomEvent<void>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};