上一章的示例中简单提到了 jsMind 的 options 对象:
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)
custom_line_render: null, // 自定义的线条渲染方法
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>
}
},
};
以上选项是 jsMind 的默认选项,除 container 之外,其它选项都是可选的,你可以添加相应的选项以覆盖这些默认选项。
下面将对这些选项进行详细介绍。
container : (string) [必选] 容器的ID
实例化一个 jsMind 时,此参数不可缺省。jsMind 通过此参数查找页面元素,并将思维导图输出到该元素中。为了便于控制思维导图的大小和位置,请使用块元素作为思维导图的容器,如
<div>
。
你可以给该元素进行修饰,但是一般仅限于设置其大小、位置、边框等;如果想改变思维导图的字体、字号、背景颜色、前景颜色等,建议通过添加自定义主题的方式进行处理。
editable : (bool) 是否启用编辑
该参数控制是否支持在思维导图上进行编辑,jsMind 目前提供的编辑行为有添加节点、删除节点、修改节点标题、移动节点位置等,如果该参数设置为 true,将可以使用 API 进行以上这些操作,否则这些 API 将不会生效。默认情况下,该参数的值为 false 。
需要注意的是,jsMind 仅提供了编辑接口和少量的快捷键支持,并未提供完整的编辑功能,此参数仅用于限制这些 API 的使用。
theme : (string) 主题
指定 jsMind 的主题名。
mode : (string) 布局模式
当往脑图里添加一级子节点时,jsMind 将根据此参数决定把节点放置在哪一侧。目前支持两种布局模式:
full
- 子节点动态分布在根节点两侧 [默认值]side
- 子节点只分布在根节点右侧
需要注意的是,此参数只在添加节点时(
jsMind.add_node(...)
)生效。
support_html : (bool) 是否支持节点里的HTML元素
该参数的默认值为 true ,含义为允许在节点的标题中使用 HTML 代码,如果你愿意,你甚至可以在节点标题里插入一个表格
<table>
。如果你希望标题中只有纯文本,请将该参数设为 false 。
需要注意的是,在 freemind 中,节点的样式是使用 html 语言进行控制的,如果你使用 freemind 格式的数据时,建议将此参数设置为 true。
log_level : (string) log 级别
log 级别一共有五种:
debug
/info
/warn
/error
/disable
,默认设置为info
,如果需要关闭所有日志,请设置为disable
。
view.engine : (string) 思维导图各节点之间线条的绘制引擎
jsMind 现支持两种线条的绘制引擎:
canvas
- 把线条绘制在 canvas 上 [默认值]svg
- 使用 svg 绘制线条,当思维导图的节点很多,面积巨大的时候,使用该模式能带来显著的性能提升
view.enable_device_pixel_ratio : (bool) 按设备像素比例绘制高清思维导图。 (0.8.5 及以上版本支持)
此参数仅用于改善 canvas 的绘制效果,当绘制引擎设置为 svg 时则无须设置。
view.hmargin : (number) 思维导图距容器外框的最小水平距离(像素)
view.vmargin : (number) 思维导图距容器外框的最小垂直距离(像素)
这两个参数决定了思维导图与容器的边框能距离多近。把思维导图本身作为一个对象的话,这两个参数就类似该对象的 margin(css) 属性。这两个参数的默认值为 container 的宽和高。
view.line_width : (number) 思维导图线条的粗细(像素)
view.line_color : (string) 思维导图线条的颜色(html的颜色表示方法)。如果一个 node
设置了 data.leading-line-color
,此选项将会被覆盖
默认情况下,线条的粗细是2px,颜色是深灰色(#555)。
view.line_style : (string) 思维导图线条的样式。可用的选项有:
curved
表示曲线 [默认值]straight
表示直线
view.custom_line_render : (function) 自定义思维导图线条的渲染方法
view.draggable : (bool) 当容器不能完全容纳思维导图时,是否允许拖动画布代替鼠标滚动
当思维导图不能在容器中完全显示时,默认情况下容器内会出现滚动条。开启此选项后,将允许通过拖拽画布的方式查看思维导图的不同部分。此参数默认值为
false
(不开启此功能)
view.hide_scrollbars_when_draggable : (bool) 当设置 draggable = true 时,是否隐藏滚动条
此参数仅当
view.draggable
为 true 时生效,其用于设置是否隐藏水平和垂直容器内的滚动条。 此参数的默认值为false
(显示滚动条),当设置为true
时,容器内的滚动条将会被隐藏,用户无法通过滚动鼠标滚轮的方式查看思维导图的不同部分。
view.node_overflow : (string) 节点文本过长时的样式 (0.5.3 及以上版本支持)
节点文本过长时,jsMind 支持两种样式:
hidden
- 隐藏部分文本以保持脑图的整体易读性 [默认值]wrap
- 对文本进行换行,以展示全部文本内容
view.zoom : (object) 脑图缩放配置 (0.6.3 及以上版本支持)
- min - 最小的缩放比例,默认 0.5
- max - 最大的缩放比例,默认 2.1
- step - 缩放比例间隔,默认 0.1
view.custom_node_render : (function) 脑图节点的自定义渲染方法 (0.7.6 及以上版本支持)
此选项可用于修改 jsMind 默认的渲染逻辑,此参数为一个 javascript 方法,其方法签名为
function (jm, element, node): boolean
。其返回值用于表示是否已经对此节点进行了渲染,如果返回true
, jsMind 将不会再次渲染此节点;如果返回 false, jsMind 将使用默认渲染逻辑对此节点进行渲染。
view.expander_style : (string) 子节点展开控制器的样式 (0.7.8 及以上版本支持)
char
- 在展开控制器上显示-
,+
用于表示节点的展开状态 [default]number
- 在展开控制器上显示子节点的数量,多于100个子节点时将显示...
layout.hspace : (number) 节点之间的水平间距(像素)
layout.vspace : (number) 节点之间的垂直间距(像素)
这两个参数相当于节点对象的 margin(css)属性,水平方向上默认值为 30 像素,垂直方向上默认值为 20 像素。
layout.pspace : (number) 节点收缩/展开控制器的尺寸(像素)
如果某一节点(根节点除外)存在下级节点,则此节点外侧则会显示出收缩/展开下级节点的控制器,此参数用于设置此控制器的大小(宽和高),默认值为 13 像素。
layout.cousin_space : (number) 相邻节点的子节点之间的额外的垂直间距(像素)(0.5.5 及以上版本支持)
该参数默认值为零,即不添加额外的间距。
shortcut.enable : (bool) 是否启用快捷键
该参数用于控制是否可以在jsMind界面上使用键盘快捷键对思维导图进行编辑(或其它操作),默认值为 true,即启用快捷键。
shortcut.handles : (object{string : function}) 命名的快捷键事件处理器
jsMind提供了一些常用的处理器,用于操作思维导图(参见下一节),该参数提供了定义额外处理器的能力。 该参数是一个 string->function(jsmind,event) 的集合,string 指名了该处理器的名称,function 则是这个处理器具体要执行的逻辑,在下一节的 shortcut.mapping 的配置中,将把处理器的名称绑定到具体的按键上,实现快捷操作的目的。比如以下代码就定义了一个处理器:
handles : {
'dosomething' : function(jm,e){
// do something...
},
'dosomeotherthing' : function(jm,e){
// do some other things
}
...
}
shortcut.mapping : (object{string : number | [number]}) 快捷键映射配置
该参数用于配置具体的按键与处理器之间的对应关系,此代码显示了默认情况下的对应关系,如 [Insert] 键的代码是 45 ,可用于添加一个子节点,而 112 代表的是 [F1] 键,用于 dosomething。 提示:还可以为一个处理器配置多个快捷键,把键码替换为数组即可。
mapping:{ // handle 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>
// 示例
dosomething: 112, // <F1>
}
除了上述这种单一按键的情况,jsMind新增了对组合按键的支持,组合快捷键的代码为常规按键的代码加上功能键的标识代码。 目前支持四种功能键,对应的标识代码分别为:
- Meta : 8192
- Ctrl : 4096
- ALT : 2048
- SHIFT : 1024
以下是一些示例:
mapping:{
addchild : 4096 + 73, // <Ctrl> + <I>
delnode : 4096 + 2048 + 68, // <Ctrl> + <ALT> + <D>
}
禁止转载、禁止演绎。
jsMind 项目仍在不断升级变化,版本更新时会同时更新对应的文档。为避免给使用者带来困惑,在没有得到书面许可前,禁止转载本文档,同时禁止对本文档进行任何形式的更改。