From 6122d612d432ccbb9c2b34e4e7eadeb8a057e1fb Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 28 Mar 2024 14:23:23 -0700
Subject: Capture pointer when panning svg
---
index.js | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/index.js b/index.js
index fe9b23f..1289035 100644
--- a/index.js
+++ b/index.js
@@ -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
--
cgit v1.2.3