Merge pull request #7482 from clementcontet/fix-7426

fix: insertion marker position when connection is resized (#7426)

Author: rachel-fenichel

core/block_svg.ts

@@ -1515,22 +1515,27 @@ export class BlockSvg
    * or an insertion marker.
    *
    * @param sourceConnection The connection on the moving block's stack.
-   * @param targetConnection The connection that should stay stationary as this
-   *     block is positioned.
+   * @param originalOffsetToTarget The connection original offset to the target connection
+   * @param originalOffsetInBlock The connection original offset in its block
    * @internal
    */
   positionNearConnection(
     sourceConnection: RenderedConnection,
-    targetConnection: RenderedConnection,
+    originalOffsetToTarget: {x: number; y: number},
+    originalOffsetInBlock: Coordinate,
   ) {
     // We only need to position the new block if it's before the existing one,
     // otherwise its position is set by the previous block.
     if (
       sourceConnection.type === ConnectionType.NEXT_STATEMENT ||
       sourceConnection.type === ConnectionType.INPUT_VALUE
     ) {
-      const dx = targetConnection.x - sourceConnection.x;
-      const dy = targetConnection.y - sourceConnection.y;
+      // First move the block to match the orginal target connection position
+      let dx = originalOffsetToTarget.x;
+      let dy = originalOffsetToTarget.y;
+      // Then adjust its position according to the connection resize
+      dx += originalOffsetInBlock.x - sourceConnection.getOffsetInBlock().x;
+      dy += originalOffsetInBlock.y - sourceConnection.getOffsetInBlock().y;
 
       this.moveBy(dx, dy);
     }

core/insertion_marker_manager.ts

@@ -611,12 +611,22 @@ export class InsertionMarkerManager {
     insertionMarker.queueRender();
     renderManagement.triggerQueuedRenders();
 
-    // Position so that the existing block doesn't move.
-    insertionMarker.positionNearConnection(imConn, closest);
     // Connect() also renders the insertion marker.
     imConn.connect(closest);
 
+    const originalOffsetToTarget = {
+      x: closest.x - imConn.x,
+      y: closest.y - imConn.y,
+    };
+    const originalOffsetInBlock = imConn.getOffsetInBlock().clone();
+    const imConnConst = imConn;
     renderManagement.finishQueuedRenders().then(() => {
+      // Position so that the existing block doesn't move.
+      insertionMarker?.positionNearConnection(
+        imConnConst,
+        originalOffsetToTarget,
+        originalOffsetInBlock,
+      );
       insertionMarker?.getSvgRoot().setAttribute('visibility', 'visible');
     });