tour.tsx

import * as React from 'react';
import { createPortal } from 'react-dom';
import { tack } from 'tackjs';

const Context = React.createContext<any>({});

export function Overlay() {}

export function getCoords(element: HTMLElement) {
  const {
    left: l,
    right: r,
    top: t,
    bottom: b,
  } = element.getBoundingClientRect();
  const { pageYOffset: y } = window;

  return {
    height: b - t,
    width: r - l,
    top: {
      y: y + t,
      x: l + (r - l) / 2,
    },
    bottom: {
      y: y + b,
      x: l + (r - l) / 2,
    },
    left: {
      y: y + t + (b - t) / 2,
      x: l,
    },
    right: {
      y: y + t + (b - t) / 2,
      x: r,
    },
    topLeft: {
      y: y + t,
      x: l,
    },
    bottomLeft: {
      y: y + b,
      x: l,
    },
    topRight: {
      y: y + t,
      x: r,
    },
    bottomRight: {
      y: y + b,
      x: r,
    },
  };
}

function Frame({
  around,
}: any) {
  const rect = React.useRef(null);

  React.useEffect(() => {
    const curr = rect.current;

    if (around && curr) {
      const coords = getCoords(around);

      // @ts-ignore
      curr.style.width = coords.width + 20 + 'px';
      // @ts-ignore
      curr.style.height = coords.height + 20 + 'px';
      // @ts-ignore
      curr.style.transform = `translate3d(${coords.left.x - 10}px, ${coords.top.y - 10}px, 0)`;
    }
  }, [around]);

  return around ? (
    <svg
      width="100vw"
      height="100vh"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        position: 'fixed',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        width: '100vw',
        height: '100vh',
        zIndex: 99999,
        pointerEvents: 'none',
        transition: 'all 500ms',
      }}
    >
      <defs>
        <mask id="mask">
          <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
          <rect ref={rect} fill="black"></rect>
        </mask>
      </defs>

      <rect
        x="0"
        y="0"
        width="100%"
        height="100%"
        fill="currentColor"
        opacity="0.9"
        mask="url(#mask)"
      ></rect>
    </svg>
  ) : null;
}

export function Tour({  }: any) {
  const [el, setEl] = React.useState(null);

  React.useEffect(() => {
    // @ts-ignore
    window.tour = el => {
      setEl(el);
    };
  }, []);

  return createPortal(
    <Context.Provider value={{}}>
      <div>
        <Frame around={el} />
      </div>
    </Context.Provider>,
    document.body
  );
}