HTML Overlays

import React, { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";

import { Chart, type Index, type Items, type Link, type Node } from "regraph";

import { chartOptions, data } from "./data";

import "@fortawesome/fontawesome-free/css/fontawesome.css";
import "@fortawesome/fontawesome-free/css/solid.css";

interface Props {
  items: Items;
}

interface AnnotationProps {
  position: { x: number; y: number };
  info: { name: string; phone: string; email: string; address: string };
  item: Node;
  zoom: number;
}

interface AnnotationRowProps {
  title: string;
  content: string;
}

interface Ref extends Chart {
  viewCoordinates: (x: number, y: number) => Chart.Position;
}

interface Point {
  x: number;
  y: number;
}

interface State {
  positions: Chart.Positions;
  selection: Index<boolean | Node | Link | number>;
  zoom: number;
  offset: {
    x: number;
    y: number;
  };
  annotationPosition: Point | null;
  isDragging: boolean;
}

function firstKey(record: Index<boolean | Node | Link | number>) {
  if (record == null) {
    return null;
  }
  const keys = Object.keys(record);
  return keys[0];
}

function isNode(item: Node | Link): item is Node {
  return item && (item as Link).id1 == null && (item as Link).id2 == null;
}

function AnnotationDemo(props: Props) {
  const { items } = props;
  const [state, setState] = useState<State>({
    positions: {},
    selection: {},
    zoom: 1,
    offset: { x: 0, y: 0 },
    annotationPosition: null,
    isDragging: false,
  });
  const chartRef = useRef<null | Ref>(null);

  // remove the annotation if the window changes size
  useEffect(() => {
    const handleResize = () => {
      setState((current) => {
        if (firstKey(current.selection) == null) {
          return current;
        }

        return {
          ...current,
          selection: {},
        };
      });
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const onChangeHandler = ({
    positions: newPositions,
    selection: newSelection,
  }: Chart.ChangeEvent) => {
    if (newPositions == null && newSelection == null) {
      return;
    }

    const chart = chartRef.current;
    if (chart == null) {
      return;
    }

    setState((current) => {
      const nextPositions = newPositions || current.positions;
      let nextSelection = current.selection;
      let nextAnnotationPosition = current.annotationPosition;

      if (newSelection) {
        const selectedItemId = firstKey(newSelection);
        if (selectedItemId != null) {
          const selectedItem = items[selectedItemId];
          if (isNode(selectedItem)) {
            nextSelection = { [selectedItemId]: true };
            nextAnnotationPosition = chart.viewCoordinates(
              nextPositions[selectedItemId].x,
              nextPositions[selectedItemId].y
            );
          }
        } else {
          nextSelection = {};
        }
      } else if (current.annotationPosition == null && nextPositions != null) {
        const firstItemId = firstKey(items);
        if (firstItemId !== null) {
          nextAnnotationPosition = chart.viewCoordinates(
            nextPositions[firstItemId].x,
            nextPositions[firstItemId].y
          );
          nextSelection = { [firstItemId]: true };
        }
      }

      return {
        ...current,
        annotationPosition: nextAnnotationPosition,
        selection: nextSelection,
        positions: nextPositions,
      };
    });
  };

  const onDragHandler = ({ type, x, y, draggedItems }: Chart.DragEvent) => {
    if (type !== "node" || firstKey(draggedItems) !== firstKey(state.selection)) {
      return;
    }
    // if dragging the selected node the position isn't updated until the
    // onChange event, so calculate it from the cursor
    setState((current) => {
      return {
        ...current,
        isDragging: true,
        annotationPosition: {
          x: x - current.offset.x,
          y: y - current.offset.y,
        },
      };
    });
  };

  const onDragEndHandler = ({ defaultPrevented }: Chart.DragEndEvent) => {
    setState((current) => {
      const chart = chartRef.current;
      const selectedItemId = firstKey(current.selection);
      if (
        !defaultPrevented ||
        chart == null ||
        selectedItemId == null ||
        current.positions[selectedItemId] == null
      ) {
        return { ...current, isDragging: false };
      }

      const annotationPosition = chart.viewCoordinates(
        current.positions[selectedItemId].x,
        current.positions[selectedItemId].y
      );

      return {
        ...current,
        isDragging: false,
        annotationPosition,
      };
    });
  };

  // store the offset to the cursor position to correct during a drag
  const onPointerDownHandler = ({ id, x, y }: Chart.PointerEvent) => {
    const chart = chartRef.current;
    if (id == null || !isNode(items[id]) || chart == null) {
      return;
    }

    setState((current) => {
      const position = chart.viewCoordinates(current.positions[id].x, current.positions[id].y);
      const offset = {
        x: x - position.x,
        y: y - position.y,
      };

      return {
        ...current,
        offset,
      };
    });
  };

  const onViewChangeHandler = (property: Chart.ViewChangeEvent) => {
    const { zoom } = property as Chart.ViewOptions;
    const chart = chartRef.current;
    if (chart == null) {
      return;
    }

    const selectedItemId = firstKey(state.selection);
    if (
      state.zoom === zoom &&
      (selectedItemId == null || state.positions[selectedItemId] == null)
    ) {
      return;
    }

    setState((current) => {
      let { annotationPosition } = current;
      if (selectedItemId != null && current.positions[selectedItemId] != null) {
        annotationPosition = chart.viewCoordinates(
          current.positions[selectedItemId].x,
          current.positions[selectedItemId].y
        );
      }

      return {
        ...current,
        zoom,
        annotationPosition,
      };
    });
  };

  const onWheelHandler = ({ preventDefault }: Chart.WheelEvent) => {
    if (state.isDragging) {
      preventDefault();
    }
  };

  const selectedItemId = firstKey(state.selection);
  return (
    <div
      className="chart-wrapper"
      style={{
        width: "100%",
        height: "100%",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <Chart
        className="chart-wrapper"
        ref={chartRef}
        items={items}
        selection={state.selection}
        options={chartOptions as Chart.Options}
        animation={{ animate: false }}
        onChange={onChangeHandler}
        onDrag={onDragHandler}
        onDragEnd={onDragEndHandler}
        onPointerDown={onPointerDownHandler}
        onViewChange={onViewChangeHandler}
        onWheel={onWheelHandler}
      />
      {selectedItemId != null && state.annotationPosition != null && (
        <Annotation
          position={state.annotationPosition}
          info={items[selectedItemId].data}
          item={items[selectedItemId]}
          zoom={state.zoom}
        />
      )}
    </div>
  );
}

function Annotation({ position, info, item, zoom }: AnnotationProps) {
  const size = item.size ?? 1;

  const style = {
    top: `${position.y - 70}px`,
    left: `${position.x + (20 + size * zoom * 30)}px`,
  };
  return (
    <div className="annotation" style={style}>
      <div className="annotation-arrow" />
      <div className="annotation-header">{info.name}</div>
      <AnnotationRow title="Tel:" content={info.phone} />
      <AnnotationRow title="Email:" content={info.email} />
      <AnnotationRow title="Add:" content={info.address} />
    </div>
  );
}

function AnnotationRow({ title, content }: AnnotationRowProps) {
  return (
    <div className="annotation-row">
      <div className="annotation-column">{title}</div>
      <div>{content}</div>
    </div>
  );
}

const FontReadyChart = React.lazy(() =>
  document.fonts.load("900 24px 'Font Awesome 5 Free'").then(() => ({
    default: () => <AnnotationDemo items={data} />,
  }))
);

export function Demo() {
  return (
    <React.Suspense fallback="">
      <FontReadyChart />
    </React.Suspense>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

import { style } from "@ci/theme/rg/js/storyStyles";

const data = {
  id1: {
    ...style.primary2,
    size: 2,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "Amy Greenvale",
      phone: "232-235-8374",
      email: "[email protected]",
      address: "6672 Ambassador Ave,\nGrand Ledge, MI\n48837",
    },
  },
  id2: {
    ...style.primary1,
    size: 1,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "Tim Tadgel",
      phone: "124-095-8356",
      email: "[email protected]",
      address: "261 Central Plains Rd\nPalmyra, VA\n22963",
    },
  },
  id3: {
    ...style.primary1,
    size: 1,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "George White",
      phone: "213-475-5425",
      email: "[email protected]",
      address: "86 Reposo Dr\nOak View, CA\n93022",
    },
  },
  id4: {
    ...style.primary1,
    size: 1,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "Betty Buchanan",
      phone: "208-343-3912",
      email: "[email protected]",
      address: "71 Litchfield St\nHartford, CT\n06112",
    },
  },
  id5: {
    ...style.primary1,
    size: 1,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "Helen Hoffman",
      phone: "279-696-6393",
      email: "[email protected]",
      address: "4937 Old Way Rd\nBrowns Summit, NC\n27214",
    },
  },
  id6: {
    ...style.primary1,
    size: 1,
    fontIcon: { text: "fas fa-user", color: "white" },
    data: {
      name: "Max Malone",
      phone: "214-953-3285",
      email: "[email protected]",
      address: "6241 Main St\nQueenstown, MD\n21658",
    },
  },
  id7: { id1: "id1", id2: "id2", ...style.link },
  id8: { id1: "id1", id2: "id3", ...style.link },
  id9: { id1: "id1", id2: "id4", ...style.link },
  id10: { id1: "id1", id2: "id5", ...style.link },
  id11: { id1: "id1", id2: "id6", ...style.link },
};

const chartOptions = {
  dragPan: false,
  fit: "none",
  iconFontFamily: "Font Awesome 5 Free",
  imageAlignment: { "fas fa-user": { size: 0.9, dy: -3 } },
  minZoom: 0.5,
  navigation: false,
};

export { data, chartOptions };

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

@import "@ci/theme/rg/css/variables.css";

.annotation {
  display: "block";
  position: absolute;
  border: #252c32 2px solid;
  background: white;
  width: 200px;
  font-size: 12px;
  border-radius: 2px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.annotation-arrow {
  position: absolute;
  top: 51px;
  left: -16px;
  transform: rotate(-45deg);
  border: solid 15px transparent;
  border-top: #252c32 15px solid;
  border-left: #252c32 15px solid;
}

.annotation-header {
  border-bottom: #252c32 2px solid;
  background-color: var(--primary0);
  padding: 6px 12px;
  color: #252c32;
  font-size: 16px;
}

.annotation-row {
  background: white;
  padding: 5px 8px;
}
.annotation-row.top {
  padding-top: 0px;
}
.annotation-row.bottom {
  padding-bottom: 0px;
}
.annotation-row > * {
  display: inline-block;
}

.annotation-column {
  width: 40px;
  max-width: 40px;
  vertical-align: top;
}

.annotation-row > :not(.annotation-column) {
  white-space: pre-line;
}