From f24a7465e9acba893174be2ce02ab94f2fc48e8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Heikki=20Pitk=C3=A4nen?= <hejupitk@gmail.com>
Date: Tue, 26 Dec 2017 21:43:19 +0200
Subject: [PATCH] fix: resize elements that have css transforms

Fixes #72
---
 src/resizable.directive.ts | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
index 59b840b..c85e633 100644
--- a/src/resizable.directive.ts
+++ b/src/resizable.directive.ts
@@ -81,26 +81,35 @@ function getElementRect(
   element: ElementRef,
   ghostElementPositioning: string
 ): BoundingRectangle {
+
+  let translateX = 0;
+  let translateY = 0;
+  const style = element.nativeElement.style;
+  const transformProperties = ['transform', '-ms-transform', '-moz-transform', '-o-transform'];
+  const transform = transformProperties.map(property => style[property]).find(value => !!value);
+  if (transform && transform.includes('translate')) {
+    translateX = transform.replace(/.*translate\((.*)px, (.*)px\).*/, '$1');
+    translateY = transform.replace(/.*translate\((.*)px, (.*)px\).*/, '$2');
+  }
+
   if (ghostElementPositioning === 'absolute') {
     return {
       height: element.nativeElement.offsetHeight,
       width: element.nativeElement.offsetWidth,
-      top: element.nativeElement.offsetTop,
-      bottom:
-        element.nativeElement.offsetHeight + element.nativeElement.offsetTop,
-      left: element.nativeElement.offsetLeft,
-      right:
-        element.nativeElement.offsetWidth + element.nativeElement.offsetLeft
+      top: element.nativeElement.offsetTop - translateY,
+      bottom: element.nativeElement.offsetHeight + element.nativeElement.offsetTop - translateY,
+      left: element.nativeElement.offsetLeft - translateX,
+      right: element.nativeElement.offsetWidth + element.nativeElement.offsetLeft - translateX
     };
   } else {
     const boundingRect: BoundingRectangle = element.nativeElement.getBoundingClientRect();
     return {
       height: boundingRect.height,
       width: boundingRect.width,
-      top: boundingRect.top,
-      bottom: boundingRect.bottom,
-      left: boundingRect.left,
-      right: boundingRect.right,
+      top: boundingRect.top - translateY,
+      bottom: boundingRect.bottom - translateY,
+      left: boundingRect.left - translateX,
+      right: boundingRect.right - translateX,
       scrollTop: element.nativeElement.scrollTop,
       scrollLeft: element.nativeElement.scrollLeft
     };