Function useLayout

src/ui-react-dom-charts/common/svg.ts:17–50

()

const DEFAULT_STYLE: Style = [0.5, 0.5, 0.25, 3.5, 4, 1, 1];

export const useLayout = (): RefAndLayout => {
  const svgRef = useRef<SVGSVGElement>(null);
  const chartLayoutRef = useRef<readonly [Size, Style]>([
    DEFAULT_SIZE,
    getDefaultStyle(DEFAULT_FONT_SIZE),
  ]);
  const [chartLayout, setChartLayout] = useState<readonly [Size, Style]>([
    DEFAULT_SIZE,
    getDefaultStyle(DEFAULT_FONT_SIZE),
  ]);

  useLayoutEffect(() => {
    const svg = svgRef.current;
    if (isNull(svg)) {
      return;
    }

    const updateLayout = ({contentRect}: ResizeObserverEntry) => {
      const style = svg.ownerDocument.defaultView?.getComputedStyle(svg);
      const nextLayout = [getSvgSize(contentRect), getStyle(style)] as const;
      if (!isLayoutEqual(chartLayoutRef.current, nextLayout)) {
        chartLayoutRef.current = nextLayout;
        setChartLayout(nextLayout);
      }
    };

    const observer = new ResizeObserver(([entry]) => updateLayout(entry));
    observer.observe(svg);

    return () => observer.disconnect();
  }, []);

  return [svgRef, ...chartLayout];
};

export const getPlotSize = ([, chartSize, chartStyle]: RefAndLayout) => {
  const [, , width, height] = getPlotFrame(chartSize, chartStyle);