Function makeOverlayPath

shepherd.js/src/utils/overlay-path.ts:25–62

(overlayPaths: OverlayPathParams[])

 * @returns Rounded rectangle overlay path data.
 */
export function makeOverlayPath(overlayPaths: OverlayPathParams[]) {
  let openings = '';

  const { innerWidth: w, innerHeight: h } = window;

  overlayPaths.forEach((overlayPath) => {
    const { width, height, x = 0, y = 0, r = 0 } = overlayPath;
    const {
      topLeft = 0,
      topRight = 0,
      bottomRight = 0,
      bottomLeft = 0
    } = typeof r === 'number'
      ? { topLeft: r, topRight: r, bottomRight: r, bottomLeft: r }
      : r;

    openings +=
      `M${x + topLeft},${y}` +
      `a${topLeft},${topLeft},0,0,0-${topLeft},${topLeft}` +
      `V${height + y - bottomLeft}` +
      `a${bottomLeft},${bottomLeft},0,0,0,${bottomLeft},${bottomLeft}` +
      `H${width + x - bottomRight}` +
      `a${bottomRight},${bottomRight},0,0,0,${bottomRight}-${bottomRight}` +
      `V${y + topRight}` +
      `a${topRight},${topRight},0,0,0-${topRight}-${topRight}` +
      `Z`;
  });

  return (
    `M${w},${h}` +
    `H0` +
    `V0` +
    `H${w}` +
    `V${h}` +
    `Z` +
    `${openings}`
  ).replace(/\s/g, '');
}