X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=js%2Fmap.js;h=5c93ae5741dbf71885253461fbe3e7b6e2a4cd32;hp=41a413d7aa1481e1c6cdf41c9e75663c35d9afd3;hb=cef88e12438c01ca96198c62b32e7d3e99617625;hpb=df81068a623617335f324f8db12808f0c065e35e diff --git a/js/map.js b/js/map.js index 41a413d..5c93ae5 100644 --- a/js/map.js +++ b/js/map.js @@ -61,7 +61,7 @@ var gLoadingTile; var gMapPrefsLoaded = false; var gDragging = false; -var gDragTouchID; +var gDragTouchID, gPinchStartWidth; var gGeoWatchID; var gTrack = []; @@ -162,15 +162,30 @@ function loadPrefs(aEvent) { gAction.dispatchEvent(throwEv); }); gWaitCounter++; - gTrackStore.getList(function(aTPoints) { - if (gDebug) - console.log(aTPoints.length + " points loaded."); - if (aTPoints.length) { - gTrack = aTPoints; + var trackLoadStarted = false; + var redrawBase = 100; + gTrackStore.getListStepped(function(aTPoint) { + if (aTPoint) { + // Add in front and return new length. + var tracklen = gTrack.unshift(aTPoint); + // Redraw track periodically, larger distance the longer it gets. + // Initial paint will do initial track drawing. + if (tracklen % redrawBase == 0) { + drawTrack(); + redrawBase = tracklen; + } + } + else { + // Last point received. + drawTrack(); + } + if (!trackLoadStarted) { + // We have the most recent point, if present, rest will load async. + trackLoadStarted = true; + gWaitCounter--; + var throwEv = new CustomEvent("prefs-step"); + gAction.dispatchEvent(throwEv); } - gWaitCounter--; - var throwEv = new CustomEvent("prefs-step"); - gAction.dispatchEvent(throwEv); }); } } @@ -355,6 +370,10 @@ function drawMap(aPixels, aOverdraw) { } } } + drawTrack(); +} + +function drawTrack() { gLastDrawnPoint = null; gCurPosMapCache = undefined; gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height); @@ -467,6 +486,14 @@ var mapEvHandler = { case "mousedown": case "touchstart": if (touchEvent) { + if (aEvent.targetTouches.length == 2) { + gPinchStartWidth = Math.sqrt( + Math.pow(aEvent.targetTouches.item(1).clientX - + aEvent.targetTouches.item(0).clientX, 2) + + Math.pow(aEvent.targetTouches.item(1).clientY - + aEvent.targetTouches.item(0).clientY, 2) + ); + } gDragTouchID = aEvent.changedTouches.item(0).identifier; coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID); } @@ -482,6 +509,47 @@ var mapEvHandler = { break; case "mousemove": case "touchmove": + if (touchEvent && aEvent.targetTouches.length == 2) { + curPinchStartWidth = Math.sqrt( + Math.pow(aEvent.targetTouches.item(1).clientX - + aEvent.targetTouches.item(0).clientX, 2) + + Math.pow(aEvent.targetTouches.item(1).clientY - + aEvent.targetTouches.item(0).clientY, 2) + ); + if (!gPinchStartWidth) + gPinchStartWidth = curPinchStartWidth; + + if (gPinchStartWidth / curPinchStartWidth > 1.7 || + gPinchStartWidth / curPinchStartWidth < 0.6) { + var newZoomLevel = gPos.z + (gPinchStartWidth < curPinchStartWidth ? 1 : -1); + if ((newZoomLevel >= 0) && (newZoomLevel <= gMaxZoom)) { + // Calculate new center of the map - preserve middle of pinch. + // This means that pixel distance between old center and middle + // must equal pixel distance of new center and middle. + var x = (aEvent.targetTouches.item(1).clientX + + aEvent.targetTouches.item(0).clientX) / 2 - + gMapCanvas.offsetLeft; + var y = (aEvent.targetTouches.item(1).clientY + + aEvent.targetTouches.item(0).clientY) / 2 - + gMapCanvas.offsetTop; + + // Zoom factor after this action. + var newZoomFactor = Math.pow(2, gMaxZoom - newZoomLevel); + gPos.x -= (x - gMapCanvas.width / 2) * (newZoomFactor - gZoomFactor); + gPos.y -= (y - gMapCanvas.height / 2) * (newZoomFactor - gZoomFactor); + + if (gPinchStartWidth < curPinchStartWidth) + zoomIn(); + else + zoomOut(); + + // Reset pinch start width and start another pinch gesture. + gPinchStartWidth = null; + } + } + // If we are in a pinch, do not drag. + break; + } var x = coordObj.clientX - gMapCanvas.offsetLeft; var y = coordObj.clientY - gMapCanvas.offsetTop; if (gDragging === true) { @@ -510,6 +578,7 @@ var mapEvHandler = { break; case "mouseup": case "touchend": + gPinchStartWidth = null; gDragging = false; showUI(); break; @@ -756,7 +825,7 @@ function endTracking() { function clearTrack() { gTrack = []; gTrackStore.clear(); - drawMap({left: 0, right: 0, top: 0, bottom: 0}); + drawTrack(); } var gTileService = {