mouseWheel panning #129

src/edge-view.js

@@ -41,10 +41,10 @@ $(function(){
 
         // Listen for changes to redraw
         if (this.model.Source) {
-          this.model.Source.parentNode.on("change:x change:y change:w change:h", this.redraw, this);
+          this.listenTo( this.model.Source.parentNode, "change:x change:y change:w change:h", this.redraw );
         }
         if (this.model.Target) {
-          this.model.Target.parentNode.on("change:x change:y", this.redraw, this);
+          this.listenTo( this.model.Target.parentNode, "change:x change:y", this.redraw );
         }
 
         // Listen for pan
@@ -103,14 +103,9 @@ $(function(){
     },
     calcPositions: function () {
       if (this.model) {
-        // Connected edge
-        // var sourceName = this.model.get("source")[1];
-        // var targetName = this.model.get("target")[1];
         var from = this.model.Source.view.portOffset();
         var to = this.model.Target.view.portOffset();
 
-        console.log(from,to);
-
         this.positions.fromX = from[0];
         this.positions.fromY = from[1];
         this.positions.toX = to[0];

src/graph-view.js

@@ -23,7 +23,8 @@ $(function(){
       "dragstart .dragpan": "dragStart",
       "drag .dragpan":      "drag",
       "dragstop .dragpan":  "dragStop",
-      "click .show-parent-graph": "showParentGraph"
+      "click .show-parent-graph": "showParentGraph",
+      "mousewheel":      "mouseWheel"
     },
     unhidden: false,
     initialize: function () {
@@ -90,6 +91,8 @@ $(function(){
     drop: function (event, ui) {
       this.ignoreDrag(event);
 
+      var pan = this.model.get("pan");
+
       // Drop files
       var dt = event.originalEvent.dataTransfer;
       if (dt) {
@@ -98,9 +101,10 @@ $(function(){
           var file = dt.files[0];
           var split = file.type.split("/");
           var o = {
-            x: this.el.scrollLeft + event.originalEvent.clientX + 10,
-            y: this.el.scrollTop + event.originalEvent.clientY + 35
+            x: event.originalEvent.clientX - pan[0],
+            y: event.originalEvent.clientY - pan[1]
           };
+          console.log(pan, o);
           if (split[0]==="image"){
             o.src = "meemoo:image/in";
             o.state = { url: window.URL.createObjectURL( file ) };
@@ -129,8 +133,8 @@ $(function(){
       if (!type) {return false;}
 
       var options = {
-        x: Math.round(this.el.scrollLeft + ui.offset.left + 10),
-        y: Math.round(this.el.scrollTop + ui.offset.top + 35)
+        x: Math.round(ui.offset.left + 10) - pan[0],
+        y: Math.round(ui.offset.top + 35) - pan[1] - 20
       };
 
       switch(type){
@@ -349,6 +353,28 @@ $(function(){
       var y = this.dragStartPan[1] + ui.offset.top;
       this.model.set("pan", [x,y]);
       this.dragStartPan = null;
+    },
+    tempPan: [0,0],
+    setPanDebounce: _.debounce(function () {
+      // Moves the graph back to 0,0 and changes pan, which will rerender wires
+      this.$(".dragpan").css({
+        transform: "translate3d(0, 0, 0)"
+      });
+      var pan = this.model.get("pan");
+      var x = Math.round(pan[0] + this.tempPan[0]);
+      var y = Math.round(pan[1] + this.tempPan[1]);
+      this.model.set("pan", [x,y]);
+      this.tempPan = [0,0];
+    }, 250),
+    mouseWheel: function (event) {
+      event.preventDefault();
+      var oe = event.originalEvent;
+      this.tempPan[0] += oe.wheelDeltaX/6;
+      this.tempPan[1] += oe.wheelDeltaY/6;
+      this.$(".dragpan").css({
+        transform: "translate3d("+this.tempPan[0]+"px, "+this.tempPan[1]+"px, 0)"
+      });
+      this.setPanDebounce();
     }
 
   });

src/node-box-view.js

@@ -69,6 +69,7 @@ $(function(){
       this.$("h1").disableSelection();
 
       this.listenTo(this.model.parentGraph, "change:pan", this.bumpPosition);
+      this.bumpPosition();
 
       // Bring newest to top
       this.mousedown();
@@ -174,7 +175,6 @@ $(function(){
 
       if (event.target !== this.$(".module")[0]) { return; }
 
-      console.log(ui);
       var delta = [ui.position.left - ui.originalPosition.left, ui.position.top - ui.originalPosition.top];
       var x = delta[0] + this.model.get("x");
       var y = delta[1] + this.model.get("y");
@@ -233,6 +233,10 @@ $(function(){
         w: newW,
         h: newH
       });
+      this.$(".module").css({
+        width: newW,
+        height: newH
+      });
       if (this.Native) {
         this.Native.resize(newW,newH);
       }

src/nodes/image-paint.js

@@ -145,22 +145,23 @@ $(function(){
       $(this.canvas).after(this.draw);
       $(this.draw).css({
         border: "1px solid #eee",
-        borderWidth: "0 1px 1px 0"
+        borderWidth: "0 1px 1px 0",
+        cursor: "pointer"
       });
 
       this.$("canvas").css({position:"absolute", top:0, left:0});
 
       this.tools.canvasPosition = {};
       var scrollParent = this.model.view.$(".inner")[0];
-      var scrollGraph = this.model.parentGraph.view.el;
       var self = this;
       var setOffset = function(){
-        self.tools.canvasPosition.left = self.model.get("x") - scrollParent.scrollLeft - scrollGraph.scrollLeft + 3;
-        self.tools.canvasPosition.top = self.model.get("y") - scrollParent.scrollTop - scrollGraph.scrollTop + 3;
+        var pan = self.model.parentGraph.get("pan");
+        self.tools.canvasPosition.left = self.model.get("x") - scrollParent.scrollLeft + pan[0] + 10;
+        self.tools.canvasPosition.top = self.model.get("y") - scrollParent.scrollTop + pan[1] + 40;
       };
       $(scrollParent).scroll(setOffset);
-      $(scrollGraph).scroll(setOffset);
-      this.model.on("change:x, change:y", setOffset);
+      this.listenTo(this.model, "change:x change:y", setOffset);
+      this.listenTo(this.model.parentGraph, "change:pan", setOffset);
       setOffset();
 
       this.draw.onmouseover = function(e){

src/plugins/library.js

@@ -86,10 +86,11 @@ $( function () {
     var url = addByUrlInput.val();
     if (url !== "") {
       var graphEl = Iframework.$(".graph");
+      var pan = Iframework.shownGraph.get("pan");
       Iframework.shownGraph.addNode({
         "src": url,
-        "x": Math.floor(graphEl.scrollLeft() + graphEl.width()/2) - 100,
-        "y": Math.floor(graphEl.scrollTop() + graphEl.height()/2) - 100
+        "x": Math.floor(graphEl.width()/2) - 100 - pan[0],
+        "y": Math.floor(graphEl.height()/2) - 100 - pan[1]
       });
       addByUrlInput
         .val("")

src/port-view.js

@@ -355,12 +355,12 @@ $(function(){
       event.stopPropagation();
     },
     portOffset: function(){
-      var pan = this.model.parentNode.parentGraph.get("pan");
-      var index = this.$el.index();
       // Node position
+      var pan = this.model.parentNode.parentGraph.get("pan");
       var x = pan[0] + this.model.parentNode.get("x");
       var y = pan[1] + this.model.parentNode.get("y");
       // Port position
+      var index = this.$el.index();
       if (this.model.isIn) {
         x -= 70;
         y += 9 + index*18;