From 0ac39049c40ff1f835d520092f5bee81e0ac8361 Mon Sep 17 00:00:00 2001
From: Forrest Oliphant <forrest@sembiki.com>
Date: Thu, 12 Sep 2013 18:17:30 +0300
Subject: [PATCH] dragpan starting to work #129

---
 iframework.css              | 10 ++++--
 src/edge-view.js            | 20 ++++++++----
 src/graph-view.js           | 62 ++++++++++++++++++++++++-------------
 src/graph.js                |  3 +-
 src/node-box-view.js        | 41 ++++++++++++++++++------
 src/nodes/image-triangle.js | 16 +++++++++-
 src/port-view.js            | 17 ++++++++++
 7 files changed, 128 insertions(+), 41 deletions(-)

diff --git a/iframework.css b/iframework.css
index 1d5cb6e..65fd737 100644
--- a/iframework.css
+++ b/iframework.css
@@ -54,15 +54,21 @@ button,
 
 .graph {
   background: #EEE url(img/meemoo-bg-graph.png) scroll repeat;
-  background-attachment: local;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
-  overflow: auto;
+  overflow: hidden;
   border-right: 1px dotted #666;
 }
+  .dragpan {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+  }
   .edges {
     z-index: 1;
   }
diff --git a/src/edge-view.js b/src/edge-view.js
index 105d1e7..732d429 100644
--- a/src/edge-view.js
+++ b/src/edge-view.js
@@ -46,6 +46,9 @@ $(function(){
         if (this.model.Target) {
           this.model.Target.parentNode.on("change:x change:y", this.redraw, this);
         }
+
+        // Listen for pan
+        this.listenTo(this.model.parentGraph, "change:pan", this.redraw);
       }
     },
     render: function () {
@@ -101,12 +104,17 @@ $(function(){
     calcPositions: function () {
       if (this.model) {
         // Connected edge
-        var sourceName = this.model.get("source")[1];
-        var targetName = this.model.get("target")[1];
-        this.positions.fromX = this.model.Source.view.portOffsetLeft('out', sourceName);
-        this.positions.fromY = this.model.Source.view.portOffsetTop('out', sourceName);
-        this.positions.toX = this.model.Target.view.portOffsetLeft('in', targetName);
-        this.positions.toY = this.model.Target.view.portOffsetTop('in', targetName);
+        // 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];
+        this.positions.toY = to[1];
       }
     },
     svgX: function () {
diff --git a/src/graph-view.js b/src/graph-view.js
index f5004f0..deb0b4c 100644
--- a/src/graph-view.js
+++ b/src/graph-view.js
@@ -1,10 +1,12 @@
 $(function(){
 
   var template = 
-    '<div class="edges">'+
-      '<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>'+
+    '<div class="dragpan">'+
+      '<div class="edges">'+
+        '<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>'+
+      '</div>'+
+      '<div class="nodes" />'+
     '</div>'+
-    '<div class="nodes" />'+
     '<div class="iframework-graph-nav" style="display:none;">'+
       '<button class="show-parent-graph">back to parent graph</button>'+
     '</div>';
@@ -18,8 +20,9 @@ $(function(){
       "dragenter":       "ignoreDrag",
       "dragover":        "ignoreDrag",
       "drop":            "drop",
-      "selectablestart": "selectableStart",
-      "selectablestop":  "selectableStop",
+      "dragstart .dragpan": "dragStart",
+      "drag .dragpan":      "drag",
+      "dragstop .dragpan":  "dragStop",
       "click .show-parent-graph": "showParentGraph"
     },
     unhidden: false,
@@ -45,15 +48,15 @@ $(function(){
         accept: ".addnode, .canvas, .meemoo-plugin-images-thumbnail"
       });
 
-      // Thanks Stu Cox http://stackoverflow.com/a/14578826/592125
-      var supportsTouch = 'ontouchstart' in document;
-      if (!supportsTouch) {
-        // Selectable messes up scroll on touch devices
-        this.$el.selectable({
-          filter: ".module",
-          delay: 20
+      this.$(".dragpan")
+        .css({
+          transform: "translate3d(0,0,0)"
+        })
+        .draggable({
+          helper: function(){
+            return $("<div>");
+          }
         });
-      }
 
       this.resizeEdgeSVG();
 
@@ -116,6 +119,7 @@ $(function(){
             reader.readAsText(file);
           }
         }
+        return;
       }
 
       // Drop images or mods from libraries
@@ -212,14 +216,6 @@ $(function(){
         svg.setAttribute("height", Math.round(height));
       }
     }, 100),
-    selectableStart: function () {
-      // Add a mask so that iframes don't steal mouse
-      this.maskFrames();
-    },
-    selectableStop: function (event) {
-      // Remove iframe masks
-      this.unmaskFrames();
-    },
     selectAll: function () {
       this.$(".module").addClass("ui-selected");
     },
@@ -329,6 +325,30 @@ $(function(){
           edge.view.redraw();
         }
       }, this);
+    },
+    dragStartPan: null,
+    dragStart: function(event, ui){
+      this.dragStartPan = this.model.get("pan");
+    },
+    drag: function(event, ui){
+      if (!this.dragStartPan) {return;}
+      var x = ui.offset.left;
+      var y = ui.offset.top;
+      this.$(".dragpan")
+        .css({
+          transform: "translate3d("+x+"px,"+y+"px,0)"
+        });
+    },
+    dragStop: function(event, ui){
+      if (!this.dragStartPan) {return;}
+      this.$(".dragpan")
+        .css({
+          transform: "translate3d(0,0,0)"
+        });
+      var x = this.dragStartPan[0] + ui.offset.left;
+      var y = this.dragStartPan[1] + ui.offset.top;
+      this.model.set("pan", [x,y]);
+      this.dragStartPan = null;
     }
     
   });
diff --git a/src/graph.js b/src/graph.js
index 775b64c..97c0f5d 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -11,7 +11,8 @@ $(function(){
         url: ""
       },
       nodes: [],
-      edges: []
+      edges: [],
+      pan: [0,0]
     },
     usedIds: [],
     edgeCount: 0,
diff --git a/src/node-box-view.js b/src/node-box-view.js
index db12ae3..cbadcd3 100644
--- a/src/node-box-view.js
+++ b/src/node-box-view.js
@@ -1,7 +1,7 @@
 $(function(){
 
   var template = 
-    '<div class="module" style="left:<%= get("x")-10 %>px;top:<%= get("y")-30 %>px;width:<%= get("w")+20 %>px;height:<%= get("h")+40 %>px;" >'+
+    '<div class="module" style="left:<%= get("x") %>px;top:<%= get("y") %>px;width:<%= get("w") %>px;height:<%= get("h") %>px;" >'+
       '<div class="outer"></div>'+
       '<div class="ports ports-in"></div>'+
       '<div class="ports ports-out"></div>'+
@@ -68,6 +68,8 @@ $(function(){
       // Disable selection for better drag+drop
       this.$("h1").disableSelection();
 
+      this.listenTo(this.model.parentGraph, "change:pan", this.bumpPosition);
+
       // Bring newest to top
       this.mousedown();
 
@@ -103,6 +105,9 @@ $(function(){
     _alsoDrag: [],
     _dragDelta: {},
     dragStart: function(event, ui){
+      // Don't drag graph
+      event.stopPropagation();
+
       if (event.target !== this.$(".module")[0]) { return; }
 
       // Add a mask so that iframes don't steal mouse
@@ -139,6 +144,9 @@ $(function(){
       });
     },
     drag: function(event, ui){
+      // Don't drag graph
+      event.stopPropagation();
+
       if (event.target !== this.$(".module")[0]) { return; }
 
       // Drag other helpers
@@ -161,10 +169,15 @@ $(function(){
       }
     },
     dragStop: function(event, ui){
+      // Don't drag graph
+      event.stopPropagation();
+
       if (event.target !== this.$(".module")[0]) { return; }
 
-      var x = parseInt(ui.position.left, 10);
-      var y = parseInt(ui.position.top, 10);
+      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");
       this.moveToPosition(x,y);
       // Also drag
       if (this._alsoDrag.length) {
@@ -173,7 +186,9 @@ $(function(){
           var helper = el.data("ui-draggable-alsodrag-helper");
           var node = el.data("iframework-node-view");
           // Move other node
-          node.moveToPosition(parseInt(helper.css("left"), 10), parseInt(helper.css("top"), 10));
+          var x = delta[0] + node.model.get("x");
+          var y = delta[1] + node.model.get("y");
+          node.moveToPosition(x, y);
           // Remove helper
           helper.remove();
           el.data("ui-draggable-alsodrag-initial", null);
@@ -186,14 +201,20 @@ $(function(){
       this.model.parentGraph.view.unmaskFrames();
     },
     moveToPosition: function(x, y){
+      this.model.set({
+        x: x,
+        y: y
+      });
+      this.bumpPosition();
+    },
+    bumpPosition: function(){
+      var pan = this.model.parentGraph.get("pan");
+      var x = pan[0] + this.model.get("x");
+      var y = pan[1] + this.model.get("y");
       this.$(".module").css({
         left: x,
         top: y
       });
-      this.model.set({
-        x: x + 10,
-        y: y + 30
-      });
     },
     resizestart: function (event, ui) {
       // Add a mask so that iframes don't steal mouse
@@ -209,8 +230,8 @@ $(function(){
       var newW = ui.size.width;
       var newH = ui.size.height;
       this.model.set({
-        w: newW - 20,
-        h: newH - 40
+        w: newW,
+        h: newH
       });
       if (this.Native) {
         this.Native.resize(newW,newH);
diff --git a/src/nodes/image-triangle.js b/src/nodes/image-triangle.js
index 0efa5a8..5011d6c 100644
--- a/src/nodes/image-triangle.js
+++ b/src/nodes/image-triangle.js
@@ -2,14 +2,28 @@
 
 $(function(){
 
+
+  var template = 
+    '<div class="control-points" style="position:absolute; top:0px; left:0px; z-index:2;" >'+
+      '<div title="top-left"     class="control-point tl c0" data-handle="0" ></div>'+
+      '<div title="bottom-left"  class="control-point bl c1" data-handle="1" ></div>'+
+      '<div title="bottom-right" class="control-point br c2" data-handle="2" ></div>'+
+    '</div>';
+
   Iframework.NativeNodes["image-triangle"] = Iframework.NativeNodes["image"].extend({
 
     info: {
       title: "triangle",
       description: "draw a triangle"
     },
+    events: {
+      "dragstart .control-point": "startMove",
+      "drag .control-point":      "move",
+      "dragstop .control-point":  "stopMove"
+    },
     initializeModule: function(){
-      
+      this.canvas.style.maxWidth = "auto";
+      this.$(".control-point").draggable();
     },
     inputmatte: function (image) {
       this._matte = image;
diff --git a/src/port-view.js b/src/port-view.js
index 96b9c88..ea694cb 100644
--- a/src/port-view.js
+++ b/src/port-view.js
@@ -354,6 +354,23 @@ $(function(){
       // Don't bubble
       event.stopPropagation();
     },
+    portOffset: function(){
+      var pan = this.model.parentNode.parentGraph.get("pan");
+      var index = this.$el.index();
+      // Node position
+      var x = pan[0] + this.model.parentNode.get("x");
+      var y = pan[1] + this.model.parentNode.get("y");
+      // Port position
+      if (this.model.isIn) {
+        x -= 70;
+        y += 9 + index*18;
+      } else {
+        var length = this.$el.siblings().length;
+        x += this.model.parentNode.get("w") + 70;
+        y += this.model.parentNode.get("h") - 9 - (length-index)*18;
+      }
+      return [x,y];
+    },
     portOffsetLeft: function () {
       var holeoffset = this.$('.hole').offset();
       if (holeoffset) {