fcr-ui-scene 3.8.0-alpha → 3.8.1-alpha

package/lib/modules/control-bar/hooks.js

@@ -4,8 +4,36 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBoundaryDetect = void 0;
+exports.usePopoverWatcher = exports.useBoundaryDetect = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.date.now.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _schedule = require("agora-foundation/lib/schedule");
+var _lodash = require("lodash");
 var _react = require("react");
 var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(ref, callbacks) {
   (0, _react.useEffect)(function () {
@@ -33,4 +61,115 @@ var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(r
       }
     };
   }, [callbacks]);
+};
+var handlePositionChange = function handlePositionChange(popover, _onChange) {
+  var lastRect = null;
+  var onChange = (0, _lodash.debounce)(_onChange, 300);
+  var readRect = function readRect() {
+    var domRect = popover.getBoundingClientRect();
+    return {
+      x: domRect.left,
+      y: domRect.top,
+      width: domRect.width,
+      height: domRect.height
+    };
+  };
+  var notifyIfChanged = function notifyIfChanged() {
+    var nextRect = readRect();
+    if (!lastRect || lastRect.x !== nextRect.x || lastRect.y !== nextRect.y || lastRect.width !== nextRect.width || lastRect.height !== nextRect.height) {
+      lastRect = nextRect;
+      onChange(nextRect);
+    }
+  };
+  notifyIfChanged();
+  var observer = new MutationObserver(function (mutationsList) {
+    var shouldUpdate = mutationsList.some(function (mutation) {
+      return mutation.type === 'attributes' && mutation.attributeName === 'style';
+    });
+    if (shouldUpdate) {
+      notifyIfChanged();
+    }
+  });
+  observer.observe(popover, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
+  return function () {
+    onChange.cancel();
+    observer.disconnect();
+  };
+};
+var usePopoverWatcher = exports.usePopoverWatcher = function usePopoverWatcher(containerRef, setArea, removeArea) {
+  (0, _react.useEffect)(function () {
+    if (containerRef.current === null) return;
+    var countNum = 0;
+    var body = containerRef.current.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var popoverObservers = new Map();
+    var getPopoverElement = function getPopoverElement(node) {
+      if (node.classList.contains(popoverClassName)) {
+        return node;
+      } else {
+        return node.querySelector(".".concat(popoverClassName));
+      }
+    };
+    var observer = new MutationObserver(function (mutationsList) {
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type !== 'childList') {
+          return;
+        }
+        mutation.addedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            if (popoverObservers.has(popoverElementId)) {
+              return;
+            }
+          } else {
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popover.setAttribute('data-popover-id', popoverElementId);
+          }
+          popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {
+            setArea(popoverElementId, rect);
+          }));
+        });
+        mutation.removedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            var disconnect = popoverObservers.get(popoverElementId);
+            if (disconnect) {
+              disconnect();
+              popoverObservers["delete"](popoverElementId);
+            }
+            removeArea(popoverElementId);
+          }
+        });
+      });
+    });
+    observer.observe(body, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+      popoverObservers.forEach(function (disconnect, key) {
+        disconnect();
+        removeArea(key);
+      });
+      popoverObservers.clear();
+    };
+  }, [containerRef.current]);
 };