Skip to content

Conversation

@samuelgja
Copy link
Contributor

Description

This PR refactors joint-react (and related packages) to simplify the architecture and prepare for @joint/plus-react integration.
The main changes include the removal of PaperProvider, the introduction of controlled mode in GraphProvider, and multiple performance optimizations.


🚩 Major Changes

1. Controlled Mode in GraphProvider

  • Added support for controlled and uncontrolled operation:
    • Uncontrolled (default): behaves as before — dia.Graph remains the source of truth.
    • Controlled: when onElementsChange / onLinksChange props are provided, React state becomes the source of truth.
      Enables integration with Redux, Zustand, or useState.

2. PaperProvider Removal

  • The PaperProvider layer has been completely removed.
    All paper-related methods and refs are now accessible via the new imperative API exposed on the component ref.
    This simplifies the render tree and eliminates redundant provider nesting.

3. API Changes

  • Renamed:
    • initialElementselements
    • initialLinkslinks
  • Removed internal Map-based caching; now uses plain arrays for better iteration performance.
  • Introduced new useImperativeApi hook for managing refs and access to paper/graph internals.

4. Store & Performance

  • Simplified internal store representation (no deep proxy layers).
  • Optimized use-element-views and render paths.
  • Reduced re-renders caused by context dependency changes.

5. Developer Experience

  • Improved integration with Storybook examples (controlled graph stories).
  • Adjusted tests for controlled mode and ref-based API.
  • Updated dependencies (eslint, @types/react, typescript, etc.) and peer dependency ranges.

Motivation and Context

This refactor simplifies both the runtime and mental model:

  • Less boilerplate: No extra providers for Paper or Graph access.
  • More flexible control: Graphs can now be managed by React state or remain internal.
  • Better performance: Leaner store and direct ref access reduce indirection.
  • Future-ready: Enables seamless migration toward the new @joint/plus-react ecosystem.

Screenshots

N/A — internal behavioral changes only.

@samuelgja samuelgja requested a review from Copilot October 15, 2025 07:46
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the joint-react package to align with @joint/react-plus by simplifying the architecture and introducing controlled mode. The main changes include removing PaperProvider, adding controlled/uncontrolled modes to GraphProvider, and implementing performance optimizations.

Key changes:

  • Removed PaperProvider in favor of imperative API exposed on component refs
  • Added controlled mode support with onElementsChange/onLinksChange props
  • Renamed initialElements/initialLinks to elements/links for consistency

Reviewed Changes

Copilot reviewed 209 out of 211 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
packages/joint-vitest-plugin-mock-svg/package.json Updated React/TypeScript dependencies to exact versions
packages/joint-react/vite.config.ts Removed eslint disable comment, added @ts-expect-error
packages/joint-react/tsconfig.json Modernized TypeScript config with bundler resolution
packages/joint-react/src/utils/* Major refactoring of utilities including new scheduler, object utilities
packages/joint-react/src/hooks/* Replaced useUpdateElement with useCellActions, updated store hooks
packages/joint-react/src/components/* Updated to use new prop names and imperative API

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 9c4386a to 1086542 Compare October 15, 2025 08:01
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 1086542 to 5311d16 Compare October 15, 2025 08:01
…d new utility functions

- Updated Storybook and Redux Toolkit versions in package.json and yarn.lock.
- Refactored GraphProvider to accept elements and links as props directly.
- Introduced new utility functions for improved link handling and object manipulation.
- Added comprehensive tests for new functionalities and existing hooks.
- Enhanced documentation with examples and best practices for using highlighters and SVG nodes.
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 9dae139 to 0321376 Compare November 26, 2025 03:20
…comprehensive tests

- Refactored GraphProvider to support controlled mode with direct synchronization of elements and links from React state.
- Introduced new methods for updating the store from external data, improving state management.
- Added extensive tests for controlled mode functionality, including handling rapid updates and user interactions.
- Enhanced documentation with examples for using GraphProvider in controlled mode with Redux and React state.
…nce performance

- Updated dependencies in yarn.lock, including Babel and added unplugin.
- Refactored GraphProvider and Paper components for improved performance and clarity.
- Removed unused files and hooks to streamline the codebase.
- Enhanced the Storybook setup with a new script for loading react-scan.
- Improved element rendering logic and optimized hooks for better state management.
- Added tests for new functionalities and ensured existing tests are up to date.
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 212b78d to 8d9dbc0 Compare December 9, 2025 06:20
- Added empty lines at the end of multiple test files to ensure consistency across the codebase.
…link from supported types in graphProvider.

- graphProvider elements and links are source of truth - dia.graph do not change elements and links defined by the user - BY DeFAULT MAPPING
- graph elements and links should be flat
- remove measure node - useNodeSize  | useNodeSize
- custom mapper + default mappers from links and elements (???)
…tency

- Added empty lines at the end of various test files to maintain uniformity across the codebase.
- Updated the useNodeSize hook to support a custom transform function for size measurement, allowing for more flexible size adjustments.
- Refactored related types and interfaces to accommodate the new transform feature.
- Improved documentation with examples demonstrating the use of the transform function for custom size handling.
- Adjusted tests to reflect changes in the useNodeSize implementation.
- Updated the EPSILON value to reduce sub-pixel rendering jitter.
- Introduced new functions to read entry sizes and snap to device pixels for better measurement accuracy.
- Enhanced the ResizeObserver implementation to batch updates and prevent re-entrancy issues.
- Improved documentation to clarify the observer's behavior and usage examples.
- Adjusted the EPSILON value to 0.5 to better handle sub-pixel rendering issues.
- Simplified the ResizeObserver implementation by removing unnecessary functions and improving size comparison logic.
- Enhanced documentation to clarify the observer's functionality and usage.
- Added console logging for debugging purposes in the introduction demo.
…erver logic

- Adjusted the opacity of the paper component based on element measurement status.
- Refactored size observer logic to improve clarity and performance, including renaming interfaces for better understanding.
- Enhanced the handling of size changes in the ResizeObserver to ensure accurate updates and prevent unnecessary re-renders.
- Updated transform functions in flowchart and card components for improved size calculations.
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 7d86348 to 5d51044 Compare January 14, 2026 05:52
…and improved structure

- Added comprehensive documentation comments throughout the App component to clarify functionality and usage of key features.
- Organized code into distinct sections for better readability, including constants, type definitions, and component descriptions.
- Improved element rendering logic and integrated the useNodeSize hook for dynamic sizing of message elements.
- Enhanced the toolbar component with clear action descriptions and improved button functionality for graph manipulation.
…rieval

- Added a new hook, useNodeLayout, to retrieve layout data (x, y, width, height) for specific nodes in the graph.
- Updated existing hooks and components to utilize the new layout data, enhancing the accuracy of element positioning and sizing.
- Refactored related components and tests to accommodate the integration of the useNodeLayout hook.
- Improved documentation to include usage examples for the new hook and its benefits in managing node layouts.
…size handling

- Refactored the rendering logic in various components to utilize the useNodeSize hook for dynamic sizing, ensuring accurate width and height calculations.
- Updated the SimpleRenderItemDecorator and related components to improve integration with the new size handling approach.
- Introduced a clearView utility to manage the clearing of views for cells and their connected links, enhancing performance during updates.
- Enhanced documentation and added new examples to demonstrate the improved rendering and sizing functionalities.
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 0e63c76 to 23c3130 Compare January 16, 2026 14:02
…stom link rendering

- Added BaseLink component to set link properties when rendering custom links, including support for custom markers.
- Introduced LinkLabel component to render content at specific positions along links, utilizing React portals for dynamic positioning.
- Implemented SimpleRenderLinkDecorator for Storybook to facilitate testing and demonstration of link rendering.
- Updated related types and interfaces to support new link functionalities.
- Enhanced documentation with examples for both BaseLink and LinkLabel components, showcasing their usage in custom link rendering.
…update examples and documentation

- Removed createElements and createLinks utility functions to simplify element and link creation.
- Updated examples and tutorials to directly use plain objects for nodes and links.
- Refactored type definitions for GraphElement and GraphLink to enhance flexibility.
- Improved documentation to reflect changes in element and link creation methods.
- Added new types and interfaces for better type safety and clarity in the codebase.
- Enhanced internal comments and descriptions for better maintainability.
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 764afa1 to 6a1cd17 Compare January 23, 2026 14:22
@samuelgja samuelgja changed the base branch from master to dev January 23, 2026 14:41
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 62226e7 to 25bf1ce Compare January 23, 2026 15:11
@kumilingus kumilingus merged commit ac99249 into clientIO:dev Jan 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants