@deephaven/golden-layout 0.43.0 → 0.44.0

package/dist/LayoutManager.js

@@ -0,0 +1,1001 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import $ from 'jquery';
+import lm from "./base.js";
+import { defaultConfig } from "./config/index.js";
+import { BrowserPopout, DragSource, DragSourceFromEvent, DropTargetIndicator } from "./controls/index.js";
+import { ConfigurationError } from "./errors/index.js";
+import { AbstractContentItem, isStack, Component, Root, RowOrColumn, Stack } from "./items/index.js";
+import { minifyConfig, unminifyConfig, EventEmitter, EventHub, ReactComponentHandler, getQueryStringParam, getUniqueId, stripTags } from "./utils/index.js";
+/**
+ * The main class that will be exposed as GoldenLayout.
+ *
+ * @param config
+ * @param container Can be a jQuery selector string or a Dom element. Defaults to body
+ */
+export class LayoutManager extends EventEmitter {
+  /**
+   * Hook that allows to access private classes
+   */
+
+  /**
+   * Takes a GoldenLayout configuration object and
+   * replaces its keys and values recursively with
+   * one letter codes
+   *
+   * @param config A GoldenLayout config object
+   * @returns minified config
+   */
+  static minifyConfig(config) {
+    return minifyConfig(config);
+  }
+
+  /**
+   * Takes a configuration Object that was previously minified
+   * using minifyConfig and returns its original version
+   *
+   * @param minifiedConfig
+   * @returns the original configuration
+   */
+  static unminifyConfig(config) {
+    return unminifyConfig(config);
+  }
+  constructor(config, container) {
+    super();
+    _defineProperty(this, "isInitialised", false);
+    _defineProperty(this, "_isFullPage", false);
+    _defineProperty(this, "_resizeTimeoutId", void 0);
+    _defineProperty(this, "_components", {
+      'lm-react-component': ReactComponentHandler
+    });
+    _defineProperty(this, "_fallbackComponent", void 0);
+    _defineProperty(this, "_itemAreas", []);
+    _defineProperty(this, "_maximisedItem", null);
+    _defineProperty(this, "_maximisePlaceholder", $('<div class="lm_maximise_place"></div>'));
+    _defineProperty(this, "_creationTimeoutPassed", false);
+    _defineProperty(this, "_subWindowsCreated", false);
+    _defineProperty(this, "_dragSources", []);
+    _defineProperty(this, "_updatingColumnsResponsive", false);
+    _defineProperty(this, "_firstLoad", true);
+    _defineProperty(this, "_reactChildMap", new Map());
+    _defineProperty(this, "_reactChildren", null);
+    _defineProperty(this, "width", null);
+    _defineProperty(this, "height", null);
+    _defineProperty(this, "root", void 0);
+    _defineProperty(this, "openPopouts", []);
+    _defineProperty(this, "selectedItem", null);
+    _defineProperty(this, "isSubWindow", false);
+    _defineProperty(this, "eventHub", new EventHub(this));
+    _defineProperty(this, "config", void 0);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "_originalContainer", void 0);
+    _defineProperty(this, "dropTargetIndicator", null);
+    _defineProperty(this, "tabDropPlaceholder", $('<div class="lm_drop_tab_placeholder"></div>'));
+    _defineProperty(this, "_typeToItem", void 0);
+    this._onResize = this._onResize.bind(this);
+    this._onUnload = this._onUnload.bind(this);
+    this._windowBlur = this._windowBlur.bind(this);
+    this._windowFocus = this._windowFocus.bind(this);
+    this.config = this._createConfig(config);
+    this._originalContainer = container;
+    this.container = this._getContainer();
+    if (this.isSubWindow) {
+      $('body').css('visibility', 'hidden');
+    }
+    this._typeToItem = {
+      column: RowOrColumn.bind(this, true),
+      row: RowOrColumn.bind(this, false),
+      stack: Stack,
+      component: Component
+    };
+  }
+
+  /**
+   * Register a component with the layout manager. If a configuration node
+   * of type component is reached it will look up componentName and create the
+   * associated component
+   *
+   *  {
+   *		type: "component",
+   *		componentName: "EquityNewsFeed",
+   *		componentState: { "feedTopic": "us-bluechips" }
+   *  }
+   *
+   * @param name
+   * @param constructor
+   * @returns cleanup function to deregister component
+   */
+  registerComponent(name, constructor) {
+    if (typeof constructor !== 'function' && (constructor == null || constructor.render == null || typeof constructor.render !== 'function')) {
+      throw new Error('Please register a constructor function');
+    }
+    if (this._components[name] !== undefined) {
+      throw new Error('Component ' + name + ' is already registered');
+    }
+    this._components[name] = constructor;
+    var cleanup = () => {
+      if (this._components[name] === undefined) {
+        throw new Error('Component ' + name + ' is not registered');
+      }
+      delete this._components[name];
+    };
+    return cleanup;
+  }
+
+  /**
+   * Set a fallback component to be rendered in place of unregistered components
+   * @param constructor
+   */
+  setFallbackComponent(constructor) {
+    this._fallbackComponent = constructor;
+  }
+
+  /**
+   * Creates a layout configuration object based on the the current state
+   * @param root
+   * @returns GoldenLayout configuration
+   */
+  toConfig(root) {
+    if (this.isInitialised === false) {
+      throw new Error("Can't create config, layout not yet initialised");
+    }
+    if (root && !(root instanceof AbstractContentItem)) {
+      throw new Error('Root must be a ContentItem');
+    }
+
+    /*
+     * settings & labels
+     */
+    var config = {
+      settings: _objectSpread({}, this.config.settings),
+      dimensions: _objectSpread({}, this.config.dimensions),
+      labels: _objectSpread({}, this.config.labels),
+      content: []
+    };
+
+    /*
+     * Content
+     */
+    var next = function next(configNode, item) {
+      for (var _key in item.config) {
+        if (_key !== 'content') {
+          configNode[_key] = item.config[_key];
+        }
+      }
+      if (configNode.componentName === 'lm-react-component') {
+        // We change the type in `createContentItem`, so change it back here
+        configNode.type = 'react-component';
+      }
+      if (item.contentItems.length) {
+        configNode.content = [];
+        for (var i = 0; i < item.contentItems.length; i++) {
+          configNode.content[i] = {};
+          next(configNode.content[i], item.contentItems[i]);
+        }
+      }
+    };
+    if (root) {
+      next(config, {
+        contentItems: [root]
+      });
+    } else {
+      next(config, this.root);
+    }
+
+    /*
+     * Retrieve config for subwindows
+     */
+    this._$reconcilePopoutWindows();
+    config.openPopouts = [];
+    for (var i = 0; i < this.openPopouts.length; i++) {
+      config.openPopouts.push(this.openPopouts[i].toConfig());
+    }
+
+    /*
+     * Add maximised item
+     */
+    config.maximisedItemId = this._maximisedItem ? '__glMaximised' : undefined;
+    return config;
+  }
+
+  /**
+   * Returns a previously registered component
+   * @param name The name used
+   */
+  getComponent(name) {
+    return this._components[name];
+  }
+
+  /**
+   * Returns a fallback component to render in place of unregistered components
+   *
+   * @public
+   *
+   * @returns {Function}
+   */
+  getFallbackComponent() {
+    return this._fallbackComponent;
+  }
+
+  /**
+   * Creates the actual layout. Must be called after all initial components
+   * are registered. Recurses through the configuration and sets up
+   * the item tree.
+   *
+   * If called before the document is ready it adds itself as a listener
+   * to the document.ready event
+   */
+  init() {
+    /**
+     * Create the popout windows straight away. If popouts are blocked
+     * an error is thrown on the same 'thread' rather than a timeout and can
+     * be caught. This also prevents any further initilisation from taking place.
+     */
+    if (this._subWindowsCreated === false) {
+      this._createSubWindows();
+      this._subWindowsCreated = true;
+    }
+
+    /**
+     * If the document isn't ready yet, wait for it.
+     */
+    if (document.readyState === 'loading' || document.body === null) {
+      $(document).ready(this.init.bind(this));
+      return;
+    }
+
+    /**
+     * If this is a subwindow, wait a few milliseconds for the original
+     * page's js calls to be executed, then replace the bodies content
+     * with GoldenLayout
+     */
+    if (this.isSubWindow === true && this._creationTimeoutPassed === false) {
+      setTimeout(this.init.bind(this), 7);
+      this._creationTimeoutPassed = true;
+      return;
+    }
+    if (this.isSubWindow === true) {
+      this._adjustToWindowMode();
+    }
+    this._setContainer();
+    this.dropTargetIndicator = new DropTargetIndicator();
+    this.updateSize();
+    this._create(this.config);
+    this._bindEvents();
+    this.isInitialised = true;
+    this._adjustColumnsResponsive();
+    this.emit('initialised');
+  }
+
+  /**
+   * Adds a react child to the layout manager
+   * @param id Unique panel id
+   * @param element The React element
+   */
+  addReactChild(id, element) {
+    this._reactChildMap.set(id, element);
+    this._reactChildren = [...this._reactChildMap.values()];
+    this.emit('reactChildrenChanged');
+  }
+
+  /**
+   * Removes a react child from the layout manager
+   * Only removes if the elements for the panelId has not been replaced by a different element
+   * @param id Unique panel id
+   * @param element The React element
+   */
+  removeReactChild(id, element) {
+    var mapElem = this._reactChildMap.get(id);
+    if (mapElem === element) {
+      // If an element was replaced it may be destroyed after the other is created
+      // In that case, the new element would be removed
+      // Make sure the element being removed is the current element associated with its id
+      this._reactChildMap.delete(id);
+      this._reactChildren = [...this._reactChildMap.values()];
+      this.emit('reactChildrenChanged');
+    }
+  }
+
+  /**
+   * Gets the react children in the layout
+   *
+   * Used in @deephaven/dashboard to mount the react elements
+   * inside the app's React tree
+   *
+   * @returns The react children to mount for this layout manager
+   */
+  getReactChildren() {
+    return this._reactChildren;
+  }
+
+  /**
+   * Updates the layout managers size
+   * @param width width in pixels
+   * @param height height in pixels
+   */
+  updateSize(width, height) {
+    var _ref, _ref2;
+    this.width = (_ref = width !== null && width !== void 0 ? width : this.container.width()) !== null && _ref !== void 0 ? _ref : 0;
+    this.height = (_ref2 = height !== null && height !== void 0 ? height : this.container.height()) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    if (this.isInitialised === true) {
+      this.root.callDownwards('setSize', [this.width, this.height]);
+      if (this._maximisedItem) {
+        var _this$container$width, _this$container$heigh;
+        this._maximisedItem.element.width((_this$container$width = this.container.width()) !== null && _this$container$width !== void 0 ? _this$container$width : 0);
+        this._maximisedItem.element.height((_this$container$heigh = this.container.height()) !== null && _this$container$heigh !== void 0 ? _this$container$heigh : 0);
+        this._maximisedItem.callDownwards('setSize');
+      }
+      this._adjustColumnsResponsive();
+    }
+  }
+
+  /**
+   * Destroys the LayoutManager instance itself as well as every ContentItem
+   * within it. After this is called nothing should be left of the LayoutManager.
+   */
+  destroy() {
+    var _this$dropTargetIndic;
+    if (this.isInitialised === false || !this.root) {
+      return;
+    }
+    this._onUnload();
+    $(window).off('resize', this._onResize);
+    $(window).off('unload beforeunload', this._onUnload);
+    $(window).off('blur.lm').off('focus.lm');
+    this.root.callDownwards('_$destroy', [], true);
+    this.root.contentItems = [];
+    this.tabDropPlaceholder.remove();
+    (_this$dropTargetIndic = this.dropTargetIndicator) === null || _this$dropTargetIndic === void 0 ? void 0 : _this$dropTargetIndic.destroy();
+    this.eventHub.destroy();
+    this._dragSources.forEach(function (dragSource) {
+      dragSource._dragListener.destroy();
+    });
+    this._dragSources = [];
+  }
+
+  /**
+   * Recursively creates new item tree structures based on a provided
+   * ItemConfiguration object
+   *
+   * @public
+   * @param config ItemConfig
+   * @param parent The item the newly created item should be a child of
+   *
+   * @returns Created item
+   */
+  createContentItem(config, parent) {
+    var typeErrorMsg, contentItem;
+    if (typeof config.type !== 'string') {
+      throw new ConfigurationError("Missing parameter 'type'", config);
+    }
+    if (config.type === 'react-component') {
+      config.type = 'component';
+      config.componentName = 'lm-react-component';
+    }
+    if (!this._typeToItem[config.type]) {
+      typeErrorMsg = "Unknown type '" + config.type + "'. " + 'Valid types are ' + Object.keys(this._typeToItem).join(',');
+      throw new ConfigurationError(typeErrorMsg);
+    }
+
+    /**
+     * We add an additional stack around every component that's not within a stack anyways.
+     */
+    if (
+    // If this is a component
+    config.type === 'component' &&
+    // and it's not already within a stack
+    !(parent instanceof Stack) &&
+    // and we have a parent
+    !!parent &&
+    // and it's not the topmost item in a new window
+    !(this.isSubWindow === true && parent instanceof Root)) {
+      config = {
+        type: 'stack',
+        width: config.width,
+        height: config.height,
+        content: [config]
+      };
+    }
+    contentItem = new this._typeToItem[config.type](this, config, parent);
+    return contentItem;
+  }
+
+  /**
+  * Creates a popout window with the specified content and dimensions
+  *
+  * @param configOrContentItem
+  * @param dimensions A map with width, height, left and top
+  * @param parentId the id of the element this item will be appended to
+  *                             when popIn is called
+  * @param indexInParent The position of this item within its parent element
+   * @returns Created popout
+  */
+  createPopout(configOrContentItem, dimensions, parentId, indexInParent) {
+    var config = configOrContentItem;
+    var configArray = [];
+    var isItem = configOrContentItem instanceof AbstractContentItem;
+    var self = this;
+    if (isItem) {
+      var _parent2;
+      configArray = this.toConfig(configOrContentItem).content;
+      parentId = getUniqueId();
+
+      /**
+       * If the item is the only component within a stack or for some
+       * other reason the only child of its parent the parent will be destroyed
+       * when the child is removed.
+       *
+       * In order to support this we move up the tree until we find something
+       * that will remain after the item is being popped out
+       */
+      var parent = configOrContentItem.parent;
+      var child = configOrContentItem;
+      while (((_parent = parent) === null || _parent === void 0 ? void 0 : _parent.contentItems.length) === 1 && !parent.isRoot) {
+        var _parent;
+        child = parent;
+        parent = parent.parent;
+      }
+      (_parent2 = parent) === null || _parent2 === void 0 ? void 0 : _parent2.addId(parentId);
+      if (indexInParent == undefined || Number.isNaN(indexInParent)) {
+        var _parent3;
+        indexInParent = (_parent3 = parent) === null || _parent3 === void 0 ? void 0 : _parent3.contentItems.indexOf(child);
+      }
+    } else {
+      if (!(configOrContentItem instanceof Array)) {
+        configArray = [configOrContentItem];
+      } else {
+        configArray = configOrContentItem;
+      }
+    }
+    if (!dimensions && isItem) {
+      var _configOrContentItem$, _configOrContentItem$2, _configOrContentItem$3;
+      var windowLeft = window.screenX || window.screenLeft;
+      var windowTop = window.screenY || window.screenTop;
+      var offset = (_configOrContentItem$ = configOrContentItem.element.offset()) !== null && _configOrContentItem$ !== void 0 ? _configOrContentItem$ : {
+        left: 0,
+        top: 0
+      };
+      dimensions = {
+        left: windowLeft + offset.left,
+        top: windowTop + offset.top,
+        width: (_configOrContentItem$2 = configOrContentItem.element.width()) !== null && _configOrContentItem$2 !== void 0 ? _configOrContentItem$2 : 0,
+        height: (_configOrContentItem$3 = configOrContentItem.element.height()) !== null && _configOrContentItem$3 !== void 0 ? _configOrContentItem$3 : 0
+      };
+    }
+    if (!dimensions && !isItem) {
+      dimensions = {
+        left: window.screenX || window.screenLeft + 20,
+        top: window.screenY || window.screenTop + 20,
+        width: 500,
+        height: 309
+      };
+    }
+    if (isItem) {
+      configOrContentItem.remove();
+    }
+    if (!dimensions || !parentId || indexInParent === undefined) {
+      return;
+    }
+    var browserPopout = new BrowserPopout(configArray, dimensions, parentId, indexInParent, this);
+    browserPopout.on('initialised', function () {
+      self.emit('windowOpened', browserPopout);
+    });
+    browserPopout.on('closed', function () {
+      self._$reconcilePopoutWindows();
+    });
+    this.openPopouts.push(browserPopout);
+    return browserPopout;
+  }
+
+  /**
+   * Attaches DragListener to any given DOM element
+   * and turns it into a way of creating new ContentItems
+   * by 'dragging' the DOM element into the layout
+   *
+   * @param element
+   * @param itemConfig for the new item to be created, or a function which will provide it
+   */
+  createDragSource(element, itemConfig) {
+    this.config.settings.constrainDragToContainer = false;
+    var dragSource = new DragSource(element, itemConfig, this);
+    this._dragSources.push(dragSource);
+    return dragSource;
+  }
+
+  /**
+   * Create a new item in a dragging state, given a starting mouse event to act as the initial position
+   *
+   * @param itemConfig for the new item to be created, or a function which will provide it
+   * @param event used as the starting position for the dragProxy
+   */
+  createDragSourceFromEvent(itemConfig, event) {
+    this.config.settings.constrainDragToContainer = false;
+    return new DragSourceFromEvent(itemConfig, this, event);
+  }
+
+  /**
+   * Programmatically selects an item. This deselects
+   * the currently selected item, selects the specified item
+   * and emits a selectionChanged event
+   *
+   * @param item
+   * @param _$silent Wheather to notify the item of its selection
+   */
+  selectItem(item, _$silent) {
+    if (this.config.settings.selectionEnabled !== true) {
+      throw new Error('Please set selectionEnabled to true to use this feature');
+    }
+    if (item === this.selectedItem) {
+      return;
+    }
+    if (this.selectedItem !== null) {
+      this.selectedItem.deselect();
+    }
+    if (item && _$silent !== true) {
+      item.select();
+    }
+    this.selectedItem = item;
+    this.emit('selectionChanged', item);
+  }
+
+  /*************************
+   * PACKAGE PRIVATE
+   *************************/
+  _$maximiseItem(contentItem) {
+    var _this$container$width2, _this$container$heigh2;
+    if (this._maximisedItem !== null) {
+      this._$minimiseItem(this._maximisedItem);
+    }
+    this._maximisedItem = contentItem;
+    this._maximisedItem.addId('__glMaximised');
+    contentItem.element.addClass('lm_maximised');
+    contentItem.element.after(this._maximisePlaceholder);
+    this.root.element.prepend(contentItem.element);
+    contentItem.element.width((_this$container$width2 = this.container.width()) !== null && _this$container$width2 !== void 0 ? _this$container$width2 : 0);
+    contentItem.element.height((_this$container$heigh2 = this.container.height()) !== null && _this$container$heigh2 !== void 0 ? _this$container$heigh2 : 0);
+    contentItem.callDownwards('setSize');
+    this._maximisedItem.emit('maximised');
+    this.emit('stateChanged');
+  }
+  _$minimiseItem(contentItem) {
+    var _contentItem$parent;
+    contentItem.element.removeClass('lm_maximised');
+    contentItem.removeId('__glMaximised');
+    this._maximisePlaceholder.after(contentItem.element);
+    this._maximisePlaceholder.remove();
+    (_contentItem$parent = contentItem.parent) === null || _contentItem$parent === void 0 ? void 0 : _contentItem$parent.callDownwards('setSize');
+    this._maximisedItem = null;
+    contentItem.emit('minimised');
+    this.emit('stateChanged');
+  }
+
+  /**
+   * This method is used to get around sandboxed iframe restrictions.
+   * If 'allow-top-navigation' is not specified in the iframe's 'sandbox' attribute
+   * (as is the case with codepens) the parent window is forbidden from calling certain
+   * methods on the child, such as window.close() or setting document.location.href.
+   *
+   * This prevented GoldenLayout popouts from popping in in codepens. The fix is to call
+   * _$closeWindow on the child window's gl instance which (after a timeout to disconnect
+   * the invoking method from the close call) closes itself.
+   */
+  _$closeWindow() {
+    window.setTimeout(function () {
+      window.close();
+    }, 1);
+  }
+  _$getArea(x, y) {
+    var smallestSurface = Infinity;
+    var mathingArea = null;
+    for (var i = 0; i < this._itemAreas.length; i++) {
+      var area = this._itemAreas[i];
+      if (x > area.x1 && x < area.x2 && y > area.y1 && y < area.y2 && smallestSurface > area.surface) {
+        smallestSurface = area.surface;
+        mathingArea = area;
+      }
+    }
+    return mathingArea;
+  }
+
+  /**
+   * Creates the drop zones at the edges of the screen
+   */
+  _$createRootItemAreas() {
+    var areaSize = 50;
+    var rootArea = _objectSpread({}, this.root._$getArea());
+    var areas = [_objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'left',
+      x2: rootArea.x1 + areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'right',
+      x1: rootArea.x2 - areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'top',
+      y2: rootArea.y1 + areaSize
+    }), _objectSpread(_objectSpread({}, rootArea), {}, {
+      side: 'bottom',
+      y1: rootArea.y2 - areaSize
+    })];
+    areas.forEach(area => {
+      area.surface = (area.x2 - area.x1) * (area.y2 - area.y1);
+    });
+    this._itemAreas.push(...areas);
+  }
+  _$calculateItemAreas() {
+    var allContentItems = this._getAllContentItems();
+    this._itemAreas = [];
+
+    /**
+     * If the last item is dragged out, highlight the entire container size to
+     * allow to re-drop it. allContentItems[ 0 ] === this.root at this point
+     *
+     * Don't include root into the possible drop areas though otherwise since it
+     * will used for every gap in the layout, e.g. splitters
+     */
+    if (allContentItems.length === 1) {
+      this._itemAreas.push(this.root._$getArea());
+      return;
+    }
+    this._$createRootItemAreas();
+    for (var i = 0; i < allContentItems.length; i++) {
+      var item = allContentItems[i];
+      if (!isStack(item)) {
+        continue;
+      }
+      var area = item._$getArea();
+      if (area === null) {
+        continue;
+      } else if (area instanceof Array) {
+        this._itemAreas = this._itemAreas.concat(area);
+      } else {
+        var _area$contentItem$_co;
+        this._itemAreas.push(area);
+        var header = _objectSpread(_objectSpread({}, area), (_area$contentItem$_co = area.contentItem._contentAreaDimensions) === null || _area$contentItem$_co === void 0 ? void 0 : _area$contentItem$_co.header.highlightArea);
+        header.surface = (header.x2 - header.x1) * (header.y2 - header.y1);
+        this._itemAreas.push(header);
+      }
+    }
+  }
+
+  /**
+   * Takes a contentItem or a configuration and optionally a parent
+   * item and returns an initialised instance of the contentItem.
+   * If the contentItem is a function, it is first called
+   *
+   * @param contentItemOrConfig
+   * @param parent Only necessary when passing in config
+   */
+  _$normalizeContentItem(contentItemOrConfig, parent) {
+    if (!contentItemOrConfig) {
+      throw new Error('No content item defined');
+    }
+    if (typeof contentItemOrConfig === 'function') {
+      contentItemOrConfig = contentItemOrConfig();
+    }
+    if (contentItemOrConfig instanceof AbstractContentItem) {
+      return contentItemOrConfig;
+    }
+    if ($.isPlainObject(contentItemOrConfig) && contentItemOrConfig.type) {
+      var newContentItem = this.createContentItem(contentItemOrConfig, parent);
+      newContentItem.callDownwards('_$init');
+      return newContentItem;
+    } else {
+      throw new Error('Invalid contentItem');
+    }
+  }
+
+  /**
+   * Iterates through the array of open popout windows and removes the ones
+   * that are effectively closed. This is necessary due to the lack of reliably
+   * listening for window.close / unload events in a cross browser compatible fashion.
+   */
+  _$reconcilePopoutWindows() {
+    var openPopouts = [];
+    for (var i = 0; i < this.openPopouts.length; i++) {
+      var _this$openPopouts$i$g;
+      if (((_this$openPopouts$i$g = this.openPopouts[i].getWindow()) === null || _this$openPopouts$i$g === void 0 ? void 0 : _this$openPopouts$i$g.closed) === false) {
+        openPopouts.push(this.openPopouts[i]);
+      } else {
+        this.emit('windowClosed', this.openPopouts[i]);
+      }
+    }
+    if (this.openPopouts.length !== openPopouts.length) {
+      this.emit('stateChanged');
+      this.openPopouts = openPopouts;
+    }
+  }
+
+  /***************************
+   * PRIVATE
+   ***************************/
+  /**
+   * Returns a flattened array of all content items,
+   * regardles of level or type
+   * @return Flattened array of content items
+   */
+  _getAllContentItems() {
+    var allContentItems = [];
+    var addChildren = contentItem => {
+      allContentItems.push(contentItem);
+      if (contentItem.contentItems instanceof Array) {
+        for (var i = 0; i < contentItem.contentItems.length; i++) {
+          addChildren(contentItem.contentItems[i]);
+        }
+      }
+    };
+    addChildren(this.root);
+    return allContentItems;
+  }
+
+  /**
+   * Binds to DOM/BOM events on init
+   */
+  _bindEvents() {
+    if (this._isFullPage) {
+      $(window).resize(this._onResize);
+    }
+    $(window).on('unload beforeunload', this._onUnload).on('blur.lm', this._windowBlur).on('focus.lm', this._windowFocus);
+  }
+
+  /**
+   * Handles setting a class based on window focus, useful for focus indicators
+   */
+  _windowBlur() {
+    this.root.element.addClass('lm_window_blur');
+  }
+  _windowFocus() {
+    this.root.element.removeClass('lm_window_blur');
+  }
+
+  /**
+   * Debounces resize events
+   */
+  _onResize() {
+    clearTimeout(this._resizeTimeoutId);
+    this._resizeTimeoutId = window.setTimeout(this.updateSize.bind(this), 100);
+  }
+
+  /**
+   * Extends the default config with the user specific settings and applies
+   * derivations. Please note that there's a seperate method (AbstractContentItem._extendItemNode)
+   * that deals with the extension of item configs
+   *
+   * @param config
+   * @returns config
+   */
+  _createConfig(config) {
+    var _config$settings;
+    var windowConfigKey = getQueryStringParam('gl-window');
+    if (windowConfigKey) {
+      this.isSubWindow = true;
+      config = JSON.parse(localStorage.getItem(windowConfigKey) || '{}');
+      config = unminifyConfig(config);
+      localStorage.removeItem(windowConfigKey);
+    }
+    config = $.extend(true, {}, defaultConfig, config);
+    var nextNode = function nextNode(node) {
+      for (var key in node) {
+        var value = node[key];
+        if (key !== 'props' && typeof value === 'object' && value != null) {
+          nextNode(value);
+        } else if (key === 'type' && value === 'react-component') {
+          node.type = 'component';
+          node.componentName = 'lm-react-component';
+        }
+      }
+    };
+    nextNode(config);
+    if (((_config$settings = config.settings) === null || _config$settings === void 0 ? void 0 : _config$settings.hasHeaders) === false) {
+      config.dimensions.headerHeight = 0;
+    }
+    return config;
+  }
+
+  /**
+   * This is executed when GoldenLayout detects that it is run
+   * within a previously opened popout window.
+   */
+  _adjustToWindowMode() {
+    var _this$config$content$;
+    var popInButton = $('<div class="lm_popin" title="' + this.config.labels.popin + '">' + '<div class="lm_icon"></div>' + '<div class="lm_bg"></div>' + '</div>');
+    popInButton.click(() => {
+      this.emit('popIn');
+    });
+    document.title = stripTags((_this$config$content$ = this.config.content[0].title) !== null && _this$config$content$ !== void 0 ? _this$config$content$ : '');
+    $('head').append($('body link, body style, template, .gl_keep'));
+    this.container = $('body').html('').css('visibility', 'visible').append(popInButton);
+
+    /*
+     * This seems a bit pointless, but actually causes a reflow/re-evaluation getting around
+     * slickgrid's "Cannot find stylesheet." bug in chrome
+     */
+    var x = document.body.offsetHeight; // jshint ignore:line
+
+    /*
+     * Expose this instance on the window object
+     * to allow the opening window to interact with
+     * it
+     */
+    window.__glInstance = this;
+  }
+
+  /**
+   * Creates Subwindows (if there are any). Throws an error
+   * if popouts are blocked.
+   */
+  _createSubWindows() {
+    if (!this.config.openPopouts) {
+      return;
+    }
+    for (var i = 0; i < this.config.openPopouts.length; i++) {
+      var popout = this.config.openPopouts[i];
+      this.createPopout(popout.content, popout.dimensions, popout.parentId, popout.indexInParent);
+    }
+  }
+  _getContainer() {
+    var container = this._originalContainer ? $(this._originalContainer) : $('body');
+    if (container.length === 0) {
+      throw new Error('GoldenLayout container not found');
+    }
+    if (container.length > 1) {
+      throw new Error('GoldenLayout more than one container element specified');
+    }
+    return container;
+  }
+
+  /**
+   * Determines what element the layout will be created in
+   */
+  _setContainer() {
+    var container = this._getContainer();
+    if (container[0] === document.body) {
+      this._isFullPage = true;
+      $('html, body').css({
+        height: '100%',
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden'
+      });
+    }
+    this.container = container;
+  }
+
+  /**
+   * Kicks of the initial, recursive creation chain
+   *
+   * @param config GoldenLayout Config
+   */
+  _create(config) {
+    var errorMsg;
+    if (!(config.content instanceof Array)) {
+      if (config.content === undefined) {
+        errorMsg = "Missing setting 'content' on top level of configuration";
+      } else {
+        errorMsg = "Configuration parameter 'content' must be an array";
+      }
+      throw new ConfigurationError(errorMsg, config);
+    }
+    if (config.content.length > 1) {
+      errorMsg = "Top level content can't contain more then one element.";
+      throw new ConfigurationError(errorMsg, config);
+    }
+    this.root = new Root(this, {
+      content: config.content
+    }, this.container);
+    this.root.callDownwards('_$init');
+    if (config.maximisedItemId === '__glMaximised') {
+      this.root.getItemsById(config.maximisedItemId)[0].toggleMaximise();
+    }
+  }
+
+  /**
+   * Called when the window is closed or the user navigates away
+   * from the page
+   */
+  _onUnload() {
+    if (this.config.settings.closePopoutsOnUnload === true) {
+      for (var i = 0; i < this.openPopouts.length; i++) {
+        this.openPopouts[i].close();
+      }
+    }
+  }
+
+  /**
+   * Adjusts the number of columns to be lower to fit the screen and still maintain minItemWidth.
+   */
+  _adjustColumnsResponsive() {
+    // If there is no min width set, or not content items, do nothing.
+    if (!this._useResponsiveLayout() || this._updatingColumnsResponsive || !this.config.dimensions || !this.config.dimensions.minItemWidth || this.root.contentItems.length === 0 || !this.root.contentItems[0].isRow) {
+      this._firstLoad = false;
+      return;
+    }
+    this._firstLoad = false;
+
+    // If there is only one column, do nothing.
+    var columnCount = this.root.contentItems[0].contentItems.length;
+    if (columnCount <= 1) {
+      return;
+    }
+
+    // If they all still fit, do nothing.
+    var minItemWidth = this.config.dimensions.minItemWidth;
+    var totalMinWidth = columnCount * minItemWidth;
+    if (this.width == null || totalMinWidth <= this.width) {
+      return;
+    }
+
+    // Prevent updates while it is already happening.
+    this._updatingColumnsResponsive = true;
+
+    // Figure out how many columns to stack, and put them all in the first stack container.
+    var finalColumnCount = Math.max(Math.floor(this.width / minItemWidth), 1);
+    var stackColumnCount = columnCount - finalColumnCount;
+    var rootContentItem = this.root.contentItems[0];
+    var firstStackContainer = this._findAllStackContainers()[0];
+    for (var i = 0; i < stackColumnCount; i++) {
+      // Stack from right.
+      var column = rootContentItem.contentItems[rootContentItem.contentItems.length - 1];
+      this._addChildContentItemsToContainer(firstStackContainer, column);
+    }
+    this._updatingColumnsResponsive = false;
+  }
+
+  /**
+   * Determines if responsive layout should be used.
+   *
+   * @returns True if responsive layout should be used; otherwise false.
+   */
+  _useResponsiveLayout() {
+    return this.config.settings && (this.config.settings.responsiveMode == 'always' || this.config.settings.responsiveMode == 'onload' && this._firstLoad);
+  }
+
+  /**
+   * Adds all children of a node to another container recursively.
+   * @param container - Container to add child content items to.
+   * @param node - Node to search for content items.
+   */
+  _addChildContentItemsToContainer(container, node) {
+    if (node.type === 'stack') {
+      node.contentItems.forEach(function (item) {
+        container.addChild(item);
+        node.removeChild(item, true);
+      });
+    } else {
+      node.contentItems.forEach(item => {
+        this._addChildContentItemsToContainer(container, item);
+      });
+    }
+  }
+
+  /**
+   * Finds all the stack containers.
+   * @returns The found stack containers.
+   */
+  _findAllStackContainers() {
+    var stackContainers = [];
+    this._findAllStackContainersRecursive(stackContainers, this.root);
+    return stackContainers;
+  }
+
+  /**
+   * Finds all the stack containers.
+   *
+   * @param stackContainers Set of containers to populate.
+   * @param node Current node to process.
+   */
+  _findAllStackContainersRecursive(stackContainers, node) {
+    node.contentItems.forEach(item => {
+      if (isStack(item)) {
+        stackContainers.push(item);
+      } else if (!item.isComponent) {
+        this._findAllStackContainersRecursive(stackContainers, item);
+      }
+    });
+  }
+}
+_defineProperty(LayoutManager, "__lm", lm);
+export default LayoutManager;
+//# sourceMappingURL=LayoutManager.js.map