Define a bounding box for overlay other than documentElement
- 主要言語
- 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