m4xx1m/dv-community-map
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor and add touch navigation

Browse Source
This commit is contained in:
Pyro Nicampt committed 2024-12-31 13:10:40 -06:00
1 parent 9731c93ee5
commit 22122c2bd8
1 file changed
+115 -63
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+115 -63
View File
@@ -44,7 +44,12 @@ const scaleCullThresholds = [
// CODE // CODE
const map = document.getElementById('map'); const map = document.getElementById('map');
const map_container = document.getElementById('mapContainer'); const map_container = document.getElementById('mapContainer');
let map_container_rect = map_container.getBoundingClientRect();
const resizeObserver = new ResizeObserver(() => {map_container_rect = map_container.getBoundingClientRect();});
resizeObserver.observe(map_container);
const map_navigator = document.getElementById('mapNavigator'); const map_navigator = document.getElementById('mapNavigator');
const zoomLevelDisplay = document.getElementById('zoomLevelDisplay'); const zoomLevelDisplay = document.getElementById('zoomLevelDisplay');
const styleRoot = document.querySelector(':root'); const styleRoot = document.querySelector(':root');
@@ -73,7 +78,8 @@ let poiData = [];
let tracks = []; let tracks = [];
let markers = []; let markers = [];
let currentMapNav = {}; //let currentMapNav = {};
let mapNav = {};
let previousMapScale = -1; let previousMapScale = -1;
let MapMatrix = {}; let MapMatrix = {};
@@ -113,83 +119,127 @@ async function loadPoiData(file){
/** Handling for the map scrolling and zooming */ /** Handling for the map scrolling and zooming */
function mapScrollSetup(){ function mapScrollSetup(){
let mapNav = {x:currentMapNav.x, y:currentMapNav.y, scale:currentMapNav.scale}; const touchCache = [];
let prevMouse = {x:mapNav.x, y:mapNav.y, scale:mapNav.scale}; let touchCount = 0;
const mouseDownHandler = e => { let pinchDistance = null;
map_container.style.cursor = 'grabbing'; let previousScale = null;
prevMouse.x = e.clientX; const touchDownHandler = e => {
prevMouse.y = e.clientY; if(touchCache.length == 0){
map_container.style.cursor = 'grabbing';
document.addEventListener('pointermove', touchMoveHandler);
document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('pointerup', touchUpHandler);
document.addEventListener('mouseup', mouseUpHandler); document.addEventListener('pointercancel', touchUpHandler);
}; //document.addEventListener('pointerout', touchUpHandler);
const mouseMoveHandler = e => { document.addEventListener('pointerleave', touchUpHandler);
mapNav.x += prevMouse.x-e.clientX;
mapNav.y += prevMouse.y-e.clientY;
prevMouse.x = e.clientX;
prevMouse.y = e.clientY;
};
const mouseUpHandler = () => {
map_container.style.removeProperty('cursor');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
const zoomHandler = e => {
let rect = map_container.getBoundingClientRect();
let cursorLocal = {
x: -e.clientX - rect.left,
y: -e.clientY - rect.top
};
let scaleMult = 1;
if(e.deltaY < 0){
scaleMult = zoomFactor;
}else if(e.deltaY > 0){
scaleMult = 1/zoomFactor;
} }
mapNav.x = cursorLocal.x - scaleMult * (cursorLocal.x-mapNav.x); touchCache[e.pointerId] = {x:e.clientX, y:e.clientY};
mapNav.y = cursorLocal.y - scaleMult * (cursorLocal.y-mapNav.y); touchCount++;
mapNav.scale *= scaleMult; if(touchCount == 2){
}; pinchDistance = getTouchDistance();
previousScale = mapNav.scale;
let prevMapNav = {}; }
const navUpdate = () => { }
if(prevMapNav.x != currentMapNav.x || prevMapNav.y != currentMapNav.y || prevMapNav.scale != currentMapNav.scale){ const touchMoveHandler = e => {
updateMapview(mapNav); if(!touchCache[e.pointerId]) return;
prevMapNav.x = currentMapNav.x; if(touchCount == 1){
prevMapNav.y = currentMapNav.y; mapNav.x += e.clientX - touchCache[e.pointerId].x;
prevMapNav.scale = currentMapNav.scale; mapNav.y += e.clientY - touchCache[e.pointerId].y;
}else if(touchCount == 2){
getTouchAverage();
zoomAtPosition(touchCenter_x, touchCenter_y, (previousScale * getTouchDistance()/pinchDistance)/mapNav.scale);
}
touchCache[e.pointerId].x = e.clientX;
touchCache[e.pointerId].y = e.clientY;
}
const touchUpHandler = e => {
if(!touchCache[e.pointerId]) return;
touchCache[e.pointerId] = null;
touchCount--;
}
const scrollHandler = e => {
if(e.deltaY != 0) zoomAtPosition(e.clientX, e.clientY, e.deltaY > 0 ? 1/zoomFactor : zoomFactor);
}
const navUpdate = ts => {
if(ts){
updateMapview();
} }
requestAnimationFrame(navUpdate); requestAnimationFrame(navUpdate);
} }
map_container.addEventListener('mousedown', mouseDownHandler); let touchDist_aX = 0;
map_container.addEventListener('wheel', zoomHandler); let touchDist_aY = 0;
let touchDist_counter = 0;
const getTouchDistance = () => {
touchDist_counter = 0;
touchDist_aX = 0;
touchDist_aY = 0;
for(let touch of touchCache){
if(touchDist_counter == 0){
touchDist_aX += touch.x;
touchDist_aY += touch.y;
}else{
touchDist_aX -= touch.x;
touchDist_aY -= touch.y;
break;
}
touchDist_counter++;
}
return Math.sqrt(touchDist_aX*touchDist_aX + touchDist_aY*touchDist_aY);
};
let touchCenter_x = 0;
let touchCenter_y = 0;
let touchCenter_count = 0;
const getTouchAverage = () => {
touchCenter_x = 0;
touchCenter_y = 0;
touchCenter_count = 0;
for(let touch of touchCache){
touchCenter_x += touch.x;
touchCenter_y += touch.y;
touchCenter_count++;
}
touchCenter_x /= touchCenter_count;
touchCenter_y /= touchCenter_count;
}
let zoomCursorLocal_x = 0;
let zoomCursorLocal_y = 0;
const zoomAtPosition = (x, y, scaleFactor) => {
zoomCursorLocal_x = x - map_container_rect.left;
zoomCursorLocal_y = y - map_container_rect.top;
mapNav.x = zoomCursorLocal_x - scaleFactor * (zoomCursorLocal_x-mapNav.x);
mapNav.y = zoomCursorLocal_y - scaleFactor * (zoomCursorLocal_y-mapNav.y);
mapNav.scale *= scaleFactor;
}
map_container.addEventListener('pointerdown', touchDownHandler);
map_container.addEventListener('wheel', scrollHandler);
navUpdate(); navUpdate();
} }
/** Readjust map view to focus on position */ /** Readjust map view to focus on position */
function updateMapview(navData = {x:0, y:0, scale:1}){ function updateMapview(){
currentMapNav = navData; if(mapNav == null) return;
map_navigator.style.transform = `translate(${-navData.x}px, ${-navData.y}px) scale(${navData.scale})`; map_navigator.style.transform = `translate(${mapNav.x}px, ${mapNav.y}px) scale(${mapNav.scale})`;
if(navData.scale !== previousMapScale){ if(mapNav.scale !== previousMapScale){
zoomLevelDisplay.innerHTML = `Zoom: ${Math.round(navData.scale*100)/100}x`; zoomLevelDisplay.innerHTML = `Zoom: ${Math.round(mapNav.scale*100)/100}x`;
let dirtyScale = previousMapScale < 0; let dirtyScale = previousMapScale < 0;
for(const cullThreshold of scaleCullThresholds){ for(const cullThreshold of scaleCullThresholds){
if(dirtyScale || (previousMapScale < cullThreshold.scale && navData.scale > cullThreshold.scale) || (previousMapScale > cullThreshold.scale && navData.scale < cullThreshold.scale)){ if(dirtyScale || (previousMapScale < cullThreshold.scale && mapNav.scale > cullThreshold.scale) || (previousMapScale > cullThreshold.scale && mapNav.scale < cullThreshold.scale)){
dirtyScale = true; dirtyScale = true;
break; break;
} }
} }
map_rails.setAttribute('stroke-width', Utils.clamp(trackWidth.base/navData.scale, trackWidth.min, trackWidth.max)); map_rails.setAttribute('stroke-width', Utils.clamp(trackWidth.base/mapNav.scale, trackWidth.min, trackWidth.max));
styleRoot.style.setProperty('--markerScale', 1/navData.scale); styleRoot.style.setProperty('--markerScale', 1/mapNav.scale);
if(dirtyScale){ if(dirtyScale){
for(let i=0; i<scaleCullThresholds.length; i++){ for(let i=0; i<scaleCullThresholds.length; i++){
styleRoot.style.setProperty(`--minZoomCull_state_${i}`, navData.scale >= scaleCullThresholds[i].scale ? 'initial' : 'none'); styleRoot.style.setProperty(`--minZoomCull_state_${i}`, mapNav.scale >= scaleCullThresholds[i].scale ? 'initial' : 'none');
styleRoot.style.setProperty(`--maxZoomCull_state_${i}`, navData.scale <= scaleCullThresholds[i].scale ? 'initial' : 'none'); styleRoot.style.setProperty(`--maxZoomCull_state_${i}`, mapNav.scale <= scaleCullThresholds[i].scale ? 'initial' : 'none');
} }
} }
previousMapScale = navData.scale; previousMapScale = mapNav.scale;
} }
} }
@@ -228,11 +278,13 @@ function establishDimensions(){
} }
map.setAttribute('viewBox', `${minX-padding} ${minY-padding} ${width+2*padding} ${height+2*padding}`); map.setAttribute('viewBox', `${minX-padding} ${minY-padding} ${width+2*padding} ${height+2*padding}`);
map_markers.setAttribute('viewBox', map.getAttribute('viewBox')); map_markers.setAttribute('viewBox', map.getAttribute('viewBox'));
updateMapview({ let baseScale = Math.min(map_container.clientWidth/map.clientWidth, map_container.clientHeight/map.clientHeight);
x: map.clientWidth/2-map_container.clientWidth/2, mapNav = {
y: map.clientHeight/2-map_container.clientHeight/2, x: -map.clientWidth/2+map_container.clientWidth/2 / baseScale,
scale: 1 y: -map.clientHeight/2+map_container.clientHeight/2 / baseScale,
}); scale: baseScale
};
updateMapview();
console.log(`(${minX}, ${minY}) to (${maxX}, ${maxY}). Altitude from ${minAlt} to ${maxAlt}`); console.log(`(${minX}, ${minY}) to (${maxX}, ${maxY}). Altitude from ${minAlt} to ${maxAlt}`);
// Flip the z coordinate so the map doesn't display upside-down // Flip the z coordinate so the map doesn't display upside-down