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

Capture pointer when panning svg

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-28 14:23:23 -07:00
parent a715a966f6
commit 6122d612d4
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.js
View File

@ -419,10 +419,9 @@ 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}`);
console.log('viewbox after wheel', svg.viewBox.baseVal); });
}, { passive: false });
svg.addEventListener('mousedown', e => { svg.addEventListener('pointerdown', e => {
const minPanDistanceThreshold = 5; const minPanDistanceThreshold = 5;
let dist, ctm, let dist, ctm,
@ -431,7 +430,7 @@ svg.addEventListener('mousedown', e => {
startPt = new DOMPoint(e.clientX, e.clientY), startPt = new DOMPoint(e.clientX, e.clientY),
movePt = new DOMPoint(); movePt = new DOMPoint();
function mouseMove(e) { function pointerMove(e) {
movePt.x = e.clientX; movePt.x = e.clientX;
movePt.y = e.clientY; movePt.y = e.clientY;
dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2); dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
@ -443,6 +442,7 @@ svg.addEventListener('mousedown', e => {
} }
if (pan) { if (pan) {
svg.setPointerCapture(e.pointerId);
ctm = svg.getScreenCTM().inverse(); ctm = svg.getScreenCTM().inverse();
const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)), const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
@ -453,11 +453,12 @@ svg.addEventListener('mousedown', e => {
} }
} }
function mouseUp() { function pointerUp(e) {
document.removeEventListener('mousemove', mouseMove); svg.releasePointerCapture(e.pointerId);
svg.removeEventListener('mouseup', mouseUp); svg.removeEventListener('pointermove', pointerMove);
svg.removeEventListener('pointerup', pointerUp);
} }
document.addEventListener('mousemove', mouseMove); svg.addEventListener('pointermove', pointerMove);
svg.addEventListener('mouseup', mouseUp); svg.addEventListener('pointerup', pointerUp);
}); });