feat: add utility to check if screen position is inside a div element for macOS drag-and-drop

Author: Ivanruii

apps/web/src/core/vscode/use-mac-webview-drag-bridge.hook.ts

@@ -3,6 +3,7 @@ import { useCanvasContext } from '#core/providers';
 import {
   convertFromDivElementCoordsToKonvaCoords,
   getScrollFromDiv,
+  isScreenPositionInsideDivElement,
   portScreenPositionToDivCoordinates,
 } from '#pods/canvas/canvas.util';
 import { calculateShapeOffsetToXDropCoordinate } from '#pods/canvas/use-monitor.business';
@@ -70,6 +71,10 @@ export const useMacWebviewDragBridge = (
       }
 
       const screenPosition = { x: clientX, y: clientY };
+      if (!isScreenPositionInsideDivElement(dropDivElement, screenPosition)) {
+        return;
+      }
+
       const relativeDivPosition = portScreenPositionToDivCoordinates(
         dropDivElement,
         screenPosition

apps/web/src/pods/canvas/canvas.util.ts

@@ -24,6 +24,20 @@ export const portScreenPositionToDivCoordinates = (
   return { x, y };
 };
 
+export const isScreenPositionInsideDivElement = (
+  divElement: HTMLDivElement,
+  screenPosition: Coord
+) => {
+  const { left, right, top, bottom } = divElement.getBoundingClientRect();
+
+  return (
+    screenPosition.x >= left &&
+    screenPosition.x <= right &&
+    screenPosition.y >= top &&
+    screenPosition.y <= bottom
+  );
+};
+
 interface PositionInfo {
   screenPosition: Coord;
   relativeDivPosition: Coord;