Browse Source

Implemented ellipse shape in Graph

css_transitions
josdejong 11 years ago
parent
commit
6f9a1f566c
7 changed files with 104 additions and 28 deletions
  1. +16
    -12
      docs/graph.html
  2. +1
    -1
      examples/graph/04_shapes.html
  3. +5
    -1
      examples/graph/08_selections.html
  4. +1
    -1
      src/graph/Graph.js
  5. +38
    -4
      src/graph/Node.js
  6. +39
    -5
      vis.js
  7. +4
    -4
      vis.min.js

+ 16
- 12
docs/graph.html View File

@ -41,7 +41,7 @@
<ul> <ul>
<li><a href="#Nodes">Nodes</a></li> <li><a href="#Nodes">Nodes</a></li>
<li><a href="#Edges">Edges</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> </ul>
</li> </li>
<li><a href="#Configuration_Options">Configuration Options</a></li> <li><a href="#Configuration_Options">Configuration Options</a></li>
@ -330,7 +330,7 @@ var nodes = [
<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>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 The value of <code>radius</code> will override a value in
property <code>value</code>.</td> property <code>value</code>.</td>
</tr> </tr>
@ -340,10 +340,10 @@ var nodes = [
<td>string</td> <td>string</td>
<td>no</td> <td>no</td>
<td>Define the shape for the node. <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> <br><br>
In case of <code>image</code>, a property with name <code>image</code> must 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, 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>, 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. For all other shapes, the label will be displayed right below the shape.
</td> </td>
@ -795,8 +796,10 @@ var options = {
<td>String</td> <td>String</td>
<td>"rect"</td> <td>"rect"</td>
<td>The default shape for all nodes. <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> This shape can be overridden by a group shape, or by a shape of an individual node.</td>
</tr> </tr>
<tr> <tr>
@ -965,9 +968,10 @@ var nodes = [
<td>shape</td> <td>shape</td>
<td>String</td> <td>String</td>
<td>"rect"</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 In case of image, a property with name image must be provided, containing
image urls.</td> image urls.</td>
</tr> </tr>

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

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

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

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

+ 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
style: 'rect',
shape: 'rect',
image: undefined, image: undefined,
widthMin: 16, // px widthMin: 16, // px
widthMax: 64, // px widthMax: 64, // px

+ 38
- 4
src/graph/Node.js View File

@ -8,9 +8,9 @@
* {number} x Horizontal position of the node * {number} x Horizontal position of the node
* {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", "rect",
* "image", "text", "dot", "star",
* "triangle", "triangleDown",
* "database", "circle", "ellipse",
* "rect", "image", "text", "dot",
* "star", "triangle", "triangleDown",
* "square" * "square"
* {string} image An image url * {string} image An image url
* {string} title An title text, can be HTML * {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 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break; case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; 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 // TODO: add diamond shape
case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break; case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
case 'text': this.draw = this._drawText; this.resize = this._resizeText; break; case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
@ -266,6 +266,13 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
case 'dot': case 'dot':
return this.radius + borderWidth; 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 database
// TODO: implement distanceToBorder for triangle // TODO: implement distanceToBorder for triangle
// TODO: implement distanceToBorder for triangleDown // TODO: implement distanceToBorder for triangleDown
@ -540,6 +547,33 @@ Node.prototype._drawCircle = function (ctx) {
this._label(ctx, this.label, this.x, this.y); 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) { Node.prototype._drawDot = function (ctx) {
this._drawShape(ctx, 'circle'); this._drawShape(ctx, 'circle');
}; };

+ 39
- 5
vis.js View File

@ -7596,9 +7596,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* {number} x Horizontal position of the node * {number} x Horizontal position of the node
* {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", "rect",
* "image", "text", "dot", "star",
* "triangle", "triangleDown",
* "database", "circle", "ellipse",
* "rect", "image", "text", "dot",
* "star", "triangle", "triangleDown",
* "square" * "square"
* {string} image An image url * {string} image An image url
* {string} title An title text, can be HTML * {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 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break; case 'rect': this.draw = this._drawRect; this.resize = this._resizeRect; break;
case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; 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 // TODO: add diamond shape
case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break; case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
case 'text': this.draw = this._drawText; this.resize = this._resizeText; break; case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
@ -7854,6 +7854,13 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
case 'dot': case 'dot':
return this.radius + borderWidth; 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 database
// TODO: implement distanceToBorder for triangle // TODO: implement distanceToBorder for triangle
// TODO: implement distanceToBorder for triangleDown // TODO: implement distanceToBorder for triangleDown
@ -8128,6 +8135,33 @@ Node.prototype._drawCircle = function (ctx) {
this._label(ctx, this.label, this.x, this.y); 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) { Node.prototype._drawDot = function (ctx) {
this._drawShape(ctx, 'circle'); this._drawShape(ctx, 'circle');
}; };
@ -9048,7 +9082,7 @@ function Graph (container, data, options) {
radiusMax: 20, radiusMax: 20,
radius: 5, radius: 5,
distance: 100, // px distance: 100, // px
style: 'rect',
shape: 'rect',
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