| 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 14:23:23 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-28 14:23:23 -0700 |
| commit | 6122d612d432ccbb9c2b34e4e7eadeb8a057e1fb (patch) | |
| tree | 7099cae2b5d1375ee7a4071948d43aca7325ca23 /index.js | |
| parent | a715a966f66e538ecef949e6de286cbf8617740f (diff) | |
Capture pointer when panning svg
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 19 |
1 files changed, 10 insertions, 9 deletions
@@ -419,10 +419,9 @@ svg.addEventListener('wheel', e => { // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); - console.log('viewbox after wheel', svg.viewBox.baseVal); -}, { passive: false }); +}); -svg.addEventListener('mousedown', e => { +svg.addEventListener('pointerdown', e => { const minPanDistanceThreshold = 5; let dist, ctm, @@ -431,7 +430,7 @@ svg.addEventListener('mousedown', e => { startPt = new DOMPoint(e.clientX, e.clientY), movePt = new DOMPoint(); - function mouseMove(e) { + function pointerMove(e) { movePt.x = e.clientX; movePt.y = e.clientY; dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2); @@ -443,6 +442,7 @@ svg.addEventListener('mousedown', e => { } if (pan) { + svg.setPointerCapture(e.pointerId); ctm = svg.getScreenCTM().inverse(); const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)), @@ -453,11 +453,12 @@ svg.addEventListener('mousedown', e => { } } - function mouseUp() { - document.removeEventListener('mousemove', mouseMove); - svg.removeEventListener('mouseup', mouseUp); + function pointerUp(e) { + svg.releasePointerCapture(e.pointerId); + svg.removeEventListener('pointermove', pointerMove); + svg.removeEventListener('pointerup', pointerUp); } - document.addEventListener('mousemove', mouseMove); - svg.addEventListener('mouseup', mouseUp); + svg.addEventListener('pointermove', pointerMove); + svg.addEventListener('pointerup', pointerUp); });
\ No newline at end of file |