D3VertexIconDecorator supports adding color to each icon from config

szmeti · Aug 12, 2015 · 52a6f0a · 52a6f0a
1 parent 25d8fc1
commit 52a6f0a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/dist/planar.js b/dist/planar.js
@@ -1527,7 +1527,11 @@
             return iconGroup.append("rect").attr("class", "vertex-icon-overlay vertex-icon-overlay-" + iconId).attr("rx", borderRadius).attr("ry", borderRadius).attr("width", size).attr("height", size);
         }
         function createIcon(iconGroup, icon, iconId, iconPadding) {
-            return iconGroup.append("use").attr("class", "vertex-icon vertex-icon-" + iconId).attr("transform", "translate(" + iconPadding + ", " + iconPadding + ")").attr("xlink:href", "#" + icon.id);
+            var iconSvg = iconGroup.append("use").attr("class", "vertex-icon vertex-icon-" + iconId).attr("transform", "translate(" + iconPadding + ", " + iconPadding + ")").attr("xlink:href", "#" + icon.id);
+            if (icon.color) {
+                iconSvg.attr("style", "fill:" + icon.color);
+            }
+            return iconSvg;
         }
         utils.mixin(D3VertexIconDecorator.prototype, ElementRendererDecorator);
         utils.mixin(D3VertexIconDecorator.prototype, {

diff --git a/dist/planar.min.js b/dist/planar.min.js
diff --git a/samples/d3-image-vertices.html b/samples/d3-image-vertices.html
@@ -119,6 +119,10 @@
             },
             {
                 id: 'share'
+            },
+            {
+                id: 'share',
+                color: 'red'
             }
         ]);
 

diff --git a/src/view/d3/decorator/D3VertexIconDecorator.js b/src/view/d3/decorator/D3VertexIconDecorator.js
@@ -18,10 +18,16 @@ var D3VertexIconDecorator = (function () {
   }
 
   function createIcon(iconGroup, icon, iconId, iconPadding) {
-    return iconGroup.append('use').
+    var iconSvg = iconGroup.append('use').
       attr('class', 'vertex-icon vertex-icon-' + iconId).
       attr('transform', 'translate(' + iconPadding + ', ' + iconPadding + ')').
       attr('xlink:href', '#' + icon.id);
+
+    if (icon.color) {
+      iconSvg.attr('style', 'fill:'+icon.color);
+    }
+
+    return iconSvg;
   }
 
   utils.mixin(D3VertexIconDecorator.prototype, ElementRendererDecorator);
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,6 +119,10 @@ @@
                 },
                 {
                     id: 'share'
+                },
+                {
+                    id: 'share',
+                    color: 'red'
                 }
             ]);
@@ Expand Down @@