feat: Remove center binding

packages/element/src/binding.ts

@@ -340,11 +340,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
         element: otherElement,
         focusPoint: otherIsInsideBinding
           ? origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y)
-          : snapToCenter(
-              otherElement,
-              elementsMap,
-              origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
-            ),
+          : origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
       };
 
       // We are hovering another element with the end point
@@ -358,10 +354,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
         current = {
           mode: isInsideBinding && !isNested ? "inside" : "orbit",
           element: hit,
-          focusPoint:
-            isInsideBinding || isNested
-              ? point
-              : snapToCenter(hit, elementsMap, point),
+          focusPoint: isInsideBinding || isNested ? point : point,
         };
       } else {
         current = { mode: null };
@@ -481,7 +474,7 @@ const bindingStrategyForSimpleArrowEndpointDragging = (
         current = {
           element: hit,
           mode: "orbit",
-          focusPoint: isNested ? point : snapToCenter(hit, elementsMap, point),
+          focusPoint: isNested ? point : point,
         };
       }
 
@@ -1090,35 +1083,6 @@ export const avoidRectangularCorner = (
   return p;
 };
 
-export const snapToCenter = (
-  element: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  p: GlobalPoint,
-): GlobalPoint => {
-  const percent = 0.5;
-
-  const center = elementCenterPoint(element, elementsMap);
-
-  return pointDistance(center, p) <
-    (Math.min(element.width, element.height) / 2) * percent
-    ? center
-    : p;
-
-  // const isPointDeepInside = isPointInElement(
-  //   p,
-  //   {
-  //     ...element,
-  //     x: element.x + (element.width * (1 - percent)) / 2,
-  //     y: element.y + (element.height * (1 - percent)) / 2,
-  //     width: element.width * percent,
-  //     height: element.height * percent,
-  //   },
-  //   elementsMap,
-  // );
-
-  // return isPointDeepInside ? elementCenterPoint(element, elementsMap) : p;
-};
-
 const snapToMid = (
   element: ExcalidrawBindableElement,
   elementsMap: ElementsMap,

packages/excalidraw/renderer/interactiveScene.ts

@@ -1,6 +1,5 @@
 import {
   clamp,
-  pointDistance,
   pointFrom,
   pointsEqual,
   type GlobalPoint,
@@ -16,7 +15,6 @@ import {
   invariant,
   THEME,
   throttleRAF,
-  viewportCoordsToSceneCoords,
 } from "@excalidraw/common";
 
 import {
@@ -356,47 +354,6 @@ const renderBindingHighlightForBindableElement = (
 
       break;
   }
-
-  const { x: cursorX, y: cursorY } = viewportCoordsToSceneCoords(
-    {
-      clientX: renderConfig.lastViewportPosition.x,
-      clientY: renderConfig.lastViewportPosition.y,
-    },
-    appState,
-  );
-
-  // Draw center snap area
-  context.save();
-  context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
-  context.strokeStyle = "rgba(0, 0, 0, 0.2)";
-  context.lineWidth = 1 / appState.zoom.value;
-  context.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]);
-  context.lineDashOffset = 0;
-
-  const radius = 0.5 * (Math.min(element.width, element.height) / 2);
-  const centerX = element.x + element.width / 2;
-  const centerY = element.y + element.height / 2;
-
-  const isInsideEllipse =
-    pointDistance(pointFrom(cursorX, cursorY), pointFrom(centerX, centerY)) <=
-    radius;
-
-  context.fillStyle = isInsideEllipse ? "rgba(0, 0, 0, 0.04)" : "transparent";
-
-  context.beginPath();
-  context.ellipse(
-    element.width / 2,
-    element.height / 2,
-    radius,
-    radius,
-    0,
-    0,
-    2 * Math.PI,
-  );
-  context.stroke();
-  context.fill();
-
-  context.restore();
 };
 
 type ElementSelectionBorder = {