diff --git a/src/modules/graph-view.js b/src/modules/graph-view.js index e804d22..cd54f0e 100644 --- a/src/modules/graph-view.js +++ b/src/modules/graph-view.js @@ -29,13 +29,8 @@ className: "dataflow-g", events: { "click .dataflow-graph": "deselect", - // "dragstart .dataflow-graph-panzoom": "panStart", - // "drag .dataflow-graph-panzoom": "pan", - // "dragstop .dataflow-graph-panzoom": "panStop", - "click .dataflow-graph-gotoparent": "gotoParent" - // ".dataflow-graph transformstart": "pinchStart", - // ".dataflow-graph transform": "pinch", - // ".dataflow-graph transformend": "pinchEnd" + "click .dataflow-graph-gotoparent": "gotoParent", + "mousewheel": "mouseWheel" }, initialize: function() { // Graph container @@ -183,7 +178,7 @@ } }, bindPan: function () { - var zoom, deltaX, deltaY, isDragging; + var zoom, isDragging; var self = this; function panStart (event) { @@ -219,6 +214,9 @@ panX: self.model.get("panX") + deltaX, panY: self.model.get("panY") + deltaY }); + + // HACK fix for stray node drag + $(".dataflow-nodes-helpers").remove(); } Hammer( this.$(".dataflow-graph-panzoom")[0] ) @@ -227,6 +225,30 @@ .on("dragend", panEnd); }, + tempPanX: 0, + tempPanY: 0, + setPanDebounce: _.debounce(function () { + // Moves the graph back to 0,0 and changes pan, which will rerender wires + this.$(".dataflow-graph").css({ + transform: "translate3d(0, 0, 0)" + }); + this.model.set({ + panX: this.model.get("panX") + this.tempPanX, + panY: this.model.get("panY") + this.tempPanY + }); + this.tempPanX = 0; + this.tempPanY = 0; + }, 250), + mouseWheel: function (event) { + event.preventDefault(); + var oe = event.originalEvent; + this.tempPanX += oe.wheelDeltaX/6; + this.tempPanY += oe.wheelDeltaY/6; + this.$(".dataflow-graph").css({ + transform: "translate3d("+this.tempPanX+"px, "+this.tempPanY+"px, 0)" + }); + this.setPanDebounce(); + }, render: function() { // HACK to get them to show correct positions on load var self = this; diff --git a/src/modules/node-view.js b/src/modules/node-view.js index 8fa4986..ae0e978 100644 --- a/src/modules/node-view.js +++ b/src/modules/node-view.js @@ -179,8 +179,10 @@ }); alsoDrag = []; } + // Remove helpers - $dragHelpers.remove(); + $(".dataflow-nodes-helpers").remove(); + isDragging = false; } diff --git a/themes/nostyle/modules/node.css b/themes/nostyle/modules/node.css index c3bea0d..54e6f01 100644 --- a/themes/nostyle/modules/node.css +++ b/themes/nostyle/modules/node.css @@ -17,6 +17,9 @@ border: 2px #666 solid; top:-2px; right:-2px; bottom:-2px; left:-2px; } + .dataflow-nodes-helpers { + cursor: move; + } .dataflow-node.helper { border-style: dotted; background-color: rgba(255, 255, 255, 0.5);