|
@ -412,6 +412,7 @@ class EdgeBase { |
|
|
let node2; |
|
|
let node2; |
|
|
let guideOffset; |
|
|
let guideOffset; |
|
|
let scaleFactor; |
|
|
let scaleFactor; |
|
|
|
|
|
let type; |
|
|
let lineWidth = this.getLineWidth(selected, hover); |
|
|
let lineWidth = this.getLineWidth(selected, hover); |
|
|
|
|
|
|
|
|
if (position === 'from') { |
|
|
if (position === 'from') { |
|
@ -419,17 +420,20 @@ class EdgeBase { |
|
|
node2 = this.to; |
|
|
node2 = this.to; |
|
|
guideOffset = 0.1; |
|
|
guideOffset = 0.1; |
|
|
scaleFactor = this.options.arrows.from.scaleFactor; |
|
|
scaleFactor = this.options.arrows.from.scaleFactor; |
|
|
|
|
|
type = this.options.arrows.from.type; |
|
|
} |
|
|
} |
|
|
else if (position === 'to') { |
|
|
else if (position === 'to') { |
|
|
node1 = this.to; |
|
|
node1 = this.to; |
|
|
node2 = this.from; |
|
|
node2 = this.from; |
|
|
guideOffset = -0.1; |
|
|
guideOffset = -0.1; |
|
|
scaleFactor = this.options.arrows.to.scaleFactor; |
|
|
scaleFactor = this.options.arrows.to.scaleFactor; |
|
|
|
|
|
type = this.options.arrows.to.type; |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
node1 = this.to; |
|
|
node1 = this.to; |
|
|
node2 = this.from; |
|
|
node2 = this.from; |
|
|
scaleFactor = this.options.arrows.middle.scaleFactor; |
|
|
scaleFactor = this.options.arrows.middle.scaleFactor; |
|
|
|
|
|
type = this.options.arrows.middle.type; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// if not connected to itself
|
|
|
// if not connected to itself
|
|
@ -475,7 +479,7 @@ class EdgeBase { |
|
|
var yi = arrowPoint.y - length * 0.9 * Math.sin(angle); |
|
|
var yi = arrowPoint.y - length * 0.9 * Math.sin(angle); |
|
|
let arrowCore = {x: xi, y: yi}; |
|
|
let arrowCore = {x: xi, y: yi}; |
|
|
|
|
|
|
|
|
return {point: arrowPoint, core: arrowCore, angle: angle, length: length}; |
|
|
|
|
|
|
|
|
return {point: arrowPoint, core: arrowCore, angle: angle, length: length, type: type}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
@ -491,8 +495,13 @@ class EdgeBase { |
|
|
ctx.fillStyle = ctx.strokeStyle; |
|
|
ctx.fillStyle = ctx.strokeStyle; |
|
|
ctx.lineWidth = this.getLineWidth(selected, hover); |
|
|
ctx.lineWidth = this.getLineWidth(selected, hover); |
|
|
|
|
|
|
|
|
// draw arrow at the end of the line
|
|
|
|
|
|
ctx.arrow(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length); |
|
|
|
|
|
|
|
|
if (arrowData.type && arrowData.type.toLowerCase() === 'circle') { |
|
|
|
|
|
// draw circle at the end of the line
|
|
|
|
|
|
ctx.circleEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length); |
|
|
|
|
|
} else { |
|
|
|
|
|
// draw arrow at the end of the line
|
|
|
|
|
|
ctx.arrowEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// draw shadow if enabled
|
|
|
// draw shadow if enabled
|
|
|
this.enableShadow(ctx); |
|
|
this.enableShadow(ctx); |
|
@ -521,4 +530,4 @@ class EdgeBase { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default EdgeBase; |
|
|
|
|
|
|
|
|
export default EdgeBase; |