思维导图插件--jsMind的使用

1、下载jsMind

npm install jsMind --s

2、在需要使用的页面 引入css样式和js方法

import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js-legacy/jsmind.js";

3、初始化jsMind

export default {
  data() {
    return {
      mind: {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: "思维导图",
          author: "",
          version: "0.2",
        },
        /* 数据格式声明 */
        format: "node_tree",
        /* 数据内容 */
        data: {
          id: "root",
          topic: "jsMind",
          children: [
            {
              id: "easy", // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
              topic: "Easy", // [必选] 节点上显示的内容
              direction: "right", // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
              // expanded: false, // [可选] 该节点是否是展开状态，默认为 true
              children: [
                {
                  id: "easy8",
                  topic: "Easy to show",
                  children: [
                    { id: "open7", topic: "on GitHub" },
                    { id: "easy7", topic: "Easy to embed" },
                  ],
                },
                { id: "easy2", topic: "Easy to edit" },
                { id: "easy3", topic: "Easy to store" },
                { id: "easy4", topic: "Easy to embed" },
              ],
            },
            {
              id: "open",
              topic: "Open Source",
              direction: "right",
              // expanded: false,
              children: [
                { id: "open1", topic: "on GitHub" },
                { id: "open2", topic: "BSD License" },
              ],
            },
            {
              id: "powerful",
              topic: "Powerful",
              direction: "right",
              // expanded: false,
              children: [
                { id: "powerful1", topic: "Base on Javascript" },
                { id: "powerful2", topic: "Base on HTML5" },
                { id: "powerful3", topic: "Depends on you" },
              ],
            },
            {
              id: "other",
              topic: "test node",
              direction: "right",
              // expanded: false,
              children: [
                { id: "other1", topic: "I'm from local variable" },
                { id: "other2", topic: "I can do everything" },
              ],
            },
          ],
        },
      },
      options: {
        container: "jsmind_container", // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: "primary", // [可选] 主题
        view: {
          engine: "canvas", // 思维导图各节点之间线条的绘制引擎
          hmargin: 20, // 思维导图距容器外框的最小水平距离
          vmargin: 20, // 思维导图距容器外框的最小垂直距离
          line_width: 2, // 思维导图线条的粗细
          line_color: "#ddd", // 思维导图线条的颜色
          hide_scrollbars_when_draggable: true,
        },
        layout: {
          hspace: 100, // 节点之间的水平间距
          vspace: 20, // 节点之间的垂直间距
          pspace: 20, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        shortcut: {
          enable: false, // 是否启用快捷键 默认为true
        },
        // editableDrag:true,
        // get_selected_node:function(val){
        //     this.selectedNode=val
        // }
      },
      jm: "",
      selectedNode: "",
      newNodeId: 1,
    };
  },
  mounted() {
    // 初始化
    this.jm = new jsMind(this.options);
    //渲染canvas
    this.jm.show(this.mind);
  },
};

4、页面绑定dom

5、效果图

6、内置方法

获取节点

获取根节点 :  this.jm.get_root()

根据 id 查找节点 : this.jm.get_node(nodeid)

获取选中的节点 : this.jm.get_selected_node()

查找相邻的上一个节点 : this.jm.find_node_before(node|nodeid) 

查找相邻的下一个节点 : this.jm.find_node_after(node|nodeid)

操作节点

选中节点 : this.jm.select_node(node)

收起子节点 : this.jm.collapse_node(node|nodeid)

展开子节点 : this.jm.expand_node(node|nodeid)

收起或展开子节点 :this.jm.toggle_node(node|nodeid) 方法可自动展开或收起子节点。

展开全部子节点 : this.jm.expand_all()

展开至指定层级 : this.jm.expand_to_depth(depth)

移动节点 :  this.jm.move_node(node|nodeid,beforeid)

启用编辑 : this.jm.enable_edit()

禁止编辑 : this.jm.disable_edit()

调整节点为编辑状态 : this.jm.begin_edit(node|nodeid)

调整节点为只读状态 : this.jm.end_edit(node|nodeid)

加减节点

添加节点 : this.jm.add_node(parent_node, nodeid, topic, data)

在指定位置前插入节点 : this.jm.insert_node_before(node_before, nodeid, topic)

在指定位置后插入节点 :  this.jm.insert_node_after(node_after, nodeid, topic)

删除节点及其子节点 : this.jm.remove_node(node|nodeid)

更新节点topic显示内容 : this.jm.update_node(nodeid, topic)

获取数据

获取元数据 :this.jm.get_meta() 。

获取指定格式的思维导图数据 : this.jm.get_data(data_format)

设置样式

设置主题 : this.jm.set_theme(theme)

设置背景色/前景色 : this.jm.set_node_color(nodeid, bgcolor, fgcolor)

设置字体 : this.jm.set_node_font_style(nodeid, size, weight, style)

设置背景图片 : this.jm.set_node_background_image(nodeid, image, width, height)

其他操作

清除节点的选中 : this.jm.select_clear() 。

判断节点是否可见 :  this.jm.is_node_visible(node)