Initial commit

modeler/src/views/decision/designer.vue

@@ -68,11 +68,14 @@ import Header from './header.vue';
 import Properties from './properties.vue';
 import { useGraphCanvas } from './builder/hooks';
 import { registerNodeElement } from './builder/register';
-import type { BehaviorTree, EdgeNodeElement, NodeGraph, NodeTemplate, SettingTaskNodeElement } from './types';
+import type { BehaviorTree, NodeTemplate } from './types';
+import type { NodeGraph, SettingTaskNodeElement, TaskNodeElement } from './builder/element';
 import { createTree, findOneTreeById, updateTree } from './api';
-import { createTaskNodeElement, createTaskNodeElementFromTemplate, hasElements, hasRootElementNode, resolveNodeGraph } from './utils/node';
+import { createModelNode, hasElements, hasRootElementNode, resolveNodeGraph } from './builder/utils';
+import { createTaskNodeElementFromTemplate } from './utils/node';
 import TressCard from './trees-card.vue';
 import NodesCard from './nodes-card.vue';
+import { createLineOptions } from '@/views/decision/builder/line.ts';
 
 const TeleportContainer = defineComponent(getTeleport());
 
@@ -187,7 +190,7 @@ export default defineComponent({
         // 创建节点数据
         const settingTaskElement: SettingTaskNodeElement = createTaskNodeElementFromTemplate(template, { x, y });
         // 创建节点
-        const settingTaskNode = createTaskNodeElement(settingTaskElement);
+        const settingTaskNode = createModelNode(settingTaskElement);
         console.info('create settingTaskNode: ', settingTaskElement, settingTaskNode);
 
         // 将节点添加到画布
@@ -205,12 +208,23 @@ export default defineComponent({
       console.error('handleSelectTree', tree);
       findOneTreeById(tree.id).then(r => {
         if (r.data) {
-          currentBehaviorTree.value = r.data;
+          let nodeGraph: NodeGraph | null = null;
           try {
-            currentBehaviorTree.value.graph = JSON.parse(r.data?.xmlContent as unknown as string) as unknown as NodeGraph;
+            nodeGraph = JSON.parse(r.data?.xmlContent as unknown as string) as unknown as NodeGraph;
           } catch (e: any) {
             console.error('parse error,cause:', e);
           }
+          if (!nodeGraph) {
+            nodeGraph = {
+              nodes: [],
+              edges: [],
+            };
+          }
+          currentBehaviorTree.value = {
+            ...r.data,
+            graph: nodeGraph,
+          };
+          console.error(currentBehaviorTree.value);
           createElements();
         } else {
           message.error(r.msg ?? '行为树不存在.');
@@ -219,32 +233,30 @@ export default defineComponent({
     };
 
     const createElements = () => {
-      if (!currentBehaviorTree.value?.graph) {
-        currentBehaviorTree.value?.graph = {
-          nodes: [],
-          edges: [],
-        };
-      }
-      if(graph.value && currentNodeGraph.value){
-        graph.value.clearCells();
-        setTimeout(()=> {
-          nextTick(()=> {
-            try{
-              const nodes: EdgeNodeElement[] = currentBehaviorTree.value?.graph?.nodes ?? [];
-              const edges: EdgeNodeElement[] = currentBehaviorTree.value?.graph?.edges ?? [];
-              nodes.forEach((n: any) => {
-                const node = createTaskNodeElement(n);
-                graph.value?.addNode(node as Node);
-              })
-              edges.forEach((g: any) => {
-                graph.value?.addEdge( g as any);
-              })
-            } catch (e){
-              console.warn('createElements',e)
-            }
-          })
-        }, 200)
-      }
+      nextTick(() => {
+        graph.value?.clearCells();
+        if (currentBehaviorTree.value?.graph && graph.value) {
+          if (currentBehaviorTree.value?.graph.nodes) {
+            currentBehaviorTree.value?.graph.nodes.forEach(ele => {
+              const node = createModelNode(ele as TaskNodeElement);
+              console.info('create node: ', ele);
+              // 将节点添加到画布
+              graph.value?.addNode(node as Node);
+            });
+          }
+          if (currentBehaviorTree.value?.graph.edges) {
+            // 然后添加所有边，确保包含桩点信息
+            setTimeout(() => {
+              currentBehaviorTree.value?.graph.edges.forEach(edgeData => {
+                graph.value?.addEdge({
+                  ...edgeData,
+                  ...createLineOptions(),
+                });
+              });
+            }, 100);  // 延迟一会儿,免得连线错位
+          }
+        }
+      });
     };
 
     // 初始化X6画布