@deephaven/golden-layout 0.19.2-beta.10 → 0.19.2-beta.11

package/dist/items/Stack.js

@@ -1,49 +1,78 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import $ from 'jquery';
-import AbstractContentItem from './AbstractContentItem.js';
-import utils from '../utils/index.js';
-import controls from '../controls/index.js';
-
-var Stack = function Stack(layoutManager, config, parent) {
-  AbstractContentItem.call(this, layoutManager, config, parent);
-  this.element = $('<div class="lm_item lm_stack"></div>');
-  this._activeContentItem = null;
-  var cfg = layoutManager.config;
-  this._header = {
-    // defaults' reconstruction from old configuration style
-    show: cfg.settings.hasHeaders === true && config.hasHeaders !== false,
-    popout: cfg.settings.showPopoutIcon && cfg.labels.popout,
-    maximise: cfg.settings.showMaximiseIcon && cfg.labels.maximise,
-    close: cfg.settings.showCloseIcon && cfg.labels.close,
-    minimise: cfg.labels.minimise
-  }; // load simplified version of header configuration (https://github.com/deepstreamIO/golden-layout/pull/245)
-
-  if (cfg.header) utils.copy(this._header, cfg.header);
-  if (config.header) // load from stack
-    utils.copy(this._header, config.header);
-  if (config.content && config.content[0] && config.content[0].header) // load from component if stack omitted
-    utils.copy(this._header, config.content[0].header);
-  this._dropZones = {};
-  this._dropSegment = null;
-  this._contentAreaDimensions = null;
-  this._dropIndex = null;
-  this.isStack = true;
-  this.childElementContainer = $('<div class="lm_items"></div>');
-  this.header = new controls.Header(layoutManager, this);
-  this.element.append(this.header.element);
-  this.element.append(this.childElementContainer);
-
-  this._setupHeaderPosition();
-
-  this._$validateClosability();
-};
-
-utils.extend(Stack, AbstractContentItem);
-utils.copy(Stack.prototype, {
-  setSize: function setSize() {
+import AbstractContentItem, { isComponent } from "./AbstractContentItem.js";
+import { Header } from "../controls/index.js";
+export default class Stack extends AbstractContentItem {
+  constructor(layoutManager, config, parent) {
+    var _cfg$settings, _cfg$settings2, _cfg$labels, _cfg$settings3, _cfg$labels2, _cfg$settings4, _cfg$labels3, _cfg$labels$minimise, _cfg$labels4;
+
+    super(layoutManager, config, parent, $('<div class="lm_item lm_stack"></div>'));
+
+    _defineProperty(this, "_activeContentItem", null);
+
+    _defineProperty(this, "_header", void 0);
+
+    _defineProperty(this, "childElementContainer", $('<div class="lm_items"></div>'));
+
+    _defineProperty(this, "header", void 0);
+
+    _defineProperty(this, "parent", void 0);
+
+    _defineProperty(this, "isStack", true);
+
+    _defineProperty(this, "_dropZones", {});
+
+    _defineProperty(this, "_dropSegment", null);
+
+    _defineProperty(this, "_contentAreaDimensions", null);
+
+    _defineProperty(this, "_dropIndex", void 0);
+
+    _defineProperty(this, "_side", void 0);
+
+    _defineProperty(this, "_sided", false);
+
+    _defineProperty(this, "config", void 0);
+
+    this.parent = parent;
+    this.config = config;
+    var cfg = layoutManager.config;
+    this._side = false;
+    this._header = {
+      // defaults' reconstruction from old configuration style
+      show: ((_cfg$settings = cfg.settings) === null || _cfg$settings === void 0 ? void 0 : _cfg$settings.hasHeaders) && config.hasHeaders !== false,
+      popout: (_cfg$settings2 = cfg.settings) !== null && _cfg$settings2 !== void 0 && _cfg$settings2.showPopoutIcon ? (_cfg$labels = cfg.labels) === null || _cfg$labels === void 0 ? void 0 : _cfg$labels.popout : undefined,
+      maximise: (_cfg$settings3 = cfg.settings) !== null && _cfg$settings3 !== void 0 && _cfg$settings3.showMaximiseIcon ? (_cfg$labels2 = cfg.labels) === null || _cfg$labels2 === void 0 ? void 0 : _cfg$labels2.maximise : undefined,
+      close: (_cfg$settings4 = cfg.settings) !== null && _cfg$settings4 !== void 0 && _cfg$settings4.showCloseIcon ? (_cfg$labels3 = cfg.labels) === null || _cfg$labels3 === void 0 ? void 0 : _cfg$labels3.close : undefined,
+      minimise: (_cfg$labels$minimise = (_cfg$labels4 = cfg.labels) === null || _cfg$labels4 === void 0 ? void 0 : _cfg$labels4.minimise) !== null && _cfg$labels$minimise !== void 0 ? _cfg$labels$minimise : undefined
+    }; // load simplified version of header configuration (https://github.com/deepstreamIO/golden-layout/pull/245)
+
+    if (cfg.header) this._header = _objectSpread(_objectSpread({}, this._header), cfg.header);
+    if (config.header) // load from stack
+      this._header = _objectSpread(_objectSpread({}, this._header), config.header);
+    if (config.content && config.content[0] && config.content[0].header) // load from component if stack omitted
+      this._header = _objectSpread(_objectSpread({}, this._header), config.content[0].header);
+    this.header = new Header(layoutManager, this);
+    this.element.append(this.header.element);
+    this.element.append(this.childElementContainer);
+
+    this._setupHeaderPosition();
+
+    this._$validateClosability();
+  }
+
+  setSize() {
+    var _this$layoutManager$c, _this$layoutManager$c2, _this$element$width, _this$element$height;
+
     var i,
-        headerSize = this._header.show ? this.layoutManager.config.dimensions.headerHeight : 0,
-        contentWidth = this.element.width() - (this._sided ? headerSize : 0),
-        contentHeight = this.element.height() - (!this._sided ? headerSize : 0);
+        headerSize = this._header.show ? (_this$layoutManager$c = (_this$layoutManager$c2 = this.layoutManager.config.dimensions) === null || _this$layoutManager$c2 === void 0 ? void 0 : _this$layoutManager$c2.headerHeight) !== null && _this$layoutManager$c !== void 0 ? _this$layoutManager$c : 0 : 0,
+        contentWidth = ((_this$element$width = this.element.width()) !== null && _this$element$width !== void 0 ? _this$element$width : 0) - (this._sided ? headerSize : 0),
+        contentHeight = ((_this$element$height = this.element.height()) !== null && _this$element$height !== void 0 ? _this$element$height : 0) - (!this._sided ? headerSize : 0);
     this.childElementContainer.width(contentWidth);
     this.childElementContainer.height(contentHeight);
 
@@ -53,23 +82,23 @@ utils.copy(Stack.prototype, {
 
     this.emit('resize');
     this.emitBubblingEvent('stateChanged');
-  },
-  _$init: function _$init() {
-    var i, initialItem;
+  }
+
+  _$init() {
     if (this.isInitialised === true) return;
 
     this.header._attachWheelListener();
 
-    AbstractContentItem.prototype._$init.call(this);
+    super._$init();
 
-    for (i = 0; i < this.contentItems.length; i++) {
+    for (var i = 0; i < this.contentItems.length; i++) {
       this.header.createTab(this.contentItems[i]);
 
       this.contentItems[i]._$hide();
     }
 
     if (this.contentItems.length > 0) {
-      initialItem = this.contentItems[this.config.activeItemIndex || 0];
+      var initialItem = this.contentItems[this.config.activeItemIndex || 0];
 
       if (!initialItem) {
         throw new Error('Configured activeItemIndex out of bounds');
@@ -77,9 +106,10 @@ utils.copy(Stack.prototype, {
 
       this.setActiveContentItem(initialItem);
     }
-  },
-  setActiveContentItem: function setActiveContentItem(contentItem) {
-    if (utils.indexOf(contentItem, this.contentItems) === -1) {
+  }
+
+  setActiveContentItem(contentItem) {
+    if (this.contentItems.indexOf(contentItem) === -1) {
       throw new Error('contentItem is not a child of this stack');
     }
 
@@ -95,13 +125,15 @@ utils.copy(Stack.prototype, {
     this.emit('activeContentItemChanged', contentItem);
     this.layoutManager.emit('activeContentItemChanged', contentItem);
     this.emitBubblingEvent('stateChanged');
-  },
-  getActiveContentItem: function getActiveContentItem() {
+  }
+
+  getActiveContentItem() {
     return this.header.activeContentItem;
-  },
-  addChild: function addChild(contentItem, index) {
+  }
+
+  addChild(contentItem, index) {
     contentItem = this.layoutManager._$normalizeContentItem(contentItem, this);
-    AbstractContentItem.prototype.addChild.call(this, contentItem, index);
+    super.addChild(contentItem, index);
     this.childElementContainer.append(contentItem.element);
     this.header.createTab(contentItem, index);
     this.setActiveContentItem(contentItem);
@@ -110,10 +142,12 @@ utils.copy(Stack.prototype, {
     this._$validateClosability();
 
     this.emitBubblingEvent('stateChanged');
-  },
-  removeChild: function removeChild(contentItem, keepChild) {
-    var index = utils.indexOf(contentItem, this.contentItems);
-    AbstractContentItem.prototype.removeChild.call(this, contentItem, keepChild);
+  }
+
+  removeChild(contentItem) {
+    var keepChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var index = this.contentItems.indexOf(contentItem);
+    super.removeChild(contentItem, keepChild);
     this.header.removeTab(contentItem);
 
     if (this.header.activeContentItem === contentItem) {
@@ -127,35 +161,35 @@ utils.copy(Stack.prototype, {
     this._$validateClosability();
 
     this.emitBubblingEvent('stateChanged');
-  },
-
+  }
   /**
    * Validates that the stack is still closable or not. If a stack is able
    * to close, but has a non closable component added to it, the stack is no
    * longer closable until all components are closable.
-   *
-   * @returns {void}
    */
-  _$validateClosability: function _$validateClosability() {
-    var isClosable, len, i;
-    isClosable = this.header._isClosable();
 
-    for (i = 0, len = this.contentItems.length; i < len; i++) {
+
+  _$validateClosability() {
+    var isClosable = this.header._isClosable();
+
+    for (var i = 0, len = this.contentItems.length; i < len; i++) {
+      var _this$contentItems$i$;
+
       if (!isClosable) {
         break;
       }
 
-      isClosable = this.contentItems[i].config.isClosable;
+      isClosable = (_this$contentItems$i$ = this.contentItems[i].config.isClosable) !== null && _this$contentItems$i$ !== void 0 ? _this$contentItems$i$ : false;
     }
 
     this.header._$setClosable(isClosable);
-  },
-  _$destroy: function _$destroy() {
+  }
+
+  _$destroy() {
     AbstractContentItem.prototype._$destroy.call(this);
 
     this.header._$destroy();
-  },
-
+  }
   /**
    * Ok, this one is going to be the tricky one: The user has dropped {contentItem} onto this stack.
    *
@@ -173,11 +207,11 @@ utils.copy(Stack.prototype, {
    * Same thing for rows and left / right drop segments... so in total there are 9 things that can potentially happen
    * (left, top, right, bottom) * is child of the right parent (row, column) + header drop
    *
-   * @param    {lm.item} contentItem
-   *
-   * @returns {void}
+   * @param contentItem
    */
-  _$onDrop: function _$onDrop(contentItem) {
+
+
+  _$onDrop(contentItem) {
     /*
      * The item was dropped on the header area. Just add it as a child of this stack and
      * get the hell out of this logic
@@ -203,21 +237,18 @@ utils.copy(Stack.prototype, {
      */
 
 
-    var isVertical = this._dropSegment === 'top' || this._dropSegment === 'bottom',
-        isHorizontal = this._dropSegment === 'left' || this._dropSegment === 'right',
-        insertBefore = this._dropSegment === 'top' || this._dropSegment === 'left',
-        hasCorrectParent = isVertical && this.parent.isColumn || isHorizontal && this.parent.isRow,
-        type = isVertical ? 'column' : 'row',
-        dimension = isVertical ? 'height' : 'width',
-        index,
-        stack,
-        rowOrColumn;
+    var isVertical = this._dropSegment === 'top' || this._dropSegment === 'bottom';
+    var isHorizontal = this._dropSegment === 'left' || this._dropSegment === 'right';
+    var insertBefore = this._dropSegment === 'top' || this._dropSegment === 'left';
+    var hasCorrectParent = isVertical && this.parent.isColumn || isHorizontal && this.parent.isRow;
+    var type = isVertical ? 'column' : 'row';
+    var dimension = isVertical ? 'height' : 'width';
     /*
      * The content item can be either a component or a stack. If it is a component, wrap it into a stack
      */
 
-    if (contentItem.isComponent) {
-      stack = this.layoutManager.createContentItem({
+    if (isComponent(contentItem)) {
+      var stack = this.layoutManager.createContentItem({
         type: 'stack',
         header: contentItem.config.header || {}
       }, this);
@@ -234,9 +265,11 @@ utils.copy(Stack.prototype, {
 
 
     if (hasCorrectParent) {
-      index = utils.indexOf(this, this.parent.contentItems);
+      var _this$config$dimensio;
+
+      var index = this.parent.contentItems.indexOf(this);
       this.parent.addChild(contentItem, insertBefore ? index : index + 1, true);
-      this.config[dimension] *= 0.5;
+      this.config[dimension] = ((_this$config$dimensio = this.config[dimension]) !== null && _this$config$dimensio !== void 0 ? _this$config$dimensio : 0) * 0.5;
       contentItem.config[dimension] = this.config[dimension];
       this.parent.callDownwards('setSize');
       /*
@@ -244,8 +277,7 @@ utils.copy(Stack.prototype, {
        * to create the appropriate contentItem for them to live in
        */
     } else {
-      type = isVertical ? 'column' : 'row';
-      rowOrColumn = this.layoutManager.createContentItem({
+      var rowOrColumn = this.layoutManager.createContentItem({
         type: type
       }, this);
       this.parent.replaceChild(this, rowOrColumn);
@@ -255,28 +287,29 @@ utils.copy(Stack.prototype, {
       contentItem.config[dimension] = 50;
       rowOrColumn.callDownwards('setSize');
     }
-  },
-
+  }
   /**
    * If the user hovers above the header part of the stack, indicate drop positions for tabs.
    * otherwise indicate which segment of the body the dragged item would be dropped on
    *
-   * @param    {Int} x Absolute Screen X
-   * @param    {Int} y Absolute Screen Y
-   *
-   * @returns {void}
+   * @param x Absolute Screen X
+   * @param y Absolute Screen Y
    */
-  _$highlightDropZone: function _$highlightDropZone(x, y) {
-    var segment, area;
 
-    for (segment in this._contentAreaDimensions) {
-      area = this._contentAreaDimensions[segment].hoverArea;
+
+  _$highlightDropZone(x, y) {
+    if (!this._contentAreaDimensions) {
+      return;
+    }
+
+    for (var [segment, dimensions] of Object.entries(this._contentAreaDimensions)) {
+      var area = dimensions.hoverArea;
 
       if (area.x1 < x && area.x2 > x && area.y1 < y && area.y2 > y) {
         if (segment === 'header') {
           this._dropSegment = 'header';
 
-          this._highlightHeaderDropZone(x, y);
+          this._highlightHeaderDropZone(x);
         } else {
           this._resetHeaderDropZone();
 
@@ -286,17 +319,23 @@ utils.copy(Stack.prototype, {
         return;
       }
     }
-  },
-  _$getArea: function _$getArea() {
+  }
+
+  _$getArea() {
     if (this.element.is(':visible') === false) {
       return null;
     }
 
-    var getArea = AbstractContentItem.prototype._$getArea,
-        headerArea = getArea.call(this, this.header.element),
-        contentArea = getArea.call(this, this.childElementContainer),
-        contentWidth = contentArea.x2 - contentArea.x1,
-        contentHeight = contentArea.y2 - contentArea.y1;
+    var headerArea = super._$getArea(this.header.element);
+
+    var contentArea = super._$getArea(this.childElementContainer);
+
+    if (headerArea == null || contentArea == null) {
+      return null;
+    }
+
+    var contentWidth = contentArea.x2 - contentArea.x1;
+    var contentHeight = contentArea.y2 - contentArea.y1;
     this._contentAreaDimensions = {
       header: {
         hoverArea: {
@@ -341,7 +380,7 @@ utils.copy(Stack.prototype, {
           y2: contentArea.y2
         }
       };
-      return getArea.call(this, this.element);
+      return super._$getArea(this.element);
     }
 
     this._contentAreaDimensions.left = {
@@ -400,30 +439,37 @@ utils.copy(Stack.prototype, {
         y2: contentArea.y2
       }
     };
-    return getArea.call(this, this.element);
-  },
-  _highlightHeaderDropZone: function _highlightHeaderDropZone(x) {
-    var tabsLength = this.header.tabs.length;
-    var tabElement = null;
-    var tabRect = null; // I've omitted code for side edge tabs here
+    return super._$getArea(this.element);
+  }
+
+  _highlightHeaderDropZone(x) {
+    var _tabsContainer$get, _this$layoutManager$t, _this$layoutManager$t2, _this$layoutManager$t3, _this$header$tabsCont, _this$header$tabsCont2, _this$layoutManager$t4, _this$header$tabsCont3, _this$header$tabsCont4, _this$header$tabsCont5, _this$layoutManager$d2, _this$header$element$6, _this$header$element$7, _this$header$element$8, _this$header$element$9, _this$header$element$10;
+
+    var tabsLength = this.header.tabs.length; // I've omitted code for side edge tabs here
     // illumon doesn't need it, will slowly pull that code out elsewhere too
     // Empty stack
 
     if (tabsLength === 0) {
+      var _this$layoutManager$d, _headerOffset$left, _headerOffset$left2, _this$header$element$, _this$header$element$2, _this$header$element$3, _this$header$element$4, _this$header$element$5;
+
       var headerOffset = this.header.element.offset(); // we don't have a placeholder to measure in the dom, lets just cheat and make it 100px.
 
-      this.layoutManager.dropTargetIndicator.highlightArea({
-        x1: headerOffset.left,
-        x2: headerOffset.left + 100,
-        y1: this.header.element.offset().top,
-        y2: this.header.element.offset().top + this.header.element.innerHeight()
+      (_this$layoutManager$d = this.layoutManager.dropTargetIndicator) === null || _this$layoutManager$d === void 0 ? void 0 : _this$layoutManager$d.highlightArea({
+        x1: (_headerOffset$left = headerOffset === null || headerOffset === void 0 ? void 0 : headerOffset.left) !== null && _headerOffset$left !== void 0 ? _headerOffset$left : 0,
+        x2: ((_headerOffset$left2 = headerOffset === null || headerOffset === void 0 ? void 0 : headerOffset.left) !== null && _headerOffset$left2 !== void 0 ? _headerOffset$left2 : 0) + 100,
+        y1: (_this$header$element$ = (_this$header$element$2 = this.header.element.offset()) === null || _this$header$element$2 === void 0 ? void 0 : _this$header$element$2.top) !== null && _this$header$element$ !== void 0 ? _this$header$element$ : 0,
+        y2: ((_this$header$element$3 = (_this$header$element$4 = this.header.element.offset()) === null || _this$header$element$4 === void 0 ? void 0 : _this$header$element$4.top) !== null && _this$header$element$3 !== void 0 ? _this$header$element$3 : 0) + ((_this$header$element$5 = this.header.element.innerHeight()) !== null && _this$header$element$5 !== void 0 ? _this$header$element$5 : 0)
       });
       return;
     }
 
     var tabsContainer = this.header.tabsContainer;
-    var tabsContainerRect = tabsContainer.get(0).getBoundingClientRect();
-    var placeholderRect = this.layoutManager.tabDropPlaceholder.get(0).getBoundingClientRect();
+    var tabsContainerRect = (_tabsContainer$get = tabsContainer.get(0)) === null || _tabsContainer$get === void 0 ? void 0 : _tabsContainer$get.getBoundingClientRect();
+    var placeholderRect = (_this$layoutManager$t = this.layoutManager.tabDropPlaceholder.get(0)) === null || _this$layoutManager$t === void 0 ? void 0 : _this$layoutManager$t.getBoundingClientRect();
+
+    if (!tabsContainerRect || !placeholderRect) {
+      return;
+    }
 
     if (x < tabsContainerRect.left) {
       // is over left tab controls button
@@ -433,66 +479,87 @@ utils.copy(Stack.prototype, {
       // is over right tab controls button
       // move x to a new point to inside right edge of container
       x = tabsContainerRect.right - 1;
-    } // if its not inide a placeholder,
+    }
 
+    var tabElement;
+    var tabRect; // if its not inide a placeholder,
 
     if (!(placeholderRect.left < x && x < placeholderRect.right)) {
       // which tab is it over ...
       for (var i = 0; i < tabsLength; i++) {
+        var _tabElement$get;
+
         tabElement = this.header.tabs[i].element;
-        tabRect = tabElement.get(0).getBoundingClientRect();
+        tabRect = (_tabElement$get = tabElement.get(0)) === null || _tabElement$get === void 0 ? void 0 : _tabElement$get.getBoundingClientRect();
 
-        if (tabRect.left < x && x < tabRect.right) {
+        if (tabRect && tabRect.left < x && x < tabRect.right) {
           this._dropIndex = i;
           break;
         }
       } // we have tabRect at this x,y from the loop above
 
 
-      if (tabElement && x < tabRect.left + tabRect.width * 0.5) {
+      if (tabElement && tabRect && x < tabRect.left + tabRect.width * 0.5) {
         // mostly before an element, insert placeholder before
         tabElement.before(this.layoutManager.tabDropPlaceholder);
       } else if (tabElement) {
+        var _this$_dropIndex;
+
         // x is likely after the lhe last item, position after and increase drop index
-        this._dropIndex = Math.min(this._dropIndex + 1, tabsLength);
+        this._dropIndex = Math.min(((_this$_dropIndex = this._dropIndex) !== null && _this$_dropIndex !== void 0 ? _this$_dropIndex : 0) + 1, tabsLength);
         tabElement.after(this.layoutManager.tabDropPlaceholder);
       }
     }
 
-    var placeHolderLeft = this.layoutManager.tabDropPlaceholder.offset().left;
-    placeHolderLeft = Math.max(placeHolderLeft, this.header.tabsContainer.offset().left);
-    var placeHolderRight = placeHolderLeft + this.layoutManager.tabDropPlaceholder.width();
-    placeHolderRight = Math.min(placeHolderRight, this.header.tabsContainer.offset().left + this.header.tabsContainer.innerWidth());
-    this.layoutManager.dropTargetIndicator.highlightArea({
+    var placeHolderLeft = (_this$layoutManager$t2 = (_this$layoutManager$t3 = this.layoutManager.tabDropPlaceholder.offset()) === null || _this$layoutManager$t3 === void 0 ? void 0 : _this$layoutManager$t3.left) !== null && _this$layoutManager$t2 !== void 0 ? _this$layoutManager$t2 : 0;
+    placeHolderLeft = Math.max(placeHolderLeft, (_this$header$tabsCont = (_this$header$tabsCont2 = this.header.tabsContainer.offset()) === null || _this$header$tabsCont2 === void 0 ? void 0 : _this$header$tabsCont2.left) !== null && _this$header$tabsCont !== void 0 ? _this$header$tabsCont : 0);
+    var placeHolderRight = placeHolderLeft + ((_this$layoutManager$t4 = this.layoutManager.tabDropPlaceholder.width()) !== null && _this$layoutManager$t4 !== void 0 ? _this$layoutManager$t4 : 0);
+    placeHolderRight = Math.min(placeHolderRight, ((_this$header$tabsCont3 = (_this$header$tabsCont4 = this.header.tabsContainer.offset()) === null || _this$header$tabsCont4 === void 0 ? void 0 : _this$header$tabsCont4.left) !== null && _this$header$tabsCont3 !== void 0 ? _this$header$tabsCont3 : 0) + ((_this$header$tabsCont5 = this.header.tabsContainer.innerWidth()) !== null && _this$header$tabsCont5 !== void 0 ? _this$header$tabsCont5 : 0));
+    (_this$layoutManager$d2 = this.layoutManager.dropTargetIndicator) === null || _this$layoutManager$d2 === void 0 ? void 0 : _this$layoutManager$d2.highlightArea({
       x1: placeHolderLeft,
       x2: placeHolderRight,
-      y1: this.header.element.offset().top,
-      y2: this.header.element.offset().top + this.header.element.innerHeight()
+      y1: (_this$header$element$6 = (_this$header$element$7 = this.header.element.offset()) === null || _this$header$element$7 === void 0 ? void 0 : _this$header$element$7.top) !== null && _this$header$element$6 !== void 0 ? _this$header$element$6 : 0,
+      y2: ((_this$header$element$8 = (_this$header$element$9 = this.header.element.offset()) === null || _this$header$element$9 === void 0 ? void 0 : _this$header$element$9.top) !== null && _this$header$element$8 !== void 0 ? _this$header$element$8 : 0) + ((_this$header$element$10 = this.header.element.innerHeight()) !== null && _this$header$element$10 !== void 0 ? _this$header$element$10 : 0)
     });
-  },
-  _resetHeaderDropZone: function _resetHeaderDropZone() {
+  }
+
+  _resetHeaderDropZone() {
     this.layoutManager.tabDropPlaceholder.remove();
-  },
-  _setupHeaderPosition: function _setupHeaderPosition() {
-    var side = ['right', 'left', 'bottom'].indexOf(this._header.show) >= 0 && this._header.show;
+  }
+
+  _setupHeaderPosition() {
+    var side = ['right', 'left', 'bottom'].some(elem => elem === this._header.show) ? this._header.show : undefined;
+
+    if (!side) {
+      return;
+    }
 
     this.header.element.toggle(!!this._header.show);
     this._side = side;
-    this._sided = ['right', 'left'].indexOf(this._side) >= 0;
+    this._sided = ['right', 'left'].indexOf(this._side.toString()) >= 0;
     this.element.removeClass('lm_left lm_right lm_bottom');
     if (this._side) this.element.addClass('lm_' + this._side);
 
     if (this.element.find('.lm_header').length && this.childElementContainer) {
-      var headerPosition = ['right', 'bottom'].indexOf(this._side) >= 0 ? 'before' : 'after';
+      var headerPosition = ['right', 'bottom'].indexOf(this._side.toString()) >= 0 ? 'before' : 'after';
       this.header.element[headerPosition](this.childElementContainer);
       this.callDownwards('setSize');
     }
-  },
-  _highlightBodyDropZone: function _highlightBodyDropZone(segment) {
-    var highlightArea = this._contentAreaDimensions[segment].highlightArea;
-    this.layoutManager.dropTargetIndicator.highlightArea(highlightArea);
+  }
+
+  _highlightBodyDropZone(segment) {
+    var _this$_contentAreaDim, _this$_contentAreaDim2;
+
+    var highlightArea = (_this$_contentAreaDim = this._contentAreaDimensions) === null || _this$_contentAreaDim === void 0 ? void 0 : (_this$_contentAreaDim2 = _this$_contentAreaDim[segment]) === null || _this$_contentAreaDim2 === void 0 ? void 0 : _this$_contentAreaDim2.highlightArea;
+
+    if (highlightArea) {
+      var _this$layoutManager$d3;
+
+      (_this$layoutManager$d3 = this.layoutManager.dropTargetIndicator) === null || _this$layoutManager$d3 === void 0 ? void 0 : _this$layoutManager$d3.highlightArea(highlightArea);
+    }
+
     this._dropSegment = segment;
   }
-});
-export default Stack;
+
+}
 //# sourceMappingURL=Stack.js.map