Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.js19
1 files 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