angular / angular/components

Define a bounding box for overlay other than documentElement

オープン
#15,894 コメント 4 件 リアクション 8 件 担当者 0 名 GitHub で見る
area: cdk/overlay feature P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Please describe the feature you would like to request.
I would like the ability to define a bounding area where the tooltip is constrained to. Currently, the overlay bounding box is set to top: 0px; left: 0px; height: 100%; width: 100% but I would like to define these programmatically or pass an element ref to use as a template for the bounding box calculation. I know I can add a class to the overlay to change this but it has to be dynamic and respond to resizing an element whose size represents what the overlay bounds should be.

#### What is the use-case or motivation for this proposal?
The app has a requirement to restrict the tooltip location over a certain area and not allow it to overflow over surrounding elements. For example, using a tooltip to provide more detail over a chart cursor but the tooltip should be constrained to just the chart area.

This isn't the exact scenario but you can see the tooltip overflows the mat-card area here. I want to be able to push the tooltip into the mat-card area.
https://stackblitz.com/edit/angular6-material-components-demo-overlay-container

#### Is there anything else we should know?
Angular 7.2.4
Material 7.2.1

In FlexibleConnectedPositionStrategy, perhaps there could be an optional sizingEl property to use other than the documentElement. I haven't been able to test this since it's not extendable.

```
withSizingElement(sizingElement: HTMLElement): this {
this._sizingEl = sizingElement;
return this;
}

private _getNarrowedViewportRect(): ClientRect {
const el = this._sizingEl || this._document.documentElement;
const width = el!.clientWidth;
const height = el!.clientHeight;
...
}
```
Something similar will have to be done to get the top and left from the sizing element:
```
getScrollPosition(referenceElement?: HTMLElement): ScrollPosition {
if (!this._platform.isBrowser) {
return {top: 0, left: 0};
}

const el = referenceElement || document.documentElement!;
const rect = el.getBoundingClientRect();
const top = -rect.top || el.scrollTop || 0;
const left = -rect.left || el.scrollLeft || 0;

return {top, left};
}
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず FlexibleConnectedPositionStrategy、特に _getNarrowedViewportRect と getScrollPosition を読んで、現在の documentElement の境界がどのように計算されているかを理解します。指定された sizing element について、その位置とサイズ変更を含む動作を定義し、ツールチップが要求された chart または mat-card の領域内に引き続き制限されることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。