Function useCreatePaper

packages/joint-react/src/hooks/use-create-paper.ts:32–111

(options: UseCreatePaperOptions = {})

 * @returns An object containing the paper instance and a reference to the paper HTML element.
 */
export function useCreatePaper(options: UseCreatePaperOptions = {}) {
  const { overwriteDefaultPaperElement, ...restOptions } = options;

  const paperContainerElement = useRef<HTMLDivElement | null>(null);
  const { graph } = useGraphStore();

  const paperCtx = useContext(PaperContext);
  useLayoutEffect(() => {
    if (!paperCtx) {
      return;
    }

    const { paper } = paperCtx;
    if (!paper) {
      throw new Error('Paper is not created');
    }

    if (overwriteDefaultPaperElement) {
      const customElement = overwriteDefaultPaperElement(paperCtx);
      if (!customElement) {
        throw new Error('overwriteDefaultPaperElement must return a valid HTML or SVG element');
      }
      paperContainerElement.current?.replaceChildren(customElement);
    } else {
      if (!paperContainerElement.current) {
        throw new Error('Paper container element is not defined');
      }
      paperContainerElement.current.replaceChildren(paper.el);
    }
    paper.unfreeze();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [graph, overwriteDefaultPaperElement]);

  useLayoutEffect(() => {
    if (!paperCtx) {
      return;
    }
    const { paper } = paperCtx;
    if (!paper) {
      return;
    }
    /**
     * Resize the paper container element to match the paper size.
     * @param jointPaper - The paper instance.
     */
    function resizePaperContainer(jointPaper: dia.Paper) {
      if (paperContainerElement.current) {
        paperContainerElement.current.style.width = jointPaper.el.style.width;
        paperContainerElement.current.style.height = jointPaper.el.style.height;
      }
    }
    // An object to keep track of the listeners. It's not exposed, so the users
    const controller = new mvc.Listener();
    controller.listenTo(paper, 'resize', resizePaperContainer);
    controller.listenTo(paper, 'all', (type: PaperEventType, ...args: unknown[]) =>
      handleEvent(type, restOptions, paper, ...args)
    );