UPDATE: VERSION-20260314

modeler/src/views/decision/communication/communication.vue

@@ -0,0 +1,429 @@
+<template>
+  <Wrapper>
+    <a-layout class="bg-transparent" style="background: transparent">
+      <Header />
+      <a-layout class="ks-layout-body">
+        <div class="ks-model-builder-body">
+          <div class="ks-model-builder-left">
+            <PlatformCard
+              ref="treesCardRef"
+              @create-tree="handleCreateTree"
+              @select-tree="handleSelectTree"
+            />
+            <NodesCard
+              @drag-item-start="handleDragStart"
+              @drag-item-end="handleDragEnd"
+            />
+          </div>
+
+          <div class="ks-model-builder-content" style="width: calc(100% - 250px);">
+            <div class="ks-model-builder-actions">
+              <a-space>
+                <a-button v-if="graph && currentBehaviorTree" class="ks-model-builder-save" size="small" @click="handleSave">
+                  <CheckOutlined />
+                  <span>保存</span>
+                </a-button>
+              </a-space>
+            </div>
+            <!-- 画布容器，添加拖放事件 -->
+            <div
+              ref="canvas"
+              class="ks-model-builder-canvas"
+              @dragenter="handleDragEnter"
+              @dragleave="handleDragLeave"
+              @drop="handleDrop"
+              @dragover.prevent
+            ></div>
+            <TeleportContainer />
+          </div>
+        </div>
+      </a-layout>
+    </a-layout>
+  </Wrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { getTeleport } from '@antv/x6-vue-shape';
+import { Graph, Node, type NodeProperties } from '@antv/x6';
+import { CheckCircleOutlined, CheckOutlined, RollbackOutlined, SaveOutlined } from '@ant-design/icons-vue';
+import { Wrapper } from '@/components/wrapper';
+import { safePreventDefault, safeStopPropagation } from '@/utils/event';
+import Header from '../header.vue';
+import type { BehaviorTree, NodeDragTemplate, NodeTemplate } from '../types';
+import type { GraphTaskElement, NodeGraph } from '../builder/element';
+import { useGraphCanvas } from '../builder/hooks';
+import { registerNodeElement } from '../builder/register';
+import { createLineOptions } from '../builder/line';
+import { createTree, findOneTreeById, updateTree } from '../designer/api';
+import { createGraphTaskElement, hasElements, hasRootElementNode, resolveNodeGraph } from '../builder/utils';
+import { createGraphTaskElementFromTemplate } from '../utils/node';
+import PlatformCard from './platform-card.vue';
+import NodesCard from './nodes-card.vue';
+
+const TeleportContainer = defineComponent(getTeleport());
+
+registerNodeElement();
+
+export default defineComponent({
+  components: {
+    PlatformCard,
+    NodesCard,
+    Wrapper,
+    Header,
+    SaveOutlined,
+    CheckCircleOutlined,
+    CheckOutlined,
+    RollbackOutlined,
+    TeleportContainer,
+  },
+  setup() {
+    const canvas = ref<HTMLDivElement | null>(null);
+    const graph = ref<Graph | null>(null);
+    const currentZoom = ref<number>(1);
+    const draggedNodeData = ref<NodeDragTemplate | null>(null);
+    const isDraggingOver = ref(false);
+    const currentTreeEditing = ref<boolean>(false);
+    const currentBehaviorTree = ref<BehaviorTree | null>(null);
+    const currentNodeGraph = ref<NodeGraph | null>(null);
+    const selectedModelNode = ref<Node<NodeProperties> | null>(null);
+    const selectedNodeTaskElement = ref<GraphTaskElement | null>(null);
+    const changed = ref<boolean>(false);
+    const treesCardRef = ref<InstanceType<typeof PlatformCard> | null>(null);
+
+    const {
+      handleGraphEvent,
+      createCanvas,
+      zoomIn,
+      zoomOut,
+      fitToScreen,
+      centerContent,
+      resizeCanvas,
+    } = useGraphCanvas();
+
+    // 处理拖动开始
+    const handleDragStart = (nm: NodeDragTemplate) => {
+      draggedNodeData.value = nm;
+    };
+
+    // 处理拖动结束
+    const handleDragEnd = () => {
+      isDraggingOver.value = false;
+    };
+
+    // 处理拖动进入
+    const handleDragEnter = (e: DragEvent) => {
+      safePreventDefault(e);
+      safeStopPropagation(e);
+      isDraggingOver.value = true;
+    };
+
+    // 处理拖动离开
+    const handleDragLeave = (e: DragEvent) => {
+      safePreventDefault(e);
+      safeStopPropagation(e);
+
+      if (canvas.value && e.relatedTarget &&
+        typeof e.relatedTarget === 'object' &&
+        'nodeType' in e.relatedTarget) {
+        // 使用 Element 类型而不是 x6 的 Node 类型
+        if (!canvas.value.contains(e.relatedTarget as Element)) {
+          isDraggingOver.value = false;
+        }
+      }
+    };
+
+    // 处理放置
+    const handleDrop = (e: DragEvent) => {
+      console.info('handleDrop', e);
+      safePreventDefault(e);
+      safeStopPropagation(e);
+      isDraggingOver.value = false;
+      currentTreeEditing.value = false;
+
+      if (!currentBehaviorTree.value) {
+        message.error('请先选择或者创建行为树.');
+        return;
+      }
+
+      if (!graph.value || !canvas.value || !draggedNodeData.value) {
+        message.error('无法放置节点,缺少必要数据');
+        return;
+      }
+
+      try {
+        // 获取拖动的数据
+        const template = draggedNodeData.value as NodeDragTemplate;
+
+        if (!hasElements(graph.value as Graph) && template.type !== 'root') {
+          message.error('请先添加根节点.');
+          return;
+        }
+
+        if (hasRootElementNode(graph.value as Graph) && template.type === 'root') {
+          message.error('根节点已经存在.');
+          return;
+        }
+
+        // 计算相对于画布的位置（考虑缩放）
+        const rect = canvas.value.getBoundingClientRect();
+        const scale = currentZoom.value || 1;
+        const x = (e.clientX - rect.left) / scale;
+        const y = (e.clientY - rect.top) / scale;
+
+        console.log('放置节点:', { ...template, x, y });
+
+        // 创建节点数据
+        const settingTaskElement: GraphTaskElement = createGraphTaskElementFromTemplate(template, { x, y });
+        // 创建节点
+        const settingTaskNode = createGraphTaskElement(settingTaskElement);
+        console.info('create settingTaskNode: ', settingTaskElement, settingTaskNode);
+
+        // 将节点添加到画布
+        graph.value?.addNode(settingTaskNode as any);
+        console.log('节点已添加到画布:', settingTaskNode.id);
+
+        // 重置拖动数据
+        draggedNodeData.value = null;
+      } catch (error) {
+        console.error('放置节点时出错:', error);
+      }
+    };
+
+    const handleSelectTree = (tree: BehaviorTree) => {
+      console.info('handleSelectTree', tree);
+      findOneTreeById(tree.id).then(r => {
+        if (r.data) {
+          let nodeGraph: NodeGraph | null = null;
+          try {
+            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,
+          };
+          currentTreeEditing.value = true;
+          createElements();
+        } else {
+          message.error(r.msg ?? '行为树不存在.');
+        }
+      });
+    };
+
+    const createElements = () => {
+      nextTick(() => {
+        try {
+          graph.value?.clearCells();
+        } catch (e: any) {
+          console.error('clear cells error, cause:', e);
+        }
+        setTimeout(() => {
+          if (currentBehaviorTree.value?.graph && graph.value) {
+            if (currentBehaviorTree.value?.graph.nodes) {
+              currentBehaviorTree.value?.graph.nodes.forEach(ele => {
+                const node = createGraphTaskElement(ele as GraphTaskElement);
+                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);  // 延迟一会儿,免得连线错位
+            }
+          }
+        }, 100);
+      });
+    };
+
+    const handleCreateTree = () => {
+      currentBehaviorTree.value = {
+        id: 0,
+        name: '行为树',
+        description: null,
+        englishName: null,
+        xmlContent: null,
+        createdAt: null,
+        graph: {
+          edges: [],
+          nodes: [],
+        },
+        updatedAt: null,
+      };
+      currentNodeGraph.value = {
+        edges: [],
+        nodes: [],
+      };
+      selectedModelNode.value = null;
+      selectedNodeTaskElement.value = null;
+
+      createElements();
+    };
+
+    // 初始化X6画布
+    const initGraph = () => {
+      if (!canvas.value) {
+        console.error('画布容器不存在');
+        return;
+      }
+
+      try {
+        graph.value = createCanvas(canvas.value);
+        console.log('画布初始化成功');
+        createElements();
+
+        // 监听缩放变化
+        handleGraphEvent('scale', ({ sx }: { sx: number }) => {
+          currentZoom.value = sx;
+        });
+
+        handleGraphEvent('blank:click', () => {
+          selectedModelNode.value = null;
+          selectedNodeTaskElement.value = null;
+          currentTreeEditing.value = null !== currentBehaviorTree.value;
+        });
+
+        handleGraphEvent('node:click', (args: any) => {
+          const node = args.node as Node<NodeProperties>;
+          const newElement = node.getData() as GraphTaskElement;
+
+          selectedModelNode.value = node;
+          selectedNodeTaskElement.value = JSON.parse(JSON.stringify(newElement || {})) as GraphTaskElement;
+        });
+
+        // 监听节点鼠标事件，显示/隐藏连接点
+        handleGraphEvent('node:mouseenter', (_ctx: any) => {
+        });
+
+        handleGraphEvent('node:mouseleave', (_ctx: any) => {
+        });
+      } catch (error) {
+        console.error('初始化画布失败:', error);
+      }
+    };
+
+    // 监听窗口大小变化
+    const handleResize = () => {
+      nextTick(() => {
+        resizeCanvas();
+      });
+    };
+
+    const init = () => {
+      console.info('init');
+      nextTick(() => {
+        initGraph();
+        window.addEventListener('resize', handleResize);
+        console.log('节点挂载完成');
+      });
+    };
+
+    const handleUpdateElement = (element: GraphTaskElement) => {
+      // 更新选中的节点数据
+      if (selectedModelNode.value) {
+        selectedModelNode.value.replaceData(element);
+      }
+      console.info('handleUpdateElement', element);
+      // 更新本地引用
+      selectedNodeTaskElement.value = element;
+      changed.value = true;
+    };
+
+    const handleSave = () => {
+      const graphData: NodeGraph = resolveNodeGraph(graph.value as Graph);
+      console.info('handleSave', graphData);
+      if (!currentBehaviorTree.value) {
+        message.error('当前决策树不存在');
+        return;
+      }
+      const newTree: BehaviorTree = {
+        ...currentBehaviorTree.value,
+        graph: graphData,
+        xmlContent: JSON.stringify(graphData),
+      };
+      if (!newTree.name) {
+        message.error('行为树名称不能为空.');
+        return;
+      }
+      if (!newTree.englishName) {
+        message.error('行为树英文名称不能为空.');
+        return;
+      }
+      let res = null;
+      if (currentBehaviorTree.value.id > 0) {
+        res = createTree(newTree);
+      } else {
+        res = updateTree(newTree);
+      }
+      res.then(r => {
+        if (r.code === 200) {
+          treesCardRef.value?.refresh();
+          message.success(r.msg ?? '操作成功.');
+        } else {
+          message.error(r.msg ?? '操作失败.');
+        }
+      });
+    };
+
+    // 初始化
+    onMounted(() => {
+      init();
+    });
+
+    // 清理
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize);
+      if (graph.value) {
+        try {
+          graph.value.clearCells();
+        } catch (error) {
+          console.warn('销毁画布时出错:', error);
+        }
+        graph.value = null;
+        console.log('画布已销毁');
+      }
+    });
+
+    return {
+      treesCardRef,
+      handleCreateTree,
+      currentTreeEditing,
+      currentBehaviorTree,
+      currentNodeGraph,
+      selectedNodeTaskElement,
+      selectedModelNode,
+      graph,
+      canvas,
+      zoomIn,
+      zoomOut,
+      fitToScreen,
+      centerContent,
+      handleDragStart,
+      handleDragEnd,
+      handleDragEnter,
+      handleDragLeave,
+      handleDrop,
+      isDraggingOver,
+      handleSave,
+      handleUpdateElement,
+      handleSelectTree,
+    };
+  },
+});
+</script>