[2572] Use dynamic handles

[mcharfadi]

Bug: #2572

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?

[pcdavid]

Shouldn't this be more like || instead of &&? Written this way, it seems like we will update the connection handles only if both the source and target positions change.

Maybe something like this.

      if (
        nodeSourceConnectionHandle?.position !== sourcePosition ||
        nodeTargetConnectionHandle?.position !== targetPosition
      ) {
        let nodeSourceConnectionHandles: ConnectionHandle[] = sourceNode.data.connectionHandles;
        if (nodeSourceConnectionHandle?.position !== sourcePosition) {
          nodeSourceConnectionHandles = sourceNode.data.connectionHandles.map(
            (nodeConnectionHandle: ConnectionHandle) => {
              if (nodeConnectionHandle.id === sourceHandle && nodeConnectionHandle.type === 'source') {
                nodeConnectionHandle.position = sourcePosition;
              }
              return nodeConnectionHandle;
            }
          );
        }

        let nodeTargetConnectionHandles: ConnectionHandle[] = targetNode.data.connectionHandles;
        if (nodeTargetConnectionHandle?.position !== targetPosition) {
          nodeTargetConnectionHandles = targetNode.data.connectionHandles.map(
            (nodeConnectionHandle: ConnectionHandle) => {
              if (nodeConnectionHandle.id === targetHandle && nodeConnectionHandle.type === 'target') {
                nodeConnectionHandle.position = targetPosition;
              }
              return nodeConnectionHandle;
            }
          );
        }

...

[mcharfadi]

Yes currently, how we calculate a change in handle position is making both handles to change position.

[pcdavid]

This looks very similar to what's in layoutHandles (except it uses setNodes instead of diagram.nodes =), so:

• it's probably possible to share most/all of the code;
• the same remark I did regarding the logic of the if applies here too.

[mcharfadi]

I pushed a version that reuse more code but since we are in 2 différents situations I don't see how I could share more code.

[pcdavid]

This looks fine to me. There are a few minor known issues left, but they can probably be handled afterwards. @sbegaudeau can have a look and see if you find anything worth blocking this? Otherwise I'll merge it and start working the last remaining task (the feedback).

Known issues:

1. the edges go 1/2 pixels too far inside the nodes instead of stopping right at their border.
2. the presence of the "virtual handles" (one on the left side, one one the right side), even if they are invisible, means a single edge on the left or right side of a node does not point to the middle of the node's side.
3. the way "sibling handles" are ordered on a given side does not take the position of the target nodes into account, which creates edge crossings in some cases. There's probably a way to improve this in common cases without going all the way and try to fix all potential edge crossings.
4. Feedback is missing (incompatible nodes faded, compatible nodes unfaded, selected/target node highlighed).
5. It's possible to trigger a reconnect even on an edge which is not currently selected (maybe we actually want this?).

There a probably also possible ergonomics improvements that we'll discover once this is merged and we actually start using all this.

[pcdavid]

Waiting for the build to merge. We'll handle the known issues and missing parts in later PRs.