feat(joint-react): sync with new @joint/plus-react #3037
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… overwriteDefaultPaperElement
… and Storybook pages
…ultPaperElement and handle container checks
…-update-build-paths
Contributor
Author
|
Still draft, we should maybe merge after plus react package will be done / merged :) |
…ement support + fix element typing and bug
…nd update related imports
…pdates - Added a new utility function `updateGraph` to handle the addition and update of cells in the graph without removing existing elements. - Introduced helper functions `getType` and `getAttributes` to retrieve cell attributes based on the cell type. - Enhanced the handling of cell types to replace cells when their type changes. - Updated the `getCellId` function in link utilities for consistency in ID retrieval. - Modified the subscriber handler to support batch notifications and updated the subscribe method signature. - Updated dependencies in `yarn.lock` to include new packages and versions for improved functionality and compatibility.
…ndler for elements and links
…y in Paper component
… with detailed documentation
…ameObject utility function
…and grid configuration
…and maintainability
samuelgja
force-pushed
the
feat/sync-with-joint-plus
branch
from
e9b5d41 to
9e0df9d
Compare
…tions for improved readability and maintainability
…ncy resolutions and type definitions fix(joint-react): update highlighter components to use optional forwardedRef
… to use a centralized event mapper - Introduced PAPER_EVENTS_MAPPER to map event names to their corresponding joint events and handlers. - Replaced the switch-case structure in handleEvent with a more maintainable approach using the event mapper. - Updated event handlers to accept parameters and return structured objects for easier access to event data. - Added handlePaperEvents function to set up event listeners on the paper instance using the new mapping.
…re proper invocation of event handlers
…ook decorators - Modified ESLint configuration to remove additional hooks setting. - Enhanced Storybook decorators to support args and improve type safety. - Refactored GraphProvider to utilize useImperativeApi for better lifecycle management. - Removed deprecated useHighlighter hook and replaced its functionality with useImperativeApi. - Cleaned up PaperProvider and Paper components for better performance and readability. - Introduced new utility functions in object-utilities for managing options and dependencies. - Added tests for useImperativeApi to ensure proper initialization and cleanup.
- Updated the PaperEvents interface to include a `graph` parameter in all event handler signatures. - Modified the PAPER_EVENTS_MAPPER to accommodate the new `graph` parameter in event handlers. - Adjusted the handlePaperEvents function to accept a `graph` argument and pass it to the event handlers. - Updated unit tests to reflect changes in event handler signatures and ensure proper functionality with the new `graph` parameter.
…r element manipulation - Deleted the useUpdateElement hook from the codebase. - Introduced useCellActions hook to manage setting and removing elements and links in the graph. - Updated various components and stories to utilize the new useCellActions hook instead of the deprecated useUpdateElement. - Enhanced the updateCell function to handle both adding and updating cells in the graph. - Added comprehensive tests for the useCellActions hook to ensure correct functionality for setting and removing elements and links.
Contributor
Author
|
closing, many commits. Here is cleaned and updated PR: #3077 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR refactors
joint-reactand related packages to fully support the upcoming@joint/plus-reactintegration.The most important change is the introduction of controlled mode in
GraphProvider, allowing React state to directly control elements and links instead of relying solely ondia.Graph.🚩 Major Change: Controlled Mode in
GraphProviderGraphProvidercan now run in controlled or uncontrolled mode:dia.Graphis the single source of truth.onElementsChangeand/oronLinksChangeare provided, React state becomes the source of truth.useState.dia.Graphand external state.Other Key Changes
- Dependency updates
eslint,typescript,@types/react,@types/react-dom, and related plugins.peerDependenciesfor modern React/TypeScript.- Graph & Store
createStore.destroy()now takes a flag to avoid destroying external graphs.createStoreDatareturns structuredUpdateResult(diffIds,areElementsChanged,areLinksChanged) instead of raw sets.- Contexts
PaperProviderConfigContextfor custom paper rendering (e.g., PaperScroller).RenderElementContextfor React render function sharing.PaperContextnow stores:elementViewsinstead of raw SVG nodes.paperHTMLElementref for container replacement.- Hooks
use-create-paperanduse-paper-element-renderer.use-element-viewsfor managingElementViewlifecycle.use-measure-node-size(no more single-measurement restriction).use-remove-cellrenamed touse-remove-element.- Rendering pipeline
PaperProviderrenders viaelementViewsinstead ofrecordOfSVGElements.mvc.Listener.- Tests & Stories
GraphProvider.overwriteDefaultPaperElementtests.- Utilities
makeOptionshelper to filter outundefinedvalues.setElements/setLinksundercell-utilities.updateGraphlogic for replacing/updating cells.Motivation and Context
The introduction of controlled mode marks a major step forward:
Developers can now choose whether the graph should be the single source of truth, or whether React should manage state and sync changes into the graph.
This bridges the gap between JointJS internals and React ecosystem practices, enabling seamless integration with external state managers like Redux, better testability, and predictable React rendering.
Screenshots
N/A — changes are internal and behavioral, no direct UI differences.