New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Icon in Shape with Label #3743

Open
pdugas opened this Issue Dec 20, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@pdugas
Copy link

pdugas commented Dec 20, 2017

I hacked the code last year to support a new icon property for a shape node that would insert an icon-font glyph in the center of the shape. See #2291. I ended up using a different library at the time after the idea was shot down. I'm working now on another project where I'm already using Vis.js for timelines and I need the same "Icon in Shape" functionality again. Given all the changes since then, I wonder if there's interest in supporting this now.

I should add that the approaches that @mojoaxel suggested in #2291 were appreciated but never panned out. We don't want to maintain separate image assets for each object type (glyph) and state (color). Using a custom icon-font doesn't solve the issue as we cannot stack glyphs. The SVG-Image approach came close but we never figured out how to use the icon font with that approach without encoding custom TTFs into the SVGs. That image I attached was a screenshot if what I was able to achieve with the mods I made.

@pdugas

This comment has been minimized.

Copy link
Author

pdugas commented Dec 20, 2017

diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js
index 087e1bfd..bc3f2f96 100644
--- a/lib/network/modules/components/nodes/util/ShapeBase.js
+++ b/lib/network/modules/components/nodes/util/ShapeBase.js
@@ -53,6 +53,18 @@ class ShapeBase extends NodeBase {
     ctx[shape](x, y, values.size);
     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) {
       // Need to call following here in order to ensure value for `this.labelModule.size.height`
       this.labelModule.calculateLabelSize(ctx, selected, hover, x, y, 'hanging')
@pdugas

This comment has been minimized.

Copy link
Author

pdugas commented Dec 20, 2017

diff --git a/examples/network/nodeStyles/shapes.html b/examples/network/nodeStyles/shapes.html
index d60901f6..4b887413 100644
--- a/examples/network/nodeStyles/shapes.html
+++ b/examples/network/nodeStyles/shapes.html
@@ -13,6 +13,8 @@
 
   <script type="text/javascript" src="../../../dist/vis.js"></script>
   <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">
     var nodes = null;
@@ -43,7 +45,9 @@
         {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
         {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
         {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},          label: 'icon square', shape: 'square', icon: {code:'\uf164'} },
+        {id: 34, font:{size:30},          label: 'icon dot',    shape: 'dot', icon: {code:'\uf165'} }
       ];
 
       edges = [
@pdugas

This comment has been minimized.

Copy link
Author

pdugas commented Dec 20, 2017

image

@pdugas

This comment has been minimized.

Copy link
Author

pdugas commented Dec 20, 2017

@mhortac

This comment has been minimized.

Copy link

mhortac commented Dec 8, 2018

Hi @pdugas I agree with your idea !

@jb-ochinang

This comment has been minimized.

Copy link

jb-ochinang commented Feb 1, 2019

Hi @pdugas is this already working or implemented? do you have any jsfiddle or codepen examples for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment