From dc2c233b55923a1057293c43893ea972faaed6ea Mon Sep 17 00:00:00 2001 From: Alexander Wunschik Date: Sun, 4 Sep 2016 14:19:35 +0200 Subject: [PATCH] added arrow-type 'circle'; fixes #1993 --- lib/network/modules/EdgesHandler.js | 8 ++++---- lib/network/modules/PhysicsEngine.js | 10 +++++----- .../modules/components/edges/util/EdgeBase.js | 17 +++++++++++++---- lib/network/options.js | 12 ++++++------ lib/network/shapes.js | 14 ++++++++++++-- 5 files changed, 40 insertions(+), 21 deletions(-) diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js index 4be26d95..e57e86e5 100644 --- a/lib/network/modules/EdgesHandler.js +++ b/lib/network/modules/EdgesHandler.js @@ -23,9 +23,9 @@ class EdgesHandler { this.options = {}; this.defaultOptions = { arrows: { - to: {enabled: false, scaleFactor:1}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1} - middle: {enabled: false, scaleFactor:1}, - from: {enabled: false, scaleFactor:1} + to: {enabled: false, scaleFactor:1, type: 'arrow'}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1} + middle: {enabled: false, scaleFactor:1, type: 'arrow'}, + from: {enabled: false, scaleFactor:1, type: 'arrow'} }, arrowStrikethrough: true, color: { @@ -388,4 +388,4 @@ class EdgesHandler { } -export default EdgesHandler; \ No newline at end of file +export default EdgesHandler; diff --git a/lib/network/modules/PhysicsEngine.js b/lib/network/modules/PhysicsEngine.js index 7d538906..3555c2ff 100644 --- a/lib/network/modules/PhysicsEngine.js +++ b/lib/network/modules/PhysicsEngine.js @@ -628,7 +628,7 @@ class PhysicsEngine { this._freezeNodes(); } this.stabilizationIterations = 0; - + setTimeout(() => this._stabilizationBatch(),0); } @@ -649,7 +649,7 @@ class PhysicsEngine { this.physicsTick(); count++; } - + if (this.stabilized === false && this.stabilizationIterations < this.targetIterations) { this.body.emitter.emit('stabilizationProgress', {iterations: this.stabilizationIterations, total: this.targetIterations}); setTimeout(this._stabilizationBatch.bind(this),0); @@ -710,11 +710,11 @@ class PhysicsEngine { let angle = Math.atan2(force.y, force.x); ctx.fillStyle = color; - ctx.arrow(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize); + ctx.arrowEndpoint(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize); ctx.fill(); } } - + } -export default PhysicsEngine; \ No newline at end of file +export default PhysicsEngine; diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js index 659313a1..1371ab4e 100644 --- a/lib/network/modules/components/edges/util/EdgeBase.js +++ b/lib/network/modules/components/edges/util/EdgeBase.js @@ -412,6 +412,7 @@ class EdgeBase { let node2; let guideOffset; let scaleFactor; + let type; let lineWidth = this.getLineWidth(selected, hover); if (position === 'from') { @@ -419,17 +420,20 @@ class EdgeBase { node2 = this.to; guideOffset = 0.1; scaleFactor = this.options.arrows.from.scaleFactor; + type = this.options.arrows.from.type; } else if (position === 'to') { node1 = this.to; node2 = this.from; guideOffset = -0.1; scaleFactor = this.options.arrows.to.scaleFactor; + type = this.options.arrows.to.type; } else { node1 = this.to; node2 = this.from; scaleFactor = this.options.arrows.middle.scaleFactor; + type = this.options.arrows.middle.type; } // if not connected to itself @@ -475,7 +479,7 @@ class EdgeBase { var yi = arrowPoint.y - length * 0.9 * Math.sin(angle); 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.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 this.enableShadow(ctx); @@ -521,4 +530,4 @@ class EdgeBase { } } -export default EdgeBase; \ No newline at end of file +export default EdgeBase; diff --git a/lib/network/options.js b/lib/network/options.js index 9c0ff2b8..6238182a 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -24,9 +24,9 @@ let allOptions = { }, edges: { arrows: { - to: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } }, - middle: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } }, - from: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } }, + to: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } }, + middle: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } }, + from: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } }, __type__: { string: ['from', 'to', 'middle'], object } }, arrowStrikethrough: { boolean }, @@ -371,9 +371,9 @@ let configureOptions = { }, edges: { arrows: { - to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1} - middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, - from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] } + to: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' }, + middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' }, + from: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' } }, arrowStrikethrough: true, color: { diff --git a/lib/network/shapes.js b/lib/network/shapes.js index f2232bfc..ddc26ea0 100644 --- a/lib/network/shapes.js +++ b/lib/network/shapes.js @@ -206,9 +206,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { /** - * Draw an arrow point (no line) + * Draw an arrow an the end of an line with the given angle. */ - CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) { + CanvasRenderingContext2D.prototype.arrowEndpoint = function (x, y, angle, length) { // tail var xt = x - length * Math.cos(angle); var yt = y - length * Math.sin(angle); @@ -233,6 +233,16 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { this.closePath(); }; + /** + * Draw an circle an the end of an line with the given angle. + */ + CanvasRenderingContext2D.prototype.circleEndpoint = function (x, y, angle, length) { + var radius = length * 0.4; + var xc = x - radius * Math.cos(angle); + var yc = y - radius * Math.sin(angle); + this.circle(xc, yc, radius); + }; + /** * Sets up the dashedLine functionality for drawing * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas