make errorNodes like selectedNodes and fix flowhub#154

* change to `errorNodes` * css `fill` instead of `file` * make error fill color red * demo in the-graph-editor/index.html the-graph-editor.errorNodes = []; // Can change this directly, change listener will fire the-graph-editor.addErrorNode(id); the-graph-editor.clearErrorNodes();
mich31 · Aug 11, 2014 · 91a7ce4 · 91a7ce4
1 parent bd12e1d
commit 91a7ce4
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 74 deletions.
diff --git a/the-graph-editor/index.html b/the-graph-editor/index.html
@@ -138,7 +138,7 @@
             editor.updateIcon(randomNodeId, randomIcon);
           }, 1000);
 
-          // Simulate un/triggering animations
+          // Simulate un/triggering wire animations
           var animatingEdge1 = null;
           var animatingEdge2 = null;
           window.setInterval(function () {
@@ -154,6 +154,17 @@
             editor.animateEdge(animatingEdge1);
           }, 2014);
 
+          // Simulate un/triggering errors
+          var makeRandomError = function () {
+            if (!editor.nofloGraph) { return; }
+            var nodes = editor.nofloGraph.nodes;
+            var errorNodeId = nodes[Math.floor(Math.random()*nodes.length)].id;
+            editor.clearErrorNodes();
+            editor.addErrorNode(errorNodeId);
+          };
+          window.setInterval(makeRandomError, 3551);
+          makeRandomError();
+
           // Autolayout button
           document.getElementById("autolayout").addEventListener("click", function () {
             editor.triggerAutolayout();

diff --git a/the-graph-editor/the-graph-editor.html b/the-graph-editor/the-graph-editor.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../the-graph/the-graph.html">
 
-<polymer-element name="the-graph-editor" attributes="grid snap width height autolayout theme selectedNodes selectedEdges animatedEdges onContextMenu processerror clearprocesserrors" touch-action="none">
+<polymer-element name="the-graph-editor" attributes="grid snap width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges onContextMenu processerror clearprocesserrors" touch-action="none">
   <template>
     <the-graph id="graph"
       name="{{ graph.properties.name }}"
@@ -11,10 +11,10 @@
       autolayout="{{autolayout}}"
       theme="{{theme}}"
       selectedNodes="{{selectedNodes}}"
+      errorNodes="{{errorNodes}}"
       selectedEdges="{{selectedEdges}}"
       animatedEdges="{{animatedEdges}}"
-      getMenuDef="{{getMenuDef}}"
-      processErrors="{{processErrors}}">
+      getMenuDef="{{getMenuDef}}">
     </the-graph>
   </template>
   <script>
@@ -34,6 +34,7 @@
       autolayout: false,
       theme: "dark",
       selectedNodes: [],
+      errorNodes: [],
       selectedEdges: [],
       animatedEdges: [],
       processerror: null,
@@ -341,16 +342,14 @@
       toJSON: function () {
         return this.nofloGraph.toJSON();
       },
-      processErrors: {},
-      processerrorChanged: function() {
-          this.processErrors[this.processerror] = true;
-          this.processerror = null;
-          this.$.graph.setProcessErrors(this.processErrors);
-      },
-      clearprocesserrorsChanged: function() {
-          this.processErrors = {};
-          this.$.graph.setProcessErrors(this.processErrors);
+      addErrorNode: function (id) {
+        if (this.errorNodes.indexOf(id) === -1) {
+          this.errorNodes.push(id);
+        }
       },
+      clearErrorNodes: function() {
+        this.errorNodes = [];
+      }
     });
 
   })();

diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
@@ -15,9 +15,9 @@
         edgePreviewX: 0,
         edgePreviewY: 0,
         selectedNodes: [],
+        errorNodes: [],
         selectedEdges: [],
-        animatedEdges: [],
-        processErrors: {},
+        animatedEdges: []
       };
     },
     componentDidMount: function () {
@@ -262,21 +262,21 @@
       });
       this.markDirty();
     },
-    setSelectedEdges: function (edges) {
+    setErrorNodes: function (errors) {
       this.setState({
-        selectedEdges: edges
+        errorNodes: errors
       });
       this.markDirty();
     },
-    setAnimatedEdges: function (edges) {
+    setSelectedEdges: function (edges) {
       this.setState({
-        animatedEdges: edges
+        selectedEdges: edges
       });
       this.markDirty();
     },
-    setProcessErrors: function (errors) {
+    setAnimatedEdges: function (edges) {
       this.setState({
-        processErrors: errors
+        animatedEdges: edges
       });
       this.markDirty();
     },
@@ -356,6 +356,9 @@
         } else if (componentInfo && componentInfo.icon) {
           icon = componentInfo.icon;
         }
+        if (self.state.errorNodes.indexOf(node) !== -1) {
+          console.log(key);
+        }
         return TheGraph.Node({
           key: key,
           x: node.metadata.x,
@@ -370,11 +373,12 @@
           ports: self.getPorts(key, node.component),
           onNodeSelection: self.props.onNodeSelection,
           selected: (self.state.selectedNodes.indexOf(node) !== -1),
+          error: (self.state.errorNodes.indexOf(key) !== -1),
           showContext: self.props.showContext,
-          highlightPort: highlightPort,
-          error: (self.state.processErrors[node.id] ? true : false),
+          highlightPort: highlightPort
         });
       });
+
 
       // Edges
       var edges = graph.edges.map(function (edge) {

diff --git a/the-graph/the-graph-node.js b/the-graph/the-graph-node.js
@@ -249,9 +249,9 @@
         nextProps.sublabel !== this.props.sublabel ||
         nextProps.ports !== this.props.ports ||
         nextProps.selected !== this.props.selected ||
+        nextProps.error !== this.props.error ||
         nextProps.highlightPort !== this.props.highlightPort ||
-        nextProps.ports.dirty === true ||
-        nextProps.error !== this.props.error
+        nextProps.ports.dirty === true
       );
     },
     componentDidUpdate: function (prevProps, prevState) {

diff --git a/the-graph/the-graph.html b/the-graph/the-graph.html
@@ -1,4 +1,4 @@
-<polymer-element name="the-graph" attributes="graph menus library width height autolayout theme selectedNodes selectedEdges animatedEdges getMenuDef pan scale">
+<polymer-element name="the-graph" attributes="graph menus library width height autolayout theme selectedNodes errorNodes selectedEdges animatedEdges getMenuDef pan scale">
 
   <template>
     <link rel="stylesheet" href="../themes/the-graph-dark.css">
@@ -40,6 +40,7 @@
       snap: 36,
       theme: "dark",
       selectedNodes: [],
+      errorNodes: [],
       selectedEdges: [],
       animatedEdges: [],
       autolayouter: null,
@@ -96,8 +97,7 @@
             onEdgeSelection: this.onEdgeSelection.bind(this),
             onNodeSelection: this.onNodeSelection.bind(this),
             onPanScale: this.onPanScale.bind(this),
-            getMenuDef: this.getMenuDef,
-            processErrors: this.processErrors,
+            getMenuDef: this.getMenuDef
           }),
           this.$.svgcontainer
         );
@@ -160,6 +160,10 @@
         if (!this.graphView) { return; }
         this.graphView.setSelectedNodes(this.selectedNodes);
       },
+      errorNodesChanged: function () {
+        if (!this.graphView) { return; }
+        this.graphView.setErrorNodes(this.errorNodes);
+      },
       selectedEdgesChanged: function () {
         if (!this.graphView) { return; }
         this.graphView.setSelectedEdges(this.selectedEdges);
@@ -421,10 +425,7 @@
       toJSON: function () {
         if (!this.graph) { return {}; }
         return this.graph.toJSON();
-      },
-      setProcessErrors: function (errors) {
-        this.graphView.setProcessErrors(errors);
-      },
+      }
     });
 
   })();

diff --git a/themes/dark/the-graph.styl b/themes/dark/the-graph.styl
@@ -1,7 +1,7 @@
 var-bg = black
 
 var-node            = hsla(192, 25%, 92%, 0.94)
-var-node-error      = hsla(192, 0%, 0%, 0.94)
+var-node-error      = hsla(0, 100%, 50%, 0.94)
 var-node-hover      = hsla(192, 25%, 92%, 0.97)
 var-node-border     = hsl(0, 0%, 40%)
 var-node-border-bg  = hsla(0, 0%, 0%, 0.5)

diff --git a/themes/default/the-graph.styl b/themes/default/the-graph.styl
@@ -58,20 +58,20 @@ svg {
 }
 
 @-webkit-keyframes error {
-  0% { file: var-node; }
-  100% { file: var-node-error; }
+  0% { fill: var-node; }
+  100% { fill: var-node-error; }
 }
 @-moz-keyframes error {
-  0% { file: var-node; }
-  100% { file: var-node-error; }
+  0% { fill: var-node; }
+  100% { fill: var-node-error; }
 }
 @-o-keyframes error {
-  0% { file: var-node; }
-  100% { file: var-node-error; }
+  0% { fill: var-node; }
+  100% { fill: var-node-error; }
 }
 @keyframes error {
-  0% { file: var-node; }
-  100% { file: var-node-error; }
+  0% { fill: var-node; }
+  100% { fill: var-node-error; }
 }
 
 .node.error .node-rect {

diff --git a/themes/light/the-graph.styl b/themes/light/the-graph.styl
@@ -1,7 +1,7 @@
 var-bg = white
 
 var-node            = hsla(192, 25%, 92%, 0.94)
-var-node-error      = hsla(192, 0%, 0%, 0.94)
+var-node-error      = hsla(0, 100%, 50%, 0.94)
 var-node-hover      = hsla(192, 25%, 92%, 0.97)
 var-node-border     = hsl(194, 8%, 25%)
 var-node-border-bg  = hsla(0, 0%, 100%, 0.5)

diff --git a/themes/the-graph-dark.css b/themes/the-graph-dark.css
@@ -39,29 +39,29 @@
 }
 @-webkit-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-moz-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-o-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 .the-graph-dark .node.error .node-rect {
@@ -707,47 +707,47 @@
 }
 @-moz-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-webkit-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-o-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-ms-keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @keyframes error {
   0% {
-    file: rgba(230,238,240,0.94);
+    fill: rgba(230,238,240,0.94);
   }
 
   100% {
-    file: rgba(0,0,0,0.94);
+    fill: rgba(255,0,0,0.94);
   }
 }
 @-moz-keyframes heartbeats {