fix: handle translate3d transforms on resizable elements

Closes #100
mattlewis92 · May 22, 2020 · 534bdf6 · 534bdf6
1 parent b706f8f
commit 534bdf6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -100,8 +100,8 @@ function getElementRect(
     .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');
+    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') {

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 with 3d property translate on the element', () => {
+    const fixture: ComponentFixture<TestComponent> = createComponent();
+    const elm: HTMLElement =
+      fixture.componentInstance.resizable.elm.nativeElement;
+    elm.style.transform = 'translate3d(10px, 20px, 0px)';
+    triggerDomEvent('mousedown', elm, {
+      clientX: 110,
+      clientY: 220
+    });
+    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 not allow negative resizes', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
     const elm: HTMLElement =