Implemented ellipse shape in Graph

docs/graph.html

@@ -41,7 +41,7 @@
         <ul>
             <li><a href="#Nodes">Nodes</a></li>
             <li><a href="#Edges">Edges</a></li>
-            <li><a href="#DOT_language">DOT_language</a></li>
+            <li><a href="#DOT_language">DOT language</a></li>
         </ul>
     </li>
     <li><a href="#Configuration_Options">Configuration Options</a></li>
@@ -330,7 +330,7 @@ var nodes = [
         <td>number</td>
         <td>no</td>
         <td>Radius for the node. Applicable for all shapes except <code>rect</code>,
-            <code>circle</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
             property <code>value</code>.</td>
     </tr>
@@ -340,10 +340,10 @@ var nodes = [
         <td>string</td>
         <td>no</td>
         <td>Define the shape for the node.
-            Choose from <code>rect</code> (default), <code>circle</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>.
+            Choose from
+            <code>rect</code> (default), <code>circle</code>, <code>ellipse</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>
 
             In case of <code>image</code>, a property with name <code>image</code> must
@@ -358,7 +358,8 @@ 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>, and <code>database</code>.
+            <code>rect</code>, <code>circle</code>, <code>ellipse</code>,
+            and <code>database</code>.
             For all other shapes, the label will be displayed right below the shape.
 
         </td>
@@ -795,8 +796,10 @@ var options = {
     <td>String</td>
     <td>"rect"</td>
     <td>The default shape for all nodes.
-        Choose from <code>rect</code> (default), <code>circle</code>,
-        <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>.
+        Choose from
+        <code>rect</code> (default), <code>circle</code>, <code>ellipse</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>
 </tr>
 <tr>
@@ -965,9 +968,10 @@ var nodes = [
         <td>shape</td>
         <td>String</td>
         <td>"rect"</td>
-        <td>Choose from <code>rect</code> (default), <code>circle</code>,
-            <code>database</code>, <code>image</code>, <code>label</code>,
-            <code>dot</code>.
+        <td>Choose from
+            <code>rect</code> (default), <code>circle</code>, <code>ellipse</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
             image urls.</td>
     </tr>

examples/graph/04_shapes.html

@@ -24,7 +24,7 @@
         function draw() {
             nodes = [
                 {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
-                {id: 2, 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'}
             ];

examples/graph/08_selections.html

@@ -43,7 +43,11 @@
         nodes: nodes,
         edges: edges
     };
-    var options = {};
+    var options = {
+        nodes: {
+            shape: 'ellipse'
+        }
+    };
     graph = new vis.Graph(container, data, options);
 
     // add event listener

src/graph/Graph.js

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

src/graph/Node.js

@@ -8,9 +8,9 @@
  *                              {number} x      Horizontal position of the node
  *                              {number} y      Vertical position of the node
  *                              {string} shape  Node shape, available:
- *                                              "database", "circle", "rect",
- *                                              "image", "text", "dot", "star",
- *                                              "triangle", "triangleDown",
+ *                                              "database", "circle", "ellipse",
+ *                                              "rect", "image", "text", "dot",
+ *                                              "star", "triangle", "triangleDown",
  *                                              "square"
  *                              {string} image  An image url
  *                              {string} title  An title text, can be HTML
@@ -159,7 +159,7 @@ Node.prototype.setProperties = function(properties, constants) {
         case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
         case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
         case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-        // TODO: add ellipse shape
+        case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
         // TODO: add diamond shape
         case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
         case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
@@ -266,6 +266,13 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
         case 'dot':
             return this.radius + borderWidth;
 
+        case 'ellipse':
+            var a = this.width / 2;
+            var b = this.height / 2;
+            var w = (Math.sin(angle) * a);
+            var h = (Math.cos(angle) * b);
+            return a * b / Math.sqrt(w * w + h * h);
+
         // TODO: implement distanceToBorder for database
         // TODO: implement distanceToBorder for triangle
         // TODO: implement distanceToBorder for triangleDown
@@ -540,6 +547,33 @@ Node.prototype._drawCircle = function (ctx) {
     this._label(ctx, this.label, this.x, this.y);
 };
 
+Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+        var textSize = this.getTextSize(ctx);
+
+        this.width = textSize.width * 1.5;
+        this.height = textSize.height * 2;
+        if (this.width < this.height) {
+            this.width = this.height;
+        }
+    }
+};
+
+Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
+};
+
 Node.prototype._drawDot = function (ctx) {
     this._drawShape(ctx, 'circle');
 };

vis.js

@@ -7596,9 +7596,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
  *                              {number} x      Horizontal position of the node
  *                              {number} y      Vertical position of the node
  *                              {string} shape  Node shape, available:
- *                                              "database", "circle", "rect",
- *                                              "image", "text", "dot", "star",
- *                                              "triangle", "triangleDown",
+ *                                              "database", "circle", "ellipse",
+ *                                              "rect", "image", "text", "dot",
+ *                                              "star", "triangle", "triangleDown",
  *                                              "square"
  *                              {string} image  An image url
  *                              {string} title  An title text, can be HTML
@@ -7747,7 +7747,7 @@ Node.prototype.setProperties = function(properties, constants) {
         case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
         case 'rect':          this.draw = this._drawRect; this.resize = this._resizeRect; break;
         case 'circle':        this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
-        // TODO: add ellipse shape
+        case 'ellipse':       this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
         // TODO: add diamond shape
         case 'image':         this.draw = this._drawImage; this.resize = this._resizeImage; break;
         case 'text':          this.draw = this._drawText; this.resize = this._resizeText; break;
@@ -7854,6 +7854,13 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
         case 'dot':
             return this.radius + borderWidth;
 
+        case 'ellipse':
+            var a = this.width / 2;
+            var b = this.height / 2;
+            var w = (Math.sin(angle) * a);
+            var h = (Math.cos(angle) * b);
+            return a * b / Math.sqrt(w * w + h * h);
+
         // TODO: implement distanceToBorder for database
         // TODO: implement distanceToBorder for triangle
         // TODO: implement distanceToBorder for triangleDown
@@ -8128,6 +8135,33 @@ Node.prototype._drawCircle = function (ctx) {
     this._label(ctx, this.label, this.x, this.y);
 };
 
+Node.prototype._resizeEllipse = function (ctx) {
+    if (!this.width) {
+        var textSize = this.getTextSize(ctx);
+
+        this.width = textSize.width * 1.5;
+        this.height = textSize.height * 2;
+        if (this.width < this.height) {
+            this.width = this.height;
+        }
+    }
+};
+
+Node.prototype._drawEllipse = function (ctx) {
+    this._resizeEllipse(ctx);
+    this.left = this.x - this.width / 2;
+    this.top = this.y - this.height / 2;
+
+    ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+    ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+    ctx.lineWidth = this.selected ? 2.0 : 1.0;
+    ctx.ellipse(this.left, this.top, this.width, this.height);
+    ctx.fill();
+    ctx.stroke();
+
+    this._label(ctx, this.label, this.x, this.y);
+};
+
 Node.prototype._drawDot = function (ctx) {
     this._drawShape(ctx, 'circle');
 };
@@ -9048,7 +9082,7 @@ function Graph (container, data, options) {
             radiusMax: 20,
             radius: 5,
             distance: 100, // px
-            style: 'rect',
+            shape: 'rect',
             image: undefined,
             widthMin: 16, // px
             widthMax: 64, // px