fixing node/graph drag collision #42

meemoo · Aug 22, 2013 · 152001c · 152001c
1 parent 0791b74
commit 152001c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/debug.html b/debug.html
@@ -9,8 +9,6 @@
   <!-- Third-Party Libraries -->
   <script src="libs/jquery.js"></script>
   <script src="libs/jquery-uistub.js"></script>
-  <!-- <script src="libs/jquery-ui.js"></script> -->
-  <!-- <script src="libs/jquery.ui.touch-punch.js"></script> -->
   <script src="libs/underscore.js"></script>
   <script src="libs/backbone.js"></script>
   <script src="libs/hammer.min.js"></script>

diff --git a/src/modules/graph-view.js b/src/modules/graph-view.js
@@ -183,14 +183,20 @@
       }
     },
     bindPan: function () {
-      var zoom, deltaX, deltaY;
+      var zoom, deltaX, deltaY, isDragging;
       var self = this;
 
       function panStart (event) {
         if (!event.gesture) { return; }
+        // Don't drag other
+        event.stopPropagation();
+
+        isDragging = true;
       }
       function pan (event) {
-        if (!event.gesture) { return; }
+        if (!event.gesture || !isDragging) { return; }
+        // Don't drag other
+        event.stopPropagation();
 
         zoom = self.model.get('zoom');
         deltaX = event.gesture.deltaX/zoom;
@@ -200,7 +206,11 @@
         });
       }
       function panEnd (event) {
-        if (!event.gesture) { return; }
+        if (!event.gesture || !isDragging) { return; }
+        // Don't drag other
+        event.stopPropagation();
+
+        isDragging = false;
 
         self.$(".dataflow-graph").css({
           transform: "translate3d(0, 0, 0)"

diff --git a/src/modules/node-view.js b/src/modules/node-view.js
@@ -103,16 +103,15 @@
       return this;
     },
     makeDraggable: function(){
-      var deltaX, deltaY, zoom, alsoDrag, $dragHelpers;
+      var deltaX, deltaY, zoom, alsoDrag, $dragHelpers, isDragging;
       var self = this;
 
       function dragStart(event) {
         if (!event.gesture) { return; }
         // Don't drag graph
         event.stopPropagation();
-        event.gesture.preventDefault();
 
-        dragStarted = true;
+        isDragging = true;
 
         // Select this
         if (!self.$el.hasClass("ui-selected")){
@@ -125,7 +124,11 @@
         // Make helper and save start position of all other selected
         alsoDrag = [];
 
-        $dragHelpers = $('<div class="dataflow-nodes-helpers"></div>');
+        if ($dragHelpers) {
+          $dragHelpers.empty();
+        } else {
+          $dragHelpers = $('<div class="dataflow-nodes-helpers"></div>');
+        }
         self.$el.parent().append( $dragHelpers );
 
         self.model.parentGraph.view.$(".ui-selected").each(function() {
@@ -145,10 +148,9 @@
       }
 
       function drag(event) {
-        if (!event.gesture || !$dragHelpers) { return; }
+        if (!event.gesture || !isDragging) { return; }
         // Don't drag graph
         event.stopPropagation();
-        event.gesture.preventDefault();
 
         deltaX = event.gesture.deltaX / zoom;
         deltaY = event.gesture.deltaY / zoom;
@@ -158,10 +160,9 @@
       }
 
       function dragEnd(event) {
-        if (!event.gesture || !$dragHelpers) { return; }
+        if (!event.gesture || !isDragging) { return; }
         // Don't drag graph
         event.stopPropagation();
-        event.gesture.preventDefault();
 
         var panX = self.model.parentGraph.get("panX");
         var panY = self.model.parentGraph.get("panY");
@@ -180,7 +181,7 @@
         }
         // Remove helpers
         $dragHelpers.remove();
-        $dragHelpers = null;
+        isDragging = false;
       }
 
       // Bind