perf: only recalculate the bounding rectangle once after scrolling

Author: mattlewis92

src/droppable.directive.ts

@@ -83,26 +83,35 @@ export class DroppableDirective implements OnInit, OnDestroy {
           this.element.nativeElement,
           this.dragActiveClass
         );
-        let droppableRectangle = this.element.nativeElement.getBoundingClientRect();
+        const droppableRectangle: {
+          cache?: ClientRect;
+          updateCache: boolean;
+        } = {
+          updateCache: true
+        };
 
         const deregisterScrollListener = this.renderer.listen(
           this.scrollContainer
             ? this.scrollContainer.elementRef.nativeElement
             : 'window',
           'scroll',
           () => {
-            droppableRectangle = this.element.nativeElement.getBoundingClientRect();
+            droppableRectangle.updateCache = true;
           }
         );
 
         let currentDragDropData: any;
         const overlaps$ = drag$.pipe(
           map(({ clientX, clientY, dropData }) => {
             currentDragDropData = dropData;
+            if (droppableRectangle.updateCache) {
+              droppableRectangle.cache = this.element.nativeElement.getBoundingClientRect();
+              droppableRectangle.updateCache = false;
+            }
             return isCoordinateWithinRectangle(
               clientX,
               clientY,
-              droppableRectangle
+              droppableRectangle.cache as ClientRect
             );
           })
         );