feat: simplify types used to register shapes #768

tbouffard · 2025-04-17T06:29:42Z

Previously, there were TSC errors when registering some builtin or custom shape because their constructor didn't match
the signature of the Shape constructor.
The type of various CellRenderer properties and methods has been updated to fix this, so it is no longer necessary to
add some 'ts-ignore' to silently ignore these false errors.

In addition:

Various improvements in the JSDoc of CellRenderer
CellRenderer.getShape allows undefined parameter
Move ActorShape to the directory storing vertex shapes for consistency

Summary by CodeRabbit

New Features
- Added a new type for shape constructors, improving type safety when creating custom shapes.
Refactor
- Updated and standardized import paths for shape modules.
- Improved type annotations and clarity around shape registration and usage.
Style
- Removed unnecessary TypeScript ignore comments from sample and story files for cleaner code.

Previously, there were TSC errors when registering some builtin or custom shape because their constructor didn't match the signature of the `Shape` constructor. The type of various `CellRenderer` properties and methods has been updated to fix this, so it is no longer necessary to add some 'ts-ignore' to silently ignore these false errors. In addition: - Various improvements in the JSDoc of `CellRenderer` - `CellRenderer.getShape` allows `undefined` parameter - Move `ActorShape` to the directory storing vertex shapes for consistency

coderabbitai · 2025-04-17T06:29:50Z

Walkthrough

This update refactors type annotations and import paths related to shape constructors within the codebase. A new ShapeConstructor type is introduced and adopted in the CellRenderer class and related modules to improve type safety and clarity. Import paths for several shape modules are corrected, particularly for ActorShape, aligning them under a consistent directory structure. TypeScript ignore comments are removed from story and example files, reflecting improved type compatibility. No changes are made to runtime logic or exported APIs, except for the addition of the new type alias.

Changes

Files/Group	Change Summary
`packages/core/src/types.ts`	Added new exported type alias `ShapeConstructor` for shape class constructors.
`packages/core/src/view/cell/CellRenderer.ts`	Refactored static and method type annotations to use `ShapeConstructor`; updated related imports and documentation.
`packages/core/src/view/cell/register-shapes.ts`	Updated type annotations for shape registration to use `ShapeConstructor`; corrected import paths.
`packages/core/src/index.ts`	Changed export path for `ActorShape` to align with new directory structure.
`packages/core/src/view/geometry/node/ActorShape.ts`	Adjusted import paths and used type-only imports for dependencies.
`packages/core/src/view/geometry/node/CloudShape.ts` `.../HexagonShape.ts` `.../TriangleShape.ts`	Changed import path for `ActorShape` to reference the current directory.
`packages/html/stories/Handles.stories.ts` `.../Markers.stories.ts` `packages/ts-example/src/custom-shapes.ts`	Removed TypeScript ignore comments before custom shape registration calls.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CellRenderer
    participant ShapeConstructor
    User->>CellRenderer: registerShape(name, shape: ShapeConstructor)
    CellRenderer->>CellRenderer: Store shape in defaultShapes
    User->>CellRenderer: getShapeConstructor(cellState)
    CellRenderer->>CellRenderer: Lookup shape in defaultShapes
    alt Shape found
        CellRenderer->>User: Return ShapeConstructor
    else Not found
        CellRenderer->>User: Return defaultEdgeShape or defaultVertexShape
    end

Possibly related PRs

refactor: simplify CellRenderer #659: Modifies CellRenderer type annotations and method signatures, overlapping with the current refactor of shape constructor types.

Suggested labels

refactor

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)

We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b80d738 and 100b78d.

📒 Files selected for processing (11)

packages/core/src/index.ts (1 hunks)
packages/core/src/types.ts (1 hunks)
packages/core/src/view/cell/CellRenderer.ts (4 hunks)
packages/core/src/view/cell/register-shapes.ts (2 hunks)
packages/core/src/view/geometry/node/ActorShape.ts (1 hunks)
packages/core/src/view/geometry/node/CloudShape.ts (1 hunks)
packages/core/src/view/geometry/node/HexagonShape.ts (1 hunks)
packages/core/src/view/geometry/node/TriangleShape.ts (1 hunks)
packages/html/stories/Handles.stories.ts (0 hunks)
packages/html/stories/Markers.stories.ts (0 hunks)
packages/ts-example/src/custom-shapes.ts (0 hunks)

💤 Files with no reviewable changes (3)

packages/ts-example/src/custom-shapes.ts
packages/html/stories/Markers.stories.ts
packages/html/stories/Handles.stories.ts

🧰 Additional context used

🧬 Code Graph Analysis (2)

packages/core/src/view/cell/register-shapes.ts (1)

packages/core/src/types.ts (1)

ShapeConstructor (1375-1375)

packages/core/src/view/cell/CellRenderer.ts (1)

packages/core/src/types.ts (1)

ShapeConstructor (1375-1375)

🔇 Additional comments (17)

packages/core/src/types.ts (1)

1372-1375: Introduce ShapeConstructor alias to unify shape constructor signatures.

The new type alias centralizes the constructor signature for all shape classes and is correctly annotated with @since 0.18.0. This improves type safety and eliminates the need for scattered ts-ignore comments when registering shapes.

packages/core/src/view/geometry/node/HexagonShape.ts (1)

19-19: Update import path for ActorShape.

The import now correctly points to ./ActorShape in the node directory, aligning with the relocated module.

packages/core/src/view/geometry/node/TriangleShape.ts (1)

20-20: Correct ActorShape import path.

This change reflects the move of ActorShape into the node subfolder, ensuring consistency across shape files.

packages/core/src/view/geometry/node/CloudShape.ts (1)

19-19: Fix ActorShape import path for CloudShape.

The module path is updated to ./ActorShape under the node directory, matching the reorganization.

packages/core/src/index.ts (1)

96-96: Adjust export path for ActorShape in the index.

The export now references ./view/geometry/node/ActorShape, consistent with the module’s new location.

packages/core/src/view/geometry/node/ActorShape.ts (1)

19-23: Import path adjustments are well aligned with directory structure change.

The updated import paths correctly reflect the new location of ActorShape in the node subdirectory, maintaining proper relative paths to dependencies. The use of type imports for Rectangle and AbstractCanvas2D is a good practice as these are only needed for type checking, which can help with tree-shaking during bundling.

packages/core/src/view/cell/register-shapes.ts (4)

18-18: Good adoption of the new ShapeConstructor type.

The import of the new ShapeConstructor type from ../../types aligns with the PR objective to simplify shape registration types, providing better type safety and consistency.

24-24: Path correction for ActorShape is accurate.

The import path has been properly updated to reflect the new location of ActorShape in the node directory structure, maintaining consistency with other node shape imports.

48-48: Type annotation improvement enhances type safety.

Using the imported ShapeConstructor type for the shapesToRegister array provides better type safety and clearer intent than the previous inline constructor type.

53-53: Order adjustment in shape registration array.

The change in order between SHAPE.CLOUD and SHAPE.CONNECTOR in the array doesn't affect functionality but improves consistency in the registration sequence.

packages/core/src/view/cell/CellRenderer.ts (7)

49-49: Proper type import for enhanced type safety.

Importing the ShapeConstructor type from the types module aligns with the PR objective to simplify and unify type handling for shape constructors.

76-97: Enhanced JSDoc documentation improves developer experience.

The expanded JSDoc comments for the defaultShapes property now provide a comprehensive list of all built-in shapes, which significantly improves code discoverability and documentation.

104-104: Type refinement for shape properties is consistent.

Changing the types of defaultEdgeShape and defaultVertexShape from specific constructor types to the more generic ShapeConstructor type improves consistency and aligns with the type system improvements.

Also applies to: 110-110

151-154: Added example improves method documentation.

The added example in the JSDoc for the registerShape method enhances the developer experience by showing the correct usage pattern.

159-159: Consistent type annotation for registerShape method parameter.

Updating the shape parameter type from typeof Shape to ShapeConstructor aligns with the PR objective to simplify types and provides a more accurate representation of the accepted values.

206-208: Improved getShape method signature.

Making the name parameter optional and updating the return type to ShapeConstructor | null enhances method flexibility and type safety, allowing the method to accept undefined parameters without TypeScript errors.

213-221: Simplified getShapeConstructor method implementation.

The code now uses the ShapeConstructor type consistently and has a cleaner return statement without need for fallback null coalescing or TypeScript expect-error comments, making the code more maintainable.

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

sonarqubecloud · 2025-04-17T06:30:47Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

tbouffard added the bug Something isn't working label Apr 17, 2025

tbouffard marked this pull request as ready for review April 17, 2025 06:34

tbouffard added enhancement New feature or request and removed bug Something isn't working labels Apr 17, 2025

tbouffard changed the title ~~fix: simplify types used to register shapes~~ feat: simplify types used to register shapes Apr 17, 2025

tbouffard merged commit 7cac321 into main Apr 17, 2025
7 checks passed

tbouffard deleted the fix/improve_type_to_registerShape branch April 17, 2025 08:57

coderabbitai bot mentioned this pull request Apr 28, 2025

feat: improve IDE guidance for style element registration #787

Merged

tbouffard mentioned this pull request May 22, 2025

refactor: [POC] Replace mxGraph with maxGraph 0.20.0 process-analytics/bpmn-visualization-js#3340

Closed

coderabbitai bot mentioned this pull request Nov 19, 2025

refactor: introduce AbstractPathShape base class for shape hierarchy #953

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: simplify types used to register shapes #768

feat: simplify types used to register shapes #768

Uh oh!

tbouffard commented Apr 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 17, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

sonarqubecloud bot commented Apr 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

feat: simplify types used to register shapes #768

feat: simplify types used to register shapes #768

Uh oh!

Conversation

tbouffard commented Apr 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

sonarqubecloud bot commented Apr 17, 2025

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tbouffard commented Apr 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 17, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)