1.3.0 - css transform support

Author: henczi

projects/ng-magnizoom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-magnizoom",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Angular image magnifier (based on HTML canvas)",
   "repository": {
     "type": "git",

projects/ng-magnizoom/src/lib/magnizoom.component.ts

@@ -225,10 +225,37 @@ export class NgMagnizoomComponent implements OnInit, OnChanges {
 
   calculateMousePosition(clientX: number, clientY: number) {
     const boundingRect = this.canvas.getBoundingClientRect();
-    const viewToModelX = this.canvasWidth / boundingRect.width;
-    const viewToModelY = this.canvasHeight / boundingRect.height;
-    const x = (clientX - boundingRect.left) * viewToModelX;
-    const y = (clientY - boundingRect.top) * viewToModelY;
+
+    const boundingRectX = (clientX - boundingRect.left);
+    const boundingRectY = (clientY - boundingRect.top);
+
+    let elementX = boundingRectX, elementY = boundingRectY;
+    let elementWidth = boundingRect.width, elementHeight = boundingRect.height;
+
+    const computedStyle = window.getComputedStyle(this.canvas, null);
+    const domMatrix = new DOMMatrix(computedStyle.transform);
+    if (!domMatrix.isIdentity) {
+      const { a, b } = domMatrix;
+      const transformRot = Math.atan2(b, a);
+      const transformScale = Math.round( Math.sqrt(a * a + b * b) * 100 ) / 100;
+      if (transformRot) {
+        const boundingRectCenterX = boundingRect.width / 2;
+        const boundingRectCenterY = boundingRect.height / 2;
+        const dx = (boundingRectX - boundingRectCenterX);
+        const dy = (boundingRectY - boundingRectCenterY);
+        const d = Math.sqrt(dx * dx + dy * dy);
+        const r = Math.atan2(dy, dx);
+        elementWidth = this.canvas.clientWidth * transformScale;
+        elementHeight = this.canvas.clientHeight * transformScale;
+        elementX = (elementWidth / 2) + (d * Math.cos(r - transformRot));
+        elementY = (elementHeight / 2) + (d * Math.sin(r - transformRot));
+      }
+    }
+
+    const viewToModelX = this.canvasWidth / elementWidth;
+    const viewToModelY = this.canvasHeight / elementHeight;
+    const x = elementX * viewToModelX;
+    const y = elementY * viewToModelY;
     this._centerPosition = { x, y };
   }
 

src/app/app.component.html

@@ -4,7 +4,7 @@ <h1>Ng Magnizoom</h1>
 
 <h2>Mode</h2>
 <h3>Lens</h3>
-<ng-magnizoom zoomMode="LENS" imageSrc="{{imageSrc}}"></ng-magnizoom>
+<ng-magnizoom zoomMode="LENS" imageSrc="{{imageSrc}}" [imageStyle]="{  'transform-origin':'800px 200px', 'transform': 'scale(0.5) translate(100px, 200px) rotate(40deg)' }"></ng-magnizoom>
 <h3>Cover</h3>
 <ng-magnizoom zoomMode="COVER" imageSrc="{{imageSrc}}"></ng-magnizoom>