feat(module:resizable): add direction parameter in NzResizeEvent (#7987)

Co-authored-by: YuhengZhou <YuhengZhou@thoughtworks.com>

Author: yuhengzhouz

components/resizable/demo/basic.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizeDirection, NzResizeEvent } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-basic',
@@ -42,12 +42,14 @@ export class NzDemoResizableBasicComponent {
   height = 200;
   id = -1;
   disabled = false;
+  resizeDirection: NzResizeDirection | null = null;
 
-  onResize({ width, height }: NzResizeEvent): void {
+  onResize({ width, height, direction }: NzResizeEvent): void {
     cancelAnimationFrame(this.id);
     this.id = requestAnimationFrame(() => {
       this.width = width!;
       this.height = height!;
+      this.resizeDirection = direction!;
     });
   }
 }

components/resizable/doc/index.en-US.md

@@ -46,7 +46,8 @@ interface NzResizeEvent {
   width?: number;
   height?: number;
   col?: number;
-  mouseEvent?: MouseEvent
+  direction?: NzResizeDirection;
+  mouseEvent?: MouseEvent;
 }
 ```
 

components/resizable/doc/index.zh-CN.md

@@ -45,7 +45,8 @@ interface NzResizeEvent {
   width?: number;
   height?: number;
   col?: number;
-  mouseEvent?: MouseEvent
+  direction?: NzResizeDirection;
+  mouseEvent?: MouseEvent;
 }
 ```
 

components/resizable/resizable.directive.ts

@@ -24,13 +24,14 @@ import { ensureInBounds, InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { getEventWithPoint } from './resizable-utils';
 import { NzResizableService } from './resizable.service';
-import { NzResizeHandleMouseDownEvent } from './resize-handle.component';
+import { NzResizeDirection, NzResizeHandleMouseDownEvent } from './resize-handle.component';
 
 export interface NzResizeEvent {
   width?: number;
   height?: number;
   col?: number;
   mouseEvent?: MouseEvent | TouchEvent;
+  direction?: NzResizeDirection;
 }
 
 @Directive({
@@ -87,7 +88,7 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
       this.currentHandleEvent = event;
       this.setCursor();
       if (this.nzResizeStart.observers.length) {
-        this.ngZone.run(() => this.nzResizeStart.emit({ mouseEvent: event.mouseEvent }));
+        this.ngZone.run(() => this.nzResizeStart.emit({ mouseEvent: event.mouseEvent, direction: event.direction }));
       }
       this.elRect = this.el.getBoundingClientRect();
     });
@@ -250,7 +251,8 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
       this.ngZone.run(() => {
         this.nzResize.emit({
           ...size,
-          mouseEvent: event
+          mouseEvent: event,
+          direction: this.currentHandleEvent!.direction
         });
       });
     }
@@ -275,7 +277,8 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
       this.ngZone.run(() => {
         this.nzResizeEnd.emit({
           ...size,
-          mouseEvent: event
+          mouseEvent: event,
+          direction: this.currentHandleEvent!.direction
         });
       });
     }

components/resizable/resizable.spec.ts

@@ -159,6 +159,7 @@ describe('resizable', () => {
         fixture.detectChanges();
         expect(testComponent.height).toBeLessThanOrEqual(200);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('top');
       }));
 
       /**
@@ -184,6 +185,7 @@ describe('resizable', () => {
         fixture.detectChanges();
         expect(testComponent.height).toBeLessThanOrEqual(200);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('top');
       }));
 
       /**
@@ -209,6 +211,7 @@ describe('resizable', () => {
         fixture.detectChanges();
         expect(testComponent.height).toBeLessThanOrEqual(200);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('bottom');
       }));
 
       /**
@@ -234,6 +237,7 @@ describe('resizable', () => {
         fixture.detectChanges();
         expect(testComponent.width).toBeLessThanOrEqual(400);
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
+        expect(testComponent.resizeDirection).toEqual('left');
       }));
 
       /**
@@ -259,6 +263,7 @@ describe('resizable', () => {
         fixture.detectChanges();
         expect(testComponent.width).toBeLessThanOrEqual(400);
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
+        expect(testComponent.resizeDirection).toEqual('right');
       }));
 
       /**
@@ -286,6 +291,7 @@ describe('resizable', () => {
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
         expect(testComponent.height).toBeLessThanOrEqual(210);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('topRight');
       }));
 
       /**
@@ -313,6 +319,7 @@ describe('resizable', () => {
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
         expect(testComponent.height).toBeLessThanOrEqual(200);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('topLeft');
       }));
 
       /**
@@ -340,6 +347,7 @@ describe('resizable', () => {
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
         expect(testComponent.height).toBeLessThanOrEqual(190);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('bottomRight');
       }));
 
       /**
@@ -367,6 +375,7 @@ describe('resizable', () => {
         expect(testComponent.width).toBeGreaterThanOrEqual(300);
         expect(testComponent.height).toBeLessThanOrEqual(200);
         expect(testComponent.height).toBeGreaterThanOrEqual(100);
+        expect(testComponent.resizeDirection).toEqual('bottomLeft');
       }));
     });