fix: update edge connector UI/UX to match old Apollon

[tamang29]

Checklist

• I added multiple screenshots/screencasts of my UI changes

Motivation and Context

Improve the UX when creating a connection between two UML elements. Now there is only a small point that you need to precisely select.

Description

This PR expands the handle grid in DefaultNodeWrapper.tsx so every side of a node has evenly distributed intermediate handle IDs while keeping the primary 4-way connection UX unchanged.

This PR follows the implementation of old Apollon while adding addional features.
Added two new intermediate handle IDs per side, for a total of 8 new IDs:
Top: TopMidLeft, TopMidRight
Right: RightMidTop, RightMidBottom
Bottom: BottomMidRight, BottomMidLeft
Left: LeftMidBottom, LeftMidTop
Updated FOUR_WAY_HANDLES_PRESET to include all newly added non-primary handles.
Updated handle placement so each side now follows an even spacing pattern:
Secondary offsets at 20%, 35%, 65%, 80%
Primary directional handles remain centered
Kept non-primary handles hidden and non-interactive, while primary Top/Right/Bottom/Left handles remain visible and connectable.

Steps for Testing

1. Create a Class Diagram
2. Try connecting two class diagram with edge.

Screenshots

Before:

After:

[FelixTJDietrich]

Other then this it worked as expected:

I really like the solution with the hidden connectors, great work! I would suggest dynamically creating those nodes based on width and height for the box nodes. I think you can add a connector for each border point that intersects with the grid, right now it's fractional which leads to some edges that cannot be straight. But we could also do that in a followup.

[tamang29]

Other then this it worked as expected:

I really like the solution with the hidden connectors, great work! I would suggest dynamically creating those nodes based on width and height for the box nodes. I think you can add a connector for each border point that intersects with the grid, right now it's fractional which leads to some edges that cannot be straight. But we could also do that in a followup.

I tried to use automatically computed edge handles based on size but it ended up re-rendering the dom too much.
Need to find a better approach to have this feature.
Something I would like to do as a follow up.

I also fixed this issue in this PR.

[FelixTJDietrich]

Thanks!