windmill-components 1.493.9 → 1.501.4

package/package/components/graph/{graphBuilder.js → graphBuilder.svelte.js}

@@ -10,6 +10,20 @@ export function isTriggerStep(module) {
 export function buildPrefix(prefix, id) {
     return (prefix ?? '') + id + ':';
 }
+// input2: InputNode,
+// module: ModuleNode,
+// branchAllStart: BranchAllStart,
+// branchAllEnd: BranchAllEndNode,
+// forLoopEnd: ForLoopEndNode,
+// forLoopStart: ForLoopStartNode,
+// result: ResultNode,
+// whileLoopStart: ForLoopStartNode,
+// whileLoopEnd: ForLoopEndNode,
+// branchOneStart: BranchOneStart,
+// branchOneEnd: BranchOneEndNode,
+// subflowBound: SubflowBound,
+// noBranch: NoBranchNode,
+// trigger: TriggersNode
 export function graphBuilder(modules, extra, failureModule, preprocessorModule, eventHandlers, success, useDataflow, selectedId, moving, simplifiableFlow, flowPathForTriggerNode, expandedSubflows
 // triggerProps?: {
 // 	path?: string
@@ -23,7 +37,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
         if (!modules) {
             return { nodes, edges };
         }
-        function addNode(module, offset, type, subModules) {
+        function addNode(module, offset) {
             const duplicated = nodes.find((n) => n.id === module.id);
             if (duplicated) {
                 console.log('Duplicated node detected: ', module, duplicated);
@@ -35,17 +49,17 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             nodes.push({
                 id: module.id,
                 data: {
-                    value: module.value,
                     offset: offset,
                     module: module,
-                    modules: subModules ?? modules,
+                    id: module.id,
                     parentIds: [],
                     eventHandlers: eventHandlers,
                     moving: moving,
-                    ...extra
+                    flowModuleStates: extra.flowModuleStates,
+                    insertable: extra.insertable,
+                    editMode: extra.editMode
                 },
-                position: { x: -1, y: -1 },
-                type: type
+                type: 'module'
             });
             return module.id;
         }
@@ -77,7 +91,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             // No cycle detected for this path
             return false;
         }
-        function addEdge(sourceId, targetId, prefix, options) {
+        function addEdge(sourceId, targetId, branch, prefix, options) {
             parents[targetId] = [...(parents[targetId] ?? []), sourceId];
             const mods = options?.subModules ?? modules;
             let index = mods?.findIndex((m) => m.id === targetId) ?? -1;
@@ -92,9 +106,9 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 target: targetId,
                 type: options?.type ?? 'edge',
                 data: {
-                    modules: options?.subModules ?? modules,
                     sourceId,
                     targetId,
+                    branch,
                     moving,
                     eventHandlers,
                     simplifiedTriggerView: simplifiableFlow?.simplifiedFlow,
@@ -109,38 +123,40 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
         }
         const inputNode = {
             id: 'Input',
-            position: { x: -1, y: -1 },
             type: 'input2',
             data: {
                 eventHandlers: eventHandlers,
-                modules: modules,
                 hasPreprocessor: !!preprocessorModule || flowPathForTriggerNode == undefined,
-                ...extra
+                insertable: extra.insertable,
+                moving: moving,
+                disableAi: extra.disableAi,
+                cache: extra.cache,
+                earlyStop: extra.earlyStop,
+                editMode: extra.editMode
             }
         };
         let triggerNode = undefined;
         if (flowPathForTriggerNode) {
             triggerNode = {
                 id: 'Trigger',
-                position: { x: -1, y: -1 },
                 type: 'trigger',
                 data: {
                     simplifiableFlow: simplifiableFlow,
                     path: flowPathForTriggerNode,
                     newFlow: extra.newFlow,
                     eventHandlers: eventHandlers,
-                    modules: modules,
-                    isEditor: extra.insertable
+                    isEditor: extra.insertable,
+                    disableAi: extra.disableAi
                 }
             };
             nodes.push(triggerNode);
             if (preprocessorModule != null && preprocessorModule != undefined) {
-                addEdge('Trigger', preprocessorModule.id, undefined, {
+                addEdge('Trigger', preprocessorModule.id, undefined, undefined, {
                     type: 'empty'
                 });
             }
             else {
-                addEdge('Trigger', 'Input', undefined, {
+                addEdge('Trigger', 'Input', undefined, undefined, {
                     type: 'empty'
                 });
             }
@@ -149,18 +165,15 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             id: 'result',
             data: {
                 eventHandlers: eventHandlers,
-                modules: modules,
-                success: success,
-                ...extra
+                success: success
             },
-            position: { x: -1, y: -1 },
             type: 'result'
         };
         if (simplifiableFlow?.simplifiedFlow !== true) {
             nodes.push(inputNode);
             nodes.push(resultNode);
         }
-        function processModules(modules, beforeNode, nextNode, simplifiedTriggerView, prefix, currentOffset = 0, disableMoveIds = [], parentIndex, branchChosen) {
+        function processModules(modules, branch, beforeNode, nextNode, simplifiedTriggerView, prefix, currentOffset = 0, disableMoveIds = [], parentIndex) {
             if (prefix != undefined) {
                 modules.forEach((m) => {
                     if (!m['oid']) {
@@ -172,7 +185,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             let previousId = undefined;
             if (modules.length === 0) {
                 if (nextNode) {
-                    addEdge(beforeNode.id, nextNode.id, prefix, {
+                    addEdge(beforeNode.id, nextNode.id, branch, prefix, {
                         subModules: modules,
                         disableMoveIds
                     });
@@ -183,25 +196,23 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     const localDisableMoveIds = [...disableMoveIds, module.id];
                     // Add the edge between the previous node and the current one
                     if (index > 0 && previousId && expandedSubflows[module.id] == undefined) {
-                        addEdge(previousId, module.id, prefix, {
+                        addEdge(previousId, module.id, branch, prefix, {
                             subModules: modules,
                             disableMoveIds
                         });
                     }
                     if (module.value.type === 'branchall') {
                         // Start
-                        addNode(module, currentOffset, 'module', modules);
+                        addNode(module, currentOffset);
                         // "Collect result of each branch" node
                         const endNode = {
                             id: `${module.id}-end`,
                             data: {
                                 offset: currentOffset,
                                 id: module.id,
-                                module: module,
-                                modules: modules,
-                                ...extra
+                                eventHandlers: eventHandlers,
+                                flowModuleStates: extra.flowModuleStates
                             },
-                            position: { x: -1, y: -1 },
                             type: 'branchAllEnd'
                         };
                         nodes.push(endNode);
@@ -213,18 +224,18 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     offset: currentOffset,
                                     id: module.id,
                                     branchIndex: -1,
-                                    modules: modules,
                                     eventHandlers: eventHandlers,
-                                    ...extra
+                                    flowModuleStates: extra.flowModuleStates,
+                                    branchOne: false,
+                                    label: 'No branches'
                                 },
-                                position: { x: -1, y: -1 },
                                 type: 'noBranch'
                             };
                             nodes.push(startNode);
-                            addEdge(module.id, startNode.id, prefix, {
+                            addEdge(module.id, startNode.id, { rootId: module.id, branch: 0 }, prefix, {
                                 type: 'empty'
                             });
-                            addEdge(startNode.id, endNode.id, prefix, {
+                            addEdge(startNode.id, endNode.id, { rootId: module.id, branch: 0 }, prefix, {
                                 type: 'empty'
                             });
                         }
@@ -238,25 +249,25 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                         label: defaultIfEmptyString(branch.summary, `Branch ${branchIndex + 1}`),
                                         id: module.id,
                                         branchIndex: branchIndex,
-                                        modules: modules,
                                         eventHandlers: eventHandlers,
-                                        ...extra
+                                        flowModuleStates: extra.flowModuleStates,
+                                        insertable: extra.insertable,
+                                        branchOne: false
                                     },
-                                    position: { x: -1, y: -1 },
                                     type: 'branchAllStart'
                                 };
                                 nodes.push(startNode);
-                                addEdge(module.id, startNode.id, prefix, {
+                                addEdge(module.id, startNode.id, { rootId: module.id, branch: branchIndex }, prefix, {
                                     type: 'empty'
                                 });
-                                processModules(branch.modules, startNode, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}-${branchIndex}` : `${index}-${branchIndex}`);
+                                processModules(branch.modules, { rootId: module.id, branch: branchIndex }, startNode, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}-${branchIndex}` : `${index}-${branchIndex}`);
                             });
                         }
                         previousId = endNode.id;
                     }
                     else if (module.value.type === 'forloopflow') {
                         if (!simplifiedTriggerView) {
-                            addNode(module, currentOffset, 'module', modules);
+                            addNode(module, currentOffset);
                         }
                         const startNode = {
                             id: `${module.id}-start`,
@@ -264,21 +275,21 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 offset: currentOffset + 25,
                                 id: module.id,
                                 module: module,
-                                modules: modules,
                                 simplifiedTriggerView,
                                 eventHandlers: eventHandlers,
-                                ...extra
+                                editMode: extra.editMode,
+                                flowModuleStates: extra.flowModuleStates,
+                                selectedId: extra.selectedId
                             },
-                            position: { x: -1, y: -1 },
                             type: 'forLoopStart'
                         };
                         if (!simplifiedTriggerView) {
-                            addEdge(module.id, startNode.id, prefix, {
+                            addEdge(module.id, startNode.id, undefined, prefix, {
                                 type: 'empty'
                             });
                         }
                         else if (previousId) {
-                            addEdge(previousId, startNode.id, prefix, {
+                            addEdge(previousId, startNode.id, undefined, prefix, {
                                 type: 'empty'
                             });
                         }
@@ -287,60 +298,56 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                             data: {
                                 offset: currentOffset,
                                 id: module.id,
-                                module: module,
-                                modules: modules,
                                 eventHandlers: eventHandlers,
                                 simplifiedTriggerView,
-                                ...extra
+                                flowModuleStates: extra.flowModuleStates
                             },
-                            position: { x: -1, y: -1 },
                             type: 'forLoopEnd'
                         };
                         nodes.push(startNode);
                         nodes.push(endNode);
                         const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex;
-                        processModules(module.value.modules, startNode, endNode, false, prefix, currentOffset + 25, localDisableMoveIds, parentIndex
+                        processModules(module.value.modules, { rootId: module.id, branch: 0 }, startNode, endNode, false, prefix, currentOffset + 25, localDisableMoveIds, parentIndex
                             ? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
                             : `${index}-${selectedIterIndex ?? '?'}`);
                         previousId = endNode.id;
                     }
                     else if (module.value.type === 'whileloopflow') {
-                        addNode(module, currentOffset, 'module', modules);
+                        addNode(module, currentOffset);
                         const startNode = {
                             id: `${module.id}-start`,
                             data: {
                                 offset: currentOffset + 25,
-                                module: module,
-                                modules: modules,
-                                eventHandlers: eventHandlers,
-                                ...extra
+                                eventHandlers: eventHandlers
                             },
-                            position: { x: -1, y: -1 },
                             type: 'whileLoopStart'
                         };
-                        addEdge(module.id, startNode.id, prefix, {
+                        addEdge(module.id, startNode.id, { rootId: module.id, branch: 0 }, prefix, {
                             type: 'empty'
                         });
                         const endNode = {
                             id: `${module.id}-end`,
-                            data: { offset: currentOffset, module: module, modules: modules, ...extra },
-                            position: { x: -1, y: -1 },
+                            data: { offset: currentOffset, ...extra },
                             type: 'whileLoopEnd'
                         };
                         nodes.push(startNode);
                         nodes.push(endNode);
                         const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex;
-                        processModules(module.value.modules, startNode, endNode, false, prefix, currentOffset + 25, localDisableMoveIds, parentIndex
+                        processModules(module.value.modules, { rootId: module.id, branch: 0 }, startNode, endNode, false, prefix, currentOffset + 25, localDisableMoveIds, parentIndex
                             ? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
                             : `${index}-${selectedIterIndex ?? '?'}`);
                         previousId = endNode.id;
                     }
                     else if (module.value.type === 'branchone') {
-                        addNode(module, currentOffset, 'module', modules);
+                        addNode(module, currentOffset);
                         const endNode = {
                             id: `${module.id}-end`,
-                            data: { offset: currentOffset, eventHandlers: eventHandlers },
-                            position: { x: -1, y: -1 },
+                            data: {
+                                offset: currentOffset,
+                                eventHandlers: eventHandlers,
+                                flowModuleStates: extra.flowModuleStates,
+                                id: module.id
+                            },
                             type: 'branchOneEnd'
                         };
                         nodes.push(endNode);
@@ -352,18 +359,17 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 label: 'Default',
                                 id: module.id,
                                 branchIndex: -1,
-                                modules: module.value.default,
                                 eventHandlers: eventHandlers,
                                 branchOne: true,
                                 ...extra
                             },
-                            position: { x: -1, y: -1 },
                             type: 'noBranch'
                         };
                         nodes.push(defaultBranch);
-                        addEdge(module.id, defaultBranch.id, prefix, { type: 'empty' });
-                        const branchChosen = extra.flowModuleStates?.[module.id]?.branchChosen;
-                        processModules(module.value.default, defaultBranch, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}` : index.toString(), branchChosen == 0);
+                        addEdge(module.id, defaultBranch.id, { rootId: module.id, branch: 0 }, prefix, {
+                            type: 'empty'
+                        });
+                        processModules(module.value.default, { rootId: module.id, branch: 0 }, defaultBranch, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}` : index.toString());
                         module.value.branches.forEach((branch, branchIndex) => {
                             // Start node by branch
                             const startNode = {
@@ -374,22 +380,26 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     preLabel: branch.summary ? '' : branch.expr,
                                     id: module.id,
                                     branchIndex: branchIndex,
-                                    modules: modules,
                                     eventHandlers: eventHandlers,
-                                    ...extra
+                                    insertable: extra.insertable,
+                                    flowModuleStates: extra.flowModuleStates,
+                                    selected: false,
+                                    modules: branch.modules
                                 },
-                                position: { x: -1, y: -1 },
                                 type: 'branchOneStart'
                             };
                             nodes.push(startNode);
-                            addEdge(module.id, startNode.id, prefix, { type: 'empty' });
-                            processModules(branch.modules, startNode, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}` : index.toString(), branchChosen == branchIndex + 1);
+                            addEdge(module.id, startNode.id, { rootId: module.id, branch: branchIndex }, prefix, {
+                                type: 'empty'
+                            });
+                            processModules(branch.modules, { rootId: module.id, branch: branchIndex + 1 }, startNode, endNode, false, prefix, currentOffset, localDisableMoveIds, parentIndex ? `${parentIndex}-${index}` : index.toString());
                         });
                         previousId = endNode.id;
                     }
                     else {
                         let expanded = expandedSubflows[module.id];
                         if (expanded) {
+                            expanded = $state.snapshot(expanded);
                             const startId = `${module.id}-subflow-start`;
                             const idWithoutPrefix = module.id.startsWith('subflow:')
                                 ? module.id.substring(8)
@@ -401,19 +411,20 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     label: `Start of subflow ${idWithoutPrefix}`,
                                     id: startId,
                                     subflowId: module.id,
-                                    modules: modules,
                                     eventHandlers: eventHandlers,
-                                    ...extra
+                                    preLabel: '',
+                                    selected: false
                                 },
-                                position: { x: -1, y: -1 },
                                 type: 'subflowBound'
                             };
                             nodes.push(startNode);
                             if (previousId) {
-                                addEdge(previousId, startNode.id, prefix, { type: 'empty' });
+                                addEdge(previousId, startNode.id, undefined, prefix, {
+                                    type: 'empty'
+                                });
                             }
                             else {
-                                addEdge(beforeNode.id, startNode.id, prefix, { type: 'empty' });
+                                addEdge(beforeNode.id, startNode.id, undefined, prefix, { type: 'empty' });
                             }
                             const endId = `${module.id}-subflow-end`;
                             const endNode = {
@@ -423,31 +434,30 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                     label: `End of subflow ${idWithoutPrefix}`,
                                     id: endId,
                                     subflowId: module.id,
-                                    modules: modules,
                                     eventHandlers: eventHandlers,
-                                    ...extra
+                                    preLabel: '',
+                                    selected: false
                                 },
-                                position: { x: -1, y: -1 },
                                 type: 'subflowBound'
                             };
                             nodes.push(endNode);
-                            processModules(expanded, startNode, endNode, false, buildPrefix(prefix, module['oid'] ?? module.id), currentOffset, localDisableMoveIds);
+                            processModules(expanded, undefined, startNode, endNode, false, buildPrefix(prefix, module['oid'] ?? module.id), currentOffset, localDisableMoveIds);
                             previousId = endNode.id;
                         }
                         else {
-                            addNode(module, currentOffset, 'module', modules);
+                            addNode(module, currentOffset);
                             previousId = module.id;
                         }
                     }
                     if (index === 0 && expandedSubflows[module.id] == undefined) {
-                        addEdge(beforeNode.id, module.id, prefix, {
+                        addEdge(beforeNode.id, module.id, undefined, prefix, {
                             subModules: modules,
                             disableMoveIds,
                             disableInsert: simplifiedTriggerView
                         });
                     }
                     if (index === modules.length - 1 && previousId && nextNode) {
-                        addEdge(previousId, nextNode.id, prefix, {
+                        addEdge(previousId, nextNode.id, branch, prefix, {
                             subModules: modules,
                             disableMoveIds
                         });
@@ -456,10 +466,10 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             }
         }
         if (simplifiableFlow?.simplifiedFlow === true && triggerNode) {
-            processModules(modules, triggerNode, undefined, true, undefined);
+            processModules(modules, undefined, triggerNode, undefined, true, undefined);
         }
         else {
-            processModules(modules, inputNode, resultNode, false, undefined);
+            processModules(modules, undefined, inputNode, resultNode, false, undefined);
         }
         if (failureModule) {
             let toAdd = {};
@@ -472,22 +482,22 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 }
             });
             Object.entries(toAdd).forEach((x) => {
-                addNode({ ...failureModule, id: x[1] }, 0, 'module');
-                addEdge(x[0], x[1], undefined, { type: 'empty' });
+                addNode({ ...failureModule, id: x[1] }, 0);
+                addEdge(x[0], x[1], undefined, undefined, { type: 'empty' });
             });
         }
         if (preprocessorModule) {
-            addNode(preprocessorModule, 0, 'module');
+            addNode(preprocessorModule, 0);
             const id = JSON.parse(JSON.stringify(preprocessorModule.id));
-            addEdge(id, 'Input', undefined, { type: 'empty' });
+            addEdge(id, 'Input', undefined, undefined, { type: 'empty' });
         }
         if (failureModule && !extra.flowModuleStates) {
-            addNode(failureModule, 0, 'module');
+            addNode(failureModule, 0);
         }
         Object.keys(parents).forEach((key) => {
             const node = nodes.find((n) => n.id === key);
             if (node) {
-                node.data.parentIds = parents[key];
+                node.parentIds = parents[key];
             }
         });
         if (useDataflow && selectedId) {
@@ -503,7 +513,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                                 pid = parent.id;
                             }
                         }
-                        addEdge(pid, selectedId, undefined, {
+                        addEdge(pid, selectedId, undefined, undefined, {
                             customId: `dep-${pid}-${selectedId}-${input}-${index}`,
                             type: 'dataflowedge'
                         });
@@ -511,7 +521,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 });
                 Object.entries(deps.dependents).forEach((x, i) => {
                     let pid = x[0];
-                    addEdge(selectedId, pid, undefined, {
+                    addEdge(selectedId, pid, undefined, undefined, {
                         customId: `dep-${selectedId}-${pid}-${i}`,
                         type: 'dataflowedge'
                     });

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
-import { getBezierPath, BaseEdge, EdgeLabelRenderer } from '@xyflow/svelte';
+import { getBezierPath, BaseEdge, EdgeLabel } from '@xyflow/svelte';
 import { ClipboardCopy } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
-export let sourceX;
-export let sourceY;
-export let sourcePosition;
-export let targetX;
-export let targetY;
-export let targetPosition;
-export let markerEnd = undefined;
-export let data;
-$: [edgePath] = getBezierPath({
+const { useDataflow } = getContext('FlowGraphContext');
+let { 
+// id,
+sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
+// style,
+data } = $props();
+let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
     sourcePosition,
@@ -20,28 +18,27 @@ $: [edgePath] = getBezierPath({
     targetY,
     targetPosition,
     curvature: 0.25
-});
-$: completeEdge =
-    targetY - sourceY > 100
-        ? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
-        : edgePath;
-const { useDataflow } = getContext('FlowGraphContext');
+}));
+let completeEdge = $derived(targetY - sourceY > 100
+    ? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
+    : edgePath);
 </script>
 
-<EdgeLabelRenderer>
+<EdgeLabel x={sourceX} y={sourceY + 28} class="base-edge" style="">
 	{#if data?.insertable && !$useDataflow && !data?.moving}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
-			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY + 2}px)"
+			style:transform="translate(-50%, -50%)"
 		>
+			<!-- <pre class="text-2xs">A{JSON.stringify(data.branch)}, {data.sourceId}, {data.targetId}</pre> -->
+			<!-- {data.targetId} B -->
 			<InsertModuleButton
-				disableAi={data.disableAi}
 				index={data.index ?? 0}
-				allowTrigger={data.enableTrigger}
-				modules={data?.modules ?? []}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						kind: e.detail.kind,
 						inlineScript: e.detail.inlineScript
@@ -50,7 +47,9 @@ const { useDataflow } = getContext('FlowGraphContext');
 				on:pickScript={(e) => {
 					// console.log('pickScript', e)
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						script: e.detail,
 						kind: e.detail.kind
@@ -59,7 +58,9 @@ const { useDataflow } = getContext('FlowGraphContext');
 				on:pickFlow={(e) => {
 					// console.log('pickFlow', e)
 					data?.eventHandlers.insert({
-						modules: data.modules,
+						sourceId: data.sourceId,
+						targetId: data.targetId,
+						branch: data.branch,
 						index: data.index,
 						flow: e.detail
 					})
@@ -69,16 +70,15 @@ const { useDataflow } = getContext('FlowGraphContext');
 	{/if}
 
 	{#if data?.moving}
-		<div
-			class="edgeButtonContainer nodrag nopan"
-			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
-		>
+		<div class="edgeButtonContainer nodrag nopan" style:transform="translate(-50%, -50%)">
 			{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
 				<button
 					title="Paste module"
-					on:click={() => {
+					onclick={() => {
 						data.eventHandlers.insert({
-							modules: data.modules,
+							branch: data.branch,
+							sourceId: data.sourceId,
+							targetId: data.targetId,
 							index: data.index
 						})
 					}}
@@ -95,7 +95,7 @@ const { useDataflow } = getContext('FlowGraphContext');
 			{/if}
 		</div>
 	{/if}
-</EdgeLabelRenderer>
+</EdgeLabel>
 
 <BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />