Method resize

modules/core/UiSystem.js:284–343

(e)

   * @param {Event}  e? - the resize event (if any)
   */
  resize(e) {
    const context = this.context;
    const map = context.systems.map;
    const viewport = context.viewport;
    const $container = context.container();

    // This is an actual resize event - class the container as resizing.
    if (e) {
      window.clearTimeout(this._resizeTimeout);
      $container.classed('resizing', true);
      this._resizeTimeout = window.setTimeout(() => {
        $container.classed('resizing', false);
      }, 400);  // if no resizes for 400ms, remove class
    }

    const $mainContent = $container.selectAll('.main-content');
    if (!$mainContent.size()) return;  // called too early?

    const curr = this._copyRect($mainContent.node().getBoundingClientRect());
    const prev = this._mapRect || curr;
    this._mapRect = curr;

    // Determine how the map is getting resized
    // (we do prev-curr because we want negative values to pan with)
    const dtop = prev.top - curr.top;
    const dright = prev.right - curr.right;
    const dbottom = prev.bottom - curr.bottom;
    const dleft = prev.left - curr.left;

    // Un-pan map to keep it centered in the same spot.
    // (div/2 because the map grows/shrinks from the middle, so we only need to pan half this distance)
    const [dw, dh] = [dleft + dright, dtop + dbottom];
    if (dw || dh) {
      map.pan([dw / 2, dh / 2]);
    }

    let dims = [curr.width, curr.height];

// experiment:
// Previously, the map surfaces were anchored to the top left of the main-map.
// Now, the map surfaces are centered in a CSS Grid, to support rotation around the center.
// We can extend the map dimensions a little bit so that as the user pans, we dont see seams at the edges of the map.
const overscan = 50;
dims = vecAdd(dims, [overscan * 2, overscan * 2]);

    viewport.dimensions = dims;

    // check if header or footer have overflowed
    this.checkOverflow('.map-toolbar');
    this.checkOverflow('.map-footer');

    this.emit('uichange');

// this was for the restrictions editor?
// or any other component that needs to know when resizing is happening
//    // Use outdated code so it works on Explorer
//    const resizeWindowEvent = document.createEvent('Event');
//    resizeWindowEvent.initEvent('resizeWindow', true, true);