Browse Source

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

css_transitions
josdejong 11 years ago
parent
commit
7f7e260e9e
6 changed files with 58 additions and 56 deletions
  1. +2
    -2
      docs/graph.html
  2. +3
    -3
      examples/graph/04_shapes.html
  3. +12
    -21
      src/graph/Edge.js
  4. +13
    -3
      src/graph/dotparser.js
  5. +25
    -24
      vis.js
  6. +3
    -3
      vis.min.js

+ 2
- 2
docs/graph.html View File

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

+ 3
- 3
examples/graph/04_shapes.html View File

@ -25,9 +25,9 @@
]; ];
edges = [ 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; var mainId = 5;

+ 12
- 21
src/graph/Edge.js View File

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

+ 13
- 3
src/graph/dotparser.js View File

@ -275,7 +275,7 @@
token += c; token += c;
next(); 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 * @returns {SyntaxError} err
*/ */
function newSyntaxError(message) { 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 to: dotEdge.to
}; };
merge(graphEdge, dotEdge.attr); merge(graphEdge, dotEdge.attr);
graphEdge.style = (dotEdge.type == '->') ? 'arrow-end' : 'line';
graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
graphData.edges.push(graphEdge); graphData.edges.push(graphEdge);
}); });
} }

+ 25
- 24
vis.js View File

@ -7083,7 +7083,7 @@ Timeline.prototype.getItemRange = function getItemRange() {
token += c; token += c;
next(); 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 * @returns {SyntaxError} err
*/ */
function newSyntaxError(message) { 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 to: dotEdge.to
}; };
merge(graphEdge, dotEdge.attr); merge(graphEdge, dotEdge.attr);
graphEdge.style = (dotEdge.type == '->') ? 'arrow-end' : 'line';
graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
graphData.edges.push(graphEdge); graphData.edges.push(graphEdge);
}); });
} }
@ -8283,16 +8293,11 @@ Edge.prototype.setProperties = function(properties, constants) {
this.stiffness = 1 / this.length; this.stiffness = 1 / this.length;
// initialize animation
if (this.style === 'arrow') {
this.arrows = [0.5];
}
// set draw method based on style // set draw method based on style
switch (this.style) { switch (this.style) {
case 'line': this.draw = this._drawLine; break; case 'line': this.draw = this._drawLine; break;
case 'arrow': this.draw = this._drawArrow; 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; case 'dash-line': this.draw = this._drawDashLine; break;
default: this.draw = this._drawLine; break; default: this.draw = this._drawLine; break;
} }
@ -8385,8 +8390,8 @@ Edge.prototype._drawLine = function(ctx) {
} }
} }
else { else {
var radius = this.length / 2 / Math.PI;
var x, y; var x, y;
var radius = this.length / 4;
var node = this.from; var node = this.from;
if (!node.width) { if (!node.width) {
node.resize(ctx); 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 * Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d"); * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
Edge.prototype._drawArrow = function(ctx) {
Edge.prototype._drawArrowCenter = function(ctx) {
var point; var point;
// set style // set style
ctx.strokeStyle = this.color; ctx.strokeStyle = this.color;
@ -8564,17 +8569,13 @@ Edge.prototype._drawArrow = function(ctx) {
// draw line // draw line
this._line(ctx); 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 angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
var length = 10 + 5 * this.width; // TODO: make customizable? 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 // draw label
if (this.label) { if (this.label) {
@ -8584,8 +8585,8 @@ Edge.prototype._drawArrow = function(ctx) {
} }
else { else {
// draw circle // draw circle
var radius = this.length / 2 / Math.PI;
var x, y; var x, y;
var radius = this.length / 4;
var node = this.from; var node = this.from;
if (!node.width) { if (!node.width) {
node.resize(ctx); node.resize(ctx);
@ -8629,7 +8630,7 @@ Edge.prototype._drawArrow = function(ctx) {
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
Edge.prototype._drawArrowEnd = function(ctx) {
Edge.prototype._drawArrow = function(ctx) {
// set style // set style
ctx.strokeStyle = this.color; ctx.strokeStyle = this.color;
ctx.fillStyle = this.color; ctx.fillStyle = this.color;
@ -8675,10 +8676,10 @@ Edge.prototype._drawArrowEnd = function(ctx) {
// draw circle // draw circle
var node = this.from; var node = this.from;
var x, y, arrow; var x, y, arrow;
var radius = this.length / 4;
if (!node.width) { if (!node.width) {
node.resize(ctx); node.resize(ctx);
} }
var radius = (this.length + node.width) / 4;
if (node.width > node.height) { if (node.width > node.height) {
x = node.x + node.width / 2; x = node.x + node.width / 2;
y = node.y - radius; y = node.y - radius;

+ 3
- 3
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save