From edf56db43080a494606bbd12acf4cd9feb57f912 Mon Sep 17 00:00:00 2001
From: Joseph Kiskaden <joseph.kiskaden@gmail.com>
Date: Fri, 24 Jul 2020 07:32:03 -0400
Subject: [PATCH] fix: handle existing negative css transforms on resizable
 elements

Co-authored-by: Joseph Kiskaden <joseph.kiskaden@cyone.com>
---
 src/resizable.directive.ts | 12 +++++++++---
 test/resizable.spec.ts     | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
index ddebaca..6c66551 100644
--- a/src/resizable.directive.ts
+++ b/src/resizable.directive.ts
@@ -100,8 +100,14 @@ function getElementRect(
     .map(property => style[property])
     .find(value => !!value);
   if (transform && transform.includes('translate')) {
-    translateX = transform.replace(/.*translate3?d?\(([0-9]*)px, ([0-9]*)px.*/, '$1');
-    translateY = transform.replace(/.*translate3?d?\(([0-9]*)px, ([0-9]*)px.*/, '$2');
+    translateX = transform.replace(
+      /.*translate3?d?\((-?[0-9]*)px, (-?[0-9]*)px.*/,
+      '$1'
+    );
+    translateY = transform.replace(
+      /.*translate3?d?\((-?[0-9]*)px, (-?[0-9]*)px.*/,
+      '$2'
+    );
   }
 
   if (ghostElementPositioning === 'absolute') {
@@ -324,7 +330,7 @@ export class ResizableDirective implements OnInit, OnChanges, OnDestroy {
    * Allow elements to be resized to negative dimensions
    */
   @Input() allowNegativeResizes: boolean = false;
-  
+
   /**
    * The mouse move throttle in milliseconds, default: 50 ms
    */
diff --git a/test/resizable.spec.ts b/test/resizable.spec.ts
index 49422ae..45a292a 100644
--- a/test/resizable.spec.ts
+++ b/test/resizable.spec.ts
@@ -1444,6 +1444,31 @@ describe('resizable directive', () => {
     });
   });
 
+  it('should respect the css transform on the element with negative values', () => {
+    const fixture: ComponentFixture<TestComponent> = createComponent();
+    const elm: HTMLElement =
+      fixture.componentInstance.resizable.elm.nativeElement;
+    elm.style.transform = 'translate(-10px, -20px)';
+    triggerDomEvent('mousedown', elm, {
+      clientX: 90,
+      clientY: 180
+    });
+    expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
+      edges: {
+        left: 0,
+        top: 0
+      },
+      rectangle: {
+        top: 200,
+        left: 100,
+        width: 300,
+        height: 150,
+        right: 400,
+        bottom: 350
+      }
+    });
+  });
+
   it('should respect the css transform with 3d property translate on the element', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
     const elm: HTMLElement =