render with elkjs

Author: Zwiterrion

otoroshi/javascript/package.json

@@ -34,6 +34,7 @@
     "bcryptjs": "2.4.3",
     "browser-update": "3.3.22",
     "byte-converter": "0.2.0",
+    "elkjs": "^0.10.0",
     "es-symbol": "1.1.2",
     "es6-shim": "0.35.5",
     "faker": "5.1.0",
@@ -48,9 +49,9 @@
     "moment": "2.29.4",
     "prop-types": "15.7.2",
     "query-string": "9.1.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-ace": "12.0.0",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.2",
     "react-query": "^3.39.3",
     "react-router-dom": "5.2.0",
     "react-select": "^5.7.5",

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

@@ -1,12 +1,15 @@
 import React from 'react';
 
-import { Node } from './Node'
-import { GroupNode } from './GroupNode'
-import { CustomEdge } from './CustomEdge'
-import { ReactFlow, Background, Controls, useReactFlow } from '@xyflow/react';
+import { Node } from './flow/Node'
+import { GroupNode } from './flow/GroupNode'
+import { IfThenElseNode } from './flow/IfThenElseNode'
+import { CustomEdge } from './flow/CustomEdge'
+import { AddNode } from './nodes/AddNode'
+import { ReactFlow, Background, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
 export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onConnect, onConnectEnd, onGroupNodeClick, setRfInstance }) {
+
     return <div style={{ height: 'calc(100vh - 52px)' }} onClick={onClick}>
         <ReactFlow
             nodes={nodes}
@@ -20,9 +23,12 @@ export function Flow({ nodes, onClick, edges, onNodesChange, onEdgesChange, onCo
             fitViewOptions={{
                 padding: .5
             }}
+            connectionLineType='smoothstep'
             nodeTypes={{
                 simple: Node,
-                group: GroupNode
+                group: GroupNode,
+                IfThenElse: IfThenElseNode,
+                AddNode: AddNode
             }}
             edgeTypes={{
                 customEdge: CustomEdge,

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

@@ -6,8 +6,6 @@ export function ModalEditor({ node }) {
     if (!node)
         return null
 
-    console.log(node)
-
     const [state, setState] = useState()
 
     const schema = {

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

@@ -1,4 +1,4 @@
-const NODE_SIZE = 120;
+const NODE_SIZE = 100;
 const PADDING = 150;
 const TOTAL_SIZE = NODE_SIZE + PADDING;
 const CANVAS_WIDTH = window.innerWidth;
@@ -21,7 +21,7 @@ function isOverlapping(x, y, nodes) {
     })
 }
 
-function findRandomPosition(existingNodes) {
+export function findRandomPosition(existingNodes) {
     for (let i = 0; i < MAX_RANDOM_ATTEMPTS; i++) {
         const x = Math.random() * (CANVAS_WIDTH - NODE_SIZE);
         const y = Math.random() * (CANVAS_HEIGHT - NODE_SIZE);