Show visually that a port has a state, fixes #71

Author: bergie

build/dataflow.build.js

@@ -1,4 +1,4 @@
-/*! dataflow.js - v0.0.7 - 2013-09-28 (9:41:38 PM GMT+0200)
+/*! dataflow.js - v0.0.7 - 2013-09-30 (12:00:46 PM GMT+0200)
 * Copyright (c) 2013 Forrest Oliphant; Licensed MIT, GPL */
 (function(Backbone) {
   var ensure = function (obj, key, type) {
@@ -1910,6 +1910,11 @@
         this._holePosition = null;
       }.bind(this));
 
+      var nodeState = node.get('state');
+      if (nodeState && nodeState[this.model.id]) {
+        this.$el.addClass('hasvalue');
+      }
+
       if (!this.model.parentNode.parentGraph.dataflow.editable) {
         // No drag and drop
         return;
@@ -1983,10 +1988,13 @@
       this.model.parentNode.on('change:state', function () {
         var state = this.model.parentNode.get('state');
         if (!state || state[this.model.id] === undefined) {
+          this.$el.removeClass('hasvalue');
           return;
         }
         this.setInputValue(input, type, state[this.model.id]);
+        this.$el.addClass('hasvalue');
       }.bind(this));
+
       var label = $('<label class="input-type-' + type + '">')
         .append( input )
         .prepend( '<span>' + this.model.get("label") + "</span> " );

build/dataflow.min.js

@@ -45,6 +45,11 @@
         this._holePosition = null;
       }.bind(this));
 
+      var nodeState = node.get('state');
+      if (nodeState && nodeState[this.model.id]) {
+        this.$el.addClass('hasvalue');
+      }
+
       if (!this.model.parentNode.parentGraph.dataflow.editable) {
         // No drag and drop
         return;
@@ -118,10 +123,13 @@
       this.model.parentNode.on('change:state', function () {
         var state = this.model.parentNode.get('state');
         if (!state || state[this.model.id] === undefined) {
+          this.$el.removeClass('hasvalue');
           return;
         }
         this.setInputValue(input, type, state[this.model.id]);
+        this.$el.addClass('hasvalue');
       }.bind(this));
+
       var label = $('<label class="input-type-' + type + '">')
         .append( input )
         .prepend( '<span>' + this.model.get("label") + "</span> " );

build/dataflow.min.js.map

@@ -137,6 +137,9 @@
 }
 
 /* Port */
+.dataflow-node-ins .hasvalue .dataflow-port-hole  {
+  background-color: hsl(  210,  68%, 70%);
+}
 
 .dataflow-node.fade .dataflow-port-hole.active.route0, .dataflow-port-hole.active.route0  { background-color: hsl(  0,  0%, 65%); }
 .dataflow-node.fade .dataflow-port-hole.active.route1, .dataflow-port-hole.active.route1  { background-color: hsl(  0, 68%, 70%); }