jjb-lc-designable/core/drivers/ViewportResizeDriver.js

基于alibaba-designable源码二次封装的表单设计器。

import { EventDriver } from 'jjb-lc-designable/shared';
import { ViewportResizeEvent } from '../events';
import { ResizeObserver } from '@juggle/resize-observer';
import { globalThisPolyfill } from 'jjb-lc-designable/shared';
export class ViewportResizeDriver extends EventDriver {
  request = null;
  resizeObserver = null;
  onResize = e => {
    if (e.preventDefault) e.preventDefault();
    this.request = requestAnimationFrame(() => {
      cancelAnimationFrame(this.request);
      this.dispatch(new ViewportResizeEvent({
        scrollX: this.contentWindow.scrollX,
        scrollY: this.contentWindow.scrollY,
        width: this.contentWindow.innerWidth,
        height: this.contentWindow.innerHeight,
        innerHeight: this.contentWindow.innerHeight,
        innerWidth: this.contentWindow.innerWidth,
        view: this.contentWindow,
        target: e.target || this.container
      }));
    });
  };
  attach() {
    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
      this.addEventListener('resize', this.onResize);
    } else {
      if (this.container && this.container !== document) {
        this.resizeObserver = new ResizeObserver(this.onResize);
        this.resizeObserver.observe(this.container);
      }
    }
  }
  detach() {
    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
      this.removeEventListener('resize', this.onResize);
    } else if (this.resizeObserver) {
      if (this.container && this.container !== document) {
        this.resizeObserver.unobserve(this.container);
        this.resizeObserver.disconnect();
      }
    }
  }
}