|
|
@ -27,45 +27,57 @@ class EdgeBase { |
|
|
|
// set style
|
|
|
|
ctx.strokeStyle = this.getColor(ctx); |
|
|
|
ctx.lineWidth = this.getLineWidth(selected, hover); |
|
|
|
let via = undefined; |
|
|
|
if (this.options.dashes.enabled === true) { |
|
|
|
via = this._drawDashedLine(ctx); |
|
|
|
} |
|
|
|
else { |
|
|
|
via = this._drawLine(ctx); |
|
|
|
} |
|
|
|
return via; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_drawLine(ctx) { |
|
|
|
let via = undefined; |
|
|
|
if (this.from != this.to) { |
|
|
|
// draw line
|
|
|
|
if (this.options.dashes.enabled === true) { |
|
|
|
via = this._drawDashedLine(ctx); |
|
|
|
} |
|
|
|
else { |
|
|
|
via = this._line(ctx); |
|
|
|
} |
|
|
|
via = this._line(ctx); |
|
|
|
} |
|
|
|
else { |
|
|
|
let [x,y,radius] = this._getCircleData(ctx); |
|
|
|
this._circle(ctx, x, y, radius); |
|
|
|
} |
|
|
|
|
|
|
|
return via; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_drawDashedLine(ctx) { |
|
|
|
let via = undefined; |
|
|
|
ctx.lineCap = 'round'; |
|
|
|
let pattern = [5,5]; |
|
|
|
if (this.options.dashes.pattern !== undefined) { |
|
|
|
if (Array.isArray(this.options.dashes.pattern) === true) { |
|
|
|
pattern = this.options.dashes.pattern; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// only firefox and chrome support this method, else we use the legacy one.
|
|
|
|
if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) { |
|
|
|
ctx.save(); |
|
|
|
// configure the dash pattern
|
|
|
|
let pattern = [0]; |
|
|
|
if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) { |
|
|
|
pattern = [this.options.dashes.length, this.options.dashes.gap]; |
|
|
|
} |
|
|
|
else { |
|
|
|
pattern = [5, 5]; |
|
|
|
} |
|
|
|
|
|
|
|
// set dash settings for chrome or firefox
|
|
|
|
ctx.setLineDash(pattern); |
|
|
|
ctx.lineDashOffset = 0; |
|
|
|
|
|
|
|
// draw the line
|
|
|
|
via = this._line(ctx); |
|
|
|
if (this.from != this.to) { |
|
|
|
// draw line
|
|
|
|
via = this._line(ctx); |
|
|
|
} |
|
|
|
else { |
|
|
|
let [x,y,radius] = this._getCircleData(ctx); |
|
|
|
this._circle(ctx, x, y, radius); |
|
|
|
} |
|
|
|
|
|
|
|
// restore the dash settings.
|
|
|
|
ctx.setLineDash([0]); |
|
|
@ -73,23 +85,15 @@ class EdgeBase { |
|
|
|
ctx.restore(); |
|
|
|
} |
|
|
|
else { // unsupporting smooth lines
|
|
|
|
// draw dashes line
|
|
|
|
ctx.beginPath(); |
|
|
|
ctx.lineCap = 'round'; |
|
|
|
if (this.options.dashes.altLength !== undefined) //If an alt dash value has been set add to the array this value
|
|
|
|
{ |
|
|
|
ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y, |
|
|
|
[this.options.dashes.length, this.options.dashes.gap, this.options.dashes.altLength, this.options.dashes.gap]); |
|
|
|
} |
|
|
|
else if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) //If a dash and gap value has been set add to the array this value
|
|
|
|
{ |
|
|
|
ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y, |
|
|
|
[this.options.dashes.length, this.options.dashes.gap]); |
|
|
|
|
|
|
|
|
|
|
|
if (this.from != this.to) { |
|
|
|
// draw line
|
|
|
|
ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern); |
|
|
|
} |
|
|
|
else //If all else fails draw a line
|
|
|
|
{ |
|
|
|
ctx.moveTo(this.from.x, this.from.y); |
|
|
|
ctx.lineTo(this.to.x, this.to.y); |
|
|
|
else { |
|
|
|
let [x,y,radius] = this._getCircleData(ctx); |
|
|
|
this._circle(ctx, x, y, radius); |
|
|
|
} |
|
|
|
// draw shadow if enabled
|
|
|
|
this.enableShadow(ctx); |
|
|
|