@angular/cdk/overlay#HorizontalConnectionPos TypeScript Examples

private __setPosition(positionStrategy: FlexibleConnectedPositionStrategy) {
    // override position strategy to support open to the sides
    let [originX, originFallbackX]: HorizontalConnectionPos[] =
      this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];

    const [overlayY, overlayFallbackY]: VerticalConnectionPos[] =
      this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];

    let [originY, originFallbackY] = [overlayY, overlayFallbackY];
    let [overlayX, overlayFallbackX] = [originX, originFallbackX];

    // align popup's arrow to center of attached element if element size < 70
    const offsetX = this.popup.offsetX || ((this.popup.alignCenter || (this.__elementRef.nativeElement.offsetWidth < 130 && this.popup.alignCenter === undefined)) && !this.popup.horizontal ? (this.__elementRef.nativeElement.offsetWidth / -2 + 29) * (this.menu.xPosition === 'before' ? 1 : -1) : 0);
    const offsetY = this.popup.offsetY || ((this.popup.alignCenter || (this.__elementRef.nativeElement.offsetHeight < 80 && this.popup.alignCenter === undefined)) && this.popup.horizontal ? (this.__elementRef.nativeElement.offsetHeight / 2 - 29) * (this.menu.yPosition === 'below' ? 1 : -1) : 0);

    if (this.popup.horizontal) {
      // When the menu is a sub-menu, it should always align itself
      // to the edges of the trigger, instead of overlapping it.
      overlayFallbackX = originX = this.menu.xPosition === 'before' ? 'start' : 'end';
      originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
    } else if (!this.menu.overlapTrigger) {
      originY = overlayY === 'top' ? 'bottom' : 'top';
      originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
    }

    const original = {originX, originY, overlayX, overlayY, offsetX, offsetY};
    const flipX = {originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetX: -offsetX, offsetY};
    const flipY = {originX, originY: originFallbackY, overlayX, overlayY: overlayFallbackY, offsetX, offsetY: -offsetY};
    const flipXY = {originX: originFallbackX, originY: originFallbackY, overlayX: overlayFallbackX, overlayY: overlayFallbackY, offsetX: -offsetX, offsetY: -offsetY}

    positionStrategy.withPositions(this.popup.horizontal ? [original, flipX] : [original, flipY, flipXY]);
  }

export function getOriginPosition(position: string): {
  main: OriginConnectionPosition;
  fallback: OriginConnectionPosition;
} {
  const pos = position.split(' ');
  let isXDir;
  if (pos[0] === 'start' || pos[0] === 'end') {
    isXDir = true;
  }
  const main = {
    originX: (pos[isXDir ? 0 : 1] as HorizontalConnectionPos) || 'center',
    originY: (pos[isXDir ? 1 : 0] as VerticalConnectionPos) || 'center',
  };
  const { x, y } = invertPosition(main.originX, main.originY);
  const fallback = {
    originX: isXDir ? x : main.originX,
    originY: !isXDir ? y : main.originY,
  };
  return { main, fallback };
}

export function getOverlayPosition(position: string): {
  main: OverlayConnectionPosition;
  fallback: OverlayConnectionPosition;
} {
  const pos = position.split(' ');
  let isXDir;
  if (pos[0] === 'start' || pos[0] === 'end') {
    isXDir = true;
  }
  const horizontal =
    (pos[isXDir ? 0 : 1] as HorizontalConnectionPos) || 'center';
  const vertical = (pos[isXDir ? 1 : 0] as VerticalConnectionPos) || 'center';
  const main = {
    overlayX: isXDir ? invertHorizontal(horizontal) : horizontal,
    overlayY: !isXDir ? invertVertical(vertical) : vertical,
  };
  const { x, y } = invertPosition(main.overlayX, main.overlayY);
  const fallback = {
    overlayX: isXDir ? x : main.overlayX,
    overlayY: !isXDir ? y : main.overlayY,
  };
  return { main, fallback };
}

export function invertHorizontal(dir: HorizontalConnectionPos) {
  if (dir === 'start') {
    dir = 'end';
  } else if (dir === 'end') {
    dir = 'start';
  }
  return dir;
}

export function invertPosition(
  x: HorizontalConnectionPos,
  y: VerticalConnectionPos,
): { x: HorizontalConnectionPos; y: VerticalConnectionPos } {
  return { x: invertHorizontal(x), y: invertVertical(y) };
}