feat: Center binding on SHIFT key

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/element/src/binding.ts

@@ -241,6 +241,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
   endIdx: number,
   appState: AppState,
   globalBindMode?: AppState["bindMode"],
+  shiftKey?: boolean,
 ): {
   start: BindingStrategy;
   end: BindingStrategy;
@@ -334,12 +335,11 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
 
       const otherIsInsideBinding =
         !!appState.selectedLinearElement?.initialState.arrowStartIsInside;
-
       const other: BindingStrategy = {
         mode: otherIsInsideBinding ? "inside" : "orbit",
         element: otherElement,
-        focusPoint: otherIsInsideBinding
-          ? origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y)
+        focusPoint: shiftKey
+          ? elementCenterPoint(otherElement, elementsMap)
           : origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
       };
 
@@ -396,6 +396,7 @@ const bindingStrategyForSimpleArrowEndpointDragging = (
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   globalBindMode: AppState["bindMode"],
   arrow: NonDeleted<ExcalidrawArrowElement>,
+  shiftKey?: boolean,
 ): { current: BindingStrategy; other: BindingStrategy } => {
   let current: BindingStrategy = { mode: undefined };
   let other: BindingStrategy = { mode: undefined };
@@ -515,6 +516,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
   appState: AppState,
   opts?: {
     newArrow?: boolean;
+    shiftKey?: boolean;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   const globalBindMode = appState.bindMode || "orbit";
@@ -574,6 +576,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       endIdx,
       appState,
       globalBindMode,
+      opts?.shiftKey,
     );
 
     return { start, end };
@@ -597,6 +600,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       elements,
       globalBindMode,
       arrow,
+      opts?.shiftKey,
     );
 
     return { start: current, end: other };
@@ -619,6 +623,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       elements,
       globalBindMode,
       arrow,
+      opts?.shiftKey,
     );
 
     return { start: other, end: current };

packages/element/src/linearElementEditor.ts

@@ -354,6 +354,7 @@ export class LinearElementEditor {
       element,
       elements,
       app,
+      event.shiftKey,
     );
 
     LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -517,6 +518,7 @@ export class LinearElementEditor {
       element,
       elements,
       app,
+      event.shiftKey,
     );
 
     LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -2054,6 +2056,7 @@ const pointDraggingUpdates = (
   element: NonDeleted<ExcalidrawLinearElement>,
   elements: readonly Ordered<NonDeletedExcalidrawElement>[],
   app: AppClassProperties,
+  shiftKey: boolean,
 ): {
   positions: PointsPositionUpdates;
   updates?: PointMoveOtherUpdates;
@@ -2099,6 +2102,7 @@ const pointDraggingUpdates = (
     app.state,
     {
       newArrow: !!app.state.newElement,
+      shiftKey,
     },
   );