| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-17 09:57:58 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-17 09:58:10 -0700 |
| commit | 99d137cc0937c0342fc1076eafe609c8aa370087 (patch) | |
| tree | 6337d50a36ac033169c2217047e23fe786806940 /src/modules/pan.js | |
| parent | f0b5c1a511ba794609178e5f08e7c8f8c2ec1723 (diff) | |
https://stackoverflow.com/questions/38446666/scaling-around-a-specific-point-in-2d-coordinate-system
Diffstat (limited to 'src/modules/pan.js')
| -rw-r--r-- | src/modules/pan.js | 29 |
1 files changed, 16 insertions, 13 deletions
diff --git a/src/modules/pan.js b/src/modules/pan.js index 4e6485c..bf842bd 100644 --- a/src/modules/pan.js +++ b/src/modules/pan.js @@ -1,4 +1,4 @@ -import getComputedTransformMatrix from './utils.js'; +import { default as getComputedTransformMatrix } from './utils'; const minDistanceThreshold = 5; @@ -31,23 +31,26 @@ function getTransformMatrices(el) { }; } -function clientToSvgPt({ clientX, clientY }, { inverseScreen }, pt = new DOMPoint()) { - pt.x = clientX; - pt.y = clientY; - return pt.matrixTransform(inverseScreen); +function clientToSvgPt(e, inverseScreenMtx, pt = new DOMPoint()) { + pt.x = e.clientX; + pt.y = e.clientY; + return pt.matrixTransform(inverseScreenMtx); } -function setPanTransform(el, { computed }, startPt, endPt) { - el.style.transform = computed.multiply(getTranslateMatrix(startPt, endPt)); +function setTransform(el, computedMtx, startPt, endPt) { + const translateMtx = getTranslateMatrix(startPt, endPt); + const transformMtx = computedMtx.multiply(translateMtx); + + el.style.transform = transformMtx; } export function programmaticPan(el, from, to) { const matrices = getTransformMatrices(el); - const startPt = clientToSvgPt(from, matrices); - const endPt = clientToSvgPt(to, matrices); + const startPt = clientToSvgPt(from, matrices.inverseScreen); + const endPt = clientToSvgPt(to, matrices.inverseScreen); el.style.transition = 'transform 0.5s'; - setPanTransform(el, matrices, startPt, endPt); + setTransform(el, matrices.computed, startPt, endPt); el.addEventListener('transitionend', () => el.style.transition = '', { once: true }); } @@ -60,13 +63,13 @@ export default function (el) { if (!isPanning && exceedsMinDistanceThreshhold(startPt, movePt)) { isPanning = true; - startPt = clientToSvgPt(e, matrices, startPt); + startPt = clientToSvgPt(e, matrices.inverseScreen, startPt); stopEventPropagationToChildren(el, 'click'); } if (isPanning) { - movePt = clientToSvgPt(e, matrices, movePt); - setPanTransform(el, matrices, startPt, movePt); + movePt = clientToSvgPt(e, matrices.inverseScreen, movePt); + setTransform(el, matrices.computed, startPt, movePt); } } |