Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/dom-boundingbox-oberver.js

@@ -0,0 +1,75 @@
+export default class DOMBoundingBoxObserver {
+  constructor(callback, pollDelay) {
+    this.isRunning = false;
+    this.numBoundingBoxObservers = 0;
+    this.callback = callback;
+    this.pollDelay = pollDelay;
+  }
+
+  addObserver() {
+    this.numBoundingBoxObservers++;
+
+    if (!this.isRunning) {
+      this._startObserver();
+    }
+  }
+
+  removeObserver() {
+    this.numBoundingBoxObservers--;
+    if (this.numBoundingBoxObservers === 0) {
+      this._stopObserver();
+    }
+  }
+
+  setTarget(target) {
+    this.target = target;
+    if (this.numBoundingBoxObservers > 0 && !this.isRunning) {
+      this._startObserver();
+    }
+  }
+
+  _startObserver() {
+    if (this.isRunning) return;
+    if (!this.target) return;
+
+    this.isRunning = true;
+
+    let boundingRect = {};
+    const observer = () => {
+      if (!this.target) {
+        this.isRunning = false;
+        return;
+      }
+
+      const bb = this.target.getBoundingClientRect();
+      if (boundingRect.x !== bb.x) {
+        this.callback('x', bb);
+      }
+      if (boundingRect.y !== bb.y) {
+        this.callback('y', bb);
+      }
+      if (boundingRect.width !== bb.width) {
+        this.callback('width', bb);
+      }
+      if (boundingRect.height !== bb.height) {
+        this.callback('height', bb);
+      }
+      boundingRect = bb;
+
+      if (this.isRunning) {
+        if (this.pollDelay) {
+          setTimeout(observer, this.pollDelay);
+        } else {
+          //poll as quickly as possible
+          window.requestAnimationFrame(observer);
+        }
+      }
+    };
+
+    window.requestAnimationFrame(observer);
+  }
+
+  _stopObserver() {
+    this.isRunning = false;
+  }
+}