| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 14:58:29 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 15:09:41 -0700 |
| commit | 9c34e15c47cf3578adeff41693a62061a25fdcde (patch) | |
| tree | fed30aa9d385c5be893f5715791837583d480350 /src/modules/pan.js | |
| parent | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (diff) | |
Update implementation to account for WebKit bugv0.2.0
getScreenCTM() on WebKit does not reflect transformations applied to an ancestor (see bug https://bugs.webkit.org/show_bug.cgi?id=209220), so instead of transforming the root <svg> element, we can only transform a child element
Diffstat (limited to 'src/modules/pan.js')
| -rw-r--r-- | src/modules/pan.js | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/src/modules/pan.js b/src/modules/pan.js index 201c2f1..6f2cacf 100644 --- a/src/modules/pan.js +++ b/src/modules/pan.js @@ -2,13 +2,6 @@ import getComputedTransformMatrix from './utils.js'; const minDistanceThreshold = 5; -function setToCurrentPointerCoords(point, e) { - point.x = e.clientX; - point.y = e.clientY; - - return point; -} - function distanceBetween({ x: x1, y: y1 }, { x: x2, y: y2 }) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } @@ -27,35 +20,45 @@ function getTranslateMatrix(startPt, movePt) { return translateMatrix.translate(movePt.x - startPt.x, movePt.y - startPt.y); } -export default function (el, e) { +export default function (svg, el, e) { e.preventDefault(); const mtx = getComputedTransformMatrix(el), - startPt = new DOMPoint(e.clientX, e.clientY), - movePt = new DOMPoint(); + inverseScreenCTM = el.getScreenCTM().inverse(); - let isPanning = false; + let startPt = new DOMPoint(e.clientX, e.clientY), + movePt = new DOMPoint(), + isPanning = false; function pointerMove(e) { - setToCurrentPointerCoords(movePt, e); + movePt.x = e.clientX; + movePt.y = e.clientY; if (!isPanning && minDistanceThresholdIsMet(startPt, movePt)) { isPanning = true; e.target.setPointerCapture(e.pointerId); - setToCurrentPointerCoords(startPt, e); + + startPt.x = e.clientX; + startPt.y = e.clientY; + startPt = startPt.matrixTransform(inverseScreenCTM); + stopEventPropagationToChildren(el, 'click'); } if (isPanning) { - el.style.transform = getTranslateMatrix(startPt, movePt).multiply(mtx); + movePt.x = e.clientX; + movePt.y = e.clientY; + movePt = movePt.matrixTransform(inverseScreenCTM); + + el.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt)); } } - el.addEventListener('pointermove', pointerMove); + svg.addEventListener('pointermove', pointerMove); - el.addEventListener( + svg.addEventListener( 'pointerup', - () => el.removeEventListener('pointermove', pointerMove), + () => svg.removeEventListener('pointermove', pointerMove), { once: true } ); } |