Vue 中使用百度脑图 kityminder-core 二次开发(一)

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

KityMinder 是一款强大的脑图可视化/编辑工具，由百度 FEX 团队开发并维护。

其中 KityMinder-Core 是它的核心实现部分：

• 包括脑图数据的可视化展示（Json 格式）
• 包括简单的编辑功能（节点创建、编辑、删除）。需要丰富编辑功能的请移步 KityMinder 编辑器。
• 不包含第三方格式（FreeMind、XMind、MindManager、纯文本、Markdown 等）的支持，可以加载 kityminder-protocol 来扩展第三方格式支持。
• 不包含文件存储的支持，需要自行实现存储。

以上内容来自于 github.com/fex-team/ki…

安装模块：

npm install kity kityminder-core -S

进行引用：

import kity from 'kity'
import kityminder from 'kityminder-core'

创建容器：

<div id="minder-container"></div>

在 mounted 生命周期中，进行初始化：

mounted() {
  this.minder = new window.kityminder.Minder({
    renderTo: "#minder-container",
  });
  this.minder.importJson({
    root: {
      data: {
        text: "test111",
        id: 110,
        key: 1809104001,
      },
      children: [
        {
          data: {
            text: "新闻",
            id: 111,
            key: 1809104002,
            parent: 1809104001,
          },
          children: [
            {
              data: {
                text: "新闻111",
                id: 112,
                key: 1809104003,
                parent: 1809104002,
              },
            },
            {
              data: {
                text: "234242",
                id: 113,
                key: 1809104001,
                parent: 1809104002,
              },
            },
          ],
        },
        {
          data: {
            text: "网页",
          },
          children: [
            {
              data: {
                text: "网页111",
              },
              children: [
                {
                  data: {
                    text: "网页下面的子元素",
                  },
                },
              ],
            },
          ],
        },
        { data: { text: "贴吧" } },
        { data: { text: "知道" } },
        { data: { text: "音乐" } },
        { data: { text: "图片" } },
        { data: { text: "视频" } },
        { data: { text: "地图" } },
        { data: { text: "百科", expandState: "collapse" } },
      ],
    },
    template: "default",
  });
},

刷新页面，马上就可以遇见效果了。

让我们把目光移到百度脑图的 wiki 中，主要的文档就在 wiki 中。

命令调用

构造 Minder 之后，可以执行一系列的命令：

minder.execCommand('camera', minder.getRoot());

详细信息请参考命令章节。

实现三个比较简单的命令

• 放大
• 缩小
• 设置中心节点

可以选择使用组件库的按钮组件，也可以自己写。主要看你开心就好～～～

放大

文档：github.com/fex-team/ki…

handleZoomOut() {
  const state = this.minder.queryCommandState("ZoomOut");
  if (state) {
    this.$message.warning("已是最小尺寸");
    return;
  }
  this.minder.execCommand("ZoomOut");
}

缩小

文档：github.com/fex-team/ki…

handleZoomIn() {
  const state = this.minder.queryCommandState("ZoomIn");
  if (state) {
    this.$message.warning("已是最小尺寸");
    return;
  }
  this.minder.execCommand("ZoomIn");
}

设置中心点

文档：github.com/fex-team/ki…

handleCamera() {
  this.minder.execCommand("Camera", this.minder.getRoot(), 60);
}

完美，下一期我们接着讲更多的操作方法。