/*
 * @Author: levi7754 levi7754@163.com
 * @Date: 2023-06-19 09:14:18
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2024-04-14 20:39:36
 * @FilePath: /udp-front/packages/udp-core/src/directives/elResizeDetector/index.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import type { Directive, DirectiveBinding, VNode } from 'vue';
import elementResizeDetectorMaker from 'element-resize-detector';
import type { Erd } from 'element-resize-detector';
import { emitter } from '../../utils/mitt';

const erd: Erd = elementResizeDetectorMaker({
  strategy: 'scroll'
});

export const resize: Directive = {
  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
    erd.listenTo(el, elem => {
      const width = elem.offsetWidth;
      const height = elem.offsetHeight;
      if (binding?.instance) {
        emitter.emit('resize', { detail: { width, height } });
      } else {
        vnode.el.dispatchEvent(new CustomEvent('resize', { detail: { width, height } }));
      }
    });
  },
  unmounted(el: HTMLElement) {
    erd.uninstall(el);
  }
};