feat(module:resizable): support for multiple cursor types (#8042)

components/resizable/demo/grid.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+import { NzResizeEvent, NzResizeHandleOption } from 'ng-zorro-antd/resizable';
 
 @Component({
   selector: 'nz-demo-resizable-grid',
@@ -16,7 +16,7 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
         [nzGridColumnCount]="24"
         [nzSpan]="col"
       >
-        <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
+        <nz-resize-handles [nzDirections]="directions"></nz-resize-handles>
         col-{{ col }}
       </div>
       <div class="col right" nz-col [nzSpan]="24 - col">col-{{ 24 - col }}</div>
@@ -44,6 +44,12 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
 export class NzDemoResizableGridComponent {
   col = 8;
   id = -1;
+  directions: NzResizeHandleOption[] = [
+    {
+      direction: 'right',
+      cursorType: 'grid'
+    }
+  ];
 
   onResize({ col }: NzResizeEvent): void {
     cancelAnimationFrame(this.id);

components/resizable/demo/layout.ts

@@ -15,7 +15,7 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
           [nzMaxWidth]="300"
           (nzResize)="onSideResize($event)"
         >
-          <nz-resize-handle nzDirection="right">
+          <nz-resize-handle nzDirection="right" nzCursorType="grid">
             <div class="sider-resize-line"></div>
           </nz-resize-handle>
           Sider
@@ -29,7 +29,7 @@ import { NzResizeEvent } from 'ng-zorro-antd/resizable';
             [nzMinHeight]="50"
             (nzResize)="onContentResize($event)"
           >
-            <nz-resize-handle nzDirection="bottom">
+            <nz-resize-handle nzDirection="bottom" nzCursorType="grid">
               <div class="content-resize-line"></div>
             </nz-resize-handle>
             Content 1

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

@@ -74,23 +74,28 @@ Define handles and directions.
 
 ```ts
 type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+type NzCursorType = 'window' | 'grid';
 ```
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | [nzDirection] | Set the direction of resizable | `NzResizeDirection` | `'bottomRight'` |
+| [nzCursorType] | Cursor type for handle | `NzCursorType` | `'window'` |
 
 ### nz-resize-handles
 
 Simpler way to define handles.
 
 ```ts
-const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = ['bottomRight', 'topRight', 'bottomLeft', 'topLeft', 'bottom', 'right', 'top', 'left'];
+interface NzResizeHandleOption {
+  direction: NzResizeDirection;
+  cursorType: NzCursorType;
+}
 ```
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| [nzDirections] | Allow directions of resizable | `NzResizeDirection[]` | `DEFAULT_RESIZE_DIRECTION` |
+| [nzDirections] | Allow handle directions or handle options | `(NzResizeDirection \| NzResizeHandleOption)[]` | ALL DIRECTIONS |
 
 ### Styling
 
@@ -109,3 +114,6 @@ The Component styles only contain the necessary positional properties and simple
     * `.nz-resizable-handle-topLeft`
     * `.nz-resizable-handle-bottomRight`
     * `.nz-resizable-handle-bottomLeft`
+- `.nz-resizable-handle-cursor-type` Cursor type namespace for handle
+    * `.nz-resizable-handle-cursor-type-window`
+    * `.nz-resizable-handle-cursor-type-grid`

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

@@ -73,23 +73,28 @@ interface NzResizeEvent {
 
 ```ts
 type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+type NzCursorType = 'window' | 'grid';
 ```
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | [nzDirection] | 调整方向 | `NzResizeDirection` | `'bottomRight'` |
+| [nzCursorType] | 手柄的光标类型 | `NzCursorType` | `'window'` |
 
 ### nz-resize-handles
 
 定义调整手柄的快捷组件。
 
 ```ts
-const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = ['bottomRight', 'topRight', 'bottomLeft', 'topLeft', 'bottom', 'right', 'top', 'left'];
+interface NzResizeHandleOption {
+  direction: NzResizeDirection;
+  cursorType: NzCursorType;
+}
 ```
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| [nzDirections] | 需要添加那些调整手柄的方向 | `NzResizeDirection[]` | `DEFAULT_RESIZE_DIRECTION` |
+| [nzDirections] | 需要的手柄方向或手柄选项 | `(NzResizeDirection \| NzResizeHandleOption)[]` | 所有方向 |
 
 ### 样式
 
@@ -108,3 +113,6 @@ const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = ['bottomRight', 'topRight'
     * `.nz-resizable-handle-topLeft`
     * `.nz-resizable-handle-bottomRight`
     * `.nz-resizable-handle-bottomLeft`
+- `.nz-resizable-handle-cursor-type` 手柄的光标类型命名空间
+    * `.nz-resizable-handle-cursor-type-window`
+    * `.nz-resizable-handle-cursor-type-grid`

components/resizable/resizable.directive.ts

@@ -86,7 +86,6 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
       this.resizing = true;
       this.nzResizableService.startResizing(event.mouseEvent);
       this.currentHandleEvent = event;
-      this.setCursor();
       if (this.nzResizeStart.observers.length) {
         this.ngZone.run(() => this.nzResizeStart.emit({ mouseEvent: event.mouseEvent, direction: event.direction }));
       }
@@ -185,28 +184,6 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
     };
   }
 
-  setCursor(): void {
-    switch (this.currentHandleEvent!.direction) {
-      case 'left':
-      case 'right':
-        this.renderer.setStyle(document.body, 'cursor', 'ew-resize');
-        break;
-      case 'top':
-      case 'bottom':
-        this.renderer.setStyle(document.body, 'cursor', 'ns-resize');
-        break;
-      case 'topLeft':
-      case 'bottomRight':
-        this.renderer.setStyle(document.body, 'cursor', 'nwse-resize');
-        break;
-      case 'topRight':
-      case 'bottomLeft':
-        this.renderer.setStyle(document.body, 'cursor', 'nesw-resize');
-        break;
-    }
-    this.renderer.setStyle(document.body, 'user-select', 'none');
-  }
-
   resize(event: MouseEvent | TouchEvent): void {
     const elRect = this.elRect;
     const resizeEvent = getEventWithPoint(event);
@@ -262,8 +239,6 @@ export class NzResizableDirective implements AfterViewInit, OnDestroy {
   }
 
   endResize(event: MouseEvent | TouchEvent): void {
-    this.renderer.setStyle(document.body, 'cursor', '');
-    this.renderer.setStyle(document.body, 'user-select', '');
     this.removeGhostElement();
     const size = this.sizeCache
       ? { ...this.sizeCache }

components/resizable/resizable.spec.ts

@@ -580,6 +580,20 @@ describe('resizable', () => {
       fixture.detectChanges();
       expect(testComponent.col).toBe(20);
     }));
+
+    it('should cursor type work', () => {
+      expect(resizableEle.querySelector('.nz-resizable-handle-cursor-type-window')).toBeFalsy();
+      expect(resizableEle.querySelector('.nz-resizable-handle-cursor-type-grid')).toBeTruthy();
+      testComponent.directions = [
+        {
+          direction: 'right',
+          cursorType: 'window'
+        }
+      ];
+      fixture.detectChanges();
+      expect(resizableEle.querySelector('.nz-resizable-handle-cursor-type-window')).toBeTruthy();
+      expect(resizableEle.querySelector('.nz-resizable-handle-cursor-type-grid')).toBeFalsy();
+    });
   });
 
   describe('bounds', () => {

components/resizable/resize-handle.component.ts

@@ -9,6 +9,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  HostListener,
   Input,
   NgZone,
   OnInit,
@@ -22,6 +23,8 @@ import { NzDestroyService } from 'ng-zorro-antd/core/services';
 
 import { NzResizableService } from './resizable.service';
 
+export type NzCursorType = 'window' | 'grid';
+
 export type NzResizeDirection =
   | 'top'
   | 'right'
@@ -52,12 +55,15 @@ const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveLis
     '[class.nz-resizable-handle-topRight]': `nzDirection === 'topRight'`,
     '[class.nz-resizable-handle-bottomRight]': `nzDirection === 'bottomRight'`,
     '[class.nz-resizable-handle-bottomLeft]': `nzDirection === 'bottomLeft'`,
-    '[class.nz-resizable-handle-topLeft]': `nzDirection === 'topLeft'`
+    '[class.nz-resizable-handle-topLeft]': `nzDirection === 'topLeft'`,
+    '[class.nz-resizable-handle-cursor-type-grid]': `nzCursorType === 'grid'`,
+    '[class.nz-resizable-handle-cursor-type-window]': `nzCursorType === 'window'`
   },
   providers: [NzDestroyService]
 })
 export class NzResizeHandleComponent implements OnInit {
   @Input() nzDirection: NzResizeDirection = 'bottomRight';
+  @Input() nzCursorType: NzCursorType = 'window';
   @Output() readonly nzMouseDown = new EventEmitter<NzResizeHandleMouseDownEvent>();
 
   constructor(
@@ -93,4 +99,14 @@ export class NzResizeHandleComponent implements OnInit {
         });
     });
   }
+
+  @HostListener('pointerdown', ['$event'])
+  onPointerDown(event: PointerEvent): void {
+    this.host.nativeElement.setPointerCapture(event.pointerId);
+  }
+
+  @HostListener('pointerup', ['$event'])
+  onPointerUp(event: PointerEvent): void {
+    this.host.nativeElement.releasePointerCapture(event.pointerId);
+  }
 }

components/resizable/resize-handles.component.ts

@@ -5,7 +5,7 @@
 
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
-import { NzResizeDirection } from './resize-handle.component';
+import { NzCursorType, NzResizeDirection } from './resize-handle.component';
 
 export const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = [
   'bottomRight',
@@ -18,19 +18,44 @@ export const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = [
   'left'
 ];
 
+export interface NzResizeHandleOption {
+  direction: NzResizeDirection;
+  cursorType: NzCursorType;
+}
+
+function normalizeResizeHandleOptions(value: Array<NzResizeDirection | NzResizeHandleOption>): NzResizeHandleOption[] {
+  return value.map(val => {
+    if (typeof val === 'string') {
+      return {
+        direction: val,
+        cursorType: 'window'
+      };
+    }
+
+    return val;
+  });
+}
+
 @Component({
   selector: 'nz-resize-handles',
   exportAs: 'nzResizeHandles',
-  template: ` <nz-resize-handle *ngFor="let dir of directions" [nzDirection]="dir"></nz-resize-handle> `,
+  template: `
+    <nz-resize-handle
+      *ngFor="let option of resizeHandleOptions"
+      [nzDirection]="option.direction"
+      [nzCursorType]="option.cursorType"
+    ></nz-resize-handle>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzResizeHandlesComponent implements OnChanges {
-  @Input() nzDirections: NzResizeDirection[] = DEFAULT_RESIZE_DIRECTION;
-  directions = new Set<NzResizeDirection>(this.nzDirections);
+  @Input() nzDirections: Array<NzResizeDirection | NzResizeHandleOption> = DEFAULT_RESIZE_DIRECTION;
+
+  resizeHandleOptions = normalizeResizeHandleOptions(this.nzDirections);
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.nzDirections) {
-      this.directions = new Set(changes.nzDirections.currentValue);
+      this.resizeHandleOptions = normalizeResizeHandleOptions(changes.nzDirections.currentValue);
     }
   }
 }