ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pan the map when clicked and dragged

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-28 10:32:17 -07:00
parent 86d1529f4c
commit a715a966f6
1 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.js
View File

@ -396,8 +396,8 @@ svg.addEventListener('wheel', e => {
let newY = e.deltaY < 0 ? y + yChange : y - yChange; let newY = e.deltaY < 0 ? y + yChange : y - yChange;
let newHeight = e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange; let newHeight = e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange;
console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y); // console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y);
console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT); // console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT);
// if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) { // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) {
// newWidth = VIEWBOX_WIDTH; // newWidth = VIEWBOX_WIDTH;
@ -419,4 +419,45 @@ svg.addEventListener('wheel', e => {
// newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
}, { passive: false }); console.log('viewbox after wheel', svg.viewBox.baseVal);
}, { passive: false });
svg.addEventListener('mousedown', e => {
const minPanDistanceThreshold = 5;
let dist, ctm,
pan = false,
{ x, y, width, height } = svg.viewBox.baseVal,
startPt = new DOMPoint(e.clientX, e.clientY),
movePt = new DOMPoint();
function mouseMove(e) {
movePt.x = e.clientX;
movePt.y = e.clientY;
dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
if (!pan && dist >= minPanDistanceThreshold) {
pan = true;
startPt.x = e.clientX;
startPt.y = e.clientY;
}
if (pan) {
ctm = svg.getScreenCTM().inverse();
const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
moveX = svgStartPt.x - svgMovePt.x + x,
moveY = svgStartPt.y - svgMovePt.y + y;
svg.setAttributeNS(null, 'viewBox', `${moveX} ${moveY} ${width} ${height}`);
}
}
function mouseUp() {
document.removeEventListener('mousemove', mouseMove);
svg.removeEventListener('mouseup', mouseUp);
}
document.addEventListener('mousemove', mouseMove);
svg.addEventListener('mouseup', mouseUp);
});