PR Checklist

• Addresses an existing open issue: closes FixedPoints Story: the edge are connected on a rectangle perimeter instead on the connection constraints of the vertex #840.
• You have discussed this issue with the maintainers of maxGraph, and you are assigned to the issue.
• The scope of the PR is sufficiently narrow to be examined in a single session. A PR covering several issues must be split into separate PRs. Do not create a large PR, otherwise it cannot be reviewed and you will be asked to split it later or the PR will be closed.
• I have added tests to prove my fix is effective or my feature works. This can be done in the form of automatic tests in packages/core/_tests_ or a new or altered Storybook story in packages/html/stories (an existing story may also demonstrate the change).
• I have provided screenshot/videos to demonstrate the change. If no releavant, explain why.
• I have added or edited necessary documentation, or no docs changes are needed.
• The PR title follows the "Conventional Commits" guidelines.

Overview

Restore mxgraph new edges endpoints positionning when using the connection handler to connect vertex cell shapes with non rectangular perimeters.

Bug description

When using the connection handler to connect cell shapes which have a non rectangular perimeter, the new edge preview displays correctly, but when the new edge is created, its endpoints are connected to connection points on the rectangular bounding box of the cell shape instead of to the connection points projected on the perimeter of cell shapes.
This pull request is intended to fix issue #840 although this bug occurs on any graph which uses the connection handler and vertex with non rectangular perimeters.

Demonstration using the Fixed Points story

• Current maxgraph behavior : The new edge connects to the bounding box of the cell shape instead of connecting to the actual perimeter of the cell shape.

  connection_perimeter_wrong.mp4

• Intended mxgraph behavior : the new edge connects directly to the perimeter of the cell shape.

  connection_perimeter_right.mp4

Analysis

As per the migration guide from mxgraph to maxgraph, some styling properties that used to be set using strings "0" or "1"' have been replaced with boolean values.

This includes the properties entryPerimeter and exitPerimeter of edge's style, which dictate whether edges should take the perimeter into account when connecting.

This type change has been taken into account accross the codebase, but not everywhere. Specifically it has not been taken into account for the connection handler in its connection handler mixin.

When creating new edges via connections, this style property is still set using a string in the setConnectionConstraint method, and they are thus ignored :

This issue is fixed by setting the appropriate values :

    if (!constraint.perimeter) {
      this.setCellStyles(source ? 'exitPerimeter' : 'entryPerimeter', false, [edge]);
    } else {
      this.setCellStyles(source ? 'exitPerimeter' : 'entryPerimeter', true, [edge]);
    }

Notes

• I've added no tests under packages/core/__tests__. Correctness can be assed using any story involving the connection handler and cell shapes with non rectangle perimeters.
• The setCellStyles method does not take advantage of the typescript type checker to catch these kinds of mistakes statically. Its signature is

  setCellStyles: (key: keyof CellStateStyle, value: CellStateStyle[keyof CellStateStyle], cells?: Cell[]) => void

  However there is no direct correlation between the first argument key and the type of the second argument value. Its type is a union of all types of CellStateStyle properties, which includes string, hence why typescript doesn't catch the error. I believe a possible solution might be to pass an object to setCellStyles to update styles instead of two separate arguments in order to catch errors, maybe

  setCellStyles: (style: Partial<CellStateStyle>, cells?: Cell[]) => void

  This change is probably far reaching and would probably involve a large refactor.
• It's probably not a good idea for to use ternary operators in arguments to resolve keys at runtime, which might confuse the typescript type checker.

Keywords

closes #840

Summary by CodeRabbit

• Bug Fixes
  • Improved handling of connection perimeter constraints so connection styling is applied consistently, leading to more predictable and reliable connection behavior.