jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge pull request #546 from brendon1982/develop 

CircularImage shape added, Thanks @brendon1982
v3_develop
Alex 10 years ago
parent
f52548e3a3 510077602b
commit
e69b4f3be5
5 changed files with 162 additions and 20 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      docs/network.html
  2. +87
    -0
      examples/network/34_circular_images.html
  3. +1
    -0
      examples/network/index.html
  4. +3
    -2
      lib/network/Images.js
  5. +69
    -16
      lib/network/Node.js

+ 2
- 2
docs/network.html View File

@ -940,11 +940,11 @@ All options defined per-node override these global settings.
<td>Define the shape for the node. <td>Define the shape for the node.
Choose from Choose from
<code>ellipse</code> (default), <code>circle</code>, <code>box</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>circularImage</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>
In case of <code>image</code>, a property with name <code>image</code> must
In case of <code>image</code> and <code>circularImage</code>, a property with name <code>image</code> must
be provided, containing image urls. be provided, containing image urls.
<br><br> <br><br>

+ 87
- 0
examples/network/34_circular_images.html View File

@ -0,0 +1,87 @@
<!doctype html>
<html>
<head>
<title>Network | Scalable images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = 'img/soft-scraps-icons/';
nodes = [
{id: 3, shape: 'circularImage', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
{id: 4, shape: 'circularImage', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
{id: 5, shape: 'circularImage', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
{id: 6, shape: 'circularImage', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
{id: 7, shape: 'circularImage', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
{id: 9, shape: 'circularImage', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
{id: 10, shape: 'circularImage', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
];
// create connetions between people
// value corresponds with the amount of contact between two people
edges = [
{from: 4, to: 6, title: '8 emails per week'},
{from: 5, to: 7, title: '2 emails per week'},
{from: 4, to: 5, title: '1 emails per week'},
{from: 9, to: 10, title: '2 emails per week'},
{from: 2, to: 3, title: '6 emails per week'},
{from: 3, to: 9, title: '4 emails per week'},
{from: 5, to: 3, title: '1 emails per week'},
{from: 2, to: 7, title: '4 emails per week'}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
},
edges: {
color: 'lightgray'
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mynetwork"></div>
<div id="info"></div>
</body>
</html>

+ 1
- 0
examples/network/index.html View File

@ -45,6 +45,7 @@
<p><a href="31_localization.html">31_localization.html</a></p> <p><a href="31_localization.html">31_localization.html</a></p>
<p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p> <p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
<p><a href="33_animation.html">33_animation.html</a></p> <p><a href="33_animation.html">33_animation.html</a></p>
<p><a href="34_circular_images.html">34_circular_images.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p> <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div> </div>

+ 3
- 2
lib/network/Images.js View File

@ -23,10 +23,11 @@ Images.prototype.setOnloadCallback = function(callback) {
* @return {Image} img The image object * @return {Image} img The image object
*/ */
Images.prototype.load = function(url, brokenUrl) { Images.prototype.load = function(url, brokenUrl) {
if (this.images[url] == undefined) {
var img = this.images[url];
if (img === undefined) {
// create the image // create the image
var me = this; var me = this;
var img = new Image();
img = new Image();
img.onload = function () { img.onload = function () {
// IE11 fix -- thanks dponch! // IE11 fix -- thanks dponch!

+ 69
- 16
lib/network/Node.js View File

@ -221,7 +221,7 @@ Node.prototype.setProperties = function(properties, constants) {
this.radiusFixed = this.radiusFixed || (properties.radius !== undefined); this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
if (this.options.shape == 'image') {
if (this.options.shape === 'image' || this.options.shape === 'circularImage') {
this.options.radiusMin = constants.nodes.widthMin; this.options.radiusMin = constants.nodes.widthMin;
this.options.radiusMax = constants.nodes.widthMax; this.options.radiusMax = constants.nodes.widthMax;
} }
@ -234,6 +234,7 @@ Node.prototype.setProperties = function(properties, constants) {
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
case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break; case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
case 'circularImage': this.draw = this._drawCircularImage; this.resize = this._resizeCircularImage; break;
case 'text': this.draw = this._drawText; this.resize = this._resizeText; break; case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break; case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break;
case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break; case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break;
@ -562,12 +563,7 @@ Node.prototype._resizeImage = function (ctx) {
}; };
Node.prototype._drawImage = function (ctx) {
this._resizeImage(ctx);
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
var yLabel;
Node.prototype._drawImageAtPosition = function (ctx) {
if (this.imageObj.width != 0 ) { if (this.imageObj.width != 0 ) {
// draw the shade // draw the shade
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
@ -582,6 +578,13 @@ Node.prototype._drawImage = function (ctx) {
// draw the image // draw the image
ctx.globalAlpha = 1.0; ctx.globalAlpha = 1.0;
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
}
};
Node.prototype._drawImageLabel = function (ctx) {
var yLabel;
if (this.imageObj.width != 0 ) {
yLabel = this.y + this.height / 2; yLabel = this.y + this.height / 2;
} }
else { else {
@ -589,18 +592,64 @@ Node.prototype._drawImage = function (ctx) {
yLabel = this.y; yLabel = this.y;
} }
this._label(ctx, this.label, this.x, yLabel, undefined, "top");
};
Node.prototype._drawImage = function (ctx) {
this._resizeImage(ctx);
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
this._drawImageAtPosition(ctx);
this.boundingBox.top = this.top; this.boundingBox.top = this.top;
this.boundingBox.left = this.left; this.boundingBox.left = this.left;
this.boundingBox.right = this.left + this.width; this.boundingBox.right = this.left + this.width;
this.boundingBox.bottom = this.top + this.height; this.boundingBox.bottom = this.top + this.height;
this._label(ctx, this.label, this.x, yLabel, undefined, "top");
this._drawImageLabel(ctx);
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelDimensions.left); this.boundingBox.left = Math.min(this.boundingBox.left, this.labelDimensions.left);
this.boundingBox.right = Math.max(this.boundingBox.right, this.labelDimensions.left + this.labelDimensions.width); this.boundingBox.right = Math.max(this.boundingBox.right, this.labelDimensions.left + this.labelDimensions.width);
this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelDimensions.height); this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelDimensions.height);
}; };
Node.prototype._resizeCircularImage = function (ctx) {
this._resizeImage(ctx);
};
Node.prototype._drawCircularImage = function (ctx) {
this._resizeCircularImage(ctx);
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
var centerX = this.left + (this.width / 2);
var centerY = this.top + (this.height / 2);
var radius = Math.abs(this.height / 2);
this._drawRawCircle(ctx, centerX, centerY, radius);
ctx.save();
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
this._drawImageAtPosition(ctx);
ctx.restore();
this.boundingBox.top = this.y - this.options.radius;
this.boundingBox.left = this.x - this.options.radius;
this.boundingBox.right = this.x + this.options.radius;
this.boundingBox.bottom = this.y + this.options.radius;
this._drawImageLabel(ctx);
this.boundingBox.left = Math.min(this.boundingBox.left, this.labelDimensions.left);
this.boundingBox.right = Math.max(this.boundingBox.right, this.labelDimensions.left + this.labelDimensions.width);
this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelDimensions.height);
};
Node.prototype._resizeBox = function (ctx) { Node.prototype._resizeBox = function (ctx) {
if (!this.width) { if (!this.width) {
@ -729,15 +778,11 @@ Node.prototype._resizeCircle = function (ctx) {
} }
}; };
Node.prototype._drawCircle = function (ctx) {
this._resizeCircle(ctx);
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
Node.prototype._drawRawCircle = function (ctx, x, y, radius) {
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth; var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border; ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
// draw the outer border // draw the outer border
@ -746,7 +791,7 @@ Node.prototype._drawCircle = function (ctx) {
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.circle(this.x, this.y, this.options.radius+2*ctx.lineWidth);
ctx.circle(x, y, radius+2*ctx.lineWidth);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0); ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
@ -754,9 +799,17 @@ Node.prototype._drawCircle = function (ctx) {
ctx.lineWidth = Math.min(this.width,ctx.lineWidth); ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background; ctx.fillStyle = this.selected ? this.options.color.highlight.background : this.hover ? this.options.color.hover.background : this.options.color.background;
ctx.circle(this.x, this.y, this.options.radius);
ctx.circle(this.x, this.y, radius);
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
};
Node.prototype._drawCircle = function (ctx) {
this._resizeCircle(ctx);
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
this._drawRawCircle(ctx, this.x, this.y, this.options.radius);
this.boundingBox.top = this.y - this.options.radius; this.boundingBox.top = this.y - this.options.radius;
this.boundingBox.left = this.x - this.options.radius; this.boundingBox.left = this.x - this.options.radius;

Write Preview
Loading…
Cancel
Save