first commit

common/resources/client/ui/interactions/dnd/update-rects.ts

@@ -0,0 +1,35 @@
+// use intersection observer instead of getBoundingClientRect for better performance as this will be called in onPointerMove event
+import {InteractableRect} from '../interactable-event';
+import {ConnectedMouseSelectable} from './mouse-selection/use-mouse-selectable';
+import {DraggableId} from './use-draggable';
+import {ConnectedDroppable} from './use-droppable';
+
+export function updateRects(
+  targets: Map<DraggableId, ConnectedDroppable | ConnectedMouseSelectable>
+) {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const {width, height, left, top} = entry.boundingClientRect;
+      const [id, target] =
+        [...targets].find(
+          ([, target]) => target.ref.current === entry.target
+        ) || [];
+      if (id == null || target == null) return;
+
+      const rect: InteractableRect = {
+        width,
+        height,
+        left,
+        top,
+      };
+      targets.set(id, {...target, rect});
+    });
+    observer.disconnect();
+  });
+
+  [...targets.values()].forEach(target => {
+    if (target.ref.current) {
+      observer.observe(target.ref.current);
+    }
+  });
+}