support switch and predicate nodes

Author: Zwiterrion

otoroshi/javascript/src/extensions/workflows/Flow.js

@@ -3,10 +3,8 @@ import React from 'react';
 import { Node } from './flow/Node'
 import { GroupNode } from './flow/GroupNode'
 import { CustomEdge } from './flow/CustomEdge'
-import { AddNode } from './nodes/AddNode'
 import { ReactFlow, Background, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { StartNode } from './nodes/StartNode';
 
 export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onConnect, onConnectEnd, onGroupNodeClick, setRfInstance }) {
 
@@ -26,8 +24,7 @@ export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onCo
             connectionLineType='simplebezier'
             nodeTypes={{
                 simple: Node,
-                group: GroupNode,
-                AddNode: AddNode,
+                group: GroupNode
             }}
             edgeTypes={{
                 customEdge: CustomEdge,

otoroshi/javascript/src/extensions/workflows/WorkflowsDesigner.js

@@ -327,9 +327,25 @@ const buildGraph = (workflows, addInformationsToNode, targetId, handleId) => {
             animated: true,
         })
     } else {
-        if(workflow.predicate) {
+        if (workflow.predicate !== undefined) {
             // sub path of switch group
-            console.log("HERE")
+
+            const predicate = buildGraph([{
+                kind: 'predicate'
+            }], addInformationsToNode, me, 'node')
+            const predicateNode = predicate.nodes[0]
+
+            nodes = [predicateNode, current]
+
+            edges.push({
+                id: `${me}-${predicateNode.id}`,
+                source: predicateNode.id,
+                sourceHandle: `output-${predicateNode.id}`,
+                target: me,
+                targetHandle: `input-${me}`,
+                type: 'customEdge',
+                animated: true,
+            })
         }
     }
 
@@ -481,7 +497,7 @@ function WorkflowsDesigner(props) {
         // });
     }, [])
 
-    const { fitView } = useReactFlow();
+    const { fitView, screenToFlowPosition } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals()
 
     const getLayoutedElements = (nodes, edges, options = {}) => {
@@ -546,7 +562,9 @@ function WorkflowsDesigner(props) {
             .then(({ nodes: layoutedNodes, edges: layoutedEdges }) => {
                 setNodes(layoutedNodes)
                 setEdges(layoutedEdges)
-                fitView();
+                fitView({
+                    padding: 5
+                });
             });
     };
 
@@ -746,7 +764,8 @@ function WorkflowsDesigner(props) {
                 setTimeout(() => {
                     setOnCreationMode({
                         ...connectionState.fromNode,
-                        handle: connectionState.fromHandle
+                        handle: connectionState.fromHandle,
+                        event
                     })
                 }, 2)
             }
@@ -778,13 +797,22 @@ function WorkflowsDesigner(props) {
     );
 
     const handleSelectNode = item => {
-        const targetId = uuid()
+        let targetId = uuid()
+
+        const { clientX, clientY } = 'changedTouches' in isOnCreation.event ? isOnCreation.event.changedTouches[0] : isOnCreation.event;
+
+        if (item.operator)
+            targetId = `${targetId}-operator`
 
         let newNode = addInformationsToNode({
             ...createSimpleNode([], item),
             id: targetId,
-            position: isOnCreation.fromOrigin ? isOnCreation.fromOrigin : findNonOverlappingPosition(nodes.map(n => n.position)),
+            // position: isOnCreation.fromOrigin ? isOnCreation.fromOrigin : findNonOverlappingPosition(nodes.map(n => n.position)),
             type: item.type || 'simple',
+            position: screenToFlowPosition({
+                x: clientX,
+                y: clientY,
+            }),
         })
 
         let newEdges = []
@@ -825,8 +853,6 @@ function WorkflowsDesigner(props) {
         setEdges(newEdges)
 
         setOnCreationMode(false)
-
-        onLayout({ direction: 'RIGHT', nodes: newNodes, edges: newEdges, from: 'handleSelect' });
     }
 
     function run() {

otoroshi/javascript/src/extensions/workflows/flow/AddNodeButton.js

@@ -33,7 +33,7 @@ export function Node(props) {
                 }}
             >
                 <div className='node-one-output d-flex-center'>
-                    {data.label || data.item?.label} {data.name}
+                    {data.operator ? <i className='fas fa-wrench' /> : (data.label || data.item?.label)} {data.name}
                 </div>
 
                 {data.nodeRenderer && data.nodeRenderer(props)}

otoroshi/javascript/src/extensions/workflows/flow/Node.js

@@ -1,4 +1,3 @@
-import { AddNode } from "../nodes/AddNode"
 import { AssignNode } from "../nodes/AssignNode"
 import { CallNode } from "../nodes/CallNode"
 import { ErrorNode } from "../nodes/ErrorNode"
@@ -54,6 +53,7 @@ import { DecrOperator } from '../operators/DecrOperator'
 import { IncrOperator } from '../operators/IncrOperator'
 import { ReturnedNode } from "../nodes/ReturnedNode"
 import { StartNode } from "../nodes/StartNode"
+import { PredicateNode } from "../nodes/PredicateNode"
 
 export const NODES = {
     "assign": AssignNode,
@@ -69,9 +69,9 @@ export const NODES = {
     "wait": WaitNode,
     "error": ErrorNode,
     "value": ValueNode,
-    "addnode": AddNode,
     "returned": ReturnedNode,
-    "start": StartNode
+    "start": StartNode,
+    "predicate": PredicateNode
 }
 
 export const OPERATORS = {

otoroshi/javascript/src/extensions/workflows/models/Functions.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { AddNode } from './AddNode'
 
 export const IfThenElseNode = (_workflow) => ({
     label: <i className='fas fa-question' />,

otoroshi/javascript/src/extensions/workflows/nodes/AddNode.js

@@ -10,6 +10,6 @@ export const ParallelFlowsNode = (_workflow) => ({
     sourcesIsArray: true,
     handlePrefix: 'path',
     sources: [],
-    height: () => `${110 + 20 * _workflow?.paths.length}px`,
+    height: () => `${110 + 20 * _workflow?.paths?.length}px`,
     targets: []
 })

otoroshi/javascript/src/extensions/workflows/nodes/IfThenElseNode.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const PredicateNode = (_workflow) => {
+    return {
+        label: <i className='fas fa-filter' />,
+        kind: 'PredicateNode',
+        name: 'Predicate',
+        type: 'simple',
+        workflow: _workflow,
+        sources: ['output']
+    }
+}