feat: Add nodes to the workflow canvas

Author: zhangshaohu1

ui/src/views/workflow/AgentWorkflowView.vue

@@ -2,8 +2,9 @@
 import type LogicFlow from '@logicflow/core'
 import WorkflowCanvas from '@/workflow-canvas/index.vue'
 import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
+import {nodeDict} from "@/workflow-canvas/config/node-mapping.ts"
 import WorkflowComponentMenu from './components/WorkflowComponentMenu.vue'
-
+import {type ShapeItem} from "@/workflow-canvas/types"
 defineOptions({ name: 'AgentWorkflowView' })
 
 defineProps<{
@@ -17,9 +18,24 @@ const emit = defineEmits<{
 const workflowRef = useTemplateRef<InstanceType<typeof WorkflowCanvas>>('workflowRef')
 
 const handleAddNode = (nodeType: WorkflowNodeType) => {
-  workflowRef.value?.addNode(nodeType)
-}
+  const shapeItem=toShapeItem(nodeType)
+  if(!shapeItem){
+     return
+  }
+  workflowRef.value?.addNode(shapeItem)
+  }
 
+const toShapeItem=(nodeType: WorkflowNodeType)=>{
+ const node=nodeDict[nodeType]
+  if(node){
+  const shapeItem:ShapeItem={
+   type: node.type,
+   properties:node.properties,
+   text:node.text
+  }
+  return shapeItem;
+}
+}
 const handleSave = () => {
   const graphData = workflowRef.value?.getGraphData()
   if (graphData) emit('save', graphData)

ui/src/workflow-canvas/config/node-mapping.ts

@@ -57,7 +57,7 @@ export const workflowModelDict: Record<WorkflowMode, WorkflowNodeMatcher> = {
     )
   },
 }
-export const nodeDict: Partial<Record<WorkflowNodeType, unknown>> = {
+export const nodeDict: Partial<Record<WorkflowNodeType, Record<string,any>>> = {
   [WorkflowNodeType.AiChat]: NodeData.aiChatNode,
   [WorkflowNodeType.SearchKnowledge]: NodeData.searchKnowledgeNode,
   [WorkflowNodeType.SearchDocument]: NodeData.searchDocumentNode,

ui/src/workflow-canvas/index.vue

@@ -9,23 +9,14 @@ import { disconnectAll, getTeleport } from '@/workflow-canvas/core/teleport'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import Dagre from '@/workflow-canvas/plugins/dagre'
 import { WorkflowMode, WorkflowNodeType } from '@/workflow-canvas/types'
-
+import {type ShapeItem} from "@/workflow-canvas/types"
 defineOptions({ name: 'MkWorkflow' })
 
 type CanvasWorkflowNodeModel = WorkflowNodeModel & {
   set_loop_body?: () => void
 }
 
-type ShapeItem = {
-  callback?: (logicFlow: LogicFlow, container?: HTMLElement) => void
-  className?: string
-  disabled?: boolean
-  icon?: string
-  label?: string
-  properties?: LogicFlow.PropertiesType
-  text?: string
-  type?: string
-}
+
 
 const props = withDefaults(
   defineProps<{
@@ -78,6 +69,7 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   })
 
   initDefaultShortcut(lf.value, lf.value.graphModel)
+  console.log(Object.values(nodeModules).map(({ default: node }) => node))
   lf.value.batchRegister([...Object.values(nodeModules).map(({ default: node }) => node), AppEdge])
   lf.value.setDefaultEdgeType('app-edge')
   lf.value.render(data ? data : {})

ui/src/workflow-canvas/types.ts

@@ -1,3 +1,4 @@
+import LogicFlow from '@logicflow/core'
 /** LogicFlow 节点类型，作为工作流图数据中的稳定协议值。 */
 export enum WorkflowNodeType {
   Base = 'base-node',
@@ -66,3 +67,13 @@ export interface WorkflowNodeField {
   type?: string
   value: string
 }
+export type ShapeItem = {
+  callback?: (logicFlow: LogicFlow, container?: HTMLElement) => void
+  className?: string
+  disabled?: boolean
+  icon?: string
+  label?: string
+  properties?: LogicFlow.PropertiesType
+  text?: string
+  type?: string
+}