support delete handle

Author: Zwiterrion

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

@@ -623,7 +623,8 @@ function WorkflowsDesigner(props) {
                     handleDeleteNode: handleDeleteNode,
                     updateData: updateData,
                     addHandleSource: addHandleSource,
-                    handleWorkflowChange: handleWorkflowChange
+                    handleWorkflowChange: handleWorkflowChange,
+                    deleteHandle: deleteHandle
                 }
             },
         }
@@ -667,6 +668,25 @@ function WorkflowsDesigner(props) {
         updateNodeInternals(nodeId)
     }
 
+    function deleteHandle(nodeId, handleId) {
+        setNodes(eds => eds.map(node => {
+            if (node.id === nodeId) {
+                return {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        sourceHandles: node.data.sourceHandles.filter(ha => ha.id !== handleId)
+                    }
+                }
+            }
+            return node
+        }))
+
+        setEdges(eds => eds.filter(edge => edge.sourceHandle !== handleId))
+
+        updateNodeInternals(nodeId)
+    }
+
     function handleDeleteNode(nodeId) {
         setNodes((nds) => nds.filter((node) => node.id !== nodeId));
         setEdges((eds) => eds.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));

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

@@ -4,6 +4,8 @@ import {
     BaseEdge,
     EdgeLabelRenderer,
     getBezierPath,
+    getSimpleBezierPath,
+    getSmoothStepPath,
     useReactFlow,
 } from '@xyflow/react';
 
@@ -63,7 +65,7 @@ const listeners = id => {
 
 export function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
     const { setEdges } = useReactFlow();
-    const [edgePath, labelX, labelY] = getBezierPath({
+    const [edgePath, labelX, labelY] = getSimpleBezierPath({
         sourceX,
         sourceY,
         targetX,

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

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Handle, Position, useNodeConnections } from '@xyflow/react'
 
-function RightHandle({ handle, className, selected }) {
+function RightHandle({ handle, className, selected, deleteHandle }) {
     return <Handle
         id={handle.id}
         type="source"
         position={Position.Right}
         className={`${className} ${(selected ? 'connected' : '')}`}
     >
+        <i className='fas fa-trash me-1' onClick={deleteHandle} />
         {handle.id.split('-')[0]}
         <div className={`handle-dot ms-1 ${selected ? 'handle-dot--selected' : ''}`} />
     </Handle>
@@ -52,7 +53,11 @@ export default function Handles(props) {
                 .map(handle => {
                     const selected = connections.find(connection => connection.sourceHandle === handle.id)
 
-                    return <RightHandle handle={handle} key={handle.id} selected={selected} />
+                    return <RightHandle
+                        handle={handle}
+                        key={handle.id}
+                        selected={selected}
+                        deleteHandle={() => props.data.functions.deleteHandle(props.id, handle.id)} />
                 })}
             {props.data.sourcesIsArray && <button
                 type="button"
@@ -66,7 +71,8 @@ export default function Handles(props) {
             {sources.output && <RightHandle
                 handle={{ id: sources.output.id }}
                 className="my-2"
-                selected={connections.find(connection => connection.sourceHandle === `output-${props.id}`)} />}
+                selected={connections.find(connection => connection.sourceHandle === `output-${props.id}`)}
+                deleteHandle={() => props.data.functions.deleteHandle(props.id, handle.id)} />}
         </div>
     </>
 }