<template>
  <div>
    <div ref="mindMapRef" id="mindMapContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import MindMap from "simple-mind-map";
import MiniMap from "simple-mind-map/src/plugins/MiniMap.js";
import Watermark from "simple-mind-map/src/plugins/Watermark.js";
import KeyboardNavigation from "simple-mind-map/src/plugins/KeyboardNavigation.js";
import ExportPDF from "simple-mind-map/src/plugins/ExportPDF.js";
import ExportXMind from "simple-mind-map/src/plugins/ExportXMind.js";
import Export from "simple-mind-map/src/plugins/Export.js";
import Drag from "simple-mind-map/src/plugins/Drag.js";
import Select from "simple-mind-map/src/plugins/Select.js";
import RichText from "simple-mind-map/src/plugins/RichText.js";
import AssociativeLine from "simple-mind-map/src/plugins/AssociativeLine.js";
import TouchEvent from "simple-mind-map/src/plugins/TouchEvent.js";
import NodeImgAdjust from "simple-mind-map/src/plugins/NodeImgAdjust.js";
import SearchPlugin from "simple-mind-map/src/plugins/Search.js";
import Painter from "simple-mind-map/src/plugins/Painter.js";
import ScrollbarPlugin from "simple-mind-map/src/plugins/Scrollbar.js";
import Formula from "simple-mind-map/src/plugins/Formula.js";
import Cooperate from "simple-mind-map/src/plugins/Cooperate.js";

// 注册插件
MindMap.usePlugin(MiniMap)
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
  .usePlugin(ExportPDF)
  .usePlugin(ExportXMind)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)
  .usePlugin(NodeImgAdjust)
  .usePlugin(TouchEvent)
  .usePlugin(SearchPlugin)
  .usePlugin(Painter)
  .usePlugin(Formula);

const mindMapRef = ref<HTMLDivElement | null>(null);
let mindMap = ref<MindMap | null>(null);

const mindData = {
  data: {
    text: "Root Node",
  },
  children: [
    {
      data: {
        text: "Child Node 1",
      },
    },
    {
      data: {
        text: "Child Node 2",
      },
    },
  ],
};

const initMindMap = () => {
  if (mindMapRef.value) {
    console.log("Initializing MindMap with ref:", mindMapRef.value);

    mindMap = new MindMap({
      el: mindMapRef.value,
      data: mindData,
    });
  }
};

onMounted(() => {
  initMindMap();
});
</script>

<style>
#mindMapContainer {
  width: 100%;
  height: calc(100vh - 100px);
}

#mindMapContainer * {
  margin: 0;
  padding: 0;
}
</style>

https://juejin.cn/post/7406166157416759350