|
8 | 8 |
|
9 | 9 | import {PositionStrategy} from './position-strategy';
|
10 | 10 | import {ElementRef} from '@angular/core';
|
11 |
| -import {ViewportRuler, CdkScrollable, ViewportScrollPosition} from '@angular/cdk/scrolling'; |
| 11 | +import {ViewportRuler, CdkScrollable} from '@angular/cdk/scrolling'; |
12 | 12 | import {
|
13 | 13 | ConnectedOverlayPositionChange,
|
14 | 14 | ConnectionPositionPair,
|
@@ -112,9 +112,6 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
112 | 112 | /** Amount of subscribers to the `positionChanges` stream. */
|
113 | 113 | private _positionChangeSubscriptions = 0;
|
114 | 114 |
|
115 |
| - /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */ |
116 |
| - private _previousPushAmount: {x: number, y: number} | null; |
117 |
| - |
118 | 115 | /** Observable sequence of position changes. */
|
119 | 116 | positionChanges: Observable<ConnectedOverlayPositionChange> = Observable.create(observer => {
|
120 | 117 | const subscription = this._positionChanges.subscribe(observer);
|
@@ -285,8 +282,6 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
285 | 282 | }
|
286 | 283 |
|
287 | 284 | detach() {
|
288 |
| - this._lastPosition = null; |
289 |
| - this._previousPushAmount = null; |
290 | 285 | this._resizeSubscription.unsubscribe();
|
291 | 286 | }
|
292 | 287 |
|
@@ -546,55 +541,39 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
546 | 541 | * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
|
547 | 542 | * right and bottom).
|
548 | 543 | *
|
549 |
| - * @param start Starting point from which the overlay is pushed. |
550 |
| - * @param overlay Dimensions of the overlay. |
551 |
| - * @param scrollPosition Current viewport scroll position. |
| 544 | + * @param start The starting point from which the overlay is pushed. |
| 545 | + * @param overlay The overlay dimensions. |
552 | 546 | * @returns The point at which to position the overlay after pushing. This is effectively a new
|
553 | 547 | * originPoint.
|
554 | 548 | */
|
555 |
| - private _pushOverlayOnScreen(start: Point, |
556 |
| - overlay: ClientRect, |
557 |
| - scrollPosition: ViewportScrollPosition): Point { |
558 |
| - // If the position is locked and we've pushed the overlay already, reuse the previous push |
559 |
| - // amount, rather than pushing it again. If we were to continue pushing, the element would |
560 |
| - // remain in the viewport, which goes against the expectations when position locking is enabled. |
561 |
| - if (this._previousPushAmount && this._positionLocked) { |
562 |
| - return { |
563 |
| - x: start.x + this._previousPushAmount.x, |
564 |
| - y: start.y + this._previousPushAmount.y |
565 |
| - }; |
566 |
| - } |
567 |
| - |
| 549 | + private _pushOverlayOnScreen(start: Point, overlay: ClientRect): Point { |
568 | 550 | const viewport = this._viewportRect;
|
569 | 551 |
|
570 |
| - // Determine how much the overlay goes outside the viewport on each |
571 |
| - // side, which we'll use to decide which direction to push it. |
| 552 | + // Determine how much the overlay goes outside the viewport on each side, which we'll use to |
| 553 | + // decide which direction to push it. |
572 | 554 | const overflowRight = Math.max(start.x + overlay.width - viewport.right, 0);
|
573 | 555 | const overflowBottom = Math.max(start.y + overlay.height - viewport.bottom, 0);
|
574 |
| - const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0); |
575 |
| - const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0); |
| 556 | + const overflowTop = Math.max(viewport.top - start.y, 0); |
| 557 | + const overflowLeft = Math.max(viewport.left - start.x, 0); |
576 | 558 |
|
577 |
| - // Amount by which to push the overlay in each axis such that it remains on-screen. |
578 |
| - let pushX = 0; |
579 |
| - let pushY = 0; |
| 559 | + // Amount by which to push the overlay in each direction such that it remains on-screen. |
| 560 | + let pushX, pushY = 0; |
580 | 561 |
|
581 | 562 | // If the overlay fits completely within the bounds of the viewport, push it from whichever
|
582 | 563 | // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
|
583 | 564 | // viewport and allow for the trailing end of the overlay to go out of bounds.
|
584 |
| - if (overlay.width < viewport.width) { |
| 565 | + if (overlay.width <= viewport.width) { |
585 | 566 | pushX = overflowLeft || -overflowRight;
|
586 | 567 | } else {
|
587 |
| - pushX = start.x < this._viewportMargin ? (viewport.left - scrollPosition.left) - start.x : 0; |
| 568 | + pushX = viewport.left - start.x; |
588 | 569 | }
|
589 | 570 |
|
590 |
| - if (overlay.height < viewport.height) { |
| 571 | + if (overlay.height <= viewport.height) { |
591 | 572 | pushY = overflowTop || -overflowBottom;
|
592 | 573 | } else {
|
593 |
| - pushY = start.y < this._viewportMargin ? (viewport.top - scrollPosition.top) - start.y : 0; |
| 574 | + pushY = viewport.top - start.y; |
594 | 575 | }
|
595 | 576 |
|
596 |
| - this._previousPushAmount = {x: pushX, y: pushY}; |
597 |
| - |
598 | 577 | return {
|
599 | 578 | x: start.x + pushX,
|
600 | 579 | y: start.y + pushY,
|
@@ -813,9 +792,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
813 | 792 | const styles = {} as CSSStyleDeclaration;
|
814 | 793 |
|
815 | 794 | if (this._hasExactPosition()) {
|
816 |
| - const scrollPosition = this._viewportRuler.getViewportScrollPosition(); |
817 |
| - extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition)); |
818 |
| - extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition)); |
| 795 | + extendStyles(styles, this._getExactOverlayY(position, originPoint)); |
| 796 | + extendStyles(styles, this._getExactOverlayX(position, originPoint)); |
819 | 797 | } else {
|
820 | 798 | styles.position = 'static';
|
821 | 799 | }
|
@@ -854,16 +832,14 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
854 | 832 | }
|
855 | 833 |
|
856 | 834 | /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
|
857 |
| - private _getExactOverlayY(position: ConnectedPosition, |
858 |
| - originPoint: Point, |
859 |
| - scrollPosition: ViewportScrollPosition) { |
| 835 | + private _getExactOverlayY(position: ConnectedPosition, originPoint: Point) { |
860 | 836 | // Reset any existing styles. This is necessary in case the
|
861 | 837 | // preferred position has changed since the last `apply`.
|
862 | 838 | let styles = {top: null, bottom: null} as CSSStyleDeclaration;
|
863 | 839 | let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
|
864 | 840 |
|
865 | 841 | if (this._isPushed) {
|
866 |
| - overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition); |
| 842 | + overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect); |
867 | 843 | }
|
868 | 844 |
|
869 | 845 | // @breaking-change 7.0.0 Currently the `_overlayContainer` is optional in order to avoid a
|
@@ -893,16 +869,14 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
|
893 | 869 | }
|
894 | 870 |
|
895 | 871 | /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
|
896 |
| - private _getExactOverlayX(position: ConnectedPosition, |
897 |
| - originPoint: Point, |
898 |
| - scrollPosition: ViewportScrollPosition) { |
| 872 | + private _getExactOverlayX(position: ConnectedPosition, originPoint: Point) { |
899 | 873 | // Reset any existing styles. This is necessary in case the preferred position has
|
900 | 874 | // changed since the last `apply`.
|
901 | 875 | let styles = {left: null, right: null} as CSSStyleDeclaration;
|
902 | 876 | let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
|
903 | 877 |
|
904 | 878 | if (this._isPushed) {
|
905 |
| - overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition); |
| 879 | + overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect); |
906 | 880 | }
|
907 | 881 |
|
908 | 882 | // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
|
|
0 commit comments