|
@ -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; |
|
|