auto-solution/modeler/src/views/decision/designer.vue

<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">
            <TressCard
              ref="treesCardRef"
              @create-tree="handleCreateTree"
              @select-tree="handleSelectTree"
            />
            <NodesCard
              @drag-item-start="handleDragStart"
              @drag-item-end="handleDragEnd"
            />
          </div>

          <div class="ks-model-builder-content">
            <div class="ks-model-builder-actions">
              <a-space>
                <a-tooltip v-if="graph && currentBehaviorTree" placement="top">
                  <template #title>
                    保存
                  </template>
                  <a-popconfirm
                    title="确定保存?"
                    @confirm="handleSave"
                  >
                    <a-button class="ks-model-builder-save" size="small">
                      <CheckOutlined />
                      <span>保存</span>
                    </a-button>
                  </a-popconfirm>
                </a-tooltip>
              </a-space>
            </div>
            <!-- 画布容器，添加拖放事件 -->
            <div
              ref="canvas"
              class="ks-model-builder-canvas"
              @dragenter="handleDragEnter"
              @dragleave="handleDragLeave"
              @drop="handleDrop"
              @dragover.prevent
            ></div>
            <TeleportContainer />
          </div>
          <Properties
            v-if="graph"
            :element="selectedNodeTaskElement"
            :graph="graph as any"
            :node="selectedModelNode as any"
            :tree="currentBehaviorTree"
            :tree-editing="currentTreeEditing"
            @update-element="handleUpdateElement" />
        </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 Properties from './properties.vue';
import type { BehaviorTree, 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 './api';
import { createGraphTaskElement, hasElements, hasRootElementNode, resolveNodeGraph } from './builder/utils';
import { createGraphTaskElementFromTemplate } from './utils/node';
import TressCard from './trees-card.vue';
import NodesCard from './nodes-card.vue';

const TeleportContainer = defineComponent(getTeleport());

registerNodeElement();

export default defineComponent({
  components: {
    TressCard,
    NodesCard,
    Wrapper,
    Header,
    Properties,
    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<NodeTemplate | 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 TressCard> | null>(null);

    const {
      handleGraphEvent,
      createCanvas,
      zoomIn,
      zoomOut,
      fitToScreen,
      centerContent,
      resizeCanvas,
    } = useGraphCanvas();

    // 处理拖动开始
    const handleDragStart = (nm: NodeTemplate) => {
      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 NodeTemplate;

        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>