Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'src/modules/zoom.js')
-rw-r--r--src/modules/zoom.js43
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);
+ }
}