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

This commit is contained in:
Shai Mor 2014-09-24 16:25:22 -04:00
parent 74b4659836
commit 4ec9c4cb98
4 changed files with 68 additions and 12 deletions

View file

@ -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) {

View file

@ -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]);
}
};

View file

@ -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) {

View file

@ -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;