Renamed line style `arrow` to `arrow-center`, and `arrow-end` to `arrow`.

docs/graph.html

@@ -507,7 +507,7 @@ var edges = [
         <td>no</td>
         <td>Define a line style for the edge.
             Choose from <code>line</code> (default), <code>arrow</code>,
-            <code>arrow-end</code>, or <code>dash-line</code>.
+            <code>arrow-center</code>, or <code>dash-line</code>.
         </td>
     </tr>
 
@@ -704,7 +704,7 @@ var options = {
     <td>"line"</td>
     <td>The default style of a edge.
         Choose from <code>line</code> (default), <code>arrow</code>,
-        <code>arrow-end</code>, <code>dash-line</code>.</td>
+        <code>arrow-center</code>, <code>dash-line</code>.</td>
 </tr>
 <tr>
     <td>edges.width</td>

examples/graph/04_shapes.html

@@ -25,9 +25,9 @@
             ];
 
             edges = [
-                {from: 3, to: 1, shape: 'arrow'},
-                {from: 1, to: 4, shape: 'dash-line'},
-                {from: 1, to: 2, shape: 'arrow-end'}
+                {from: 3, to: 1, style: 'arrow'},
+                {from: 1, to: 4, style: 'dash-line'},
+                {from: 1, to: 2, style: 'arrow-center'}
             ];
 
             var mainId = 5;

src/graph/Edge.js

@@ -96,16 +96,11 @@ Edge.prototype.setProperties = function(properties, constants) {
 
     this.stiffness = 1 / this.length;
 
-    // initialize animation
-    if (this.style === 'arrow') {
-        this.arrows = [0.5];
-    }
-
     // set draw method based on style
     switch (this.style) {
         case 'line':          this.draw = this._drawLine; break;
         case 'arrow':         this.draw = this._drawArrow; break;
-        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
+        case 'arrow-center':  this.draw = this._drawArrowCenter; break;
         case 'dash-line':     this.draw = this._drawDashLine; break;
         default:              this.draw = this._drawLine; break;
     }
@@ -198,8 +193,8 @@ Edge.prototype._drawLine = function(ctx) {
         }
     }
     else {
-        var radius = this.length / 2 / Math.PI;
         var x, y;
+        var radius = this.length / 4;
         var node = this.from;
         if (!node.width) {
             node.resize(ctx);
@@ -360,13 +355,13 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 };
 
 /**
- * Redraw a edge as a line with an arrow
+ * Redraw a edge as a line with an arrow halfway the line
  * Draw this edge in the given canvas
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Edge.prototype._drawArrow = function(ctx) {
+Edge.prototype._drawArrowCenter = function(ctx) {
     var point;
     // set style
     ctx.strokeStyle = this.color;
@@ -377,17 +372,13 @@ Edge.prototype._drawArrow = function(ctx) {
         // draw line
         this._line(ctx);
 
-        // draw all arrows
+        // draw an arrow halfway the line
         var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
         var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnLine(this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
-            }
-        }
+        point = this._pointOnLine(0.5);
+        ctx.arrow(point.x, point.y, angle, length);
+        ctx.fill();
+        ctx.stroke();
 
         // draw label
         if (this.label) {
@@ -397,8 +388,8 @@ Edge.prototype._drawArrow = function(ctx) {
     }
     else {
         // draw circle
-        var radius = this.length / 2 / Math.PI;
         var x, y;
+        var radius = this.length / 4;
         var node = this.from;
         if (!node.width) {
             node.resize(ctx);
@@ -442,7 +433,7 @@ Edge.prototype._drawArrow = function(ctx) {
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Edge.prototype._drawArrowEnd = function(ctx) {
+Edge.prototype._drawArrow = function(ctx) {
     // set style
     ctx.strokeStyle = this.color;
     ctx.fillStyle = this.color;
@@ -488,10 +479,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
         // draw circle
         var node = this.from;
         var x, y, arrow;
+        var radius = this.length / 4;
         if (!node.width) {
             node.resize(ctx);
         }
-        var radius = (this.length + node.width) / 4;
         if (node.width > node.height) {
             x = node.x + node.width / 2;
             y = node.y - radius;

src/graph/dotparser.js

@@ -275,7 +275,7 @@
             token += c;
             next();
         }
-        throw new SyntaxError('Syntax error in part "' + token + '"');
+        throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
     }
 
     /**
@@ -478,7 +478,17 @@
      * @returns {SyntaxError} err
      */
     function newSyntaxError(message) {
-        return new SyntaxError(message + ', got "' + token + '" (char ' + index + ')');
+        return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+    }
+
+    /**
+     * Chop off text after a maximum length
+     * @param {String} text
+     * @param {Number} maxLength
+     * @returns {String}
+     */
+    function chop (text, maxLength) {
+        return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
     }
 
     /**
@@ -521,7 +531,7 @@
                     to: dotEdge.to
                 };
                 merge(graphEdge, dotEdge.attr);
-                graphEdge.style = (dotEdge.type == '->') ? 'arrow-end' : 'line';
+                graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
                 graphData.edges.push(graphEdge);
             });
         }

vis.js

@@ -7083,7 +7083,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
             token += c;
             next();
         }
-        throw new SyntaxError('Syntax error in part "' + token + '"');
+        throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
     }
 
     /**
@@ -7286,7 +7286,17 @@ Timeline.prototype.getItemRange = function getItemRange() {
      * @returns {SyntaxError} err
      */
     function newSyntaxError(message) {
-        return new SyntaxError(message + ', got "' + token + '" (char ' + index + ')');
+        return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+    }
+
+    /**
+     * Chop off text after a maximum length
+     * @param {String} text
+     * @param {Number} maxLength
+     * @returns {String}
+     */
+    function chop (text, maxLength) {
+        return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
     }
 
     /**
@@ -7329,7 +7339,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
                     to: dotEdge.to
                 };
                 merge(graphEdge, dotEdge.attr);
-                graphEdge.style = (dotEdge.type == '->') ? 'arrow-end' : 'line';
+                graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
                 graphData.edges.push(graphEdge);
             });
         }
@@ -8283,16 +8293,11 @@ Edge.prototype.setProperties = function(properties, constants) {
 
     this.stiffness = 1 / this.length;
 
-    // initialize animation
-    if (this.style === 'arrow') {
-        this.arrows = [0.5];
-    }
-
     // set draw method based on style
     switch (this.style) {
         case 'line':          this.draw = this._drawLine; break;
         case 'arrow':         this.draw = this._drawArrow; break;
-        case 'arrow-end':     this.draw = this._drawArrowEnd; break;
+        case 'arrow-center':  this.draw = this._drawArrowCenter; break;
         case 'dash-line':     this.draw = this._drawDashLine; break;
         default:              this.draw = this._drawLine; break;
     }
@@ -8385,8 +8390,8 @@ Edge.prototype._drawLine = function(ctx) {
         }
     }
     else {
-        var radius = this.length / 2 / Math.PI;
         var x, y;
+        var radius = this.length / 4;
         var node = this.from;
         if (!node.width) {
             node.resize(ctx);
@@ -8547,13 +8552,13 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 };
 
 /**
- * Redraw a edge as a line with an arrow
+ * Redraw a edge as a line with an arrow halfway the line
  * Draw this edge in the given canvas
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Edge.prototype._drawArrow = function(ctx) {
+Edge.prototype._drawArrowCenter = function(ctx) {
     var point;
     // set style
     ctx.strokeStyle = this.color;
@@ -8564,17 +8569,13 @@ Edge.prototype._drawArrow = function(ctx) {
         // draw line
         this._line(ctx);
 
-        // draw all arrows
+        // draw an arrow halfway the line
         var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
         var length = 10 + 5 * this.width; // TODO: make customizable?
-        for (var a in this.arrows) {
-            if (this.arrows.hasOwnProperty(a)) {
-                point = this._pointOnLine(this.arrows[a]);
-                ctx.arrow(point.x, point.y, angle, length);
-                ctx.fill();
-                ctx.stroke();
-            }
-        }
+        point = this._pointOnLine(0.5);
+        ctx.arrow(point.x, point.y, angle, length);
+        ctx.fill();
+        ctx.stroke();
 
         // draw label
         if (this.label) {
@@ -8584,8 +8585,8 @@ Edge.prototype._drawArrow = function(ctx) {
     }
     else {
         // draw circle
-        var radius = this.length / 2 / Math.PI;
         var x, y;
+        var radius = this.length / 4;
         var node = this.from;
         if (!node.width) {
             node.resize(ctx);
@@ -8629,7 +8630,7 @@ Edge.prototype._drawArrow = function(ctx) {
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Edge.prototype._drawArrowEnd = function(ctx) {
+Edge.prototype._drawArrow = function(ctx) {
     // set style
     ctx.strokeStyle = this.color;
     ctx.fillStyle = this.color;
@@ -8675,10 +8676,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
         // draw circle
         var node = this.from;
         var x, y, arrow;
+        var radius = this.length / 4;
         if (!node.width) {
             node.resize(ctx);
         }
-        var radius = (this.length + node.width) / 4;
         if (node.width > node.height) {
             x = node.x + node.width / 2;
             y = node.y - radius;