1 files changed, 17 insertions, 44 deletions
diff --git a/src/modules/zoom.js b/src/modules/zoom.js
index 834602b..1455cb4 100644
--- a/src/modules/zoom.js
+++ b/src/modules/zoom.js
@@ -1,67 +1,40 @@
-import getComputedTransformMatrix from './utils.js';
+import { default as getComputedTransformMatrix } from './utils';
 
 function zoomIn(deltaY) {
   return deltaY < 0;
 }
 
-function getScale(e, factor) {
+function getScale(deltaY, factor) {
   const outMult = 1 - factor;
   const inMult = 1 + factor / outMult
 
-  return zoomIn(e.deltaY) ? inMult : outMult;
+  return zoomIn(deltaY) ? inMult : outMult;
 }
 
-function getFocalPointBeforeTransform(el, e, 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,
-    y: pointer.y,
-    relativeToImageSize: {
-      x: (pointer.x - origin.x) / (terminus.x - origin.x),
-      y: (pointer.y - origin.y) / (terminus.y - origin.y)
-    }
-  };
-}
-
-function getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM) {
-  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,
-    y: origin.y + (terminus.y - origin.y) * relativeFocalPoint.y
-  };
-}
-
-function getTranslateMatrix(el, e, scaleMatrix) {
+function getTranslateMatrix(el, clientX, clientY) {
   const inverseScreenCTM = el.getScreenCTM().inverse();
-  const fpBeforeTrans = getFocalPointBeforeTransform(el, e, inverseScreenCTM);
+  const translateMtx = new DOMMatrix();
+  const pointer = new DOMPoint(clientX, clientY)
+  const { x, y } = pointer.matrixTransform(inverseScreenCTM);
 
-  el.style.transform = scaleMatrix;
+  return translateMtx.translate(x, y);
+}
 
-  const fpAfterTrans = getFocalPointAfterTransform(el, fpBeforeTrans, inverseScreenCTM);
-  const translateMatrix = new DOMMatrix();
+function setTransform(el, computedMtx, translateMtx, scale) {
+  const transformMtx =
+    computedMtx.multiply(translateMtx).scale(scale).multiply(translateMtx.inverse());
 
-  return translateMatrix.translate(
-    fpBeforeTrans.x - fpAfterTrans.x,
-    fpBeforeTrans.y - fpAfterTrans.y
-  );
+  el.style.transform = transformMtx;
 }
 
 export default function (el, factor = 0.1) {
   return e => {
     e.preventDefault();
 
-    const mtx = getComputedTransformMatrix(el);
-    const scale = getScale(e, factor);
-    const transMtx = getTranslateMatrix(el, e, mtx.scale(scale));
+    const computedMtx = getComputedTransformMatrix(el);
+    const scale = getScale(e.deltaY, factor);
+    const translateMtx = getTranslateMatrix(el, e.clientX, e.clientY);
 
-    el.style.transform = mtx.multiply(transMtx).scale(scale);
+    setTransform(el, computedMtx, translateMtx, scale);
   }
 }