fix: excalidraw arrow binding on drag (#24)

* fix: bind arrows to nodes in base generator

* fix: attach special-case arrows to their elements

* test: normalize boundElements in integration snapshots

* chore: fix eslint formatting

Author: shashidhar-bm

src/generators/generators/__tests__/base-node.generator.test.ts

@@ -5,7 +5,7 @@ import { BaseNodeGenerator } from '../base-node.generator';
 import { ExecutionPlanNode } from '../../../types/execution-plan.types';
 import { NodeInfo } from '../../types/node-info.types';
 import { GenerationContext } from '../../types/generation-context.types';
-import { ExcalidrawElement } from '../../../types/excalidraw.types';
+import { ExcalidrawArrow, ExcalidrawElement } from '../../../types/excalidraw.types';
 
 /**
  * Test implementation to test createOperatorText protected method
@@ -234,6 +234,29 @@ describe('BaseNodeGenerator', () => {
       // Should create arrows with column labels if applicable
       TestHelpers.assertHasArrows(result);
     });
+
+    it('should bind arrows to connected elements', () => {
+      const childNode = NodeBuilder.createSimpleNode('ChildOp');
+      const node = NodeBuilder.createNodeWithChildren('ParentOp', [childNode]);
+      const result = generator.generate(node);
+
+      const arrows = TestHelpers.getArrows(result.elements) as ExcalidrawArrow[];
+      expect(arrows.length).toBe(1);
+      const arrow = arrows[0];
+      const rectangles = TestHelpers.getRectangles(result.elements);
+
+      const parentRect = rectangles.find((rect) => rect.id === arrow.endBinding?.elementId);
+      const childRect = rectangles.find((rect) => rect.id === arrow.startBinding?.elementId);
+
+      expect(parentRect).toBeDefined();
+      expect(childRect).toBeDefined();
+
+      const parentBindings = parentRect?.boundElements ?? [];
+      const childBindings = childRect?.boundElements ?? [];
+
+      expect(parentBindings).toEqual(expect.arrayContaining([{ id: arrow.id, type: 'arrow' }]));
+      expect(childBindings).toEqual(expect.arrayContaining([{ id: arrow.id, type: 'arrow' }]));
+    });
   });
 
   describe('createArrowsToParent', () => {
@@ -311,4 +334,3 @@ describe('BaseNodeGenerator', () => {
     });
   });
 });
-

src/generators/generators/base-node.generator.ts

@@ -167,6 +167,30 @@ export abstract class BaseNodeGenerator implements NodeGeneratorStrategy {
     );
   }
 
+  /**
+   * Binds an arrow to the connected elements so Excalidraw keeps them attached when moved
+   */
+  protected bindArrowToElements(
+    context: GenerationContext,
+    arrowId: string,
+    elementIds: string[]
+  ): void {
+    for (const element of context.elements) {
+      if (!elementIds.includes(element.id)) {
+        continue;
+      }
+
+      if (!element.boundElements) {
+        element.boundElements = [];
+      }
+
+      const alreadyBound = element.boundElements.some((binding) => binding.id === arrowId);
+      if (!alreadyBound) {
+        element.boundElements.push({ id: arrowId, type: 'arrow' });
+      }
+    }
+  }
+
   /**
    * Helper method for creating arrows with ellipsis
    * Uses ArrowPositionCalculator and ColumnLabelRenderer for consistent behavior
@@ -201,6 +225,7 @@ export abstract class BaseNodeGenerator implements NodeGeneratorStrategy {
         strokeColor: context.config.arrowColor,
       });
       context.elements.push(arrow);
+      this.bindArrowToElements(context, arrowId, [childRectId, parentRectId]);
     }
 
     // Add "..." text if needed
@@ -238,6 +263,7 @@ export abstract class BaseNodeGenerator implements NodeGeneratorStrategy {
           strokeColor: context.config.arrowColor,
         });
         context.elements.push(arrow);
+        this.bindArrowToElements(context, arrowId, [childRectId, parentRectId]);
       }
     }
 
@@ -353,4 +379,3 @@ export abstract class BaseNodeGenerator implements NodeGeneratorStrategy {
     return baseHeight;
   }
 }
-

src/generators/generators/data-source-node.generator.ts

@@ -383,6 +383,7 @@ export class DataSourceNodeGenerator extends BaseNodeGenerator {
           strokeColor: context.config.arrowColor,
         });
         context.elements.push(arrow);
+        this.bindArrowToElements(context, arrowId, [arrowStartElementId, rectId]);
       }
 
       // Create projection text element at the middle of the edges (arrows)
@@ -543,4 +544,3 @@ export class DataSourceNodeGenerator extends BaseNodeGenerator {
     };
   }
 }
-

src/generators/generators/hash-join-node.generator.ts

@@ -193,6 +193,7 @@ export class HashJoinNodeGenerator extends BaseNodeGenerator {
         strokeColor: context.config.arrowColor,
       });
       context.elements.push(arrow);
+      this.bindArrowToElements(context, arrowId, [buildSideInfo.rectId, hashTableId]);
     }
 
     // Display columns on arrows from build side (using build side's columns and sort order)
@@ -306,6 +307,7 @@ export class HashJoinNodeGenerator extends BaseNodeGenerator {
         strokeColor: context.config.arrowColor,
       });
       context.elements.push(arrow);
+      this.bindArrowToElements(context, arrowId, [probeSideInfo.rectId, hashTableId]);
     }
 
     // Display columns on arrows from probe side (using probe side's columns and sort order)
@@ -411,4 +413,3 @@ export class HashJoinNodeGenerator extends BaseNodeGenerator {
     };
   }
 }
-

src/generators/generators/sort-merge-join-node.generator.ts

@@ -188,6 +188,7 @@ export class SortMergeJoinNodeGenerator extends BaseNodeGenerator {
         strokeColor: context.config.arrowColor,
       });
       context.elements.push(arrow);
+      this.bindArrowToElements(context, arrowId, [leftSideInfo.rectId, rectId]);
     }
 
     // Display columns on arrows from left side (using left side's columns and sort order)
@@ -277,6 +278,7 @@ export class SortMergeJoinNodeGenerator extends BaseNodeGenerator {
         strokeColor: context.config.arrowColor,
       });
       context.elements.push(arrow);
+      this.bindArrowToElements(context, arrowId, [rightSideInfo.rectId, rectId]);
     }
 
     // Display columns on arrows from right side (using right side's columns and sort order)
@@ -432,4 +434,3 @@ export class SortMergeJoinNodeGenerator extends BaseNodeGenerator {
     };
   }
 }
-

src/generators/generators/union-node.generator.ts

@@ -241,6 +241,7 @@ export class UnionNodeGenerator extends BaseNodeGenerator {
             strokeColor: context.config.arrowColor,
           });
           context.elements.push(arrow);
+          this.bindArrowToElements(context, arrowId, [childInfo.rectId, rectId]);
         }
 
         // Add column labels if available (once per child, not per arrow)
@@ -324,4 +325,3 @@ export class UnionNodeGenerator extends BaseNodeGenerator {
     };
   }
 }
-

tests/integration.test.ts

@@ -39,6 +39,11 @@ function normalizeExcalidraw(data: ExcalidrawData): ExcalidrawData {
       normalizedElement.groupIds = [];
     }
 
+    // Remove boundElements because bindings depend on generated IDs
+    if (normalizedElement.boundElements) {
+      normalizedElement.boundElements = [];
+    }
+
     return normalizedElement;
   });
 
@@ -123,4 +128,3 @@ describe('Examples Integration Tests', () => {
     expect(orphanedExpected).toEqual([]);
   });
 });
-