[Feature] configure custom line-drawing method

docs/en/2.options.md

@@ -38,7 +38,7 @@ options = {
        vmargin:50, 			// Minimum vertical distance of the mindmap from the outer frame of the container
        line_width:2, 		// thickness of the mindmap line
        line_color:'#555', 	// Thought mindmap line color
-       line_style:'curved', // line style, straight or curved
+       line_style:'curved', // line style, straight or curved, or a callback function presents controlled by user
        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' // Text overflow style in node
@@ -130,10 +130,35 @@ These options are described in more detail below.
 **view.line_color** : (string) color of the mindmap line (color representation in HTML). If `data.leading-line-color` is set on `node`, this option will be overridden.
 > By default, the lines are 2px in thickness and dark gray in color (#555).
 
-**view.line_style** : (string) style of the mindmap line. The available options are:
+**view.line_style** : (string|function) style of the mindmap line. The available options are:
 > * `curved` [default]
 > * `straight`
+> * `() => {}`
 
+Canvas engine
+```javascript
+/**
+ * [ctx API reference](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D)
+ * x1,y1 are start point, which is the child node coordinate, x2,y2 are end point, which is the parent node coordinate
+ * `this` point [CanvasGraph](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) Object
+ * If you want to use `this` object, DO NOT use Arrow function expressions
+ * */
+function line_style(ctx, x1, y1, x2, y2) {
+
+}
+```
+SVG engine
+```javascript
+/**
+ * path: a <path></path> DOM object
+ * x1,y1 are start point, which is the child node coordinate, x2,y2 are end point, which is the parent node coordinate
+ * `this` point [SvgGraph](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) Object
+ * If you want to use `this` object, DO NOT use Arrow function expressions
+ */
+function line_style(path, x1, y1, x2, y2) {
+
+}
+```
 **view.draggable** : (bool) Do you want whole mind map draggable inside container?
 
 > 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.

docs/zh/2.options.md

@@ -38,10 +38,10 @@ options = {
        vmargin:50,         // 思维导图距容器外框的最小垂直距离
        line_width:2,       // 思维导图线条的粗细
        line_color:'#555',  // 思维导图线条的颜色
-       line_style:'curved',// 思维导图线条的样式，直线(straight)或者曲线(curved)
+       line_style:'curved',// 思维导图线条的样式，直线(straight)或者曲线(curved), 或者编写回调方法自行画线
        draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
        hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时，是否隐藏滚动条
-       node_overflow: 'hidden' // 节点文本过长时的样式
+       node_overflow: 'hidden', // 节点文本过长时的样式
        zoom: {             // 配置缩放
            min: 0.5,       // 最小的缩放比例
            max: 2.1,       // 最大的缩放比例
@@ -135,10 +135,36 @@ options = {
 
 > 默认情况下，线条的粗细是2px，颜色是深灰色（#555）。
 
-**view.line_style** : (string) 思维导图线条的样式。可用的选项有: 
+**view.line_style** : (string|function) 思维导图线条的样式。可用的选项有: 
 
 > * `curved` 表示曲线 [默认值]
 > * `straight` 表示直线
+> * `(ctx, x1, y1, x2, y2)=>{}` 回调方法，表示由用户自己控制
+
+Canvas引擎
+```javascript
+/**
+ * [ctx API参考](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D)
+ * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标
+ * this 指向 [CanvasGraph](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) 对象
+ * 如果需要用到this, 请勿使用箭头函数
+ * */
+function line_style(ctx, x1, y1, x2, y2) {
+
+}
+```
+SVG引擎
+```javascript
+/**
+ * path: 一个<path></path>的DOM对象
+ * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标
+ * this 指向 [SvgGraph](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) 对象
+ * 如果需要用到this, 请勿使用箭头函数
+ */
+function line_style(path, x1, y1, x2, y2) {
+
+}
+```
 
 **view.draggable** : (bool) 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
 

src/jsmind.graph.js

@@ -7,6 +7,7 @@
  */
 
 import { $ } from './jsmind.dom.js';
+import {logger} from "./jsmind.common.js";
 
 class SvgGraph {
     constructor(view) {
@@ -20,7 +21,11 @@ class SvgGraph {
             straight: this._line_to,
             curved: this._bezier_to,
         };
-        this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        if (typeof this.opts.line_style === 'function') {
+            this.drawing = this.opts.line_style;
+        } else {
+            this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        }
     }
     static c(tag) {
         return $.d.createElementNS('http://www.w3.org/2000/svg', tag);
@@ -48,13 +53,18 @@ class SvgGraph {
         line.setAttribute('fill', 'transparent');
         this.lines.push(line);
         this.e_svg.appendChild(line);
-        this.drawing(
-            line,
-            pin.x + offset.x,
-            pin.y + offset.y,
-            pout.x + offset.x,
-            pout.y + offset.y
-        );
+        try {
+            this.drawing.call(
+              this,
+              line,
+              pin.x + offset.x,
+              pin.y + offset.y,
+              pout.x + offset.x,
+              pout.y + offset.y
+            );
+        } catch (e) {
+            logger.error('draw_line error: ',e);
+        }
     }
 
     copy_to(dest_canvas_ctx, callback) {
@@ -103,7 +113,11 @@ class CanvasGraph {
             straight: this._line_to,
             curved: this._bezier_to,
         };
-        this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        if (typeof this.opts.line_style === 'function') {
+            this.drawing = this.opts.line_style;
+        } else {
+            this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        }
     }
     element() {
         return this.e_canvas;
@@ -122,7 +136,11 @@ class CanvasGraph {
         ctx.strokeStyle = color || this.opts.line_color;
         ctx.lineWidth = this.opts.line_width;
         ctx.lineCap = 'round';
-        this.drawing(ctx, pin.x + offset.x, pin.y + offset.y, pout.x + offset.x, pout.y + offset.y);
+        try {
+            this.drawing.call(this, ctx, pin.x + offset.x, pin.y + offset.y, pout.x + offset.x, pout.y + offset.y);
+        } catch (e) {
+            logger.error('draw_line error: ', e);
+        }
     }
     copy_to(dest_canvas_ctx, callback) {
         dest_canvas_ctx.drawImage(this.e_canvas, 0, 0);