From 983aeaa92a5d433f3dd0c240848df43afcb40040 Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 09:16:25 +0800 Subject: [PATCH 1/8] [Feature] It is able to configure custom line-drawing method now. --- src/jsmind.graph.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/jsmind.graph.js b/src/jsmind.graph.js index 9a183b96..ff68132f 100644 --- a/src/jsmind.graph.js +++ b/src/jsmind.graph.js @@ -20,7 +20,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); @@ -103,7 +107,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; From b1a6a9552b4f1b2a8fa112e5dc27f83d70dde922 Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 12:03:00 +0800 Subject: [PATCH 2/8] update docs --- docs/en/2.options.md | 25 +++++++++++++++++++++++-- docs/zh/2.options.md | 28 +++++++++++++++++++++++++--- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/docs/en/2.options.md b/docs/en/2.options.md index a02a9bb9..2a208f07 100644 --- a/docs/en/2.options.md +++ b/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 controld 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,31 @@ 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为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + * */ +(ctx, x1, y1, x2, y2) => { + +} +``` +SVG engine +```javascript +/** + * path: a DOM object + * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + */ +(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. diff --git a/docs/zh/2.options.md b/docs/zh/2.options.md index 3c7c6a67..83b8c46b 100644 --- a/docs/zh/2.options.md +++ b/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,32 @@ 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为终点, 为父节点坐标 + * */ +(ctx, x1, y1, x2, y2) => { + +} +``` +SVG引擎 +```javascript +/** + * path: 一个的DOM对象 + * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + */ +(path, x1, y1, x2, y2) => { + +} +``` **view.draggable** : (bool) 当容器不能完全容纳思维导图时,是否允许拖动画布代替鼠标滚动 From d45a46a3a96f410a77e157d6c8d4ccc524fa5c8f Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 12:11:56 +0800 Subject: [PATCH 3/8] correction words --- docs/en/2.options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/2.options.md b/docs/en/2.options.md index 2a208f07..b10572a8 100644 --- a/docs/en/2.options.md +++ b/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, or a callback function presents controld by user + 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 From 9e873c5cd4f73c82a25e2ef811e29a514ff2f8f1 Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 15:29:26 +0800 Subject: [PATCH 4/8] [Feature] add `this` binding and error log --- src/jsmind.graph.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/jsmind.graph.js b/src/jsmind.graph.js index ff68132f..0bee2b04 100644 --- 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) { @@ -52,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) { @@ -130,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); From 486122673a4f76e91b3b80abc4146302ae356c1c Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 15:29:51 +0800 Subject: [PATCH 5/8] update docs --- docs/en/2.options.md | 12 ++++++++---- docs/zh/2.options.md | 8 ++++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/en/2.options.md b/docs/en/2.options.md index b10572a8..b97e48d6 100644 --- a/docs/en/2.options.md +++ b/docs/en/2.options.md @@ -139,9 +139,11 @@ Canvas engine ```javascript /** * [ctx API reference](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D) - * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + * 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 * */ -(ctx, x1, y1, x2, y2) => { +function line_style(ctx, x1, y1, x2, y2) { } ``` @@ -149,9 +151,11 @@ SVG engine ```javascript /** * path: a DOM object - * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + * 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 */ -(path, x1, y1, x2, y2) => { +function line_style(path, x1, y1, x2, y2) { } ``` diff --git a/docs/zh/2.options.md b/docs/zh/2.options.md index 83b8c46b..7ba66947 100644 --- a/docs/zh/2.options.md +++ b/docs/zh/2.options.md @@ -146,8 +146,10 @@ Canvas引擎 /** * [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, 请勿使用箭头函数 * */ -(ctx, x1, y1, x2, y2) => { +function line_style(ctx, x1, y1, x2, y2) { } ``` @@ -156,8 +158,10 @@ SVG引擎 /** * path: 一个的DOM对象 * x1,y1为起点, 为子节点坐标, x2,y2为终点, 为父节点坐标 + * this 指向 [SvgGraph](https://github.com/hizzgdev/jsmind/blob/master/src/jsmind.graph.js) 对象 + * 如果需要用到this, 请勿使用箭头函数 */ -(path, x1, y1, x2, y2) => { +function line_style(path, x1, y1, x2, y2) { } ``` From 0d8949caf33188d4df7c3b7700d2d4067eb69749 Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 22:13:54 +0800 Subject: [PATCH 6/8] [Refactor] refactor custom line style, use independent param instead --- src/jsmind.graph.js | 68 ++++++++++++++++++++++++++++----------------- src/jsmind.js | 1 + 2 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/jsmind.graph.js b/src/jsmind.graph.js index 0bee2b04..9bcae04e 100644 --- a/src/jsmind.graph.js +++ b/src/jsmind.graph.js @@ -7,7 +7,7 @@ */ import { $ } from './jsmind.dom.js'; -import {logger} from "./jsmind.common.js"; +import { logger } from './jsmind.common.js'; class SvgGraph { constructor(view) { @@ -21,15 +21,28 @@ class SvgGraph { straight: this._line_to, curved: this._bezier_to, }; - 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; - } + this.init_line_style(); } static c(tag) { return $.d.createElementNS('http://www.w3.org/2000/svg', tag); } + init_line_style() { + 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; } @@ -53,18 +66,13 @@ class SvgGraph { line.setAttribute('fill', 'transparent'); this.lines.push(line); this.e_svg.appendChild(line); - 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); - } + this.drawing( + line, + pin.x + offset.x, + pin.y + offset.y, + pout.x + offset.x, + pout.y + offset.y + ); } copy_to(dest_canvas_ctx, callback) { @@ -113,8 +121,22 @@ class CanvasGraph { straight: this._line_to, curved: this._bezier_to, }; - if (typeof this.opts.line_style === 'function') { - this.drawing = this.opts.line_style; + this.init_line_style(); + } + init_line_style() { + 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; } @@ -136,11 +158,7 @@ class CanvasGraph { ctx.strokeStyle = color || this.opts.line_color; ctx.lineWidth = this.opts.line_width; ctx.lineCap = 'round'; - 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); - } + this.drawing(ctx, pin.x + offset.x, pin.y + offset.y, pout.x + offset.x, pout.y + offset.y); } copy_to(dest_canvas_ctx, callback) { dest_canvas_ctx.drawImage(this.e_canvas, 0, 0); diff --git a/src/jsmind.js b/src/jsmind.js index 8ec1a0bb..3823efb7 100644 --- 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, From 1ce91d60634873876f52139c3f7ef1bf682333a5 Mon Sep 17 00:00:00 2001 From: Yttrium Date: Thu, 30 May 2024 23:06:55 +0800 Subject: [PATCH 7/8] update docs --- docs/en/2.options.md | 34 ++++++++-------------------------- docs/zh/2.options.md | 35 ++++++++--------------------------- 2 files changed, 16 insertions(+), 53 deletions(-) diff --git a/docs/en/2.options.md b/docs/en/2.options.md index b97e48d6..e0213223 100644 --- a/docs/en/2.options.md +++ b/docs/en/2.options.md @@ -38,7 +38,8 @@ 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, or a callback function presents controlled by user + 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 @@ -133,32 +134,13 @@ These options are described in more detail below. **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 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.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 index 7ba66947..446229b0 100644 --- a/docs/zh/2.options.md +++ b/docs/zh/2.options.md @@ -38,7 +38,8 @@ options = { vmargin:50, // 思维导图距容器外框的最小垂直距离 line_width:2, // 思维导图线条的粗细 line_color:'#555', // 思维导图线条的颜色 - line_style:'curved',// 思维导图线条的样式,直线(straight)或者曲线(curved), 或者编写回调方法自行画线 + line_style:'curved',// 思维导图线条的样式,直线(straight)或者曲线(curved) + custom_line_render: null, // 自定义的线条渲染方法 draggable: false, // 当容器不能完全容纳思维导图时,是否允许拖动画布代替鼠标滚动 hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时,是否隐藏滚动条 node_overflow: 'hidden', // 节点文本过长时的样式 @@ -135,36 +136,16 @@ options = { > 默认情况下,线条的粗细是2px,颜色是深灰色(#555)。 -**view.line_style** : (string|function) 思维导图线条的样式。可用的选项有: +**view.line_style** : (string) 思维导图线条的样式。可用的选项有: > * `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: 一个的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.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) 当容器不能完全容纳思维导图时,是否允许拖动画布代替鼠标滚动 From 4713476f06cffb91f331a3dcbccdc6248520fd3d Mon Sep 17 00:00:00 2001 From: Yttrium Date: Fri, 31 May 2024 08:20:33 +0800 Subject: [PATCH 8/8] update name --- docs/en/2.options.md | 2 +- src/jsmind.graph.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/en/2.options.md b/docs/en/2.options.md index e0213223..5cc4efa2 100644 --- a/docs/en/2.options.md +++ b/docs/en/2.options.md @@ -131,7 +131,7 @@ 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|function) style of the mindmap line. The available options are: +**view.line_style** : (string) style of the mindmap line. The available options are: > * `curved` [default] > * `straight` diff --git a/src/jsmind.graph.js b/src/jsmind.graph.js index 9bcae04e..aed5d6fa 100644 --- a/src/jsmind.graph.js +++ b/src/jsmind.graph.js @@ -21,12 +21,12 @@ class SvgGraph { straight: this._line_to, curved: this._bezier_to, }; - this.init_line_style(); + this.init_line_render(); } static c(tag) { return $.d.createElementNS('http://www.w3.org/2000/svg', tag); } - init_line_style() { + init_line_render() { if (typeof this.opts.custom_line_render === 'function') { this.drawing = (path, x1, y1, x2, y2) => { try { @@ -121,9 +121,9 @@ class CanvasGraph { straight: this._line_to, curved: this._bezier_to, }; - this.init_line_style(); + this.init_line_render(); } - init_line_style() { + init_line_render() { if (typeof this.opts.custom_line_render === 'function') { this.drawing = (ctx, x1, y1, x2, y2) => { try {