Skip to content

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

Merged
merged 8 commits into from
Jun 2, 2025

Conversation

zbynekstara
Copy link
Contributor

@zbynekstara zbynekstara commented May 23, 2025

Description

Converts joint/demo/container into TS and moves to examples/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.

@zbynekstara zbynekstara requested review from Copilot and kumilingus May 23, 2025 14:29
Copy link

@Copilot 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 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'));

@zbynekstara zbynekstara changed the title feat(joint-core/demo/container): render collapse button via highlighter feat(examples/container): move to examples, convert to TS, render collapse button via highlighter May 28, 2025
@zbynekstara zbynekstara requested a review from Copilot May 28, 2025 17:37
Copy link

@Copilot 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 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

@zbynekstara zbynekstara reopened this May 30, 2025
@zbynekstara zbynekstara force-pushed the improve-container-demo branch from 87ee51a to d374315 Compare June 2, 2025 11:53
@zbynekstara zbynekstara merged commit 2726771 into clientIO:master Jun 2, 2025
1 check passed
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