| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-28 10:32:17 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-28 12:04:53 -0700 |
| commit | a715a966f66e538ecef949e6de286cbf8617740f (patch) | |
| tree | ecef9720585f04fa1bd09695304e4e1266bde29e /index.js | |
| parent | 86d1529f4cd585baad978ec4034fb4c87f9a73af (diff) | |
Pan the map when clicked and dragged
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 47 |
1 files changed, 44 insertions, 3 deletions
@@ -396,8 +396,8 @@ svg.addEventListener('wheel', e => { let newY = e.deltaY < 0 ? y + yChange : y - yChange; let newHeight = e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange; - console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y); - console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT); + // console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y); + // console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT); // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) { // newWidth = VIEWBOX_WIDTH; @@ -419,4 +419,45 @@ svg.addEventListener('wheel', e => { // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); -}, { passive: false });
\ No newline at end of file + 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); +});
\ No newline at end of file |