sonarqube/server/sonar-web/design-system/src/helpers/positioning.ts

/*
 * SonarQube
 * Copyright (C) 2009-2023 SonarSource SA
 * mailto:info AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
/**
 * Positioning rules:
 * - Bottom = below the block, horizontally centered
 * - BottomLeft = below the block, horizontally left-aligned
 * - BottomRight = below the block, horizontally right-aligned
 * - Left = Left of the block, vertically centered
 * - LeftTop = on the left-side of the block, vertically top-aligned
 * - LeftBottom = on the left-side of the block, vertically bottom-aligned
 * - Right = Right of the block, vertically centered
 * - RightTop = on the right-side of the block, vertically top-aligned
 * - RightBottom = on the right-side of the block, vetically bottom-aligned
 * - Top = above the block, horizontally centered
 * - TopLeft = above the block, horizontally left-aligned
 * - TopRight = above the block, horizontally right-aligned
 */
export enum PopupPlacement {
  Bottom = 'bottom',
  BottomLeft = 'bottom-left',
  BottomRight = 'bottom-right',
  Left = 'left',
  LeftTop = 'left-top',
  LeftBottom = 'left-bottom',
  Right = 'right',
  RightTop = 'right-top',
  RightBottom = 'right-bottom',
  Top = 'top',
  TopLeft = 'top-left',
  TopRight = 'top-right',
}

export enum PopupZLevel {
  Content = 'content',
  Default = 'popup',
  Global = 'global',
}

export type BasePlacement = Extract<
  PopupPlacement,
  PopupPlacement.Bottom | PopupPlacement.Top | PopupPlacement.Left | PopupPlacement.Right
>;

export const PLACEMENT_FLIP_MAP: { [key in PopupPlacement]: PopupPlacement } = {
  [PopupPlacement.Left]: PopupPlacement.Right,
  [PopupPlacement.LeftBottom]: PopupPlacement.RightBottom,
  [PopupPlacement.LeftTop]: PopupPlacement.RightTop,
  [PopupPlacement.Right]: PopupPlacement.Left,
  [PopupPlacement.RightBottom]: PopupPlacement.LeftBottom,
  [PopupPlacement.RightTop]: PopupPlacement.LeftTop,
  [PopupPlacement.Top]: PopupPlacement.Bottom,
  [PopupPlacement.TopLeft]: PopupPlacement.BottomLeft,
  [PopupPlacement.TopRight]: PopupPlacement.BottomRight,
  [PopupPlacement.Bottom]: PopupPlacement.Top,
  [PopupPlacement.BottomLeft]: PopupPlacement.TopLeft,
  [PopupPlacement.BottomRight]: PopupPlacement.TopRight,
};

const MARGIN_TO_EDGE = 4;

export function popupPositioning(
  toggleNode: Element,
  popupNode: Element,
  placement: PopupPlacement = PopupPlacement.Bottom
) {
  const toggleRect = toggleNode.getBoundingClientRect();
  const popupRect = popupNode.getBoundingClientRect();

  let left = 0;
  let top = 0;

  switch (placement) {
    case PopupPlacement.Bottom:
      left = toggleRect.left + toggleRect.width / 2 - popupRect.width / 2;
      top = toggleRect.top + toggleRect.height;
      break;
    case PopupPlacement.BottomLeft:
      left = toggleRect.left;
      top = toggleRect.top + toggleRect.height;
      break;
    case PopupPlacement.BottomRight:
      left = toggleRect.left + toggleRect.width - popupRect.width;
      top = toggleRect.top + toggleRect.height;
      break;
    case PopupPlacement.Left:
      left = toggleRect.left - popupRect.width;
      top = toggleRect.top + toggleRect.height / 2 - popupRect.height / 2;
      break;
    case PopupPlacement.LeftTop:
      left = toggleRect.left - popupRect.width;
      top = toggleRect.top;
      break;
    case PopupPlacement.LeftBottom:
      left = toggleRect.left - popupRect.width;
      top = toggleRect.top + toggleRect.height - popupRect.height;
      break;
    case PopupPlacement.Right:
      left = toggleRect.left + toggleRect.width;
      top = toggleRect.top + toggleRect.height / 2 - popupRect.height / 2;
      break;
    case PopupPlacement.RightTop:
      left = toggleRect.left + toggleRect.width;
      top = toggleRect.top;
      break;
    case PopupPlacement.RightBottom:
      left = toggleRect.left + toggleRect.width;
      top = toggleRect.top + toggleRect.height - popupRect.height;
      break;
    case PopupPlacement.Top:
      left = toggleRect.left + toggleRect.width / 2 - popupRect.width / 2;
      top = toggleRect.top - popupRect.height;
      break;
    case PopupPlacement.TopLeft:
      left = toggleRect.left;
      top = toggleRect.top - popupRect.height;
      break;
    case PopupPlacement.TopRight:
      left = toggleRect.left + toggleRect.width - popupRect.width;
      top = toggleRect.top - popupRect.height;
      break;
  }

  const inBoundariesLeft = Math.min(
    Math.max(left, getMinLeftPlacement(toggleRect)),
    getMaxLeftPlacement(toggleRect, popupRect)
  );
  const inBoundariesTop = Math.min(
    Math.max(top, getMinTopPlacement(toggleRect)),
    getMaxTopPlacement(toggleRect, popupRect)
  );

  return {
    height: popupRect.height,
    left: inBoundariesLeft,
    leftFix: inBoundariesLeft - left,
    top: inBoundariesTop,
    topFix: inBoundariesTop - top,
    width: popupRect.width,
  };
}

function getMinLeftPlacement(toggleRect: DOMRect) {
  return Math.min(
    MARGIN_TO_EDGE, // Left edge of the sceen
    toggleRect.left + toggleRect.width / 2 // Left edge of the screen when scrolled
  );
}

function getMaxLeftPlacement(toggleRect: DOMRect, popupRect: DOMRect) {
  return Math.max(
    document.documentElement.clientWidth - popupRect.width - MARGIN_TO_EDGE, // Right edge of the screen
    toggleRect.left + toggleRect.width / 2 - popupRect.width // Right edge of the screen when scrolled
  );
}

function getMinTopPlacement(toggleRect: DOMRect) {
  return Math.min(
    MARGIN_TO_EDGE, // Top edge of the sceen
    toggleRect.top + toggleRect.height / 2 // Top edge of the screen when scrolled
  );
}

function getMaxTopPlacement(toggleRect: DOMRect, popupRect: DOMRect) {
  return Math.max(
    document.documentElement.clientHeight - popupRect.height - MARGIN_TO_EDGE, // Bottom edge of the screen
    toggleRect.top + toggleRect.height / 2 - popupRect.height // Bottom edge of the screen when scrolled
  );
}