diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 7e84ede106..f519222ce8 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -21,7 +21,7 @@ import graphBuilder from './graphBuilder' import ModuleNode from './renderers/nodes/ModuleNode.svelte' import InputNode from './renderers/nodes/InputNode.svelte' - import BranchAllStart from './renderers/nodes/BranchAllStart.svelte' + import BranchAllStart from './renderers/nodes/BranchOneStart.svelte' import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte' import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte' import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte' @@ -33,6 +33,7 @@ import Toggle from '../Toggle.svelte' import DataflowEdge from './renderers/edges/DataflowEdge.svelte' import { encodeState } from '$lib/utils' + import BranchOneStart from './renderers/nodes/BranchOneStart.svelte' export let success: boolean | undefined = undefined export let modules: FlowModule[] | undefined = [] @@ -189,7 +190,9 @@ forLoopStart: ForLoopStartNode, result: ResultNode, whileLoopStart: ForLoopStartNode, - whileLoopEnd: ForLoopEndNode + whileLoopEnd: ForLoopEndNode, + branchOneStart: BranchOneStart, + branchOneEnd: BranchAllEndNode } as any const edgeTypes = { diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts index b04b60b129..03100ba794 100644 --- a/frontend/src/lib/components/graph/graphBuilder.ts +++ b/frontend/src/lib/components/graph/graphBuilder.ts @@ -119,179 +119,183 @@ export default function graphBuilder( ) { let previousId: string | undefined = undefined - modules.forEach((module, index) => { - // Add the edge between the previous node and the current one - if (index > 0 && previousId) { - addEdge(previousId, module.id) - } - - if (module.value.type === 'rawscript') { - addNode(module, currentOffset, 'module') - - previousId = module.id - } else if (module.value.type === 'branchall') { - // Start - addNode(module, currentOffset, 'module') - - // "Collect result of each branch" node - const endNode = { - id: `${module.id}-end`, - data: { - offset: currentOffset, - id: module.id, - module: module, - modules: modules, - ...extra - }, - position: { x: -1, y: -1 }, - type: 'branchAllEnd' + if (modules.length === 0) { + addEdge(beforeNode.id, nextNode.id, { subModules: modules }) + } else { + modules.forEach((module, index) => { + // Add the edge between the previous node and the current one + if (index > 0 && previousId) { + addEdge(previousId, module.id) } - nodes.push(endNode) - module.value.branches.forEach((branch, branchIndex) => { - // Start node by branch + if (module.value.type === 'branchall') { + // Start + addNode(module, currentOffset, 'module') - const startNode = { - id: `${module.id}-branch-${branchIndex}`, + // "Collect result of each branch" node + const endNode = { + id: `${module.id}-end`, data: { offset: currentOffset, - label: `Branch ${branchIndex + 1}`, id: module.id, - branchIndex: branchIndex, + module: module, + modules: modules, + ...extra + }, + position: { x: -1, y: -1 }, + type: 'branchAllEnd' + } + nodes.push(endNode) + + module.value.branches.forEach((branch, branchIndex) => { + // Start node by branch + + 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' }) + + processModules(branch.modules, startNode, endNode) + }) + + previousId = endNode.id + } else if (module.value.type === 'forloopflow') { + addNode(module, currentOffset, 'module') + + const startNode = { + id: `${module.id}-start`, + data: { + offset: currentOffset + 50, + id: module.id, + module: module, modules: modules, eventHandlers: eventHandlers, ...extra }, position: { x: -1, y: -1 }, - type: 'branchAllStart' + type: 'forLoopStart' } - nodes.push(startNode) - addEdge(module.id, startNode.id, { type: 'empty' }) - if (branch.modules.length === 0) { - addEdge(startNode.id, endNode.id, { type: 'empty' }) - } else { - processModules(branch.modules, startNode, endNode) - } - }) - - previousId = endNode.id - } else if (module.value.type === 'forloopflow') { - addNode(module, currentOffset, 'module') - - const startNode = { - id: `${module.id}-start`, - data: { - offset: currentOffset + 50, - id: module.id, - module: module, - modules: modules, - eventHandlers: eventHandlers, - ...extra - }, - position: { x: -1, y: -1 }, - type: 'forLoopStart' - } - - addEdge(module.id, startNode.id, { type: 'empty' }) - - const endNode = { - id: `${module.id}-end`, - data: { - offset: currentOffset, - id: module.id, - module: module, - modules: modules, - eventHandlers: eventHandlers, - ...extra - }, - position: { x: -1, y: -1 }, - type: 'forLoopEnd' - } - - nodes.push(startNode) - nodes.push(endNode) - - if (module.value.modules.length > 0) { - processModules(module.value.modules, startNode, endNode, currentOffset + 50) - } else { - addEdge(startNode.id, endNode.id, { subModules: module.value.modules }) - } - previousId = endNode.id - } else if (module.value.type === 'whileloopflow') { - addNode(module, currentOffset, 'module') - - const startNode = { - id: `${module.id}-start`, - data: { - offset: currentOffset + 50, - module: module, - modules: modules, - eventHandlers: eventHandlers, - ...extra - }, - position: { x: -1, y: -1 }, - type: 'whileLoopStart' - } - addEdge(module.id, startNode.id, { type: 'empty' }) - - const endNode = { - id: `${module.id}-end`, - data: { offset: currentOffset, module: module, modules: modules, ...extra }, - position: { x: -1, y: -1 }, - type: 'whileLoopEnd' - } - - nodes.push(startNode) - nodes.push(endNode) - - processModules(module.value.modules, startNode, endNode, currentOffset + 50) - previousId = endNode.id - } else if (module.value.type === 'branchone') { - // Start - addNode(module, currentOffset, 'module') - - // "Collect result of each branch" node - const endNode = { - id: `${module.id}-end`, - data: { offset: currentOffset }, - position: { x: -1, y: -1 }, - type: 'branchOneEnd' - } - nodes.push(endNode) - - module.value.branches.forEach((branch, branchIndex) => { - // Start node by branch - - const startNode = { - id: `${module.id}-branch-${branchIndex}`, - data: { offset: currentOffset }, + const endNode = { + id: `${module.id}-end`, + data: { + offset: currentOffset, + id: module.id, + module: module, + modules: modules, + eventHandlers: eventHandlers, + ...extra + }, position: { x: -1, y: -1 }, - type: 'branchOneStart' + type: 'forLoopEnd' } nodes.push(startNode) + nodes.push(endNode) - addEdge(module.id, startNode.id) + processModules(module.value.modules, startNode, endNode, currentOffset + 50) - processModules(branch.modules, startNode, endNode) - }) - } else if (module.value.type === 'identity') { - addNode(module, currentOffset, 'module') + previousId = endNode.id + } else if (module.value.type === 'whileloopflow') { + addNode(module, currentOffset, 'module') - previousId = module.id - } + const startNode = { + id: `${module.id}-start`, + data: { + offset: currentOffset + 50, + module: module, + modules: modules, + eventHandlers: eventHandlers, + ...extra + }, + position: { x: -1, y: -1 }, + type: 'whileLoopStart' + } + addEdge(module.id, startNode.id, { type: 'empty' }) - if (index === 0) { - addEdge(beforeNode.id, module.id) - } + const endNode = { + id: `${module.id}-end`, + data: { offset: currentOffset, module: module, modules: modules, ...extra }, + position: { x: -1, y: -1 }, + type: 'whileLoopEnd' + } - if (index === modules.length - 1 && previousId) { - addEdge(previousId, nextNode.id) - } - }) + nodes.push(startNode) + nodes.push(endNode) + + processModules(module.value.modules, startNode, endNode, currentOffset + 50) + + previousId = endNode.id + } else if (module.value.type === 'branchone') { + // Start + addNode(module, currentOffset, 'module') + + // "Collect result of each branch" node + const endNode = { + id: `${module.id}-end`, + data: { offset: currentOffset }, + position: { x: -1, y: -1 }, + type: 'branchOneEnd' + } + nodes.push(endNode) + + module.value.branches.forEach((branch, branchIndex) => { + // Start node by branch + + 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: 'branchOneStart' + } + + nodes.push(startNode) + + addEdge(module.id, startNode.id) + + processModules(branch.modules, startNode, endNode) + }) + + previousId = endNode.id + } else { + addNode(module, currentOffset, 'module') + + previousId = module.id + } + + if (index === 0) { + addEdge(beforeNode.id, module.id) + } + + if (index === modules.length - 1 && previousId) { + addEdge(previousId, nextNode.id) + } + }) + } } processModules(modules, inputNode, resultNode) @@ -300,10 +304,6 @@ export default function graphBuilder( addNode(failureModule, 0, 'module') } - if (modules.length === 0) { - addEdge(inputNode.id, resultNode.id) - } - Object.keys(parents).forEach((key) => { const node = nodes.find((n) => n.id === key) @@ -312,7 +312,6 @@ export default function graphBuilder( } }) - // DATAFLOW if (useDataflow && selectedId) { let deps = getDependeeAndDependentComponents(selectedId, modules ?? [], failureModule) diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart copy.svelte similarity index 100% rename from frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte rename to frontend/src/lib/components/graph/renderers/nodes/BranchAllStart copy.svelte diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte new file mode 100644 index 0000000000..dde67e3e5d --- /dev/null +++ b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte @@ -0,0 +1,80 @@ + + + + {#if data.insertable} + + + + Delete branch + + {/if} + + + + { + data.eventHandlers.select(data.id) + }} + on:deleteBranch={(e) => { + data.eventHandlers.deleteBranch(e.detail, data.label) + }} + on:insert={(e) => { + data.eventHandlers.insert(e.detail) + }} + /> + diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte new file mode 100644 index 0000000000..b48b15abfe --- /dev/null +++ b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte @@ -0,0 +1,32 @@ + + + + { + data?.eventHandlers?.select(e.detail) + }} + /> +