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 #638 from Dude9177/develop 

Add ability to use icon fonts for nodes
v3_develop
Alex 10 years ago
parent
f91e2bfab6 a4b0b93f56
commit
5260cb1cf2
4 changed files with 257 additions and 4 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +25
    -2
      docs/network.html
  2. +168
    -0
      examples/network/38_node_as_icon.html
  3. +1
    -0
      examples/network/index.html
  4. +63
    -2
      lib/network/Node.js

+ 25
- 2
docs/network.html View File

@ -1009,7 +1009,6 @@ mySize = minSize + diff * scale;
<td>'white'</td> <td>'white'</td>
<td>The color of the label stroke.</td> <td>The color of the label stroke.</td>
</tr> </tr>
<tr> <tr>
<td class="greenField">shape</td> <td class="greenField">shape</td>
<td>string</td> <td>string</td>
@ -1018,7 +1017,7 @@ mySize = minSize + diff * scale;
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>circularImage</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>, <code>square</code> and <code>icon</code>.
<br><br> <br><br>
In case of <code>image</code> and <code>circularImage</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
@ -1095,6 +1094,30 @@ mySize = minSize + diff * scale;
<td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>, <td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td> <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
</tr> </tr>
<tr>
<td class="greenField">iconFontFace</td>
<td>String</td>
<td>undefined</td>
<td>Font face for icons, for example <code>FontAwesome</code> or <code>Ionicon</code>.<br /><em>You have to link to the css defining the font by yourself (see Examples)</em></td>
</tr>
<tr>
<td class="greenField">icon</td>
<td>String</td>
<td>undefined</td>
<td>Unicode of the icon f.e. <code>\uf0c0</code> (user-icon in FontAwesome)</td>
</tr>
<tr>
<td class="greenField">iconSize</td>
<td>Number</td>
<td>50</td>
<td>Size of the icon</td>
</tr>
<tr>
<td class="greenField">color</td>
<td>String</td>
<td>black</td>
<td>Color of the icon</td>
</tr>
</table> </table>

+ 168
- 0
examples/network/38_node_as_icon.html View File

@ -0,0 +1,168 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Network | node as icon</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<h2>
<i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
<div id="mynetworkFA"></div>
<h2>
<i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
<div id="mynetworkIO"></div>
<script type="text/javascript">
$(function() {
/*
* Example for FontAwesome
*/
var optionsFA = {
height: '300px',
groups: {
usergroups: {
shape: 'icon',
iconFontFace: 'FontAwesome',
icon: '\uf0c0',
iconSize: 50,
iconColor: '#57169a'
},
users: {
shape: 'icon',
iconFontFace: 'FontAwesome',
icon: '\uf007',
iconSize: 50,
iconColor: '#aa00ff'
},
},
};
// create an array with nodes
var nodesFA = [{
id: 1,
label: 'User 1',
group: 'users'
}, {
id: 2,
label: 'User 2',
group: 'users'
}, {
id: 3,
label: 'Usergroup 1',
group: 'usergroups'
}, {
id: 4,
label: 'Usergroup 2',
group: 'usergroups'
}, {
id: 5,
label: 'Organisation 1',
shape: 'icon',
iconFontFace: 'FontAwesome',
icon: '\uf1ad',
iconSize: 50,
iconColor: '#f0a30a'
}];
// create an array with edges
var edges = [{
from: 1,
to: 3
}, {
from: 1,
to: 4
}, {
from: 2,
to: 4
}, {
from: 3,
to: 5
}, {
from: 4,
to: 5
}];
// create a network
var containerFA = document.getElementById('mynetworkFA');
var dataFA = {
nodes: nodesFA,
edges: edges
};
var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
/*
* Example for Ionicons
*/
var optionsIO = {
height: '300px',
groups: {
usergroups: {
shape: 'icon',
iconFontFace: 'Ionicons',
icon: '\uf47c',
iconSize: 50,
iconColor: '#57169a'
},
users: {
shape: 'icon',
iconFontFace: 'Ionicons',
icon: '\uf47e',
iconSize: 50,
iconColor: '#aa00ff'
},
},
};
// create an array with nodes
var nodesIO = [{
id: 1,
label: 'User 1',
group: 'users'
}, {
id: 2,
label: 'User 2',
group: 'users'
}, {
id: 3,
label: 'Usergroup 1',
group: 'usergroups'
}, {
id: 4,
label: 'Usergroup 2',
group: 'usergroups'
}, {
id: 5,
label: 'Organisation 1',
shape: 'icon',
iconFontFace: 'Ionicons',
icon: '\uf276',
iconSize: 50,
iconColor: '#f0a30a'
}];
// create a network
var containerIO = document.getElementById('mynetworkIO');
var dataIO = {
nodes: nodesIO,
edges: edges
};
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
})
</script>
</body>
</html>

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

@ -49,6 +49,7 @@
<p><a href="35_label_stroke.html">35_label_stroke.html</a></p> <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
<p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p> <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
<p><a href="37_label_alignment.html">37_label_alignment.html</a></p> <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
<p><a href="38_node_as_icon.html">38_node_as_icon.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>

+ 63
- 2
lib/network/Node.js View File

@ -13,7 +13,7 @@ var util = require('../util');
* "database", "circle", "ellipse", * "database", "circle", "ellipse",
* "box", "image", "text", "dot", * "box", "image", "text", "dot",
* "star", "triangle", "triangleDown", * "star", "triangle", "triangleDown",
* "square"
* "square", "icon"
* {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
* {anytype} group A group name or number * {anytype} group A group name or number
@ -154,7 +154,7 @@ Node.prototype.setProperties = function(properties, constants) {
var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor', var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold', 'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction'
'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction','iconFontFace', 'icon', 'iconColor', 'iconSize'
]; ];
util.selectiveDeepExtend(fields, this.options, properties); util.selectiveDeepExtend(fields, this.options, properties);
@ -235,6 +235,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;
case 'icon': this.draw = this._drawIcon; this.resize = this._resizeIcon; break;
default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; 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
@ -1011,7 +1012,67 @@ Node.prototype._drawText = function (ctx) {
this.boundingBox.bottom = this.top + this.height; this.boundingBox.bottom = this.top + this.height;
}; };
Node.prototype._resizeIcon = function (ctx) {
if (!this.width) {
var margin = 5;
var textSize =
{
width: 1,
height: Number(this.options.iconSize) + 4
};
this.width = textSize.width + 2 * margin;
this.height = textSize.height + 2 * margin;
// scaling used for clustering
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
this.growthIndicator = this.width - (textSize.width + 2 * margin);
}
};
Node.prototype._drawIcon = function (ctx) {
this._resizeIcon(ctx);
this.options.iconSize = this.options.iconSize || 50;
this.options.iconSize = this.options.iconSize || 50;
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
this._icon(ctx, this.options.icon, this.x, this.y);
this.boundingBox.top = this.y - this.options.iconSize/2;
this.boundingBox.left = this.x - this.options.iconSize/2;
this.boundingBox.right = this.x + this.options.iconSize/2;
this.boundingBox.bottom = this.y + this.options.iconSize/2;
if (this.label) {
this._label(ctx, this.label, this.x, this.y + this.height / 2, 'top', true);
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._icon = function (ctx, icon, x, y) {
var relativeIconSize = Number(this.options.iconSize) * this.networkScale;
if (icon && relativeIconSize > this.options.fontDrawThreshold - 1) {
var iconSize = Number(this.options.iconSize);
ctx.font = (this.selected ? "bold " : "") + iconSize + "px " + this.options.iconFontFace;
// draw icon
ctx.fillStyle = this.options.iconColor || "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(icon, x, y);
}
};
Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) { Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
var relativeFontSize = Number(this.options.fontSize) * this.networkScale; var relativeFontSize = Number(this.options.fontSize) * this.networkScale;
if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) { if (text && relativeFontSize >= this.options.fontDrawThreshold - 1) {

Write Preview
Loading…
Cancel
Save