[Feature] add new option node_overflow to allow to wrap the text in a node (#425)

* add new option node_overflow to allow to wrap the text in a node

* add docs for the new option

* update version

Author: hizzgdev

docs/en/2.options.md

@@ -37,7 +37,8 @@ options = {
        line_width:2, 		// thickness of the mindmap line
        line_color:'#555', 	// Thought mindmap line color
        draggable: false,    // Drag the mind map with your mouse, when it's larger that the container
-       hide_scrollbars_when_draggable: false // Hide container scrollbars, when mind map is larger than container and draggable option is true.
+       hide_scrollbars_when_draggable: false, // Hide container scrollbars, when mind map is larger than container and draggable option is true.
+       node_overflow: 'hidden' // Text overflow style in node
    },
    layout:{
        hspace:30, 			// horizontal spacing between nodes
@@ -89,15 +90,10 @@ These options are described in more detail below.
 
 **mode** : (string) layout mode
 
-> When adding a first-level child node to the mind map, jsMind will decide which side to place the node based on this option. 2 layout modes are currently supported::
+> When adding a first-level child node to the mind map, jsMind will decide which side to place the node based on this option. 2 layout modes are currently supported:
 
-> * full - child nodes are dynamically distributed on both sides of the root node [default]
-> * side - child nodes are distributed only to the right of the root node
-
-> 当往脑图里添加一级子节点时，jsMind 将根据此参数决定把节点放置在哪一侧。目前支持两种布局模式:
-
-> * full - 子节点动态分布在根节点两侧 [默认值]
-> * side - 子节点只分布在根节点右侧
+> * `full` - child nodes are dynamically distributed on both sides of the root node [default]
+> * `side` - child nodes are distributed only to the right of the root node
 
 > Note that this option only takes effect when adding nodes (`jsMind.add_node(...)`)
 
@@ -118,8 +114,8 @@ These options are described in more detail below.
 
 > jsMind now supports two line drawing engines:
 
-> * CANVAS - Draw the lines on the canvas [default]
-> * SVG - Using SVG to draw lines, when there are a lot of nodes and a huge area in the mind map, using this mode can bring significant performance improvements
+> * `canvas` - Draw the lines on the canvas [default]
+> * `svg` - Using SVG to draw lines, when there are a lot of nodes and a huge area in the mind map, using this mode can bring significant performance improvements
 
 **view.hmargin** : (number) Minimum horizontal distance (in pixels) of the mindmap from the container frame  
 **view.vmargin** : (number) Minimum vertical distance (in pixels) of the mindmap from the outer container frame
@@ -141,6 +137,13 @@ These options are described in more detail below.
 > The default value of this parameter is false, as it keep the default behavior with vertical and horizontal scrollbars on the container when mind map is bigger than the container.
 > Otherwise, if true, there is no more scrollbars, and instead you can drag the mind map with your mouse, while button is down. It should be noted that in this case, the user will not be able to explore the mind map by rolling the mouse wheel.
 
+**view.node_overflow** : (string) Text overflow style in node (since 0.5.3)
+
+> 2 styles are currently supported when the node text is too long
+
+> * `hidden` - Hide part of them to maintain the overall readability of the mind map [default]
+> * `wrap` - Wrap the text to display the entire content
+
 **layout.hspace** : horizontal distance (pixels) between (number) nodes  
 **layout.vspace** : vertical spacing (pixels) between (number) nodes
 

docs/zh/2.options.md

@@ -37,7 +37,8 @@ options = {
        line_width:2,       // 思维导图线条的粗细
        line_color:'#555',  // 思维导图线条的颜色
        draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
-       hide_scrollbars_when_draggable: false // 当设置 draggable = true 时，是否隐藏滚动条
+       hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时，是否隐藏滚动条
+       node_overflow: 'hidden' // 节点文本过长时的样式
    },
    layout:{
        hspace:30,          // 节点之间的水平间距
@@ -89,8 +90,8 @@ options = {
 
 > 当往脑图里添加一级子节点时，jsMind 将根据此参数决定把节点放置在哪一侧。目前支持两种布局模式:
 
-> * full - 子节点动态分布在根节点两侧 [默认值]
-> * side - 子节点只分布在根节点右侧
+> * `full` - 子节点动态分布在根节点两侧 [默认值]
+> * `side` - 子节点只分布在根节点右侧
 
 > 需要注意的是，此参数只在添加节点时（`jsMind.add_node(...)`）生效。
 
@@ -111,8 +112,8 @@ options = {
 
 > jsMind 现支持两种线条的绘制引擎：
 
-> * canvas - 把线条绘制在 canvas 上 [默认值]
-> * svg - 使用 svg 绘制线条，当思维导图的节点很多，面积巨大的时候，使用该模式能带来显著的性能提升
+> * `canvas` - 把线条绘制在 canvas 上 [默认值]
+> * `svg` - 使用 svg 绘制线条，当思维导图的节点很多，面积巨大的时候，使用该模式能带来显著的性能提升
 
 **view.hmargin** : (number) 思维导图距容器外框的最小水平距离（像素）  
 **view.vmargin** : (number) 思维导图距容器外框的最小垂直距离（像素）
@@ -133,6 +134,13 @@ options = {
 > 此参数仅当 `view.draggable` 为 true 时生效，其用于设置是否隐藏水平和垂直容器内的滚动条。
 > 此参数的默认值为 `false` (显示滚动条)，当设置为 `true` 时，容器内的滚动条将会被隐藏，用户无法通过滚动鼠标滚轮的方式查看思维导图的不同部分。
 
+**view.node_overflow** : (string) 节点文本过长时的样式 (0.5.3 及以上版本支持)
+
+> 节点文本过长时，jsMind 支持两种样式：
+
+> * `hidden` - 隐藏部分文本以保持脑图的整体易读性 [默认值]
+> * `wrap` - 对文本进行换行，以展示全部文本内容
+
 **layout.hspace** : (number) 节点之间的水平间距（像素）  
 **layout.vspace** : (number) 节点之间的垂直间距（像素）
 

js/jsmind.js

@@ -62,7 +62,8 @@
             line_width: 2,
             line_color: '#555',
             draggable: false, // drag the mind map with your mouse, when it's larger that the container
-            hide_scrollbars_when_draggable: false // hide container scrollbars, when mind map is larger than container and draggable option is true.
+            hide_scrollbars_when_draggable: false, // hide container scrollbars, when mind map is larger than container and draggable option is true.
+            node_overflow: 'hidden' // hidden or wrap
         },
         layout: {
             hspace: 30,
@@ -1025,7 +1026,8 @@
                 line_width: opts.view.line_width,
                 line_color: opts.view.line_color,
                 draggable: opts.view.draggable,
-                hide_scrollbars_when_draggable: opts.view.hide_scrollbars_when_draggable
+                hide_scrollbars_when_draggable: opts.view.hide_scrollbars_when_draggable,
+                node_overflow: opts.view.node_overflow
             };
             // create instance of function provider
             this.data = new jm.data_provider(this);
@@ -2293,8 +2295,7 @@
             this.e_editor = $c('input');
 
             this.graph = this.opts.engine.toLowerCase() === 'svg' ? new jm.graph_svg(this) : new jm.graph_canvas(this);
-
-            this.e_panel.className = 'jsmind-inner';
+            this.e_panel.className = 'jsmind-inner jmnode-overflow-' + this.opts.node_overflow;
             this.e_panel.tabIndex = 1;
             this.e_panel.appendChild(this.graph.element());
             this.e_panel.appendChild(this.e_nodes);

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "jsmind",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "description": "jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you observe the license.",
     "main": "js/jsmind.js",
     "directories": {

package.json

@@ -61,6 +61,7 @@ export default class jsMind {
             line_color: this.options.view.line_color,
             draggable: this.options.view.draggable,
             hide_scrollbars_when_draggable: this.options.view.hide_scrollbars_when_draggable,
+            node_overflow: this.options.view.node_overflow,
         };
         // create instance of function provider
         this.data = new DataProvider(this);

src/jsmind.js

@@ -24,6 +24,7 @@ const default_options = {
         line_color: '#555',
         draggable: false, // drag the mind map with your mouse, when it's larger that the container
         hide_scrollbars_when_draggable: false, // hide container scrollbars, when mind map is larger than container and draggable option is true.
+        node_overflow: 'hidden', // hidden or wrap
     },
     layout: {
         hspace: 30,

src/jsmind.option.js

@@ -41,7 +41,7 @@ export class ViewProvider {
         this.e_panel = $.c('div');
         this.e_nodes = $.c('jmnodes');
         this.e_editor = $.c('input');
-        this.e_panel.className = 'jsmind-inner';
+        this.e_panel.className = 'jsmind-inner jmnode-overflow-' + this.opts.node_overflow;
         this.e_panel.tabIndex = 1;
         this.e_panel.appendChild(this.graph.element());
         this.e_panel.appendChild(this.e_nodes);

src/jsmind.view_provider.js

@@ -48,9 +48,6 @@ jmnode {
     position: absolute;
     cursor: default;
     max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 jmexpander {
     position: absolute;
@@ -67,6 +64,15 @@ jmexpander {
     cursor: pointer;
 }
 
+.jmnode-overflow-wrap jmnodes {
+    min-width: 420px;
+}
+
+.jmnode-overflow-hidden jmnode {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 /* default theme */
 jmnode {
     padding: 10px;