[Feature] configure custom line-drawing method (#603)

* [Feature] It is able to configure custom line-drawing method now. * update docs * correction words * [Feature] add `this` binding and error log * update docs * [Refactor] refactor custom line style, use independent param instead * update docs * update name --------- Co-authored-by: Yttrium <[email protected]>
hizzgdev · May 31, 2024 · 58c90f5 · 58c90f5
1 parent 5467aca
commit 58c90f5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/docs/en/2.options.md b/docs/en/2.options.md
@@ -39,6 +39,7 @@ options = {
        line_width:2, 		// thickness of the mindmap line
        line_color:'#555', 	// Thought mindmap line color
        line_style:'curved', // line style, straight or curved
+       custom_line_render: null,  // customized line render function
        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
@@ -134,6 +135,12 @@ These options are described in more detail below.
 > * `curved` [default]
 > * `straight`
 
+**view.custom_line_render** : (function) customize the line render function
+
+> * method signature: `function custom_line_render({ctx, start_point: {x, y}, end_point: {x, y}}):void`
+> * `this` presents [current line renderer](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js)，`ctx` is a canvas context object or a SVG path DOM object, which is determined by `view.engine`, `start_point` and `end_point` are two coordinates object, contains `x` and `y` properties.
+> * Note: if you want use [`this`](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) object, you should NOT use Arrow Function expressions.
+
 **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.

diff --git a/docs/zh/2.options.md b/docs/zh/2.options.md
@@ -39,9 +39,10 @@ options = {
        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' // 节点文本过长时的样式
+       node_overflow: 'hidden', // 节点文本过长时的样式
        zoom: {             // 配置缩放
            min: 0.5,       // 最小的缩放比例
            max: 2.1,       // 最大的缩放比例
@@ -140,6 +141,12 @@ options = {
 > * `curved` 表示曲线 [默认值]
 > * `straight` 表示直线
 
+**view.custom_line_render** : (function) 自定义思维导图线条的渲染方法
+
+> * 方法参数签名: `function custom_line_render({ctx, start_point: {x, y}, end_point: {x, y}}):void` 
+> * `this`对应[当前渲染的线条对象](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js)，`ctx` 是一个 canvas 上下文对象或一个标签名为`path`的DOM对象，具体取决于`view.engine`的值，`start_point` 和 `end_point` 是起始点的坐标对象，坐标对象包含 `x` 和 `y` 属性。 
+> * 注意: 如果你想要使用[`this`](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js)对象, 请不要使用箭头函数
+
 **view.draggable** : (bool) 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
 
 > 当思维导图不能在容器中完全显示时，默认情况下容器内会出现滚动条。开启此选项后，将允许通过拖拽画布的方式查看思维导图的不同部分。此参数默认值为 `false` (不开启此功能)

diff --git a/src/jsmind.graph.js b/src/jsmind.graph.js
@@ -7,6 +7,7 @@
  */
 
 import { $ } from './jsmind.dom.js';
+import { logger } from './jsmind.common.js';
 
 class SvgGraph {
     constructor(view) {
@@ -20,11 +21,28 @@ class SvgGraph {
             straight: this._line_to,
             curved: this._bezier_to,
         };
-        this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        this.init_line_render();
     }
     static c(tag) {
         return $.d.createElementNS('http://www.w3.org/2000/svg', tag);
     }
+    init_line_render() {
+        if (typeof this.opts.custom_line_render === 'function') {
+            this.drawing = (path, x1, y1, x2, y2) => {
+                try {
+                    this.opts.custom_line_render.call(this, {
+                        ctx: path,
+                        start_point: { x: x1, y: y1 },
+                        end_point: { x: x2, y: y2 },
+                    });
+                } catch (e) {
+                    logger.error('custom line renderer error: ', e);
+                }
+            };
+        } else {
+            this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        }
+    }
     element() {
         return this.e_svg;
     }
@@ -103,7 +121,25 @@ class CanvasGraph {
             straight: this._line_to,
             curved: this._bezier_to,
         };
-        this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        this.init_line_render();
+    }
+    init_line_render() {
+        if (typeof this.opts.custom_line_render === 'function') {
+            this.drawing = (ctx, x1, y1, x2, y2) => {
+                try {
+                    this.opts.custom_line_render.call(this, {
+                        ctx,
+                        start_point: { x: x1, y: y1 },
+                        end_point: { x: x2, y: y2 },
+                    });
+                    console.log('custom line render jsmind');
+                } catch (e) {
+                    logger.error('custom line render error: ', e);
+                }
+            };
+        } else {
+            this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing.curved;
+        }
     }
     element() {
         return this.e_canvas;

diff --git a/src/jsmind.js b/src/jsmind.js
@@ -61,6 +61,7 @@ export default class jsMind {
             line_width: this.options.view.line_width,
             line_color: this.options.view.line_color,
             line_style: this.options.view.line_style,
+            custom_line_render: this.options.view.custom_line_render,
             draggable: this.options.view.draggable,
             hide_scrollbars_when_draggable: this.options.view.hide_scrollbars_when_draggable,
             node_overflow: this.options.view.node_overflow,