fix: handle existing negative css transforms on resizable elements

Co-authored-by: Joseph Kiskaden <joseph.kiskaden@cyone.com>
mattlewis92 · Jul 24, 2020 · edf56db · edf56db
1 parent c9d4cd1
commit edf56db
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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 =