Browse Source

Removed line styles moving-arrow and moving-dot from Graph

css_transitions
josdejong 11 years ago
parent
commit
1d7de110c0
5 changed files with 7 additions and 148 deletions
  1. +2
    -3
      docs/graph.html
  2. +3
    -3
      examples/graph/04_shapes.html
  3. +0
    -70
      src/graph/graph.js
  4. +0
    -70
      vis.js
  5. +2
    -2
      vis.min.js

+ 2
- 3
docs/graph.html View File

@ -503,8 +503,7 @@ var edges= [
<td>no</td> <td>no</td>
<td>Define a drawing style for the link. <td>Define a drawing style for the link.
Choose from <code>line</code> (default), <code>arrow</code>, Choose from <code>line</code> (default), <code>arrow</code>,
<code>arrow-end</code>, <code>moving-arrows</code>,
or <code>dash-line</code>.
<code>arrow-end</code>, or <code>dash-line</code>.
</td> </td>
</tr> </tr>
@ -734,7 +733,7 @@ var options = {
<td>"line"</td> <td>"line"</td>
<td>The default style of a link. <td>The default style of a link.
Choose from <code>line</code> (default), <code>arrow</code>, Choose from <code>line</code> (default), <code>arrow</code>,
<code>moving-arrows</code>, <code>dash-line</code>.</td>
<code>arrow-end</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, style: 'arrow', width: 1},
{from: 1, to: 4, style: 'moving-dot', width: 1},
{from: 1, to: 2, style: 'moving-arrows', width: 2}
{from: 3, to: 1, style: 'arrow'},
{from: 1, to: 4, style: 'dash-line'},
{from: 1, to: 2, style: 'arrow-end'}
]; ];
var mainId = 5; var mainId = 5;

+ 0
- 70
src/graph/graph.js View File

@ -2945,18 +2945,6 @@ Graph.Edge.prototype.setProperties = function(properties, constants) {
else if (this.style === 'arrow-end') { else if (this.style === 'arrow-end') {
this.animation = false; this.animation = false;
} }
else if (this.style === 'moving-arrows') {
this.arrows = [];
var arrowCount = 3; // TODO: make customizable
for (var a = 0; a < arrowCount; a++) {
this.arrows.push(a / arrowCount);
}
this.animation = true;
}
else if (this.style === 'moving-dot') {
this.dot = 0.0;
this.animation = true;
}
else { else {
this.animation = false; this.animation = false;
} }
@ -2966,8 +2954,6 @@ Graph.Edge.prototype.setProperties = function(properties, constants) {
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-end': this.draw = this._drawArrowEnd; break;
case 'moving-arrows': this.draw = this._drawMovingArrows; break;
case 'moving-dot': this.draw = this._drawMovingDot; 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;
} }
@ -3392,62 +3378,6 @@ Graph.Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
} }
}; };
/**
* Redraw a edge as a line with a moving arrow
* Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
Graph.Edge.prototype._drawMovingArrows = function(ctx) {
this._drawArrow(ctx);
for (var a in this.arrows) {
if (this.arrows.hasOwnProperty(a)) {
this.arrows[a] += 0.02; // TODO determine speed from interval
if (this.arrows[a] > 1.0) this.arrows[a] = 0.0;
}
}
};
/**
* Redraw a edge as a line with a moving dot
* Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
Graph.Edge.prototype._drawMovingDot = function(ctx) {
// set style
ctx.strokeStyle = this.color;
ctx.fillStyle = this.color;
ctx.lineWidth = this._getLineWidth();
// draw line
var point;
if (this.from != this.to) {
this._line(ctx);
// draw dot
var radius = 4 + this.width * 2;
point = this._pointOnLine(this.dot);
ctx.circle(point.x, point.y, radius);
ctx.fill();
// move the dot to the next position
this.dot += 0.05; // TODO determine speed from interval
if (this.dot > 1.0) this.dot = 0.0;
// draw text
if (this.text) {
point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
}
}
else {
// TODO: moving dot for a circular edge
}
};
/** /**
* Redraw a edge as a line with an arrow * Redraw a edge as a line with an arrow
* Draw this edge in the given canvas * Draw this edge in the given canvas

+ 0
- 70
vis.js View File

@ -9752,18 +9752,6 @@ Graph.Edge.prototype.setProperties = function(properties, constants) {
else if (this.style === 'arrow-end') { else if (this.style === 'arrow-end') {
this.animation = false; this.animation = false;
} }
else if (this.style === 'moving-arrows') {
this.arrows = [];
var arrowCount = 3; // TODO: make customizable
for (var a = 0; a < arrowCount; a++) {
this.arrows.push(a / arrowCount);
}
this.animation = true;
}
else if (this.style === 'moving-dot') {
this.dot = 0.0;
this.animation = true;
}
else { else {
this.animation = false; this.animation = false;
} }
@ -9773,8 +9761,6 @@ Graph.Edge.prototype.setProperties = function(properties, constants) {
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-end': this.draw = this._drawArrowEnd; break;
case 'moving-arrows': this.draw = this._drawMovingArrows; break;
case 'moving-dot': this.draw = this._drawMovingDot; 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;
} }
@ -10199,62 +10185,6 @@ Graph.Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
} }
}; };
/**
* Redraw a edge as a line with a moving arrow
* Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
Graph.Edge.prototype._drawMovingArrows = function(ctx) {
this._drawArrow(ctx);
for (var a in this.arrows) {
if (this.arrows.hasOwnProperty(a)) {
this.arrows[a] += 0.02; // TODO determine speed from interval
if (this.arrows[a] > 1.0) this.arrows[a] = 0.0;
}
}
};
/**
* Redraw a edge as a line with a moving dot
* Draw this edge in the given canvas
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* @param {CanvasRenderingContext2D} ctx
*/
Graph.Edge.prototype._drawMovingDot = function(ctx) {
// set style
ctx.strokeStyle = this.color;
ctx.fillStyle = this.color;
ctx.lineWidth = this._getLineWidth();
// draw line
var point;
if (this.from != this.to) {
this._line(ctx);
// draw dot
var radius = 4 + this.width * 2;
point = this._pointOnLine(this.dot);
ctx.circle(point.x, point.y, radius);
ctx.fill();
// move the dot to the next position
this.dot += 0.05; // TODO determine speed from interval
if (this.dot > 1.0) this.dot = 0.0;
// draw text
if (this.text) {
point = this._pointOnLine(0.5);
this._text(ctx, this.text, point.x, point.y);
}
}
else {
// TODO: moving dot for a circular edge
}
};
/** /**
* Redraw a edge as a line with an arrow * Redraw a edge as a line with an arrow
* Draw this edge in the given canvas * Draw this edge in the given canvas

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


Loading…
Cancel
Save