| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 12:14:35 -0800 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 12:17:28 -0800 |
| commit | ffdf173cda784db9f02b0c6d27aa4d67718abe32 (patch) | |
| tree | f656d1247ea4d40c00e05148f162aa5c625f3b51 /src/modules/zoom.js | |
| parent | ad69b0011adcd5f7f4ed4ff99f1accc84747da9c (diff) | |
Add function for panning programmatically
Diffstat (limited to 'src/modules/zoom.js')
| -rw-r--r-- | src/modules/zoom.js | 43 |
1 files changed, 24 insertions, 19 deletions
diff --git a/src/modules/zoom.js b/src/modules/zoom.js index fc0540b..834602b 100644 --- a/src/modules/zoom.js +++ b/src/modules/zoom.js @@ -5,14 +5,17 @@ function zoomIn(deltaY) { } function getScale(e, factor) { - return zoomIn(e.deltaY) ? 1 + factor : 1 - factor; + const outMult = 1 - factor; + const inMult = 1 + factor / outMult + + return zoomIn(e.deltaY) ? inMult : outMult; } function getFocalPointBeforeTransform(el, e, inverseScreenCTM) { - const { x, y, width, height } = el.getBoundingClientRect(), - pointer = (new DOMPoint(e.clientX, e.clientY)).matrixTransform(inverseScreenCTM), - origin = (new DOMPoint(x, y)).matrixTransform(inverseScreenCTM), - terminus = (new DOMPoint(x + width, y + height)).matrixTransform(inverseScreenCTM); + const { x, y, width, height } = el.getBoundingClientRect(); + const pointer = (new DOMPoint(e.clientX, e.clientY)).matrixTransform(inverseScreenCTM); + const origin = (new DOMPoint(x, y)).matrixTransform(inverseScreenCTM); + const terminus = (new DOMPoint(x + width, y + height)).matrixTransform(inverseScreenCTM); return { x: pointer.x, @@ -25,10 +28,10 @@ function getFocalPointBeforeTransform(el, e, inverseScreenCTM) { } function getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM) { - const { x, y, width, height } = el.getBoundingClientRect(), - origin = (new DOMPoint(x, y)).matrixTransform(inverseScreenCTM), - terminus = (new DOMPoint(x + width, y + height)).matrixTransform(inverseScreenCTM), - relativeFocalPoint = fpBeforeTrans.relativeToImageSize; + const { x, y, width, height } = el.getBoundingClientRect(); + const origin = (new DOMPoint(x, y)).matrixTransform(inverseScreenCTM); + const terminus = (new DOMPoint(x + width, y + height)).matrixTransform(inverseScreenCTM); + const relativeFocalPoint = fpBeforeTrans.relativeToImageSize; return { x: origin.x + (terminus.x - origin.x) * relativeFocalPoint.x, @@ -37,13 +40,13 @@ function getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM) { } function getTranslateMatrix(el, e, scaleMatrix) { - const inverseScreenCTM = el.getScreenCTM().inverse(), - fpBeforeTrans = getFocalPointBeforeTransform(el, e, inverseScreenCTM); + const inverseScreenCTM = el.getScreenCTM().inverse(); + const fpBeforeTrans = getFocalPointBeforeTransform(el, e, inverseScreenCTM); el.style.transform = scaleMatrix; - const fpAfterTrans = getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM), - translateMatrix = new DOMMatrix(); + const fpAfterTrans = getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM); + const translateMatrix = new DOMMatrix(); return translateMatrix.translate( fpBeforeTrans.x - fpAfterTrans.x, @@ -51,12 +54,14 @@ function getTranslateMatrix(el, e, scaleMatrix) { ); } -export default function (el, e, factor = 0.1) { - e.preventDefault(); +export default function (el, factor = 0.1) { + return e => { + e.preventDefault(); - const mtx = getComputedTransformMatrix(el), - scale = getScale(e, factor), - transMtx = getTranslateMatrix(el, e, mtx.scale(scale)); + const mtx = getComputedTransformMatrix(el); + const scale = getScale(e, factor); + const transMtx = getTranslateMatrix(el, e, mtx.scale(scale)); - el.style.transform = mtx.multiply(transMtx).scale(scale); + el.style.transform = mtx.multiply(transMtx).scale(scale); + } } |