feat(overlay): allow width/height when using point as flexible origin (#16739)

Adds the ability to set an optional width and height when passing in a point to the `FlexibleConnectedPositionStrategy`. This allows for cases like a floating panel in a text editor with a `textarea` to be handled where the overlay should be positioned relative to a region, but the region might not be tied to a particular DOM node.

Fixes #16160.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -748,6 +748,23 @@ describe('FlexibleConnectedPositionStrategy', () => {
         expect(Math.floor(overlayRect.left)).toBe(50);
       });
 
+      it('should be able to position relative to a point with width and height', () => {
+        positionStrategy
+          .setOrigin({x: 100, y: 200, width: 100, height: 50})
+          .withPositions([{
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top'
+          }]);
+
+        attachOverlay({positionStrategy});
+
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+        expect(Math.floor(overlayRect.top)).toBe(250);
+        expect(Math.floor(overlayRect.right)).toBe(200);
+      });
+
     });
 
     it('should account for the `offsetX` pushing the overlay out of the screen', () => {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -30,7 +30,10 @@ import {OverlayContainer} from '../overlay-container';
 const boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
 
 /** Possible values that can be set as the origin of a FlexibleConnectedPositionStrategy. */
-export type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLElement | Point;
+export type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLElement | Point & {
+  width?: number;
+  height?: number;
+};
 
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
@@ -1095,14 +1098,17 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       return origin.getBoundingClientRect();
     }
 
+    const width = origin.width || 0;
+    const height = origin.height || 0;
+
     // If the origin is a point, return a client rect as if it was a 0x0 element at the point.
     return {
       top: origin.y,
-      bottom: origin.y,
+      bottom: origin.y + height,
       left: origin.x,
-      right: origin.x,
-      height: 0,
-      width: 0
+      right: origin.x + width,
+      height,
+      width
     };
   }
 }

src/cdk/overlay/public-api.ts

@@ -27,5 +27,6 @@ export {ConnectedPositionStrategy} from './position/connected-position-strategy'
 export {
   ConnectedPosition,
   FlexibleConnectedPositionStrategy,
+  FlexibleConnectedPositionStrategyOrigin,
 } from './position/flexible-connected-position-strategy';
 export {VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling';

tools/public_api_guard/cdk/overlay.d.ts

@@ -128,6 +128,11 @@ export declare class FlexibleConnectedPositionStrategy implements PositionStrate
     withViewportMargin(margin: number): this;
 }
 
+export declare type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLElement | Point & {
+    width?: number;
+    height?: number;
+};
+
 export declare class FullscreenOverlayContainer extends OverlayContainer implements OnDestroy {
     constructor(_document: any);
     protected _createContainer(): void;