思维脑图

https://my.oschina.net/lichaoqiang/blog/880846

https://zhuanlan.zhihu.com/p/652255758

https://github.com/MarkMindCkm/Mark-Mind/tree/main

https://github.com/wanglin2/mind-map

https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md

https://gitee.com/hizzgdev/jsmind

1. JsMind

http://hizzgdev.github.io/jsmind/example/2_features.html

1.1 常用属性介绍

文档：https://hizzgdev.github.io/jsmind/docs/zh/2.options.html

var options = {
    container:'jsmind_container', // [必选] 容器的ID
    editable:true,                // [可选] 是否启用编辑
    theme:'orange'                // [可选] 主题
};
var jm = new jsMind(options);

jsMind 的 options 对象的完整定义如下所示

options = {
   container : '',         // [必选] 容器的ID
   editable : false,       // 是否启用编辑
   theme : null,           // 主题
   mode :'full',           // 布局模式
   support_html : true,    // 是否支持节点里的HTML元素
   log_level: 'info',      // 日志级别
   view:{
       engine: 'canvas',   // 思维导图各节点之间线条的绘制引擎
       hmargin:100,        // 思维导图距容器外框的最小水平距离
       vmargin:50,         // 思维导图距容器外框的最小垂直距离
       line_width:2,       // 思维导图线条的粗细
       line_color:'#555',  // 思维导图线条的颜色
       line_style:'curved',// 思维导图线条的样式，直线(straight)或者曲线(curved)
       draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
       hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时，是否隐藏滚动条
       node_overflow: 'hidden' // 节点文本过长时的样式
       zoom: {             // 配置缩放
           min: 0.5,       // 最小的缩放比例
           max: 2.1,       // 最大的缩放比例
           step: 0.1,      // 缩放比例间隔
       },
       custom_node_render: null, // 自定义的节点渲染方法
   },
   layout:{
       hspace:30,          // 节点之间的水平间距
       vspace:20,          // 节点之间的垂直间距
       pspace:13,          // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
       cousin_space:0      // 相邻节点的子节点之间的额外的垂直间距
   },
   shortcut:{
       enable:true,        // 是否启用快捷键
       handles:{},         // 命名的快捷键事件处理器
       mapping:{           // 快捷键映射
           addchild   : [45, 4096+13], 	// <Insert>, <Ctrl> + <Enter>
           addbrother : 13,    // <Enter>
           editnode   : 113,   // <F2>
           delnode    : 46,    // <Delete>
           toggle     : 32,    // <Space>
           left       : 37,    // <Left>
           up         : 38,    // <Up>
           right      : 39,    // <Right>
           down       : 40,    // <Down>
       }
   },
};

• 支持鼠标拖拽 view.draggable

draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时，是否隐藏滚动条