diff --git a/docs/en/2.options.md b/docs/en/2.options.md index 9ec3c6b3..dff7eb4d 100644 --- a/docs/en/2.options.md +++ b/docs/en/2.options.md @@ -151,6 +151,15 @@ These options are described in more detail below. > * `hidden` - Hide part of them to maintain the overall readability of the mind map [default] > * `wrap` - Wrap the text to display the entire content +**view.zoom** : (object) zoom setting (since 0.6.3) +> * min - minimum zoom ratio,default 0.5 +> * max - maximum zoom ratio, default 2.1 +> * step - interval of zoom ratio, default 0.1 + +**view.custom_node_render** : (function) custom rendering method for node (since 0.7.6) + +> The option can be used to change the default rendering logic of jsMind. The value of this option is a function, whose signature is `function (jm, element, node): boolean`. Its return value is used to indicate whether the node has been rendered. If it returns `true`, jsMind won't render the node again, otherwise, jsMind will render the node in the default way. + **layout.hspace** : horizontal distance (pixels) between (number) nodes **layout.vspace** : vertical spacing (pixels) between (number) nodes diff --git a/docs/zh/2.options.md b/docs/zh/2.options.md index bb55677b..7fb10b01 100644 --- a/docs/zh/2.options.md +++ b/docs/zh/2.options.md @@ -42,6 +42,12 @@ options = { 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, // 节点之间的水平间距 @@ -150,6 +156,15 @@ options = { > * `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 将使用默认渲染逻辑对此节点进行渲染。 + **layout.hspace** : (number) 节点之间的水平间距(像素) **layout.vspace** : (number) 节点之间的垂直间距(像素) diff --git a/src/jsmind.js b/src/jsmind.js index a6a527d0..577aba11 100644 --- a/src/jsmind.js +++ b/src/jsmind.js @@ -65,6 +65,7 @@ export default class jsMind { hide_scrollbars_when_draggable: this.options.view.hide_scrollbars_when_draggable, node_overflow: this.options.view.node_overflow, zoom: this.options.view.zoom, + custom_node_render: this.options.view.custom_node_render, }; // create instance of function provider this.data = new DataProvider(this); diff --git a/src/jsmind.option.js b/src/jsmind.option.js index 03b2227c..95b55a6e 100644 --- a/src/jsmind.option.js +++ b/src/jsmind.option.js @@ -31,6 +31,7 @@ const default_options = { max: 2.1, step: 0.1, }, + custom_node_render: null, }, layout: { hspace: 30, diff --git a/src/jsmind.view_provider.js b/src/jsmind.view_provider.js index 2462890b..d3761213 100644 --- a/src/jsmind.view_provider.js +++ b/src/jsmind.view_provider.js @@ -26,6 +26,9 @@ export class ViewProvider { this.editing_node = null; this.graph = null; + this.render_node = !!options.custom_node_render + ? this._custom_node_render + : this._default_node_render; this._initialized = false; } init() { @@ -185,11 +188,7 @@ export class ViewProvider { view_data.expander = d_e; } if (!!node.topic) { - if (this.opts.support_html) { - $.h(d, node.topic); - } else { - $.t(d, node.topic); - } + this.render_node(d, node); } d.setAttribute('nodeid', node.id); d.style.visibility = 'hidden'; @@ -224,11 +223,7 @@ export class ViewProvider { var view_data = node._data.view; var element = view_data.element; if (!!node.topic) { - if (this.opts.support_html) { - $.h(element, node.topic); - } else { - $.t(element, node.topic); - } + this.render_node(element, node); } if (this.layout.is_visible(node)) { view_data.width = element.clientWidth; @@ -297,11 +292,7 @@ export class ViewProvider { element.style.zIndex = 'auto'; element.removeChild(this.e_editor); if (util.text.is_empty(topic) || node.topic === topic) { - if (this.opts.support_html) { - $.h(element, node.topic); - } else { - $.t(element, node.topic); - } + this.render_node(element, node); } else { this.jm.update_node(node.id, topic); } @@ -448,6 +439,19 @@ export class ViewProvider { } } } + _default_node_render(ele, node) { + if (this.opts.support_html) { + $.h(ele, node.topic); + } else { + $.t(ele, node.topic); + } + } + _custom_node_render(ele, node) { + let rendered = this.opts.custom_node_render(this.jm, ele, node); + if (!rendered) { + this._default_node_render(ele, node); + } + } reset_node_custom_style(node) { this._reset_node_custom_style(node._data.view.element, node.data); }