feat: allow negative resizing of elements

src/resizable.directive.ts

@@ -310,6 +310,11 @@ export class ResizableDirective implements OnInit, OnDestroy {
    */
   @Input() ghostElementPositioning: 'fixed' | 'absolute' = 'fixed';
 
+  /**
+   * Allow elements to be resized to negative dimensions
+   */
+  @Input() allowNegativeResizes: boolean = false;
+
   /**
    * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
    */
@@ -569,11 +574,14 @@ export class ResizableDirective implements OnInit, OnDestroy {
       )
       .pipe(
         filter((newBoundingRect: BoundingRectangle) => {
-          return !!(
-            newBoundingRect.height &&
-            newBoundingRect.width &&
-            newBoundingRect.height > 0 &&
-            newBoundingRect.width > 0
+          return (
+            this.allowNegativeResizes ||
+            !!(
+              newBoundingRect.height &&
+              newBoundingRect.width &&
+              newBoundingRect.height > 0 &&
+              newBoundingRect.width > 0
+            )
           );
         })
       )

test/resizable.spec.ts

@@ -33,6 +33,7 @@ describe('resizable directive', () => {
         [resizeCursors]="resizeCursors"
         [resizeCursorPrecision]="resizeCursorPrecision"
         [ghostElementPositioning]="ghostElementPositioning"
+        [allowNegativeResizes]="allowNegativeResizes"
         (resizeStart)="resizeStart($event)"
         (resizing)="resizing($event)"
         (resizeEnd)="resizeEnd($event)">
@@ -58,6 +59,7 @@ describe('resizable directive', () => {
     resizeCursorPrecision: number;
     ghostElementPositioning: 'fixed' | 'absolute' = 'fixed';
     showResizeHandle = false;
+    allowNegativeResizes = false;
   }
 
   function triggerDomEvent(
@@ -887,7 +889,7 @@ describe('resizable directive', () => {
     expect(fixture.componentInstance.resizeEnd).not.to.have.been.called;
   });
 
-  it('should support drag handles to resize the element', () => {
+  it('should support resize handles to resize the element', () => {
     const template: string = `
       <div
         class="rectangle"
@@ -1445,4 +1447,74 @@ describe('resizable directive', () => {
       }
     });
   });
+
+  it('should not allow negative resizes', () => {
+    const fixture: ComponentFixture<TestComponent> = createComponent();
+    const elm: HTMLElement =
+      fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousedown', elm, {
+      clientX: 400,
+      clientY: 205
+    });
+    expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
+      edges: {
+        right: 0
+      },
+      rectangle: {
+        top: 200,
+        left: 100,
+        width: 300,
+        height: 150,
+        right: 400,
+        bottom: 350
+      }
+    });
+    triggerDomEvent('mousemove', elm, {
+      clientX: 50,
+      clientY: 205
+    });
+    expect(fixture.componentInstance.resizing).not.to.have.been.called;
+  });
+
+  it('should allow negative resizes', () => {
+    const fixture: ComponentFixture<TestComponent> = createComponent();
+    fixture.componentInstance.allowNegativeResizes = true;
+    fixture.detectChanges();
+    const elm: HTMLElement =
+      fixture.componentInstance.resizable.elm.nativeElement;
+    triggerDomEvent('mousedown', elm, {
+      clientX: 400,
+      clientY: 205
+    });
+    expect(fixture.componentInstance.resizeStart).to.have.been.calledWith({
+      edges: {
+        right: 0
+      },
+      rectangle: {
+        top: 200,
+        left: 100,
+        width: 300,
+        height: 150,
+        right: 400,
+        bottom: 350
+      }
+    });
+    triggerDomEvent('mousemove', elm, {
+      clientX: 50,
+      clientY: 205
+    });
+    expect(fixture.componentInstance.resizing).to.have.been.calledWith({
+      edges: {
+        right: -350
+      },
+      rectangle: {
+        top: 200,
+        left: 100,
+        width: -50,
+        height: 150,
+        right: 50,
+        bottom: 350
+      }
+    });
+  });
 });