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 // END METAMAPS CODE
// ORIGINAL CODE this.canvas.scale(ans, ans); // 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) { onMouseDown: function(e, win, eventInfo) {
@ -2553,6 +2558,10 @@ Extras.Classes.Navigation = new Class({
this.pos = currentPos; this.pos = currentPos;
this.canvas.translate(x * 1/sx, y * 1/sy); 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) { onMouseUp: function(e, win, eventInfo, isRightClick) {

View file

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

View file

@ -1409,6 +1409,20 @@ Metamaps.Util = {
}; };
return pixels; 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) { generateOptionsList: function (data) {
var newlist = ""; var newlist = "";
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
@ -1578,8 +1592,21 @@ Metamaps.Realtime = {
var sendCoords = function (event, coords) { var sendCoords = function (event, coords) {
self.sendCoords(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.mouseMove, sendCoords);
$(document).on(Metamaps.JIT.events.zoom, zoom);
$(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);
}, },
sendRealtimeOn: function () { sendRealtimeOn: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -1751,9 +1778,14 @@ Metamaps.Realtime = {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var socket = Metamaps.Realtime.socket; var socket = Metamaps.Realtime.socket;
if (self.status) { // if i have realtime turned on
for (var key in self.mappersOnMap) { for (var key in self.mappersOnMap) {
var mapper = self.mappersOnMap[key];
if (mapper.realtime) {
self.positionPeerIcon(key); self.positionPeerIcon(key);
} }
}
}
}, },
positionPeerIcon: function (id) { positionPeerIcon: function (id) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -1783,8 +1815,13 @@ Metamaps.Realtime = {
transform: 'rotate(' + angle + 'rad)', transform: 'rotate(' + angle + 'rad)',
"-webkit-transform": 'rotate(' + angle + 'rad)', "-webkit-transform": 'rotate(' + angle + 'rad)',
}); });
if (dx > 0) {
$('#compass' + id).addClass('labelLeft');
}
} else { } else {
$('#compassArrow' + id).hide(); $('#compassArrow' + id).hide();
$('#compass' + id).removeClass('labelLeft');
} }
}, },
limitPixelsToScreen: function (pixels) { limitPixelsToScreen: function (pixels) {

View file

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