-
Notifications
You must be signed in to change notification settings - Fork 868
feat(examples/container): move to examples, convert to TS, render collapse button via highlighter #2972
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(examples/container): move to examples, convert to TS, render collapse button via highlighter #2972
Conversation
There was a problem hiding this 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 implements improvements to container components by rendering collapse/expand buttons via a custom highlighter instead of embedding them directly in the markup. Key changes include refactoring container shape definitions, updating the toggle behavior and event handling in the diagram, and adding custom CSS for improved visual consistency.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
File | Description |
---|---|
packages/joint-core/demo/container/src/joint.shapes.container.js | Refactored container shapes definitions, updated constants, and modified the toggle method to delegate collapse/expand rendering. |
packages/joint-core/demo/container/src/index.js | Introduced a cellNamespace, implemented an ExpandButtonHighlighter to handle button rendering, and revised event handlers for container size updates. |
packages/joint-core/demo/container/css/container.css | Added CSS styles for the paper border and margin adjustments. |
Comments suppressed due to low confidence (1)
packages/joint-core/demo/container/src/joint.shapes.container.js:139
- The toggle method no longer updates the button icon attribute, so please ensure that the highlighter component reliably updates the collapse/expand icon to avoid any visual inconsistencies.
this.set('collapsed', typeof shouldCollapse === 'boolean' ? shouldCollapse : !this.get('collapsed'));
There was a problem hiding this 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 migrates the JointJS container demo from the legacy JavaScript implementation in packages/joint-core to a new TypeScript-based demo in the examples folder while updating the collapse/expand button rendering to use a highlighter.
- Moved container demo code from packages/joint-core to examples/container
- Converted code to TypeScript and updated the webpack configuration
- Introduced a highlighter-based rendering for container collapse/expand buttons
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
File | Description |
---|---|
packages/joint-core/demo/container/* | Removed legacy JS implementation |
examples/container/webpack.config.js | Added webpack configuration for TS builds |
examples/container/tsconfig.json | Added TS configuration |
examples/container/src/shapes.ts | New TS definitions for Container, Child, and Link |
examples/container/src/index.ts | Updated TS entry point with highlighter logic and interactive tools |
examples/container/package.json | Package configuration for the new demo |
examples/container/index.html & index.css | HTML and CSS updates to support the new build output |
examples/container/README.md & .gitignore | Updated documentation and ignore rules for the new demo |
87ee51a
to
d374315
Compare
Co-authored-by: Copilot <[email protected]>
Description
Converts
joint/demo/container
into TS and moves toexamples/container
.Renders containers' collapse/expand buttons with a highlighter, instead of hard-coding them in their markup.
Motivation and Context
Using highlighters for this purpose is a better practice, since they can be mixed-and-matched with any shape.