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

HyperLife1119 · 2023-08-02T07:38:37Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

codecov · 2023-08-02T07:45:09Z

Codecov Report

Merging #8042 (6637357) into master (fa0312a) will decrease coverage by 0.02%.
The diff coverage is 71.42%.

❗ Current head 6637357 differs from pull request most recent head 084109d. Consider uploading reports for the commit 084109d to get more accurate results

@@            Coverage Diff             @@
##           master    #8042      +/-   ##
==========================================
- Coverage   91.64%   91.63%   -0.02%     
==========================================
  Files         515      515              
  Lines       17640    17637       -3     
  Branches     2790     2790              
==========================================
- Hits        16167    16161       -6     
- Misses       1175     1178       +3     
  Partials      298      298

Files Changed	Coverage Δ
components/resizable/resizable.directive.ts	`94.90% <ø> (-0.42%)`	⬇️
components/resizable/resize-handle.component.ts	`84.00% <20.00%> (-16.00%)`	⬇️
components/resizable/demo/grid.ts	`100.00% <100.00%> (ø)`
components/resizable/resize-handles.component.ts	`100.00% <100.00%> (ø)`

... and 1 file with indirect coverage changes

hsuanxyz · 2023-08-02T07:52:15Z

The cursor is the same as the window resize cursor. for this change, I think it should only apply when the cursor is at the edge of the resizeable box. like [Grid] and [Layout] in the demos.

HyperLife1119 · 2023-08-02T08:40:49Z

我们可以为 nz-resizable 增加一个 input 用于指示当前的 resize 场景吗：

type NzScene = 'window' | 'layout';

<nz-resizable nzScene="layout"></nz-resizable>

layout 表示当前 resize 场景为布局型的，光标将使用 row/col-resize，
window 表示当前 resize 场景为窗口型的，光标将使用 window resize cursor

让我知道你的想法 :)

hsuanxyz · 2023-08-02T09:09:50Z

我觉得可以直接叫 nzCursorType: "grid" | "window" ，功能自身没有 Scene 那么宽的职责。另外可以再把 css 选择器更新到文档末尾，就像 ".nz-resizable-handle-cursor-type-grid .nz-resizable-handle-cursor-type-window"，方便用户覆盖样式

components/resizable/resizable.directive.ts

hsuanxyz · 2023-08-03T03:33:49Z

components/resizable/resize-handle.component.ts

@@ -93,4 +103,18 @@ export class NzResizeHandleComponent implements OnInit {
        });
    });
  }
+
+  @HostListener('pointerdown')


为什么我们不用 mousedown

PointerEvent 同时支持 mouse/touch 等多种指针事件

那也许我们可以试试 Element.setPointerCapture() 这样就不用 getComputedStyle 了

可以的，我在 Chrome/Firefox for Mac 下测试，使用 Element.setPointerCapture()，我们甚至不需要为 doc.body 设置 user-select: none 样式，也不再需要 :not(.@{resizable-prefix-cls}-resizing) 条件选择器

@HyperLife1119 这里会导致 nz-resize-handle 中的子组件的 onClick 事件被吞掉，需要多次点击才能触发
https://stackblitz.com/edit/angular-41b5ra?file=src%2Fapp%2Fapp.component.ts

HyperLife1119 · 2023-08-03T04:50:10Z

components/resizable/resize-handle.component.ts

  },
  providers: [NzDestroyService]
 })
 export class NzResizeHandleComponent implements OnInit {
  @Input() nzDirection: NzResizeDirection = 'bottomRight';
  @Output() readonly nzMouseDown = new EventEmitter<NzResizeHandleMouseDownEvent>();

+  protected readonly resizableDirective = inject(NzResizableDirective);


由于 nz-resize-handle 和 nz-resize-handles 都是 OnPush 的，只有在它们的 Inputs 发生变化时才会进行变更检测，这将导致 nz-resize-handle 无法响应 [nz-resizable] 指令的 nzCursorType 变更。

一些可能的解决办法：

将 nz-resize-handle 和 nz-resize-handles 组件调整为 ChangeDetectionStrategy.Default。
我认为这不会引起太大的性能问题，因为它们的父组件（[nz-resizable]）是 OnPush 的，也就是说，它们的变更检测时机将受限于父组件：只有当父组件进行变更检测后，子组件才有机会进行变更检测

为 nz-resize-handle 和 nz-resize-handles 组件添加 nzCurosrType input，逐层传递

使用 ngDoCheck，在 nz-resize-handle 组件内部实现自定义变更检测策略

我更倾向于使用第一种方式或第三种办法，你认为呢？

Input 放 nz-resize-handle[nzCursorType] 上呢，比如四周用 window 中间用 grid

那这样 nz-resize-handles 就得支持传递 8 个方向的 nzCursorType 了，这可能需要重构 nz-resize-handles[nzDirections] input 的类型，或新增另一个 input

改 nzDirections 的类型吧，这样实现也简单点，一路传下去就行了

hsuanxyz

LGTM

HyperLife1119 requested a review from hsuanxyz as a code owner August 2, 2023 07:38

HyperLife1119 force-pushed the feat/resizable-cursor branch from 32149be to 0560b5d Compare August 2, 2023 11:03

HyperLife1119 changed the title ~~feat(module:resizable): better horizontal/vertical drag cursor~~ feat(module:resizable): support for modifying the cursor type Aug 2, 2023

HyperLife1119 force-pushed the feat/resizable-cursor branch from 0560b5d to d011a5f Compare August 2, 2023 11:09

hsuanxyz reviewed Aug 2, 2023

View reviewed changes

components/resizable/resizable.directive.ts Outdated Show resolved Hide resolved

hsuanxyz reviewed Aug 3, 2023

View reviewed changes

HyperLife1119 force-pushed the feat/resizable-cursor branch from d3145e3 to 4590480 Compare August 3, 2023 04:22

HyperLife1119 commented Aug 3, 2023

View reviewed changes

HyperLife1119 force-pushed the feat/resizable-cursor branch from 4590480 to cb9ba50 Compare August 5, 2023 16:05

HyperLife1119 changed the title ~~feat(module:resizable): support for modifying the cursor type~~ feat(module:resizable): support for multiple cursor types Aug 5, 2023

HyperLife1119 force-pushed the feat/resizable-cursor branch from cb9ba50 to 619afa5 Compare August 5, 2023 16:20

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

084109d

HyperLife1119 force-pushed the feat/resizable-cursor branch from 619afa5 to 084109d Compare August 5, 2023 16:22

HyperLife1119 requested a review from hsuanxyz August 5, 2023 16:48

hsuanxyz approved these changes Aug 7, 2023

View reviewed changes

hsuanxyz added the PR: target-minor label Aug 7, 2023

OriginRing added the PR: reviewed-approved label Aug 8, 2023

simplejason merged commit e564714 into NG-ZORRO:master Sep 18, 2023

HyperLife1119 mentioned this pull request Nov 18, 2023

fix(module:resizable): fix pointer capture bug #8169

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

HyperLife1119 commented Aug 2, 2023 •

edited

Loading

codecov bot commented Aug 2, 2023 •

edited

Loading

hsuanxyz commented Aug 2, 2023 •

edited

Loading

HyperLife1119 commented Aug 2, 2023 •

edited

Loading

hsuanxyz commented Aug 2, 2023

hsuanxyz Aug 3, 2023

HyperLife1119 Aug 3, 2023

hsuanxyz Aug 3, 2023

HyperLife1119 Aug 3, 2023

Laffery Nov 2, 2023

HyperLife1119 Aug 3, 2023 •

edited

Loading

hsuanxyz Aug 3, 2023

HyperLife1119 Aug 3, 2023

hsuanxyz Aug 3, 2023

hsuanxyz left a comment

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

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

Conversation

HyperLife1119 commented Aug 2, 2023 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

codecov bot commented Aug 2, 2023 • edited Loading

Codecov Report

hsuanxyz commented Aug 2, 2023 • edited Loading

HyperLife1119 commented Aug 2, 2023 • edited Loading

hsuanxyz commented Aug 2, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyperLife1119 Aug 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hsuanxyz left a comment

Choose a reason for hiding this comment

HyperLife1119 commented Aug 2, 2023 •

edited

Loading

codecov bot commented Aug 2, 2023 •

edited

Loading

hsuanxyz commented Aug 2, 2023 •

edited

Loading

HyperLife1119 commented Aug 2, 2023 •

edited

Loading

HyperLife1119 Aug 3, 2023 •

edited

Loading