Browse Source

Graph: renamed shape 'rect' to 'box', changed default shape to 'ellipse'.

css_transitions
josdejong 11 years ago
parent
commit
c1b7103618
9 changed files with 41 additions and 38 deletions
  1. +8
    -8
      docs/graph.html
  2. +3
    -3
      examples/graph/04_shapes.html
  3. +1
    -1
      examples/graph/08_selections.html
  4. +4
    -1
      examples/graph/18_dashed_lines.html
  5. +3
    -3
      examples/graph/20_dot_language_playground.html
  6. +1
    -1
      src/graph/Graph.js
  7. +8
    -8
      src/graph/Node.js
  8. +9
    -9
      vis.js
  9. +4
    -4
      vis.min.js

+ 8
- 8
docs/graph.html View File

@ -329,7 +329,7 @@ var nodes = [
<td>radius</td> <td>radius</td>
<td>number</td> <td>number</td>
<td>no</td> <td>no</td>
<td>Radius for the node. Applicable for all shapes except <code>rect</code>,
<td>Radius for the node. Applicable for all shapes except <code>box</code>,
<code>circle</code>, <code>ellipse</code> and <code>database</code>. <code>circle</code>, <code>ellipse</code> and <code>database</code>.
The value of <code>radius</code> will override a value in The value of <code>radius</code> will override a value in
property <code>value</code>.</td> property <code>value</code>.</td>
@ -341,7 +341,7 @@ var nodes = [
<td>no</td> <td>no</td>
<td>Define the shape for the node. <td>Define the shape for the node.
Choose from Choose from
<code>rect</code> (default), <code>circle</code>, <code>ellipse</code>,
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>, <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
<br><br> <br><br>
@ -358,7 +358,7 @@ var nodes = [
When a property <code>label</code> is provided, When a property <code>label</code> is provided,
this label will be displayed inside the shape in case of shapes this label will be displayed inside the shape in case of shapes
<code>rect</code>, <code>circle</code>, <code>ellipse</code>,
<code>box</code>, <code>circle</code>, <code>ellipse</code>,
and <code>database</code>. and <code>database</code>.
For all other shapes, the label will be displayed right below the shape. For all other shapes, the label will be displayed right below the shape.
@ -794,10 +794,10 @@ var options = {
<tr> <tr>
<td>nodes.shape</td> <td>nodes.shape</td>
<td>String</td> <td>String</td>
<td>"rect"</td>
<td>"ellipse"</td>
<td>The default shape for all nodes. <td>The default shape for all nodes.
Choose from Choose from
<code>rect</code> (default), <code>circle</code>, <code>ellipse</code>,
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>, <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
This shape can be overridden by a group shape, or by a shape of an individual node.</td> This shape can be overridden by a group shape, or by a shape of an individual node.</td>
@ -967,9 +967,9 @@ var nodes = [
<tr> <tr>
<td>shape</td> <td>shape</td>
<td>String</td> <td>String</td>
<td>"rect"</td>
<td>"ellipse"</td>
<td>Choose from <td>Choose from
<code>rect</code> (default), <code>circle</code>, <code>ellipse</code>,
<code>ellipse</code> (default), <code>circle</code>, <code>box</code>,
<code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>, <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
In case of image, a property with name image must be provided, containing In case of image, a property with name image must be provided, containing
@ -980,7 +980,7 @@ var nodes = [
<td>Number</td> <td>Number</td>
<td>5</td> <td>5</td>
<td>Default radius for the node. Only applicable in combination with <td>Default radius for the node. Only applicable in combination with
shapes <code>rect</code> and <code>dot</code>.</td>
shapes <code>box</code> and <code>dot</code>.</td>
</tr> </tr>
</table> </table>

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

@ -26,7 +26,7 @@
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'}, {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
{id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'}, {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
{id: 3, label: 'database', shape: 'database', group: 'group_x'}, {id: 3, label: 'database', shape: 'database', group: 'group_x'},
{id: 4, label: 'rect', shape: 'rect', group: 'group_x'}
{id: 4, label: 'box', shape: 'box', group: 'group_x'}
]; ];
edges = [ edges = [
@ -36,12 +36,12 @@
]; ];
var mainId = 5; var mainId = 5;
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'rect', group: 'group_main'});
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star']; var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
var id = 6; var id = 6;
for (var size = 1; size < 4; size++) { for (var size = 1; size < 4; size++) {
var groupId = id; var groupId = id;
nodes.push({id: id, label: 'size ' + size, shape: 'rect', group: 'group' + size});
nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
edges.push({from: mainId, to: groupId, color: 'gray', width: size}); edges.push({from: mainId, to: groupId, color: 'gray', width: size});
id++; id++;

+ 1
- 1
examples/graph/08_selections.html View File

@ -45,7 +45,7 @@
}; };
var options = { var options = {
nodes: { nodes: {
shape: 'ellipse'
shape: 'box'
} }
}; };
graph = new vis.Graph(container, data, options); graph = new vis.Graph(container, data, options);

+ 4
- 1
examples/graph/18_dashed_lines.html View File

@ -42,8 +42,11 @@
edges: edges edges: edges
}; };
var options = { var options = {
nodes: {
shape: 'box'
},
edges: { edges: {
length: 200
length: 180
}, },
stabilize: false stabilize: false
}; };

+ 3
- 3
examples/graph/20_dot_language_playground.html View File

@ -162,11 +162,11 @@ digraph topology
"10.0.255.3" -> "10.0.255.1"[label="1.000"]; "10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"]; "10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid]; "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=rect];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"]; "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=rect];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"]; "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=rect];
"10.0.1.0/24"[shape=box];
} }
</textarea> </textarea>

+ 1
- 1
src/graph/Graph.js View File

@ -25,7 +25,7 @@ function Graph (container, data, options) {
radiusMax: 20, radiusMax: 20,
radius: 5, radius: 5,
distance: 100, // px distance: 100, // px
shape: 'rect',
shape: 'ellipse',
image: undefined, image: undefined,
widthMin: 16, // px widthMin: 16, // px
widthMax: 64, // px widthMax: 64, // px

+ 8
- 8
src/graph/Node.js View File

@ -9,7 +9,7 @@
* {number} y Vertical position of the node * {number} y Vertical position of the node
* {string} shape Node shape, available: * {string} shape Node shape, available:
* "database", "circle", "ellipse", * "database", "circle", "ellipse",
* "rect", "image", "text", "dot",
* "box", "image", "text", "dot",
* "star", "triangle", "triangleDown", * "star", "triangle", "triangleDown",
* "square" * "square"
* {string} image An image url * {string} image An image url
@ -157,7 +157,7 @@ Node.prototype.setProperties = function(properties, constants) {
// choose draw method depending on the shape // choose draw method depending on the shape
switch (this.shape) { switch (this.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break; case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'box': this.draw = this._drawBox; this.resize = this._resizeBox; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break; case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break; case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
// TODO: add diamond shape // TODO: add diamond shape
@ -168,7 +168,7 @@ Node.prototype.setProperties = function(properties, constants) {
case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break; case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break; case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break; case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break;
default: this.draw = this._drawRect; this.resize = this._resizeRect; break;
default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
} }
// reset the size of the node, this can be changed // reset the size of the node, this can be changed
@ -277,7 +277,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
// TODO: implement distanceToBorder for triangle // TODO: implement distanceToBorder for triangle
// TODO: implement distanceToBorder for triangleDown // TODO: implement distanceToBorder for triangleDown
case 'rect':
case 'box':
case 'image': case 'image':
case 'text': case 'text':
default: default:
@ -285,7 +285,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
return Math.min( return Math.min(
Math.abs(this.width / 2 / Math.cos(angle)), Math.abs(this.width / 2 / Math.cos(angle)),
Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth; Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
// TODO: reckon with border radius too in case of rect
// TODO: reckon with border radius too in case of box
} }
else { else {
return 0; return 0;
@ -468,7 +468,7 @@ Node.prototype._drawImage = function (ctx) {
}; };
Node.prototype._resizeRect = function (ctx) {
Node.prototype._resizeBox = function (ctx) {
if (!this.width) { if (!this.width) {
var margin = 5; var margin = 5;
var textSize = this.getTextSize(ctx); var textSize = this.getTextSize(ctx);
@ -477,8 +477,8 @@ Node.prototype._resizeRect = function (ctx) {
} }
}; };
Node.prototype._drawRect = function (ctx) {
this._resizeRect(ctx);
Node.prototype._drawBox = function (ctx) {
this._resizeBox(ctx);
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;

+ 9
- 9
vis.js View File

@ -7597,7 +7597,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* {number} y Vertical position of the node * {number} y Vertical position of the node
* {string} shape Node shape, available: * {string} shape Node shape, available:
* "database", "circle", "ellipse", * "database", "circle", "ellipse",
* "rect", "image", "text", "dot",
* "box", "image", "text", "dot",
* "star", "triangle", "triangleDown", * "star", "triangle", "triangleDown",
* "square" * "square"
* {string} image An image url * {string} image An image url
@ -7745,7 +7745,7 @@ Node.prototype.setProperties = function(properties, constants) {
// choose draw method depending on the shape // choose draw method depending on the shape
switch (this.shape) { switch (this.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break; case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'box': this.draw = this._drawBox; this.resize = this._resizeBox; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break; case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break; case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
// TODO: add diamond shape // TODO: add diamond shape
@ -7756,7 +7756,7 @@ Node.prototype.setProperties = function(properties, constants) {
case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break; case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break; case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break; case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break;
default: this.draw = this._drawRect; this.resize = this._resizeRect; break;
default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
} }
// reset the size of the node, this can be changed // reset the size of the node, this can be changed
@ -7865,7 +7865,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
// TODO: implement distanceToBorder for triangle // TODO: implement distanceToBorder for triangle
// TODO: implement distanceToBorder for triangleDown // TODO: implement distanceToBorder for triangleDown
case 'rect':
case 'box':
case 'image': case 'image':
case 'text': case 'text':
default: default:
@ -7873,7 +7873,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
return Math.min( return Math.min(
Math.abs(this.width / 2 / Math.cos(angle)), Math.abs(this.width / 2 / Math.cos(angle)),
Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth; Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
// TODO: reckon with border radius too in case of rect
// TODO: reckon with border radius too in case of box
} }
else { else {
return 0; return 0;
@ -8056,7 +8056,7 @@ Node.prototype._drawImage = function (ctx) {
}; };
Node.prototype._resizeRect = function (ctx) {
Node.prototype._resizeBox = function (ctx) {
if (!this.width) { if (!this.width) {
var margin = 5; var margin = 5;
var textSize = this.getTextSize(ctx); var textSize = this.getTextSize(ctx);
@ -8065,8 +8065,8 @@ Node.prototype._resizeRect = function (ctx) {
} }
}; };
Node.prototype._drawRect = function (ctx) {
this._resizeRect(ctx);
Node.prototype._drawBox = function (ctx) {
this._resizeBox(ctx);
this.left = this.x - this.width / 2; this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
@ -9082,7 +9082,7 @@ function Graph (container, data, options) {
radiusMax: 20, radiusMax: 20,
radius: 5, radius: 5,
distance: 100, // px distance: 100, // px
shape: 'rect',
shape: 'ellipse',
image: undefined, image: undefined,
widthMin: 16, // px widthMin: 16, // px
widthMax: 64, // px widthMax: 64, // px

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


Loading…
Cancel
Save