fix hitbox

src/components/App.tsx

@@ -226,6 +226,7 @@ import {
   setEraserCursor,
   updateActiveTool,
   getShortcutKey,
+  isTransparent,
 } from "../utils";
 import {
   ContextMenu,
@@ -264,6 +265,7 @@ import {
   getContainerCenter,
   getContainerDims,
   getTextBindableContainerAtPosition,
+  isHittingContainerStroke,
   isValidTextContainer,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
@@ -2762,7 +2764,19 @@ class App extends React.Component<AppProps, AppState> {
         sceneY,
       );
       if (container) {
-        if (isArrowElement(container) || hasBoundTextElement(container)) {
+        if (
+          isArrowElement(container) ||
+          hasBoundTextElement(container) ||
+          !isTransparent(
+            (container as ExcalidrawTextContainer).backgroundColor,
+          ) ||
+          isHittingContainerStroke(
+            sceneX,
+            sceneY,
+            container,
+            this.state.zoom.value,
+          )
+        ) {
           const midPoint = getContainerCenter(container, this.state);
 
           sceneX = midPoint.x;

src/element/textElement.ts

@@ -28,6 +28,7 @@ import {
   resetOriginalContainerCache,
   updateOriginalContainerCache,
 } from "./textWysiwyg";
+import { rotatePoint } from "../math";
 
 export const normalizeText = (text: string) => {
   return (
@@ -723,3 +724,93 @@ export const isValidTextContainer = (element: ExcalidrawElement) => {
     isArrowElement(element)
   );
 };
+
+export const isHittingContainerStroke = (
+  x: number,
+  y: number,
+  container: ExcalidrawTextContainer,
+  zoom: number,
+) => {
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(container);
+  const topLeft = [x1, y1];
+  const topRight = [x2, y1];
+  const bottomLeft = [x1, y2];
+  const bottomRight = [x2, y2];
+
+  const [counterRotateX, counterRotateY] = rotatePoint(
+    [x, y],
+    [cx, cy],
+    -container.angle,
+  );
+
+  const strokeWidth = container.strokeWidth;
+  const threshold = 10 / zoom;
+
+  if (container.type === "ellipse") {
+    const h = (topLeft[0] + topRight[0]) / 2;
+    const k = (topLeft[1] + bottomLeft[1]) / 2;
+    let a = container.width / 2 + strokeWidth / 2 + threshold;
+    let b = container.height / 2 + strokeWidth / 2 + threshold;
+    const checkPointOnOuterEllipse =
+      Math.pow(counterRotateX - h, 2) / Math.pow(a, 2) +
+      Math.pow(counterRotateY - k, 2) / Math.pow(b, 2);
+
+    a = container.width / 2 - strokeWidth / 2 - threshold;
+    b = container.height / 2 - strokeWidth / 2 - threshold;
+
+    const checkPointOnInnerEllipse =
+      Math.pow(counterRotateX - h, 2) / Math.pow(a, 2) +
+      Math.pow(counterRotateY - k, 2) / Math.pow(b, 2);
+
+    // The expression evaluates to 1 means point is on ellipse,
+    // < 1 means inside ellipse and > 1 means outside ellipse
+    if (
+      checkPointOnInnerEllipse === 1 ||
+      checkPointOnOuterEllipse === 1 ||
+      (checkPointOnInnerEllipse > 1 && checkPointOnOuterEllipse < 1)
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  // Left Stroke
+  if (
+    counterRotateX >= topLeft[0] - strokeWidth / 2 - threshold &&
+    counterRotateX <= topLeft[0] + strokeWidth / 2 + threshold &&
+    counterRotateY >= topLeft[1] - threshold &&
+    counterRotateY <= bottomRight[1] + threshold
+  ) {
+    return true;
+  }
+  // Top stroke
+  if (
+    counterRotateX >= topLeft[0] - threshold &&
+    counterRotateX <= topRight[0] + threshold &&
+    counterRotateY >= topLeft[1] - threshold - strokeWidth / 2 &&
+    counterRotateY <= topLeft[1] + threshold + strokeWidth / 2
+  ) {
+    return true;
+  }
+
+  // Right stroke
+  if (
+    counterRotateX >= topRight[0] - threshold - strokeWidth / 2 &&
+    counterRotateX <= topRight[0] + threshold + strokeWidth / 2 &&
+    counterRotateY >= topRight[1] - threshold &&
+    counterRotateY <= bottomRight[1] + threshold
+  ) {
+    return true;
+  }
+
+  // Bottom Stroke
+  if (
+    counterRotateX >= bottomLeft[0] - threshold &&
+    counterRotateX <= bottomRight[0] + threshold &&
+    counterRotateY >= bottomLeft[1] - threshold - strokeWidth / 2 &&
+    counterRotateY <= bottomLeft[1] + threshold + strokeWidth / 2
+  ) {
+    return true;
+  }
+  return false;
+};