menu-position.spec.ts

import { convertMenuPositionToConnectedPositions, MenuPositionValue } from './menu-position';
import { ConnectedPosition } from '@angular/cdk/overlay';

interface TestPosition {
  side: MenuPositionValue,
  align: MenuPositionValue,
  positions: ConnectedPosition[]
}

const POSITIONS: TestPosition[] = [
  {
    side: 'top',
    align: 'left',
    positions: [
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'bottom',
        offsetY: 0
      }
    ]
  },
  {
    side: 'right',
    align: 'top',
    positions: [
      {
        originX: 'end',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top',
        offsetY: 0
      }
    ]
  },
  {
    side: 'left',
    align: 'bottom',
    positions: [
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'end',
        overlayY: 'bottom',
        offsetY: 0
      }
    ]
  },
  {
    side: 'bottom',
    align: 'left',
    positions: [
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
        offsetY: 0
      }
    ]
  },
  {
    side: 'bottom',
    align: 'right',
    positions: [
      {
        originX: 'end',
        originY: 'bottom',
        overlayX: 'end',
        overlayY: 'top',
        offsetY: 0
      }
    ]
  }
];

fdescribe('MenuPosition', () => {
  for (const pos of POSITIONS) {
    it(`should convert menu position [${pos.side}, ${pos.align}] to connected positions`, () => {
      const positions = convertMenuPositionToConnectedPositions([pos.side as MenuPositionValue, pos.align as MenuPositionValue]);

      // expect(positions.length).toBe(pos.positions.length);
      expect(positions[0]).toEqual(pos.positions[0]);
    });
  }
});

menu-position.ts

import { ConnectedPosition, HorizontalConnectionPos, VerticalConnectionPos } from '@angular/cdk/overlay';

export type MenuPositionValue = 'top' | 'right' | 'bottom' | 'left';
export type MenuPosition = [MenuPositionValue, MenuPositionValue];

interface ConvertedPosition extends ConnectedPosition {
  originFallbackX: HorizontalConnectionPos;
  originFallbackY: VerticalConnectionPos;
  overlayFallbackX: HorizontalConnectionPos;
  overlayFallbackY: VerticalConnectionPos;
}

function convertSideMenuPosition(side: MenuPositionValue): ConvertedPosition {
  if (side === 'top' || side === 'bottom') {
    return {
      originX: 'start',
      originY: side,
      overlayX: 'start',
      overlayY: side === 'top' ? 'bottom' : 'top',
      originFallbackX: 'end',
      originFallbackY: side === 'top' ? 'bottom' : 'top',
      overlayFallbackX: 'end',
      overlayFallbackY: side
    };
  } else {
    return {
      originX: side === 'left' ? 'start' : 'end',
      originY: 'top',
      overlayX: side === 'left' ? 'end' : 'start',
      overlayY: 'top',
      originFallbackX: side === 'left' ? 'end' : 'start',
      originFallbackY: 'bottom',
      overlayFallbackX: side === 'left' ? 'start' : 'end',
      overlayFallbackY: 'bottom'
    };
  }
}

export function convertMenuPositionToConnectedPositions([side, align]: MenuPosition, offsetY = 0): ConnectedPosition[] {
  let {
    originX,
    originY,
    overlayX,
    overlayY,
    originFallbackX,
    originFallbackY,
    overlayFallbackX,
    overlayFallbackY
  } = convertSideMenuPosition(side);

  if (align === 'top' || align === 'bottom') {
    originY = align;
    overlayY = originY;
  } else {
    originX = align === 'left' ? 'start' : 'end';
    overlayX = originX;
  }

  return [
    { originX, originY, overlayX, overlayY, offsetY },
    { originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetY },
    {
      originX,
      originY: originFallbackY,
      overlayX,
      overlayY: overlayFallbackY,
      offsetY: -offsetY
    },
    {
      originX: originFallbackX,
      originY: originFallbackY,
      overlayX: overlayFallbackX,
      overlayY: overlayFallbackY,
      offsetY: -offsetY
    }
  ];
}

trigger.directive.ts

  /**
   * Sets the appropriate positions on a position strategy
   * so the overlay connects with the trigger correctly.
   * @param positionStrategy Strategy whose position to update.
   */
  private setPosition(positionStrategy: FlexibleConnectedPositionStrategy) {
    let positions: ConnectedPosition[];

    if (this.triggersSubmenu()) {
      // When the menu is a sub-menu, it should always align itself
      // to the edges of the trigger, instead of overlapping it.
      positions = convertMenuPositionToConnectedPositions(['right', 'top'], -MENU_PANEL_TOP_PADDING);
    } else {
      positions = convertMenuPositionToConnectedPositions(this.menu.position);
    }

    positionStrategy.withPositions(positions);
  }

what is this.menuOpened?