feat: support internal node in sub flow

Author: Zwiterrion

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export function AddNode(props) {
+    return <div className='node-one-output-add node-add--large' onClick={e => {
+        e.stopPropagation()
+        props.data.functions.openNodesExplorer(props)
+    }}>
+        <i className='fas fa-plus' />
+    </div>
+}

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

@@ -3,20 +3,22 @@ import React from 'react';
 import { Node } from './Node'
 import { GroupNode } from './GroupNode'
 import { CustomEdge } from './CustomEdge'
-import { ReactFlow, Background, Controls } from '@xyflow/react';
+import { ReactFlow, Background, Controls, useReactFlow } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
-export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onConnect }) {
+export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onConnect, onConnectEnd, onGroupNodeClick, setRfInstance }) {
     return <div style={{ height: 'calc(100vh - 52px)' }} onClick={onClick}>
         <ReactFlow
             nodes={nodes}
+            onInit={setRfInstance}
             onNodesChange={onNodesChange}
             edges={edges}
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
+            onConnectEnd={onConnectEnd}
             fitView
             fitViewOptions={{
-                padding: 1.5
+                padding: .5
             }}
             nodeTypes={{
                 simple: Node,
@@ -25,6 +27,7 @@ export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onCo
             edgeTypes={{
                 customEdge: CustomEdge,
             }}
+            onNodeDoubleClick={(_, group) => onGroupNodeClick(group.data)}
         >
             <Background />
             <Controls orientation='horizontal' showInteractive={false} />

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

@@ -1,57 +1,56 @@
 import React, { forwardRef } from "react"
-import { Panel } from "@xyflow/react";
-import { BaseNode } from "./BaseNode";
-
-export const GroupNodeLabel = forwardRef(
-    ({ children, className, ...props }, ref) => {
-        return (
-            <div ref={ref} className="h-full w-full" {...props}>
-                <div
-                    className={"w-fit bg-gray-200 bg-secondary p-2 text-xs text-card-foreground " + className}>
-                    {children}
-                </div>
-            </div>
-        );
-    },
-);
-
+import { Handle, NodeResizer, Panel, Position, useNodeConnections, useNodes } from "@xyflow/react";
+import { Node } from './Node'
+import { AddNode } from "./AddNode";
+import { NODES } from './models/Functions';
 
 export const GroupNode = forwardRef(
-    ({ selected, label, position, ...props }, ref) => {
-        const getLabelClassName = (position) => {
-            switch (position) {
-                case "top-left":
-                    return "rounded-br-sm";
-                case "top-center":
-                    return "rounded-b-sm";
-                case "top-right":
-                    return "rounded-bl-sm";
-                case "bottom-left":
-                    return "rounded-tr-sm";
-                case "bottom-right":
-                    return "rounded-tl-sm";
-                case "bottom-center":
-                    return "rounded-t-sm";
-                default:
-                    return "rounded-br-sm";
-            }
-        }
-
-        return (
-            <BaseNode
-                ref={ref}
-                selected={selected}
-                className="h-full overflow-hidden rounded-sm bg-white bg-opacity-50 p-0"
-                {...props}
-            >
-                <Panel className={"m-0 p-0"} position={position}>
-                    {props.data.label && (
-                        <GroupNodeLabel className={getLabelClassName(position)}>
-                            {props.data.label}
-                        </GroupNodeLabel>
-                    )}
-                </Panel>
-            </BaseNode>
-        );
-    },
+    (props, ref) => {
+        const { selected, label, position, data, ...rest } = props
+
+        // const internalNode = data.workflow.node
+        // const internalNodeData = internalNode?.kind ? NODES[internalNode.kind.toLowerCase()](internalNode) : {}
+
+        const isSelected = false
+        const isFirst = data.isFirst
+        const isLast = data.isLast
+
+        const connections = useNodeConnections();
+
+        const nodes = useNodes()
+        const hasChild = nodes.find(node => node.parentId === props.id)
+
+        // console.log(props.id, hasChild)
+
+        return <>
+            <NodeResizer
+                color="#ff0071"
+                isVisible={selected}
+                minWidth={100}
+                minHeight={30}
+            />
+            {!isFirst && <Handle type="source" position={Position.Left} />}
+            <Panel className="m-0 p-2 node-group-label" position={position}>
+                {data.label} {data.name}
+            </Panel>
+            <i className='fas fa-trash node-trash' onClick={e => {
+                e.stopPropagation()
+                props.handleDeleteNode ? props.handleDeleteNode() : data.functions.handleDeleteNode(props.id)
+            }} />
+            {!hasChild && <AddNode {...props} isInternalNode />}
+
+            {!isLast && <Handle type="target" position={Position.Right} id="a" />}
+
+            {connections.length < 2 && !isLast &&
+                <div className='node-one-output-dot' onClick={e => {
+                    e.stopPropagation()
+                    data.functions.openNodesExplorer(props)
+                }}>
+                    <div className='node-one-output-bar'></div>
+                    <div className='node-one-output-add'>
+                        <i className='fas fa-plus' />
+                    </div>
+                </div>}
+        </>
+    }
 )

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

@@ -6,6 +6,8 @@ export function ModalEditor({ node }) {
     if (!node)
         return null
 
+    console.log(node)
+
     const [state, setState] = useState()
 
     const schema = {
@@ -16,38 +18,32 @@ export function ModalEditor({ node }) {
         },
         enabled: {
             label: 'Enabled',
-            type: 'box-bool',
-            props: {
-                description: 'Boolean to toggle the node',
-            },
+            type: 'bool',
         },
         result: {
             type: 'string',
             label: 'Result',
-            props: {
-                description: 'Name of memory variable to store output'
-            }
+            help: 'Name of memory variable to store output'
+
         },
         returned: {
             label: 'Returned value',
             type: 'string',
-            props: {
-                description: 'Immediate result to return from the workflow '
-            }
+            help: 'Immediate result to return from the workflow'
         },
         ...node.schema
     }
     const flow = [
         {
             type: 'group',
             name: 'Informations',
-            collapsable: false,
-            fields: ['description', 'enabled', 'result', 'returned'],
+            // collapsed: true,
+            fields: ['enabled', 'description'],
         },
         {
             type: 'group',
             name: 'Configuration',
-            fields: node.flow
+            fields: [...(node.flow || []), 'result', 'returned']
         }
     ]
 

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

@@ -1,41 +1,42 @@
 
 import React from 'react'
 
-import { Handle, Position } from '@xyflow/react';
+import { Handle, Position, useNodeConnections } from '@xyflow/react';
 
 export function Node(props) {
     const { data } = props
-
-    const isSelected = false
     const isFirst = data.isFirst
     const isLast = data.isLast
 
-    const isTargetConnected = data.edges?.find(f => f.target === props.id)
-
-    // console.log(props)
+    const connections = useNodeConnections();
 
     return (
         <>
             {!isFirst && <Handle type="source" position={Position.Left} />}
 
-            <button
+            {props.children ? props.children : <button
                 className={`
                     d-flex-center m-0 node 
-                    ${isSelected ? 'node--selected' : ''}
+                    ${props.selected ? 'node--selected' : ''}
                     ${isFirst ? 'node--first' : ''}
                 `}
-                onDoubleClick={() => {
+                onDoubleClick={e => {
+                    e.stopPropagation()
                     data.functions.onDoubleClick(data)
-                }}>
+                }}
+            >
                 <div className='node-one-output d-flex-center'>
                     {data.label || data.item?.label}
                 </div>
-                <i className='fas fa-trash node-trash' />
-            </button>
+                <i className='fas fa-trash node-trash' onClick={e => {
+                    e.stopPropagation()
+                    props.handleDeleteNode ? props.handleDeleteNode() : data.functions.handleDeleteNode(props.id)
+                }} />
+            </button>}
 
             {!isLast && <Handle type="target" position={Position.Right} id="a" />}
 
-            {!isTargetConnected && !isLast &&
+            {connections.length < 2 && !isLast && !isFirst &&
                 <div className='node-one-output-dot'>
                     <div className='node-one-output-bar'></div>
                     <div className='node-one-output-add' onClick={e => {

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

@@ -10,6 +10,6 @@ export function NodesExplorer({ isOpen, isEdition, node, handleSelectNode }) {
 
         {isEdition && <ModalEditor node={node} />}
 
-        {!isEdition && <WhatsNext handleSelectNode={handleSelectNode} isOpen={isOpen} />}
+        {!isEdition && <WhatsNext handleSelectNode={handleSelectNode} isOpen={isOpen} node={node}/>}
     </div>
 }