feat(joint-react): auto layout demo, fix ports measuring

[samuelgja]

Description

This PR introduces multiple improvements and fixes for @joint/react:

• Auto-layout demo: Adds a new example showcasing basic auto-layout behavior for nodes inside the graph.
• Ports bug fix: Fixes issues with dynamically added ports. Previously, newly added ports would not correctly update size and position due to asynchronous React portal rendering.
• New Paper events:
  • onElementsSizeReady — triggered once after all elements are initially measured and rendered in React.
  • onElementsSizeChange — triggered whenever an element’s size changes after the initial render (e.g., due to user updates or layout changes).

Motivation and Context

• The auto-layout example demonstrates how users can automatically arrange nodes declaratively using React hooks, improving the robustness and usability of joint-react.
• The ports fix allows ports to be used declaratively in React without manual workarounds, improving developer experience.
• Adding the new size-related events provides fine-grained control over dynamic layouts and measurements, unlocking better integration with custom graph logic.

Screenshots

Screen.Recording.2025-04-24.at.13.31.08.mov

Screen.Recording.2025-04-24.at.13.35.10.mov

---

⚠️ Note:
There is a known minor flickering issue when dynamically adding ports. This is a separate problem and will be addressed in a future update. It does not block merging this PR.

---

[Copilot]

Pull Request Overview

This PR introduces an auto layout demo and fixes issues with port measurement and element sizing in the graph. Key changes include a refinement of cell and link processing (including default z-values) in set-cells, updates to the auto layout logic and event handling in the demos, and adjustments to port removal and store notification functions.

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/joint-react/src/utils/cell/set-cells.ts	Updates link processing and propagates unsized element IDs through setElements.
packages/joint-react/src/stories/examples/with-auto-layout/code.tsx	Implements an auto layout demo with an updated grid layout, node addition logic, and layout events.
packages/joint-react/src/stories/demos/user-flow/code.tsx	Refactors port removal to pass the port id and refines magnet validation for connections.
packages/joint-react/src/data/create-store.ts	Cleans up cell change notifications and port rendering function parameters.
packages/joint-react/src/components/port/port-item.tsx	Migrates to type-only imports and enhances portal updates by refreshing connected link views.
packages/joint-react/src/components/paper/paper.tsx	Introduces onElementSizeChange with a size hash to trigger layout updates when element sizes change.
packages/joint-react/src/components/paper/paper.test.tsx	Updates test callbacks to match the renamed event handlers.
packages/joint-react/docs/*	Updates documentation to align with internal code changes and updated export locations.

Comments suppressed due to low confidence (1)

packages/joint-react/src/stories/demos/user-flow/code.tsx:81

• The function name 'PortIem' appears to be a typo; consider renaming it to 'PortItem' to match the file name and improve clarity.

function PortIem({ id, label, onRemove, x }: Readonly<PortProps>) {