[6155] Prevent edge handle detachment after node resize

[frouene]

Bug: #6155

Pull request template

General purpose

What is the main goal of this pull request?

• Bug fixes
• New features
• Documentation
• Cleanup
• Tests
• Build / releng

Project management

• Has the pull request been added to the relevant project and milestone? (Only if you know that your work is part of a specific iteration such as the current one)
• Have the priority: and pr: labels been added to the pull request? (In case of doubt, start with the labels priority: low and pr: to review later)
• Have the relevant issues been added to the pull request?
• Have the relevant labels been added to the issues? (area:, difficulty:, type:)
• Have the relevant issues been added to the same project and milestone as the pull request?
• Has the CHANGELOG.adoc been updated to reference the relevant issues?
• Have the relevant API breaks been described in the CHANGELOG.adoc? (Including changes in the GraphQL API)
• In case of a change with a visual impact, are there any screenshots in the CHANGELOG.adoc? For example in doc/screenshots/2022.5.0-my-new-feature.png

Architectural decision records (ADR)

• Does the title of the commit contributing the ADR start with [doc]?
• Are the ADRs mentioned in the relevant section of the CHANGELOG.adoc?

Dependencies

• Are the new / upgraded dependencies mentioned in the relevant section of the CHANGELOG.adoc?
• Are the new dependencies justified in the CHANGELOG.adoc?

Frontend

This section is not relevant if your contribution does not come with changes to the frontend.

General purpose

• Is the code properly tested? (Plain old JavaScript tests for business code and tests based on React Testing Library for the components)

Typing

We need to improve the typing of our code, as such, we require every contribution to come with proper TypeScript typing for both changes contributing new files and those modifying existing files.
Please ensure that the following statements are true for each file created or modified (this may require you to improve code outside of your contribution).

• Variables have a proper type
• Functions’ arguments have a proper type
• Functions’ return type are specified
• Hooks are properly typed:
  • useMutation<DATA_TYPE, VARIABLE_TYPE>(…)
  • useQuery<DATA_TYPE, VARIABLE_TYPE>(…)
  • useSubscription<DATA_TYPE, VARIABLE_TYPE>(…)
  • useMachine<CONTEXT_TYPE, EVENTS_TYPE>(…)
  • useState<STATE_TYPE>(…)
• All components have a proper typing for their props
• No useless optional chaining with ?. (if the GraphQL API specifies that a field cannot be null, do not treat it has potentially null for example)
• Nullable values have a proper type (for example let diagram: Diagram | null = null;)

Backend

This section is not relevant if your contribution does not come with changes to the backend.

General purpose

• Are all the event handlers tested?
• Are the event processor tested?
• Is the business code (services) tested?
• Are diagram layout changes tested?

Architecture

• Are data structure classes properly separated from behavioral classes?
• Are all the relevant fields final?
• Is any data structure mutable? If so, please write a comment indicating why
• Are behavioral classes either stateless or side effect free?

Review

How to test this PR?

Please describe here the various use cases to test this pull request

• Has the Kiwi TCMS test suite been updated with tests for this contribution?

[sbegaudeau]

Quick automatic review (please ignore this message)

Pull Request Status: The pull request #6186 is OPEN and mergeable. However, the CI status is currently Failing due to the Metadata Review. You should check the PR title, description, or labels to ensure they meet the repository's standards. The core Build check passed successfully.

Summary: This PR successfully addresses issue #6155 (#6155) by ensuring that edge handles are correctly repositioned after a node resize. It introduces a call to updateNodeInternals when a resize operation completes and simplifies the multi-select resize logic. A new Playwright E2E test has been added to verify the fix with custom handles.

🚨 Critical & Architectural Issues

• Stale Closure in useResizeChange: In packages/diagrams/frontend/sirius-components-diagrams/src/renderer/resize/useResizeChange.tsx, the zoom variable is used inside the transformResizeListNodeChanges callback, but it is missing from the dependency array. This will cause the callback to use a stale value of zoom if the user zooms in or out.

1     // packages/diagrams/frontend/sirius-components-diagrams/src/renderer/resize/useResizeChange.tsx
2
3     // Violation of: Effect Dependencies rule
4     const zoom = store.getState().transform[2];
5
6     const transformResizeListNodeChanges = useCallback(
7       (changes: NodeChange<Node<NodeData>>[]): NodeChange<Node<NodeData>>[] => {
8         // ... uses zoom here ...
9       },

10 [getNodes] // ❌ Missing 'zoom'
11 );
Fix: Add zoom to the dependency array.

• Incorrect Dependency Array in useHandleResizedChange: In packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/useHandleResizedChange.tsx, the dependency array for applyResizeHandleChange has a duplicate entry and is missing required dependencies.

1 // packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/useHandleResizedChange.tsx
2
3 // Violation of: Effect Dependencies rule
4 [state.finalHeight, state.finalHeight, state.initialHeight, state.initialWidth] // ❌ Duplicate 'finalHeight', missing 'finalWidth' and 'updateNodeInternals'
Fix: Update the dependency array to [state.finalHeight, state.finalWidth, state.initialHeight, state.initialWidth, updateNodeInternals].

⚠️ Standard & Stylistic Feedback

• CI Failure: The Metadata Review check is failing. Please ensure your PR title follows the convention (e.g., [6155] ...) and that appropriate labels are applied.
• Dependency Stability: While updateNodeInternals from @xyflow/react is generally stable, it is considered best practice to include it in the dependency arrays of hooks where it is consumed.

✅ What Went Well

• Comprehensive E2E Test: Great job adding a Playwright test that specifically targets the edge case of custom handles during resize. This provides excellent regression testing for this bug.
• Logic Simplification: The refactoring of applyMultiSelectResize to use the native node.selected property instead of manually checking selection entries is a great improvement in both readability and performance.
• Architectural Alignment: The use of updateNodeInternals is exactly the right way to handle React Flow synchronization after direct data modifications that affect handle positions.

[sbegaudeau]

This PR seems to work for resize from the top of the left but not on the right or bottom. I can still reproduce the issue quite easily. Please also consider the comments made by the automatic review regarding the array dependencies.

[frouene]

This PR seems to work for resize from the top of the left but not on the right or bottom. I can still reproduce the issue quite easily. Please also consider the comments made by the automatic review regarding the array dependencies.

In fact, only simple resizing was supported, not move + resize or multiple resizing, so I fixed that.
I also took other feedback into account.