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

docs/graph.html

@@ -329,7 +329,7 @@ var nodes = [
         <td>radius</td>
         <td>number</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>.
             The value of <code>radius</code> will override a value in
             property <code>value</code>.</td>
@@ -341,7 +341,7 @@ var nodes = [
         <td>no</td>
         <td>Define the shape for the node.
             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>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>.
             <br><br>
@@ -358,7 +358,7 @@ var nodes = [
 
             When a property <code>label</code> is provided,
             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>.
             For all other shapes, the label will be displayed right below the shape.
 
@@ -794,10 +794,10 @@ var options = {
 <tr>
     <td>nodes.shape</td>
     <td>String</td>
-    <td>"rect"</td>
+    <td>"ellipse"</td>
     <td>The default shape for all nodes.
         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>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>
@@ -967,9 +967,9 @@ var nodes = [
     <tr>
         <td>shape</td>
         <td>String</td>
-        <td>"rect"</td>
+        <td>"ellipse"</td>
         <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>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
@@ -980,7 +980,7 @@ var nodes = [
         <td>Number</td>
         <td>5</td>
         <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>
 
 </table>

examples/graph/04_shapes.html

@@ -26,7 +26,7 @@
                 {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
                 {id: 2, label: 'ellipse', shape: 'ellipse', 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 = [
@@ -36,12 +36,12 @@
             ];
 
             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 id = 6;
             for (var size = 1; size < 4; size++) {
                 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});
                 id++;
 

examples/graph/08_selections.html

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

examples/graph/18_dashed_lines.html

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

examples/graph/20_dot_language_playground.html

@@ -162,11 +162,11 @@ digraph topology
     "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.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.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.1.0/24"[shape=rect];
+    "10.0.1.0/24"[shape=box];
 }
 </textarea>
 

src/graph/Graph.js

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

src/graph/Node.js

@@ -9,7 +9,7 @@
  *                              {number} y      Vertical position of the node
  *                              {string} shape  Node shape, available:
  *                                              "database", "circle", "ellipse",
- *                                              "rect", "image", "text", "dot",
+ *                                              "box", "image", "text", "dot",
  *                                              "star", "triangle", "triangleDown",
  *                                              "square"
  *                              {string} image  An image url
@@ -157,7 +157,7 @@ Node.prototype.setProperties = function(properties, constants) {
     // choose draw method depending on the shape
     switch (this.shape) {
         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 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
         // 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 'triangleDown':  this.draw = this._drawTriangleDown; 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
@@ -277,7 +277,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
         // TODO: implement distanceToBorder for triangle
         // TODO: implement distanceToBorder for triangleDown
 
-        case 'rect':
+        case 'box':
         case 'image':
         case 'text':
         default:
@@ -285,7 +285,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
                 return Math.min(
                     Math.abs(this.width / 2 / Math.cos(angle)),
                     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 {
                 return 0;
@@ -468,7 +468,7 @@ Node.prototype._drawImage = function (ctx) {
 };
 
 
-Node.prototype._resizeRect = function (ctx) {
+Node.prototype._resizeBox = function (ctx) {
     if (!this.width) {
         var margin = 5;
         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.top = this.y - this.height / 2;

vis.js

@@ -7597,7 +7597,7 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
  *                              {number} y      Vertical position of the node
  *                              {string} shape  Node shape, available:
  *                                              "database", "circle", "ellipse",
- *                                              "rect", "image", "text", "dot",
+ *                                              "box", "image", "text", "dot",
  *                                              "star", "triangle", "triangleDown",
  *                                              "square"
  *                              {string} image  An image url
@@ -7745,7 +7745,7 @@ Node.prototype.setProperties = function(properties, constants) {
     // choose draw method depending on the shape
     switch (this.shape) {
         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 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
         // 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 'triangleDown':  this.draw = this._drawTriangleDown; 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
@@ -7865,7 +7865,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
         // TODO: implement distanceToBorder for triangle
         // TODO: implement distanceToBorder for triangleDown
 
-        case 'rect':
+        case 'box':
         case 'image':
         case 'text':
         default:
@@ -7873,7 +7873,7 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
                 return Math.min(
                     Math.abs(this.width / 2 / Math.cos(angle)),
                     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 {
                 return 0;
@@ -8056,7 +8056,7 @@ Node.prototype._drawImage = function (ctx) {
 };
 
 
-Node.prototype._resizeRect = function (ctx) {
+Node.prototype._resizeBox = function (ctx) {
     if (!this.width) {
         var margin = 5;
         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.top = this.y - this.height / 2;
@@ -9082,7 +9082,7 @@ function Graph (container, data, options) {
             radiusMax: 20,
             radius: 5,
             distance: 100, // px
-            shape: 'rect',
+            shape: 'ellipse',
             image: undefined,
             widthMin: 16, // px
             widthMax: 64, // px