Merge pull request flowhub#178 from lhausermann/master

icon propagation / group color fixes, svg <image> hack
v13inc · Sep 29, 2014 · c46f3e5 · c46f3e5
2 parents b6a5f77 + 5c089ad
commit c46f3e5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 10 deletions.
diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
@@ -440,10 +440,13 @@
           node.metadata.label = key;
         }
         var icon = "cog";
+        var iconsvg = "";
         if (self.updatedIcons[key]) {
           icon = self.updatedIcons[key];
         } else if (componentInfo && componentInfo.icon) {
           icon = componentInfo.icon;
+        } else if (componentInfo && componentInfo.iconsvg) {
+          iconsvg = componentInfo.iconsvg;
         }
         var selected = (self.state.selectedNodes[key] === true);
         if (selected) {
@@ -463,6 +466,7 @@
           graph: graph,
           node: node,
           icon: icon,
+          iconsvg: iconsvg,
           ports: self.getPorts(graph, key, node.component),
           onNodeSelection: self.props.onNodeSelection,
           selected: selected,
@@ -600,7 +604,7 @@
           node: {},
           ports: self.getGraphInport(key),
           isIn: true,
-          icon: "sign-in",
+          icon: (metadata.icon ? metadata.icon : "sign-in"),
           showContext: self.props.showContext
         };
         expNode = TheGraph.merge(TheGraph.config.graph.inportNode, expNode);
@@ -675,7 +679,7 @@
           node: {},
           ports: self.getGraphOutport(key),
           isIn: false,
-          icon: "sign-out",
+          icon: (metadata.icon ? metadata.icon : "sign-out"),
           showContext: self.props.showContext
         };
         expNode = TheGraph.merge(TheGraph.config.graph.outportNode, expNode);

diff --git a/the-graph/the-graph-group.js b/the-graph/the-graph-group.js
@@ -140,7 +140,7 @@
       var x = this.props.minX - TheGraph.config.nodeWidth / 2;
       var y = this.props.minY - TheGraph.config.nodeHeight / 2;
       var color = (this.props.color ? this.props.color : 0);
-      var selection = (this.props.isSelectionGroup ? ' selection drag' : '0');
+      var selection = (this.props.isSelectionGroup ? ' selection drag' : '');
       var boxRectOptions = {
         x: x,
         y: y,

diff --git a/the-graph/the-graph-node.js b/the-graph/the-graph-node.js
@@ -26,6 +26,9 @@
       ref: "icon",
       className: "icon node-icon drag"
     },
+    iconsvg: {
+      className: "icon node-icon drag"
+    },
     inports: {
       className: "inports"
     },
@@ -61,6 +64,7 @@
     createNodeBorderRect: TheGraph.factories.createRect,
     createNodeInnerRect: TheGraph.factories.createRect,
     createNodeIconText: TheGraph.factories.createText,
+    createNodeIconSVG: TheGraph.factories.createImg,
     createNodeInportsGroup: TheGraph.factories.createGroup,
     createNodeOutportsGroup: TheGraph.factories.createGroup,
     createNodeLabelGroup: TheGraph.factories.createGroup,
@@ -419,12 +423,30 @@
         return TheGraph.factories.node.createNodePort(props);
       });
 
-      // Make sure icon exists
+      // Node Icon
       var icon = TheGraph.FONT_AWESOME[ this.props.icon ];
-      if (!icon) { 
+      if (!icon) {
         icon = TheGraph.FONT_AWESOME.cog;
       }
 
+      var iconContent;
+      if (this.props.iconsvg && this.props.iconsvg !== "") {
+          var iconSVGOptions = TheGraph.merge(TheGraph.config.node.iconsvg, {
+              src: this.props.iconsvg,
+              x: TheGraph.config.nodeRadius - 4,
+              y: TheGraph.config.nodeRadius - 4,
+              width: this.props.width - 10,
+              height: this.props.height - 10
+          });
+          iconContent = TheGraph.factories.node.createNodeIconSVG.call(this, iconSVGOptions);
+      } else {
+          var iconOptions = TheGraph.merge(TheGraph.config.node.icon, {
+              x: this.props.width / 2,
+              y: this.props.height / 2,
+              children: icon });
+          iconContent = TheGraph.factories.node.createNodeIconText.call(this, iconOptions);
+      }
+
       var backgroundRectOptions = TheGraph.merge(TheGraph.config.node.background, { width: this.props.width, height: this.props.height + 25 });
       var backgroundRect = TheGraph.factories.node.createNodeBackgroundRect.call(this, backgroundRectOptions);
 
@@ -434,9 +456,6 @@
       var innerRectOptions = TheGraph.merge(TheGraph.config.node.innerRect, { width: this.props.width - 6, height: this.props.height - 6 });
       var innerRect = TheGraph.factories.node.createNodeInnerRect.call(this, innerRectOptions);
 
-      var iconOptions = TheGraph.merge(TheGraph.config.node.icon, { x: this.props.width / 2, y: this.props.height / 2, children: icon });
-      var iconText = TheGraph.factories.node.createNodeIconText.call(this, iconOptions);
-
       var inportsOptions = TheGraph.merge(TheGraph.config.node.inports, { children: inportViews });
       var inportsGroup = TheGraph.factories.node.createNodeInportsGroup.call(this, inportsOptions);
 
@@ -467,7 +486,7 @@
         backgroundRect,
         borderRect,
         innerRect,
-        iconText,
+        iconContent,
         inportsGroup,
         outportsGroup,
         labelGroup,

diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html
@@ -412,6 +412,11 @@
           }
         }
 
+        // we should use the icon from the library
+        definition.icon = component.icon;
+        // a component could also define a svg icon
+        definition.iconsvg = component.iconsvg;
+
         return definition;
       },
       registerComponent: function (definition, generated) {

diff --git a/the-graph/the-graph.js b/the-graph/the-graph.js
@@ -279,6 +279,22 @@
 
 
   // Reusable React classes
+  TheGraph.SVGImage = React.createClass({
+    render: function() {
+        var html = '<image ';
+        html = html +'xlink:href="'+ this.props.src + '"';
+        html = html +'x="' + this.props.x + '"';
+        html = html +'y="' + this.props.y + '"';
+        html = html +'width="' + this.props.width + '"';
+        html = html +'height="' + this.props.height + '"';
+        html = html +'/>';
+
+        return React.DOM.g({
+            dangerouslySetInnerHTML:{__html: html}
+        });
+    }
+  });
+
   TheGraph.TextBG = React.createClass({
     render: function() {
       var text = this.props.text;
@@ -370,6 +386,10 @@
     return React.DOM.path(options);
   };
 
+  TheGraph.factories.createImg = function(options) {
+    return TheGraph.SVGImage(options);
+  };
+
   TheGraph.factories.createCanvas = function(options) {
     return React.DOM.canvas(options);
   };
@@ -385,4 +405,4 @@
     return React.DOM.svg.apply(React.DOM.svg, args);
   };
 
-})(this);
+})(this);