vue3 + ts中使用mxgraph

在Vue 3中结合TypeScript（TS）使用MXGraph，你可以将这个强大的JavaScript库用于构建交互式的图形编辑和可视化组件。MXGraph是一个专门用于绘制和编辑图形的工具，常用于网络图、流程图等应用场景。

以下是基本步骤：

1. **安装依赖**:
首先需要安装`@mxgraph/core`和`@mxgraph/react2d`包作为核心库和React渲染层。在你的项目中运行`npm install mxgraph @mxgraph/react2d typescript` 或 `yarn add mxgraph @mxgraph/react2d typescript`.

2. **配置TypeScript**:
在`.tsconfig.json`文件中添加对`@types/mxgraph`的类型支持：

   "types": ["@types/mxgraph"]

3. **引入并使用**:
在你的Vue组件中，创建一个MxGraph实例，并在模板中渲染它：

<template>
  <div ref="graphContainer" style="width: 800px; height: 600px;"></div>
</template>

<script lang="ts">
import { Component, Ref } from 'vue';
import { mxBaseComponent, mxRectangle } from '@mxgraph/react2d';

@Component({
  setup() {
    const graphRef = ref(mxBaseComponent);

    // 初始化MXGraph实例
    const initGraph = async () => {
      if (!graphRef.value) return;
      
      const graph = new mxGraph(graphRef.value);
      graph.graphHandler.vertexFactory = vertexFactory;
      graph.render();
    };

    // 示例：自定义顶点工厂
    function vertexFactory(id: string): mxRectangle {
      const vertex = new mxRectangle(0, 0, 50, 50);
      vertex.vertex = true;
      vertex.style = 'filled=1;fontSize=14;strokeColor=#000000;fillColor=#ffffff;';
      vertex.setId(id);
      return vertex;
    }

    onMounted(() => {
      initGraph();
    });

    return {
      ref: graphRef,
    };
  },
})
export default class MyGraph extends Vue {}
</script>