diff --git a/docs/network/edges.html b/docs/network/edges.html
index 58a775e1..95e18d92 100644
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@@ -279,7 +279,7 @@ network.setOptions(options);
| arrows.to.type |
String |
arrow |
- The type of endpoint. Default is arrow. Also possible is circle. |
+ The type of endpoint. Possible values are: arrow, bar, circle. The default is arrow.
|
| arrows.middle |
diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html
index 7e251395..4adcc1d2 100644
--- a/examples/network/edgeStyles/arrowTypes.html
+++ b/examples/network/edgeStyles/arrowTypes.html
@@ -17,7 +17,8 @@
- There two type of liner endings. The classical "arrow" (default) and "circle".
+ The types of endpoints are: 'arrow' 'circle' 'bar'.
+ The default is 'arrow'.
@@ -25,9 +26,10 @@
diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js
index b317cfec..56b9e518 100644
--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@@ -149,11 +149,12 @@ class CanvasRenderer {
// This is not something that will happen in normal operation, but we still need
// to take it into account.
//
- if (typeof window === 'undefined') return; // Note: `if (window === undefined)` doesn't work
+ if (typeof window === 'undefined') return; // Doing `if (window === undefined)` does not work here!
+
+ let timer;
var myWindow = window; // Grab a reference to reduce the possibility that 'window' is reset
// while running this method.
- let timer;
if (this.requiresTimeout === true) {
// wait given number of milliseconds and perform the animation step function
diff --git a/lib/network/modules/components/edges/util/EndPoints.js b/lib/network/modules/components/edges/util/EndPoints.js
index 0bd1d178..291d4067 100644
--- a/lib/network/modules/components/edges/util/EndPoints.js
+++ b/lib/network/modules/components/edges/util/EndPoints.js
@@ -1,4 +1,4 @@
-/**
+/** ============================================================================
* Location of all the endpoint drawing routines.
*
* Every endpoint has its own drawing routine, which contains an endpoint definition.
@@ -9,9 +9,21 @@
* - The endpoints are orientated to the positive x-direction
* - The length of the endpoint is at most 1
*
- * As long as the endpoint classes remain simple and not too numerous, they will be contained within this module.
+ * As long as the endpoint classes remain simple and not too numerous, they will
+ * be contained within this module.
* All classes here except `EndPoints` should be considered as private to this module.
- */
+ *
+ * -----------------------------------------------------------------------------
+ * ### Further Actions
+ *
+ * After adding a new endpoint here, you also need to do the following things:
+ *
+ * - Add the new endpoint name to `network/options.js` in array `endPoints`.
+ * - Add the new endpoint name to the documentation.
+ * Scan for 'arrows.to.type` and add it to the description.
+ * - Add the endpoint to the examples. At the very least, add it to example
+ * `edgeStyles/arrowTypes`.
+ * ============================================================================= */
// NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it,
// using the rest of the commenting in the code block. Usage of typedef in other comments then
@@ -145,6 +157,45 @@ class Circle {
}
+/**
+ * Drawing methods for the bar endpoint.
+ */
+class Bar {
+
+ /**
+ * Draw this shape at the end of a line.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {ArrowData} arrowData
+ * @static
+ */
+ static draw(ctx, arrowData) {
+/*
+ var points = [
+ {x:0, y:0.5},
+ {x:0, y:-0.5}
+ ];
+
+ EndPoint.transform(points, arrowData);
+ ctx.beginPath();
+ ctx.moveTo(points[0].x, points[0].y);
+ ctx.lineTo(points[1].x, points[1].y);
+ ctx.stroke();
+*/
+
+ var points = [
+ {x:0, y:0.5},
+ {x:0, y:-0.5},
+ {x:-0.15, y:-0.5},
+ {x:-0.15, y:0.5},
+ ];
+
+ EndPoint.transform(points, arrowData);
+ EndPoint.drawPath(ctx, points);
+ }
+}
+
+
/**
* Drawing methods for the endpoints.
*/
@@ -167,6 +218,9 @@ class EndPoints {
case 'circle':
Circle.draw(ctx, arrowData);
break;
+ case 'bar':
+ Bar.draw(ctx, arrowData);
+ break;
case 'arrow': // fall-through
default:
Arrow.draw(ctx, arrowData);
diff --git a/lib/network/options.js b/lib/network/options.js
index 06697f10..e0f23b1c 100644
--- a/lib/network/options.js
+++ b/lib/network/options.js
@@ -13,6 +13,8 @@ let object = 'object'; // should only be in a __type__ property
let dom = 'dom';
let any = 'any';
+// List of endpoints
+let endPoints = ['arrow', 'circle', 'bar'];
let allOptions = {
configure: {
@@ -24,9 +26,9 @@ let allOptions = {
},
edges: {
arrows: {
- to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
- middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
- from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
+ to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
+ middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
+ from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
__type__: { string: ['from', 'to', 'middle'], object }
},
arrowStrikethrough: { boolean: bool },