Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] new option of line style #480

Merged
merged 4 commits into from
Jul 1, 2023
Merged

[Feature] new option of line style #480

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05d260f
add option to config the line style
hizzgdev Jul 1, 2023
30c9578
update docs to intro the line_style option
hizzgdev Jul 1, 2023
acbe78e
update docs to indicate the default option
hizzgdev Jul 1, 2023
982fd7f
format
hizzgdev Jul 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add option to config the line style
  • Loading branch information
@hizzgdev
hizzgdev committed Jul 1, 2023
commit 05d260f918e6c5d5014fc7b43aa1074274980cca
18 changes: 15 additions & 3 deletions src/jsmind.graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ class SvgGraph {
this.e_svg.setAttribute('class', 'jsmind');
this.size = { w: 0, h: 0 };
this.lines = [];
this.line_drawing = {
'default': this._bezier_to,
'straight': this._line_to,
'curved': this._bezier_to,
}
this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing['default']
}
static c(tag) {
return $.d.createElementNS('http://www.w3.org/2000/svg', tag);
Expand Down Expand Up @@ -43,14 +49,15 @@ class SvgGraph {
line.setAttribute('fill', 'transparent');
this.lines.push(line);
this.e_svg.appendChild(line);
this._bezier_to(
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) {
var img = new Image();
img.onload = function () {
Expand Down Expand Up @@ -93,6 +100,12 @@ class CanvasGraph {
this.e_canvas.className = 'jsmind';
this.canvas_ctx = this.e_canvas.getContext('2d');
this.size = { w: 0, h: 0 };
this.line_drawing = {
'default': this._bezier_to,
'straight': this._line_to,
'curved': this._bezier_to,
}
this.drawing = this.line_drawing[this.opts.line_style] || this.line_drawing['default']
}
element() {
return this.e_canvas;
Expand All @@ -111,8 +124,7 @@ class CanvasGraph {
ctx.strokeStyle = color || this.opts.line_color;
ctx.lineWidth = this.opts.line_width;
ctx.lineCap = 'round';

this._bezier_to(
this.drawing(
ctx,
pin.x + offset.x,
pin.y + offset.y,
Expand Down
1 change: 1 addition & 0 deletions src/jsmind.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export default class jsMind {
vmargin: this.options.view.vmargin,
line_width: this.options.view.line_width,
line_color: this.options.view.line_color,
line_style: this.options.view.line_style,
draggable: this.options.view.draggable,
hide_scrollbars_when_draggable: this.options.view.hide_scrollbars_when_draggable,
node_overflow: this.options.view.node_overflow,
Expand Down
1 change: 1 addition & 0 deletions src/jsmind.option.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const default_options = {
vmargin: 50,
line_width: 2,
line_color: '#555',
line_style: 'curved', // straight or curved
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
Expand Down