Skip to content

Conversation

@tbouffard
Copy link
Member

@tbouffard tbouffard commented Feb 17, 2025

Introduce a dedicated ManhattanConnectorConfig global object and its companion reset function.

Also migrate the Manhattan story to TypeScript for easier maintenance. Make its code more robust and make better use of the maxGraph API.

BREAKING CHANGES: ManhattanConnector is now configured with the global ManhattanConnectorConfig object.
The following properties that were previously on EdgeStyle have moved to ManhattanConnectorConfig:

  • MANHATTAN_END_DIRECTIONS to endDirections
  • MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE to maxAllowedDirectionChange
  • MANHATTAN_MAXIMUM_LOOPS to maxLoops
  • MANHATTAN_START_DIRECTIONS to startDirections
  • MANHATTAN_STEP to step

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Introduced ManhattanConnectorConfig and resetManhattanConnectorConfig for enhanced routing configuration.
  • Refactor

    • Reorganized connector settings and removed legacy utility functions to streamline configuration management.
    • Updated shallowCopy function to improve array handling.
  • Tests

    • Added tests for the resetManhattanConnectorConfig functionality to ensure proper behavior after modification.
  • Documentation

    • Updated global configuration documentation to include new connector configurations and reset functions.

Introduce a dedicated `ManhattanConnectorConfig` global object and its companion reset function.

BREAKING CHANGES: `ManhattanConnector` is now configured with the global `ManhattanConnectorConfig` object.
The following properties that were previously on `EdgeStyle` have moved to `ManhattanConnectorConfig`:
  - `MANHATTAN_END_DIRECTIONS` to `endDirections`
  - `MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE` to `maxAllowedDirectionChange`
  - `MANHATTAN_MAXIMUM_LOOPS` to `maxLoops`
  - `MANHATTAN_START_DIRECTIONS` to `startDirections`
  - `MANHATTAN_STEP` to `step`
@tbouffard tbouffard added the enhancement New feature or request label Feb 17, 2025
@coderabbitai
Copy link

coderabbitai bot commented Feb 17, 2025

Walkthrough

The pull request reorganizes the internal API of the maxGraph library by restricting the visibility of utility functions, removing obsolete functions, and centralizing configuration management. It removes several public utility functions, relocates the version property, and introduces global configuration objects for the Manhattan and Orth connectors. Additionally, the changes enhance the shallow copy utility to handle arrays accurately, add tests for the reset functionality of the Manhattan connector configuration, and update related documentation and Storybook reset logic.

Changes

File(s) Change Summary
CHANGELOG.md Removed public utility functions (utils.isNullish, utils.isNotNullish, utils.getValue, stringUtils.getColor, stringUtils.getNumber, stringUtils.getStringValue); removed Client.isBrowserSupported; moved Client.VERSION to constants.VERSION; introduced global configuration objects (ManhattanConnectorConfig, OrthConnectorConfig) with renamed properties.
packages/core/__tests__/view/style/config.test.ts Added new tests for resetManhattanConnectorConfig to verify configuration reset and integrity of direction arrays.
packages/core/src/util/cloneUtils.ts Updated the shallowCopy function to explicitly handle arrays by using the spread operator for a shallow copy of array elements.
packages/core/src/view/style/EdgeStyle.ts, packages/core/src/view/style/config.ts, packages/html/.storybook/preview.ts, packages/website/docs/usage/global-configuration.md Centralized Manhattan and Orth connector configurations by introducing ManhattanConnectorConfig and updating ManhattanConnector to use it; added resetManhattanConnectorConfig; updated imports, reset logic in Storybook, and documentation accordingly.

Possibly related PRs


📜 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 8595fc9 and 7c4ad12.

📒 Files selected for processing (1)
  • packages/html/stories/Manhattan.stories.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/html/stories/Manhattan.stories.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build (windows-2022)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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. (Beta)
  • @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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🧹 Nitpick comments (3)
packages/core/src/view/style/config.ts (1)

131-132: Use type-safe initialization for the original config backup.

Instead of using type assertion, consider initializing the object with the same shape as ManhattanConnectorConfig.

Apply this diff:

-const originalManhattanConnectorConfig = {} as typeof ManhattanConnectorConfig;
-shallowCopy(ManhattanConnectorConfig, originalManhattanConnectorConfig);
+const originalManhattanConnectorConfig: ManhattanConnectorConfigType = {
+  maxAllowedDirectionChange: ManhattanConnectorConfig.maxAllowedDirectionChange,
+  maxLoops: ManhattanConnectorConfig.maxLoops,
+  endDirections: [...ManhattanConnectorConfig.endDirections],
+  startDirections: [...ManhattanConnectorConfig.startDirections],
+  step: ManhattanConnectorConfig.step,
+};
packages/website/docs/usage/global-configuration.md (2)

24-25: Fix indentation in the unordered list.

The indentation of the list items is inconsistent with the rest of the document. The markdownlint tool indicates that the indentation should be 2 spaces.

Apply this diff to fix the indentation:

-    - `ManhattanConnectorConfig` (since 0.16.0): for `ManhattanConnector`.
-    - `OrthConnectorConfig` (since 0.16.0): for `OrthConnector`.
+  - `ManhattanConnectorConfig` (since 0.16.0): for `ManhattanConnector`.
+  - `OrthConnectorConfig` (since 0.16.0): for `OrthConnector`.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

24-24: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


25-25: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


35-36: Fix indentation in the unordered list.

The indentation of the list items is inconsistent with the rest of the document. The markdownlint tool indicates that the indentation should be 2 spaces.

Apply this diff to fix the indentation:

-    - `resetManhattanConnectorConfig` (since 0.16.0)
-    - `resetOrthConnectorConfig` (since 0.16.0)
+  - `resetManhattanConnectorConfig` (since 0.16.0)
+  - `resetOrthConnectorConfig` (since 0.16.0)
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

35-35: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


36-36: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 4082e1f and 74ec1fa.

📒 Files selected for processing (7)
  • CHANGELOG.md (1 hunks)
  • packages/core/__tests__/view/style/config.test.ts (2 hunks)
  • packages/core/src/util/cloneUtils.ts (2 hunks)
  • packages/core/src/view/style/EdgeStyle.ts (9 hunks)
  • packages/core/src/view/style/config.ts (2 hunks)
  • packages/html/.storybook/preview.ts (2 hunks)
  • packages/website/docs/usage/global-configuration.md (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
packages/core/src/util/cloneUtils.ts (1)
Learnt from: tbouffard
PR: maxGraph/maxGraph#582
File: packages/core/src/util/config.ts:0-0
Timestamp: 2024-11-23T16:12:51.380Z
Learning: The `shallowCopy` function in `cloneUtils.ts` is intentionally designed to perform a shallow copy on objects that contain only primitive properties, and deep copying is not necessary.
🪛 markdownlint-cli2 (0.17.2)
packages/website/docs/usage/global-configuration.md

24-24: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


35-35: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)

🪛 Biome (1.9.4)
packages/core/src/util/cloneUtils.ts

[error] 78-78: Use Array.isArray() instead of instanceof Array.

instanceof Array returns false for array-like objects and arrays from other execution contexts.
Unsafe fix: Use Array.isArray() instead.

(lint/suspicious/useIsArray)

🪛 GitHub Actions: Generate website
packages/core/src/view/style/EdgeStyle.ts

[error] 1200-1200: Argument of type 'DirectionValue[]' is not assignable to parameter of type 'DIRECTION[]'. Type 'DirectionValue' is not assignable to type 'DIRECTION'. Type '"north"' is not assignable to type 'DIRECTION'.


[error] 1207-1207: Argument of type 'DirectionValue[]' is not assignable to parameter of type 'DIRECTION[]'. Type 'DirectionValue' is not assignable to type 'DIRECTION'. Type '"north"' is not assignable to type 'DIRECTION'.

🪛 GitHub Actions: Build
packages/core/src/view/style/EdgeStyle.ts

[error] 1200-1200: Argument of type 'DirectionValue[]' is not assignable to parameter of type 'DIRECTION[]'.

🪛 LanguageTool
CHANGELOG.md

[grammar] ~29-~29: This phrase is duplicated. You should probably use “to to” only once.
Context: ...Config: - MANHATTAN_END_DIRECTIONStoendDirections -MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGEtomaxAllowedDirectionChange -MANHATTAN_MAXIMUM_LOOPStomaxLoops -MANHATTAN_START_DIRECTIONStostartDirections -MANHATTAN_STEP` ...

(PHRASE_REPETITION)

🔇 Additional comments (5)
packages/html/.storybook/preview.ts (1)

8-8: LGTM! Reset function integration is well-placed.

The integration of resetManhattanConnectorConfig follows the established pattern and is appropriately placed in the reset sequence.

Also applies to: 27-27

packages/core/__tests__/view/style/config.test.ts (1)

42-71: LGTM! Comprehensive test coverage for the reset functionality.

The test suite thoroughly covers both simple values and array handling, ensuring the reset function works as expected.

packages/core/src/view/style/config.ts (1)

86-129: LGTM! Well-structured configuration type and object.

The ManhattanConnectorConfigType is well-documented and the configuration object provides sensible defaults.

packages/core/src/view/style/EdgeStyle.ts (1)

43-43: LGTM!

The import statement correctly imports both ManhattanConnectorConfig and OrthConnectorConfig from the configuration module.

CHANGELOG.md (1)

27-33: LGTM!

The breaking changes are well documented, clearly listing all properties that have been moved from EdgeStyle to ManhattanConnectorConfig.

🧰 Tools
🪛 LanguageTool

[grammar] ~29-~29: This phrase is duplicated. You should probably use “to to” only once.
Context: ...Config: - MANHATTAN_END_DIRECTIONStoendDirections -MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGEtomaxAllowedDirectionChange -MANHATTAN_MAXIMUM_LOOPStomaxLoops -MANHATTAN_START_DIRECTIONStostartDirections -MANHATTAN_STEP` ...

(PHRASE_REPETITION)

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

♻️ Duplicate comments (1)
packages/core/src/view/style/EdgeStyle.ts (1)

1158-1163: ⚠️ Potential issue

Fix type errors in direction handling.

The DirectionValue[] type is not assignable to DIRECTION[]. This needs to be fixed in multiple locations.

Apply this diff to fix the type errors:

-        ? ManhattanConnectorConfig.startDirections.every(
+        ? (ManhattanConnectorConfig.startDirections as DIRECTION[]).every(
             (d) => d != DIRECTION.NORTH && d != DIRECTION.SOUTH
           )
-        : ManhattanConnectorConfig.endDirections.every(
+        : (ManhattanConnectorConfig.endDirections as DIRECTION[]).every(
             (d) => d != DIRECTION.NORTH && d != DIRECTION.SOUTH
           );

-        ? ManhattanConnectorConfig.startDirections.every(
+        ? (ManhattanConnectorConfig.startDirections as DIRECTION[]).every(
             (d) => d != DIRECTION.WEST && d != DIRECTION.EAST
           )
-        : ManhattanConnectorConfig.endDirections.every(
+        : (ManhattanConnectorConfig.endDirections as DIRECTION[]).every(
             (d) => d != DIRECTION.WEST && d != DIRECTION.EAST
           );

      const startPoints = getRectPoints(
        start,
-        ManhattanConnectorConfig.startDirections,
+        ManhattanConnectorConfig.startDirections as DIRECTION[],
        opt
      ).filter((p) => obstacleMap.isPointAccessible(p));

      const endPoints = getRectPoints(
        end,
-        ManhattanConnectorConfig.endDirections,
+        ManhattanConnectorConfig.endDirections as DIRECTION[],
        opt
      ).filter((p) => obstacleMap.isPointAccessible(p));

Also applies to: 1175-1180, 1198-1208

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 74ec1fa and 5edcf94.

📒 Files selected for processing (1)
  • packages/core/src/view/style/EdgeStyle.ts (9 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: build (windows-2022)
  • GitHub Check: build
  • GitHub Check: build (macos-14)
  • GitHub Check: build (ubuntu-22.04)
🔇 Additional comments (1)
packages/core/src/view/style/EdgeStyle.ts (1)

35-35: LGTM! Import changes align with the PR objectives.

The addition of DirectionValue type and ManhattanConnectorConfig imports supports the introduction of the global configuration object.

Also applies to: 43-43

@tbouffard tbouffard marked this pull request as draft February 18, 2025 05:05
@tbouffard tbouffard marked this pull request as ready for review February 18, 2025 05:54
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (3)
packages/html/stories/Manhattan.stories.ts (3)

26-26: Remove file extension from import path.

The import statement includes the .ts file extension, which is not a common practice in TypeScript and may cause issues with some bundlers.

-import EventObject from '@maxgraph/core/lib/view/event/EventObject.ts';
+import EventObject from '@maxgraph/core/lib/view/event/EventObject';

38-38: Consider using a more specific type for the Template function parameters.

Using Record<string, string> is too generic. Consider creating an interface that explicitly defines the expected properties.

-const Template = ({ label, ...args }: Record<string, string>) => {
+interface TemplateProps {
+  label?: string;
+  [key: string]: string | undefined;
+}
+const Template = ({ label, ...args }: TemplateProps) => {

51-56: Improve type safety in event handling.

The event handling code uses any type in several places. Consider creating proper interfaces for the change objects.

-  graph.model.addListener(InternalEvent.CHANGE, (_sender: any, evt: EventObject) => {
+interface GeometryChange {
+  geometry: unknown;
+  previous: unknown;
+}
+  graph.model.addListener(InternalEvent.CHANGE, (_sender: unknown, evt: EventObject) => {
     const changes = evt.getProperty('changes');
     const hasMoveEdits = changes?.some(
-      (c: any) => typeof c.geometry !== 'undefined' && typeof c.previous !== 'undefined'
+      (c: GeometryChange) => typeof c.geometry !== 'undefined' && typeof c.previous !== 'undefined'
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 5edcf94 and 8595fc9.

📒 Files selected for processing (2)
  • packages/core/src/util/cloneUtils.ts (2 hunks)
  • packages/html/stories/Manhattan.stories.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/core/src/util/cloneUtils.ts
🔇 Additional comments (1)
packages/html/stories/Manhattan.stories.ts (1)

76-80: LGTM! Good improvements to variable declarations and naming.

The changes to use const and more descriptive vertex names improve code readability and maintainability.

@sonarqubecloud
Copy link

@tbouffard tbouffard merged commit 57366eb into main Feb 18, 2025
7 checks passed
@tbouffard tbouffard deleted the feat/introduce_ManhattanConnectorConfig branch February 18, 2025 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant