Browse Source

Add `icon` option to ShapeBase (#3756)

* Add support for `icon` option to ShapeBase

* Add test/example for new ShapeBase `icon` option

* Update docs for new `icon` ShapeBase option
develop
Paul Dugas 6 years ago
committed by Yotam Berkowitz
parent
commit
a42368c170
3 changed files with 18 additions and 1 deletions
  1. +3
    -1
      docs/network/nodes.html
  2. +3
    -0
      examples/network/nodeStyles/shapes.html
  3. +12
    -0
      lib/network/modules/components/nodes/util/ShapeBase.js

+ 3
- 1
docs/network/nodes.html View File

@ -653,7 +653,9 @@ network.setOptions(options);
<td><span parent="icon" class="right-caret"></span> icon</td> <td><span parent="icon" class="right-caret"></span> icon</td>
<td>Object</td> <td>Object</td>
<td><code>Object</code></td> <td><code>Object</code></td>
<td>These options are only used when the shape is set to <code>icon</code>.</td>
<td>These options are only used when the shape is set to <code>icon</code>, <code>diamond</code>,
<code>dot</code>, <code>hexagon</code>, <code>square</code>, <code>star</code>,
<code>triangledown</code>, or <code>triangle</code>.</td>
</tr> </tr>
<tr parent="icon" class="hidden"> <tr parent="icon" class="hidden">
<td class="indent">icon.face</td> <td class="indent">icon.face</td>

+ 3
- 0
examples/network/nodeStyles/shapes.html View File

@ -13,6 +13,7 @@
<script type="text/javascript" src="../../../dist/vis.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
@ -46,6 +47,8 @@
{id: 31, font:{size:30}, label: 'big text', shape: 'text'}, {id: 31, font:{size:30}, label: 'big text', shape: 'text'},
{id: 32, font:{size:30}, size:40, label: 'big star', shape: 'star'}, {id: 32, font:{size:30}, size:40, label: 'big star', shape: 'star'},
{id: 33, font:{size:30}, size:40, label: 'big hexagon', shape: 'hexagon'}, {id: 33, font:{size:30}, size:40, label: 'big hexagon', shape: 'hexagon'},
{id: 34, font:{size:30}, label: 'icon square', shape: 'square', icon: {code:'\uf164'} },
{id: 35, font:{size:30}, label: 'icon dot', shape: 'dot', icon: {code:'\uf165'} },
]; ];
edges = [ edges = [

+ 12
- 0
lib/network/modules/components/nodes/util/ShapeBase.js View File

@ -52,6 +52,18 @@ class ShapeBase extends NodeBase {
this.initContextForDraw(ctx, values); this.initContextForDraw(ctx, values);
ctx[shape](x, y, values.size); ctx[shape](x, y, values.size);
this.performFill(ctx, values); this.performFill(ctx, values);
if (this.options.icon !== undefined) {
if (this.options.icon.code !== undefined) {
ctx.font = (selected ? "bold " : "")
+ (this.height / 2) + "px "
+ (this.options.icon.face || 'FontAwesome');
ctx.fillStyle = this.options.icon.color || "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(this.options.icon.code, x, y);
}
}
if (this.options.label !== undefined) { if (this.options.label !== undefined) {
// Need to call following here in order to ensure value for `this.labelModule.size.height` // Need to call following here in order to ensure value for `this.labelModule.size.height`

Loading…
Cancel
Save