feat(frontend): add missing trigger

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -34,6 +34,7 @@
 	import DataflowEdge from './renderers/edges/DataflowEdge.svelte'
 	import { encodeState } from '$lib/utils'
 	import BranchOneStart from './renderers/nodes/BranchOneStart.svelte'
+	import NoBranchNode from './renderers/nodes/NoBranchNode.svelte'
 
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
@@ -194,7 +195,8 @@
 		whileLoopStart: ForLoopStartNode,
 		whileLoopEnd: ForLoopEndNode,
 		branchOneStart: BranchOneStart,
-		branchOneEnd: BranchAllEndNode
+		branchOneEnd: BranchAllEndNode,
+		noBranch: NoBranchNode
 	} as any
 
 	const edgeTypes = {

frontend/src/lib/components/graph/graphBuilder.ts

@@ -86,6 +86,7 @@ export default function graphBuilder(
 				offset: options?.offset,
 				moving,
 				eventHandlers,
+				enableTrigger: sourceId === 'Input',
 				// If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
 				index: index >= 0 ? index : mods?.length ?? 0
 			}
@@ -99,6 +100,7 @@ export default function graphBuilder(
 		data: {
 			eventHandlers: eventHandlers,
 			modules: modules,
+
 			...extra
 		}
 	}
@@ -154,30 +156,52 @@ export default function graphBuilder(
 					}
 					nodes.push(endNode)
 
-					module.value.branches.forEach((branch, branchIndex) => {
-						// Start node by branch
-
+					if (module.value.branches.length === 0) {
+						// Add a "No branches" node
 						const startNode = {
-							id: `${module.id}-branch-${branchIndex}`,
+							id: `${module.id}-branch-0`,
 							data: {
 								offset: currentOffset,
-								label: `Branch ${branchIndex + 1}`,
 								id: module.id,
-								branchIndex: branchIndex,
+								branchIndex: -1,
 								modules: modules,
 								eventHandlers: eventHandlers,
 								...extra
 							},
 							position: { x: -1, y: -1 },
-							type: 'branchAllStart'
+							type: 'noBranch'
 						}
 
 						nodes.push(startNode)
 
 						addEdge(module.id, startNode.id, { type: 'empty', offset: currentOffset })
+						addEdge(startNode.id, endNode.id, { type: 'empty', offset: currentOffset })
+					} else {
+						module.value.branches.forEach((branch, branchIndex) => {
+							// Start node by branch
 
-						processModules(branch.modules, startNode, endNode, currentOffset)
-					})
+							const startNode = {
+								id: `${module.id}-branch-${branchIndex}`,
+								data: {
+									offset: currentOffset,
+									label: `Branch ${branchIndex + 1}`,
+									id: module.id,
+									branchIndex: branchIndex,
+									modules: modules,
+									eventHandlers: eventHandlers,
+									...extra
+								},
+								position: { x: -1, y: -1 },
+								type: 'branchAllStart'
+							}
+
+							nodes.push(startNode)
+
+							addEdge(module.id, startNode.id, { type: 'empty', offset: currentOffset })
+
+							processModules(branch.modules, startNode, endNode, currentOffset)
+						})
+					}
 
 					previousId = endNode.id
 				} else if (module.value.type === 'forloopflow') {

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -22,6 +22,7 @@
 		moving: string | undefined
 		eventHandlers: GraphEventHandlers
 		index: number
+		enableTrigger: boolean
 	}
 
 	$: [edgePath, labelX, labelY] = getBezierPath({
@@ -58,6 +59,18 @@
 				}}
 			/>
 		</div>
+		<div
+			class="edgeButtonContainer nodrag nopan"
+			style:transform="translate(100%, -50%) translate({labelX}px,{labelY}px)"
+		>
+			<InsertModuleButton
+				index={data.index ?? 0}
+				modules={data?.modules ?? []}
+				on:new={(e) => {
+					data?.eventHandlers.insert({ modules: data.modules, index: data.index, detail: e.detail })
+				}}
+			/>
+		</div>
 	{/if}
 
 	{#if data?.moving}

frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import NodeWrapper from './NodeWrapper.svelte'
+	import type { FlowModule } from '$lib/gen/models/FlowModule'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+	import { getStateColor } from '../../util'
+	import type { GraphModuleState } from '../../model'
+
+	export let data: {
+		id: string
+		insertable: boolean
+		modules: FlowModule[]
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		offset: number
+	}
+</script>
+
+<NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
+	<VirtualItem
+		label={'No branches'}
+		modules={data.modules}
+		id={data.id}
+		hideId={true}
+		selectable={true}
+		selected={false}
+		insertable={false}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>