@alicloud/cloud-charts/es/common/globalResizeObserver.js


function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import ResizeObserver from 'resize-observer-polyfill';

// 每个ResizeObserver实例可以同时监听多个目标元素
// 封装一个全局的ResizeObserver，在需要的时候调用
export var GlobalResizeObserver = function () {
  // 定义一个属性名称，用于在DOM元素上存储关联的回调函数标识符
  var ATTR_NAME = 'global-charts-resizeobserver-key';

  // 创建一个WeakMap，用于存储根据属性值映射到的回调函数，键是DOM元素，值是回调函数
  var callbackMap = new WeakMap();

  // 创建一个resizeObserver实例, 监听尺寸变化事件
  var resizeObserver = new ResizeObserver(function (entries) {
    // 遍历所有触发尺寸变化的DOM元素，这里监听的是图表的父元素，一般为容器
    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
      var entry = _step.value;
      // 获取当前发生变化的目标DOM元素
      var resizedElement = entry.target;
      // 为每一个目标元素增加观测的属性，用于构建对象保存每个被监听元素对应的callback
      var attrValue = resizedElement.getAttribute(ATTR_NAME);
      if (attrValue && callbackMap.has(resizedElement)) {
        // 根据属性值从映射对象中获取相应的回调函数
        var callback = callbackMap.get(resizedElement);
        if (typeof callback === 'function') {
          callback(entry);
        }
      }
    }
  });
  return Object.freeze({
    /**
     * 开始监听指定DOM元素的尺寸变化
     * @param { Element } element - 要监听的DOM元素
     * @param { (ResizeObserverEntry) => {} } callback - 当元素尺寸变化时调用的回调函数
     */
    observe: function observe(element, callback) {
      if (!(element instanceof Element)) {
        console.error('没有元素无法监听');
        return;
      }
      var attrValue = element.getAttribute(ATTR_NAME);
      if (!attrValue) {
        attrValue = String(Math.random());
        element.setAttribute(ATTR_NAME, attrValue);
      }
      callbackMap.set(element, callback);

      // 使用ResizeObserver实例开始观察指定的DOM元素
      resizeObserver.observe(element);
    },
    /**
     * 停止监听指定DOM元素的尺寸变化
     * @param { Element } element - 要停止监听的DOM元素
     */
    unobserve: function unobserve(element) {
      if (!(element instanceof Element)) {
        console.error('没有元素无法监听');
        return;
      }

      // 如果找到了属性值，则从映射对象中移除关联的回调函数
      var attrValue = element.getAttribute(ATTR_NAME);
      if (attrValue && callbackMap.has(element)) {
        callbackMap["delete"](element);
        // 使用ResizeObserver实例停止观察指定的DOM元素
        resizeObserver.unobserve(element);
      }
    }
  });
}();