Highlight compatible ports when dragging, fixes #63

meemoo · Oct 2, 2013 · 2a28c5f · 2a28c5f
1 parent 3bc0dfb
commit 2a28c5f
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 6 deletions.
diff --git a/build/dataflow.build.js b/build/dataflow.build.js
@@ -1,4 +1,4 @@
-/*! dataflow.js - v0.0.7 - 2013-10-02 (6:20:43 PM GMT+0200)
+/*! dataflow.js - v0.0.7 - 2013-10-02 (7:09:36 PM GMT+0200)
 * Copyright (c) 2013 Forrest Oliphant; Licensed MIT, GPL */
 // Thanks bobnice http://stackoverflow.com/a/1583281/592125
 
@@ -1239,6 +1239,39 @@ CircularBuffer.IndexError= {};
           edge.view.unfade();
         }
       });
+    },
+    startHighlightCompatible: function (port, fromInput) {
+      this.model.nodes.each(function (node) {
+        node.outputs.each(function (output) {
+          if (output === port) {
+            return;
+          }
+          if (!fromInput) {
+            output.view.blur();
+            return;
+          }
+          if (output.canConnect() && (output.type === 'all' || output.type === port.type)) {
+            return;
+          }
+          output.view.blur();
+        });
+        node.inputs.each(function (input) {
+          if (input === port) {
+            return;
+          }
+          if (fromInput) {
+            input.view.blur();
+            return;
+          }
+          if (input.canConnect() && (input.type === 'all' || input.type === port.type)) {
+            return;
+          }
+          input.view.blur();
+        });
+      });
+    },
+    stopHighlightCompatible: function (port, fromInput) {
+      this.$el.find('.dataflow-port.blur').removeClass('blur');
     }
   });
 
@@ -1823,6 +1856,8 @@ CircularBuffer.IndexError= {};
       graphSVGElement.appendChild(this.previewEdgeNewView.el);
 
       zoom = this.model.parentNode.parentGraph.get('zoom');
+
+      this.model.parentNode.parentGraph.view.startHighlightCompatible(this.model, true);
     },
     newEdgeDrag: function(event, ui){
       if (!this.previewEdgeNewView || !ui) {
@@ -1850,6 +1885,7 @@ CircularBuffer.IndexError= {};
       this.previewEdgeNewView.remove();
       delete this.previewEdgeNew;
       delete this.previewEdgeNewView;
+      this.model.parentNode.parentGraph.view.stopHighlightCompatible(this.model, true);
     },
     getTopEdge: function() {
       var topEdge;
@@ -1927,6 +1963,12 @@ CircularBuffer.IndexError= {};
         delete this.previewEdgeChangeView;
       }
     },
+    blur: function () {
+      this.$el.addClass('blur');
+    },
+    unblur: function () {
+      this.$el.removeClass('blur');
+    },
     connectEdge: function(event, ui) {
       // Dropped to this el
       var otherPort = ui.helper.data("port");
@@ -2132,6 +2174,7 @@ CircularBuffer.IndexError= {};
 
       zoom = this.model.parentNode.parentGraph.get('zoom');
 
+      this.model.parentNode.parentGraph.view.startHighlightCompatible(this.model);
     },
     newEdgeDrag: function(event, ui){
       // Don't drag node
@@ -2157,6 +2200,7 @@ CircularBuffer.IndexError= {};
       this.previewEdgeView.remove();
       delete this.previewEdge;
       delete this.previewEdgeView;
+      this.model.parentNode.parentGraph.view.stopHighlightCompatible(this.model);
     },
     getTopEdge: function() {
       var topEdge;
@@ -2234,6 +2278,12 @@ CircularBuffer.IndexError= {};
         delete this.previewEdgeChangeView;
       }
     },
+    blur: function () {
+      this.$el.addClass('blur');
+    },
+    unblur: function () {
+      this.$el.removeClass('blur');
+    },
     connectEdge: function(event, ui) {
       // Dropped to this el
       var otherPort = ui.helper.data("port");

diff --git a/build/dataflow.min.js b/build/dataflow.min.js
diff --git a/build/dataflow.min.js.map b/build/dataflow.min.js.map
diff --git a/build/default/dataflow.min.css b/build/default/dataflow.min.css
diff --git a/src/modules/graph-view.js b/src/modules/graph-view.js
@@ -342,6 +342,39 @@
           edge.view.unfade();
         }
       });
+    },
+    startHighlightCompatible: function (port, fromInput) {
+      this.model.nodes.each(function (node) {
+        node.outputs.each(function (output) {
+          if (output === port) {
+            return;
+          }
+          if (!fromInput) {
+            output.view.blur();
+            return;
+          }
+          if (output.canConnect() && (output.type === 'all' || output.type === port.type)) {
+            return;
+          }
+          output.view.blur();
+        });
+        node.inputs.each(function (input) {
+          if (input === port) {
+            return;
+          }
+          if (fromInput) {
+            input.view.blur();
+            return;
+          }
+          if (input.canConnect() && (input.type === 'all' || input.type === port.type)) {
+            return;
+          }
+          input.view.blur();
+        });
+      });
+    },
+    stopHighlightCompatible: function (port, fromInput) {
+      this.$el.find('.dataflow-port.blur').removeClass('blur');
     }
   });
 

diff --git a/src/modules/input-view.js b/src/modules/input-view.js
@@ -275,6 +275,8 @@
       graphSVGElement.appendChild(this.previewEdgeNewView.el);
 
       zoom = this.model.parentNode.parentGraph.get('zoom');
+
+      this.model.parentNode.parentGraph.view.startHighlightCompatible(this.model, true);
     },
     newEdgeDrag: function(event, ui){
       if (!this.previewEdgeNewView || !ui) {
@@ -302,6 +304,7 @@
       this.previewEdgeNewView.remove();
       delete this.previewEdgeNew;
       delete this.previewEdgeNewView;
+      this.model.parentNode.parentGraph.view.stopHighlightCompatible(this.model, true);
     },
     getTopEdge: function() {
       var topEdge;
@@ -379,6 +382,12 @@
         delete this.previewEdgeChangeView;
       }
     },
+    blur: function () {
+      this.$el.addClass('blur');
+    },
+    unblur: function () {
+      this.$el.removeClass('blur');
+    },
     connectEdge: function(event, ui) {
       // Dropped to this el
       var otherPort = ui.helper.data("port");

diff --git a/src/modules/output-view.js b/src/modules/output-view.js
@@ -102,6 +102,7 @@
 
       zoom = this.model.parentNode.parentGraph.get('zoom');
 
+      this.model.parentNode.parentGraph.view.startHighlightCompatible(this.model);
     },
     newEdgeDrag: function(event, ui){
       // Don't drag node
@@ -127,6 +128,7 @@
       this.previewEdgeView.remove();
       delete this.previewEdge;
       delete this.previewEdgeView;
+      this.model.parentNode.parentGraph.view.stopHighlightCompatible(this.model);
     },
     getTopEdge: function() {
       var topEdge;
@@ -204,6 +206,12 @@
         delete this.previewEdgeChangeView;
       }
     },
+    blur: function () {
+      this.$el.addClass('blur');
+    },
+    unblur: function () {
+      this.$el.removeClass('blur');
+    },
     connectEdge: function(event, ui) {
       // Dropped to this el
       var otherPort = ui.helper.data("port");

diff --git a/themes/default/modules/port.css b/themes/default/modules/port.css
@@ -140,6 +140,9 @@
 .dataflow-node-ins .hasvalue .dataflow-port-hole  {
   background-color: hsl(  210,  68%, 70%);
 }
+.dataflow-node .dataflow-port.blur {
+  opacity: 0.2;
+}
 
 .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%); }