Function Component

packages/joint-react/src/components/paper/paper.tsx:136–310

(
  props: Readonly<PaperProps<ElementItem>>
)

// eslint-disable-next-line jsdoc/require-jsdoc
function Component<ElementItem extends GraphElement = GraphElement>(
  props: Readonly<PaperProps<ElementItem>>
) {
  const {
    renderElement,
    style,
    className,
    elementSelector = noopSelector as (item: GraphElement) => ElementItem,
    scale,
    children,
    onElementsSizeReady,
    onElementsSizeChange,
    useHTMLOverlay,
    ...paperOptions
  } = props;

  const { paperContainerElement, paperCtx } = useCreatePaper({
    ...paperOptions,
    scale,
  });

  const paperContext = useContext(PaperContext);
  if (!paperContext) {
    throw new Error('Paper must be used within a `PaperProvider` or `Paper` component');
  }
  const { recordOfSVGElements } = paperContext;

  const graph = useGraph();
  const [HTMLRendererContainer, setHTMLRendererContainer] = useState<HTMLElement | null>(null);
  const elements = useElements((items) => items.map(elementSelector));
  const areElementsMeasured = useAreElementMeasured();
  // Keep previous sizes in a ref
  const previousSizesRef = useRef<number[][]>([]);

  // Whenever elements change (or we’ve just become measured) compare old ↔ new
  useEffect(() => {
    if (!paperCtx) return;
    if (!onElementsSizeChange) return;
    if (!areElementsMeasured) return;
    const { paper } = paperCtx;
    if (!paper) return;

    // Build current list of [width, height]
    const currentSizes = elements.map(({ width = 0, height = 0 }) => [width, height]);
    const previousSizes = previousSizesRef.current;
    let changed = false;

    // Quick bail-out on length mismatch
    if (previousSizes.length === currentSizes.length) {
      // Otherwise scan for any width/height diff
      for (const [index, currentSize] of currentSizes.entries()) {
        if (
          previousSizes[index][0] !== currentSize[0] ||
          previousSizes[index][1] !== currentSize[1]
        ) {
          changed = true;
          break;
        }