JsMind 思维导图库配置选项详解

JsMind 思维导图库配置选项详解

jsmind a mind mapping library built by javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsmind

前言

JsMind 是一个功能强大的 JavaScript 思维导图库，它提供了丰富的配置选项来满足不同场景下的需求。本文将全面解析 JsMind 的配置选项，帮助开发者更好地理解和使用这个工具。

基础配置选项

容器设置

container 是唯一必须提供的配置项，用于指定思维导图渲染的 DOM 元素 ID。建议使用 <div> 这样的块级元素作为容器，以便更好地控制思维导图的大小和位置。

编辑功能

editable 选项控制是否启用编辑功能。当设置为 true 时，可以通过 API 进行节点编辑操作。需要注意的是，JsMind 仅提供编辑接口和少量快捷键支持，并不包含完整的编辑功能。

主题风格

theme 选项允许你指定思维导图的主题样式。JsMind 内置了多种主题，你也可以通过 CSS 自定义主题。

布局模式

mode 选项决定一级子节点的分布方式：

• full：子节点动态分布在根节点两侧（默认值）
• side：子节点仅分布在根节点右侧

HTML 支持

support_html 选项控制节点标题是否支持 HTML 内容。默认值为 true，允许在节点标题中使用 HTML 代码。如果只需要纯文本，可设置为 false。

日志级别

log_level 选项控制日志输出级别，可选值包括：

• debug
• info（默认值）
• warn
• error
• disable（关闭所有日志）

视图与布局配置

线条绘制引擎

view.engine 选项支持两种线条绘制方式：

• canvas：使用 Canvas 绘制线条（默认）
• svg：使用 SVG 绘制线条，在节点数量较多时性能更优

高清显示

view.enable_device_pixel_ratio 选项（仅适用于 canvas 引擎）可以提升在高分辨率设备上的显示效果。

边距设置

view.hmargin 和 view.vmargin 分别控制思维导图与容器边框的最小水平和垂直距离。

线条样式

• view.line_width：线条粗细（像素）
• view.line_color：线条颜色（HTML 颜色表示）
• view.line_style：线条样式，可选 curved（曲线，默认）或 straight（直线）

自定义线条渲染

view.custom_line_render 允许开发者自定义线条渲染逻辑，提供更灵活的线条样式控制。

拖拽功能

• view.draggable：是否启用整个思维导图的拖拽功能
• view.hide_scrollbars_when_draggable：启用拖拽时是否隐藏滚动条

文本溢出处理

view.node_overflow 控制节点文本过长时的显示方式：

• hidden：隐藏超出部分（默认）
• wrap：自动换行显示全部内容

缩放设置

view.zoom 选项控制思维导图的缩放行为：

• min：最小缩放比例（默认 0.5）
• max：最大缩放比例（默认 2.1）
• step：缩放步长（默认 0.1）

自定义节点渲染

view.custom_node_render 允许开发者完全自定义节点的渲染逻辑。

节点展开器样式

view.expander_style 控制节点展开器的显示样式：

• char：显示 +/- 表示展开状态（默认）
• number：显示子节点数量

布局参数

节点间距

• layout.hspace：节点间水平间距（默认 30 像素）
• layout.vspace：节点间垂直间距（默认 20 像素）

展开器大小

layout.pspace 控制节点展开器的大小（默认 13 像素）。

相邻节点间距

layout.cousin_space 控制相邻节点的子节点间的额外垂直间距（默认 0）。

快捷键配置

启用快捷键

shortcut.enable 控制是否启用快捷键功能（默认启用）。

自定义快捷键处理

shortcut.handles 允许开发者定义自定义的快捷键处理函数。

快捷键映射

shortcut.mapping 配置具体的快捷键绑定。JsMind 支持单键和组合键配置，组合键通过基础键码加上功能键标识码实现。

功能键标识码：

• Meta：8192
• Ctrl：4096
• ALT：2048
• SHIFT：1024

总结

JsMind 提供了丰富的配置选项，从基础功能到高级定制，可以满足各种思维导图应用场景的需求。通过合理配置这些选项，开发者可以创建出符合自己产品风格和用户习惯的思维导图应用。

理解这些配置选项的含义和使用方法，是掌握 JsMind 的关键一步。建议开发者根据实际需求，从基础配置开始，逐步尝试更高级的定制选项，以充分发挥 JsMind 的潜力。

jsmind a mind mapping library built by javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsmind