add zoom and pas events for multiple peers and label direction for compassCollab

app/assets/javascripts/src/JIT.js

@@ -2473,6 +2473,11 @@ Extras.Classes.Navigation = new Class({
 	  }
     // END METAMAPS CODE
     // ORIGINAL CODE this.canvas.scale(ans, ans);
+
+    // START METAMAPS CODE
+      jQuery(document).trigger(Metamaps.JIT.events.zoom, [e]);
+    // END METAMAPS CODE
+
   },
   
   onMouseDown: function(e, win, eventInfo) {
@@ -2553,6 +2558,10 @@ Extras.Classes.Navigation = new Class({
     
     this.pos = currentPos;
     this.canvas.translate(x * 1/sx, y * 1/sy);
+
+    // START METAMAPS CODE
+      jQuery(document).trigger(Metamaps.JIT.events.pan);
+    // END METAMAPS CODE
   },
   
   onMouseUp: function(e, win, eventInfo, isRightClick) {

app/assets/javascripts/src/Metamaps.JIT.js

@@ -1,6 +1,8 @@
 Metamaps.JIT = {
     events: {
-        mouseMove: 'Metamaps:JIT:events:mouseMove'
+        mouseMove: 'Metamaps:JIT:events:mouseMove',
+        pan: 'Metamaps:JIT:events:pan',
+        zoom: 'Metamaps:JIT:events:zoom'
     },
     vizData: [], // contains the visualization-compatible graph
     /**
@@ -1472,11 +1474,13 @@ Metamaps.JIT = {
             }, 13, inv, canvas, 0.3);
         }
     }, //renderEdgeArrows
-    zoomIn: function () {
+    zoomIn: function (event) {
         Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
     },
-    zoomOut: function () {
+    zoomOut: function (event) {
         Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
     },
     centerMap: function () {
         var canvas = Metamaps.Visualize.mGraph.canvas;
@@ -1489,7 +1493,7 @@ Metamaps.JIT = {
 
         canvas.translate(-1*offsetX,-1*offsetY);
     },
-    zoomExtents: function () {
+    zoomExtents: function (event) {
         Metamaps.JIT.centerMap();
         var height = $(document).height(),
             width = $(document).width(),
@@ -1616,5 +1620,6 @@ Metamaps.JIT = {
         var cogY = (maxY + minY)/2;
 
         canvas.translate(-1* cogX, -1* cogY);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
     }
 };

app/assets/javascripts/src/Metamaps.js

@@ -1409,6 +1409,20 @@ Metamaps.Util = {
         };
         return pixels;
     },
+    pixelsToCoords: function (pixels) {
+        var canvas = Metamaps.Visualize.mGraph.canvas,
+            s = canvas.getSize(),
+            p = canvas.getPos(),
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY;
+        var coords = {
+            x: (pixels.x - p.x - s.width/2 - ox) * (1/sx),
+            y: (pixels.y - p.y - s.height/2 - oy) * (1/sy),
+        };
+        return coords;
+    },
     generateOptionsList: function (data) {
         var newlist = "";
         for (var i = 0; i < data.length; i++) {
@@ -1578,8 +1592,21 @@ Metamaps.Realtime = {
     
         var sendCoords = function (event, coords) {
             self.sendCoords(coords);
-        }
+        };
+        var zoom = function (event, e) {
+            if (e) {
+                var pixels = {
+                    x: e.pageX,
+                    y: e.pageY
+                };
+                var coords = Metamaps.Util.pixelsToCoords(pixels);
+                self.sendCoords(coords);
+            }
+            self.positionPeerIcons();
+        };
         $(document).on(Metamaps.JIT.events.mouseMove, sendCoords);
+        $(document).on(Metamaps.JIT.events.zoom, zoom);
+        $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);
     },
     sendRealtimeOn: function () {
         var self = Metamaps.Realtime;
@@ -1751,8 +1778,13 @@ Metamaps.Realtime = {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
 
-        for (var key in self.mappersOnMap) {
-            self.positionPeerIcon(key);
+        if (self.status) { // if i have realtime turned on
+            for (var key in self.mappersOnMap) {
+                var mapper = self.mappersOnMap[key];
+                if (mapper.realtime) {
+                    self.positionPeerIcon(key);
+                }
+            }
         }
     },
     positionPeerIcon: function (id) {
@@ -1783,8 +1815,13 @@ Metamaps.Realtime = {
                 transform: 'rotate(' + angle + 'rad)',
                 "-webkit-transform": 'rotate(' + angle + 'rad)',
             });
+            
+            if (dx > 0) {
+                $('#compass' + id).addClass('labelLeft');
+            }
         } else {
             $('#compassArrow' + id).hide();
+            $('#compass' + id).removeClass('labelLeft');
         }
     },
     limitPixelsToScreen: function (pixels) {

app/assets/stylesheets/application.css

@@ -2071,10 +2071,10 @@ float: left;
     display: none;
     background-color: #4fb5c0;
     color: #FFFFFF;
-    padding: 0 8px 0 8px; 
+    padding: 2px 8px 2px 8px; 
     position: absolute;
-    top: 9px;
-    left:30px;
+    top: 7px;
+    left:28px;
     z-index: 1;
     font-size: 14px;
     line-height: 14px;
@@ -2082,13 +2082,18 @@ float: left;
     border-bottom-right-radius: 2px;
     white-space: nowrap;
 }
+.collabCompass.labelLeft p {
+    left: auto;
+    right: 28px;
+}
 .collabCompass img {
     border-radius: 16px;
     border: 2px solid #4fb5c0;
     z-index: 2;
-
+    position: relative;
 }
 .compassArrow {
+    display: none;
     background-repeat: no-repeat;
     background-image: url(compass_arrow.png);
     width: 48px;