@vegaprotocol/golden-layout - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-alpha.6

dist/es2015/js_es6/items/Stack.js

@@ -23,7 +23,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import AbstractContentItem from '../items/AbstractContentItem';
-import RowOrColumn from '../items/RowOrColumn';
-import Header from '../controls/Header';
-import { fnBind, copy, indexOf } from '../utils/utils';
-import $ from 'jquery';
+import AbstractContentItem from "../items/AbstractContentItem";
+import RowOrColumn from "../items/RowOrColumn";
+import Header from "../controls/Header";
+import { fnBind, copy, indexOf } from "../utils/utils";
+import $ from "jquery";
 
@@ -66,4 +66,4 @@ var Stack = /*#__PURE__*/function (_AbstractContentItem) {
 
-    _this.element.on('mouseleave mouseenter', fnBind(function (event) {
-      if (this._docker && this._docker.docked) this.childElementContainer[this._docker.dimension](event.type == 'mouseenter' ? this._docker.realSize : 0);
+    _this.element.on("mouseleave mouseenter", fnBind(function (event) {
+      if (this._docker && this._docker.docked) this.childElementContainer[this._docker.dimension](event.type == "mouseenter" ? this._docker.realSize : 0);
     }, _assertThisInitialized(_this)));
@@ -90,3 +90,3 @@
     value: function setSize() {
-      if (this.element.css('display') === 'none') return;
+      if (this.element.css("display") === "none") return;
       var isDocked = this._docker && this._docker.docked,
@@ -97,6 +97,6 @@ content = {
       };
-      if (this._header.show) content[this._sided ? 'width' : 'height'] -= this.layoutManager.config.dimensions.headerHeight;
+      if (this._header.show) content[this._sided ? "width" : "height"] -= this.layoutManager.config.dimensions.headerHeight;
       if (isDocked) content[this._docker.dimension] = this._docker.realSize;
-      if (!isDocked || this._docker.dimension == 'height') this.childElementContainer.width(content.width);
-      if (!isDocked || this._docker.dimension == 'width') this.childElementContainer.height(content.height);
+      if (!isDocked || this._docker.dimension == "height") this.childElementContainer.width(content.width);
+      if (!isDocked || this._docker.dimension == "width") this.childElementContainer.height(content.height);
 
@@ -108,4 +108,4 @@ for (var i = 0; i < this.contentItems.length; i++) {
 
-      this.emit('resize');
-      this.emitBubblingEvent('stateChanged');
+      this.emit("resize");
+      this.emitBubblingEvent("stateChanged");
     }
@@ -130,3 +130,3 @@ }, {
         if (!initialItem) {
-          throw new Error('Configured activeItemIndex out of bounds');
+          throw new Error("Configured activeItemIndex out of bounds");
         }
@@ -149,3 +149,3 @@
       if (indexOf(contentItem, this.contentItems) === -1) {
-        throw new Error('contentItem is not a child of this stack');
+        throw new Error("contentItem is not a child of this stack");
       }
@@ -162,5 +162,5 @@
 
-      this.emit('activeContentItemChanged', contentItem);
-      this.layoutManager.emit('activeContentItemChanged', contentItem);
-      this.emitBubblingEvent('stateChanged');
+      this.emit("activeContentItemChanged", contentItem);
+      this.layoutManager.emit("activeContentItemChanged", contentItem);
+      this.emitBubblingEvent("stateChanged");
     }
@@ -176,7 +176,7 @@ }, {
       if (index > this.contentItems.length) {
-        /* 
-         * UGLY PATCH: PR #428, commit a4e84ec5 fixed a bug appearing on touchscreens during the drag of a panel. 
-         * The bug was caused by the physical removal of the element on drag: partial documentation is at issue #425. 
-         * The fix introduced the function undisplayChild() (called 'undisplay' to differentiate it from jQuery.hide), 
-         * which doesn't remove the element but only hides it: that's why when a tab is dragged & dropped into its 
+        /*
+         * UGLY PATCH: PR #428, commit a4e84ec5 fixed a bug appearing on touchscreens during the drag of a panel.
+         * The bug was caused by the physical removal of the element on drag: partial documentation is at issue #425.
+         * The fix introduced the function undisplayChild() (called 'undisplay' to differentiate it from jQuery.hide),
+         * which doesn't remove the element but only hides it: that's why when a tab is dragged & dropped into its
          * original container (at the end), the index here could be off by one.
@@ -192,3 +192,3 @@ */
       this.setActiveContentItem(contentItem);
-      this.callDownwards('setSize');
+      this.callDownwards("setSize");
 
@@ -198,3 +198,3 @@ this._$validateClosability();
       if (this.parent instanceof RowOrColumn) this.parent._validateDocking();
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -219,8 +219,17 @@ }, {
         }
-      }
+      } // Vega BEGIN
+      //
+      // If its not the active item and its index is less than current active
+      // item we need to decrement the active index by one. Otherwise when you
+      // reload the page the activeItemIndex will be greater than items.length
+      // causing the error on line 101
+      else if (index <= this.config.activeContentItem) {
+          this.config.activeItemIndex -= 1;
+        } // Vega END
 
+
       this._$validateClosability();
 
       if (this.parent instanceof RowOrColumn) this.parent._validateDocking();
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -241,3 +250,3 @@ }, {
 
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -275,3 +284,3 @@ /**
 
-      this.element.off('mouseenter mouseleave');
+      this.element.off("mouseenter mouseleave");
     }
@@ -307,3 +316,3 @@ /**
        */
-      if (this._dropSegment === 'header') {
+      if (this._dropSegment === "header") {
         this._resetHeaderDropZone();
@@ -319,3 +328,3 @@
 
-      if (this._dropSegment === 'body') {
+      if (this._dropSegment === "body") {
         this.addChild(contentItem);
@@ -330,8 +339,8 @@ return;
 
-      var isVertical = this._dropSegment === 'top' || this._dropSegment === 'bottom',
-          isHorizontal = this._dropSegment === 'left' || this._dropSegment === 'right',
-          insertBefore = this._dropSegment === 'top' || this._dropSegment === 'left',
+      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',
+          type = isVertical ? "column" : "row",
+          dimension = isVertical ? "height" : "width",
           index,
@@ -346,3 +355,3 @@ stack,
         stack = this.layoutManager.createContentItem({
-          type: 'stack',
+          type: "stack",
           header: contentItem.config.header || {}
@@ -357,3 +366,3 @@ }, this);
       /*
-       * If the contentItem that's being dropped is not dropped on a Stack (cases which just passed above and 
+       * If the contentItem that's being dropped is not dropped on a Stack (cases which just passed above and
        * which would wrap the contentItem in a Stack) we need to check whether contentItem is a RowOrColumn.
@@ -364,5 +373,5 @@ * If it is, we need to re-wrap it in a Stack like it was when it was dragged by its Tab (it was dragged!).
 
-      if (contentItem.config.type === 'row' || contentItem.config.type === 'column') {
+      if (contentItem.config.type === "row" || contentItem.config.type === "column") {
         stack = this.layoutManager.createContentItem({
-          type: 'stack'
+          type: "stack"
         }, this);
@@ -383,3 +392,3 @@ stack.addChild(contentItem);
         contentItem.config[dimension] = this.config[dimension];
-        this.parent.callDownwards('setSize');
+        this.parent.callDownwards("setSize");
         /*
@@ -390,3 +399,3 @@ * This handles items that are dropped on top or bottom of a row or left / right of a column. We need
       } else {
-        type = isVertical ? 'column' : 'row';
+        type = isVertical ? "column" : "row";
         rowOrColumn = this.layoutManager.createContentItem({
@@ -400,3 +409,3 @@ type: type
         contentItem.config[dimension] = 50;
-        rowOrColumn.callDownwards('setSize');
+        rowOrColumn.callDownwards("setSize");
       }
@@ -425,4 +434,4 @@
         if (area.x1 < x && area.x2 > x && area.y1 < y && area.y2 > y) {
-          if (segment === 'header') {
-            this._dropSegment = 'header';
+          if (segment === "header") {
+            this._dropSegment = "header";
 
@@ -443,3 +452,3 @@ this._highlightHeaderDropZone(this._sided ? y : x);
     value: function _$getArea() {
-      if (this.element.css('display') === 'none') {
+      if (this.element.css("display") === "none") {
         return null;
@@ -651,14 +660,14 @@ }
     value: function _setupHeaderPosition() {
-      var side = ['right', 'left', 'bottom'].indexOf(this._header.show) >= 0 && this._header.show;
+      var side = ["right", "left", "bottom"].indexOf(this._header.show) >= 0 && this._header.show;
 
       this.header.element.toggle(!!this._header.show);
       this._side = side;
-      this._sided = ['right', 'left'].indexOf(this._side) >= 0;
-      this.element.removeClass('lm_left lm_right lm_bottom');
-      if (this._side) this.element.addClass('lm_' + this._side);
+      this._sided = ["right", "left"].indexOf(this._side) >= 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';
+      if (this.element.find(".lm_header").length && this.childElementContainer) {
+        var headerPosition = ["right", "bottom"].indexOf(this._side) >= 0 ? "before" : "after";
         this.header.element[headerPosition](this.childElementContainer);
-        this.callDownwards('setSize');
+        this.callDownwards("setSize");
       }
@@ -665,0 +674,0 @@ }

dist/es2015/js_es6/utils/DragListener.js

@@ -23,5 +23,5 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import EventEmitter from '../utils/EventEmitter';
-import { fnBind, getTouchEvent } from '../utils/utils';
-import $ from 'jquery';
+import EventEmitter from "../utils/EventEmitter";
+import { fnBind, getTouchEvent } from "../utils/utils";
+import $ from "jquery";
 
@@ -64,3 +64,3 @@ var DragListener = /*#__PURE__*/function (_EventEmitter) {
 
-    _this._eElement.on('mousedown touchstart', _this._fDown);
+    _this._eElement.on("mousedown touchstart", _this._fDown);
 
@@ -73,5 +73,5 @@ return _this;
     value: function destroy() {
-      this._eElement.unbind('mousedown touchstart', this._fDown);
+      this._eElement.unbind("mousedown touchstart", this._fDown);
 
-      this._oDocument.unbind('mouseup touchend', this._fUp);
+      this._oDocument.unbind("mouseup touchend", this._fUp);
 
@@ -93,6 +93,9 @@ this._eElement = null;
 
-        this._oDocument.on('mousemove touchmove', this._fMove);
+        this._oDocument.on("mousemove touchmove", this._fMove);
 
-        this._oDocument.one('mouseup touchend', this._fUp);
+        this._oDocument.one("mouseup touchend", this._fUp); // VEGA: Bind keydown listener only after an initial mouse down. IE we are in drag mode
 
+
+        this._oDocument.on("keydown", this._fKeyDown);
+
         this._timeout = setTimeout(fnBind(this._startDrag, this), this._nDelay);
@@ -121,3 +124,3 @@ }
         if (this._bDragging) {
-          this.emit('drag', this._nX, this._nY, oEvent);
+          this.emit("drag", this._nX, this._nY, oEvent);
         }
@@ -132,19 +135,63 @@ }
 
-        this._eBody.removeClass('lm_dragging');
+        this._eBody.removeClass("lm_dragging");
 
-        this._eElement.removeClass('lm_dragging');
+        this._eElement.removeClass("lm_dragging");
 
-        this._oDocument.find('iframe').css('pointer-events', '');
+        this._oDocument.find("iframe").css("pointer-events", "");
 
-        this._oDocument.unbind('mousemove touchmove', this._fMove);
+        this._oDocument.unbind("mousemove touchmove", this._fMove);
 
-        this._oDocument.unbind('mouseup touchend', this._fUp);
+        this._oDocument.unbind("mouseup touchend", this._fUp); // VEGA: Unbind keydown listener when we mouse up
 
+
+        this._oDocument.unbind("keydown", this._fKeyDown);
+
         if (this._bDragging === true) {
           this._bDragging = false;
-          this.emit('dragStop', oEvent, this._nOriginalX + this._nX);
+          this.emit("dragStop", oEvent, this._nOriginalX + this._nX);
         }
       }
     }
+    /**
+     * VEGA: After clicking an add-target add mousemove and mouse up handlers and start drag mode
+     */
+
   }, {
+    key: "onClick",
+    value: function onClick() {
+      this._oDocument.on("mousemove touchmove", this._fMove);
+
+      this._oDocument.one("mouseup touchend", this._fUp);
+
+      this._oDocument.on("keydown", this._fKeyDown);
+
+      this._timeout = setTimeout(fnBind(this._startDrag, this), this._nDelay);
+    }
+    /**
+     * VEGA: Handler for key down
+     */
+
+  }, {
+    key: "onKeyDown",
+    value: function onKeyDown(e) {
+      if (this._bDragging === true) {
+        if (e.keyCode === 27) {
+          this._eBody.removeClass("lm_dragging");
+
+          this._eElement.removeClass("lm_dragging");
+
+          this._oDocument.find("iframe").css("pointer-events", "");
+
+          this._oDocument.unbind("mousemove touchmove", this._fMove);
+
+          this._oDocument.unbind("mouseup touchend", this._fUp);
+
+          this._oDocument.unbind("keydown", this._fKeyDown);
+
+          $(".lm_dropTargetIndicator").hide();
+          $(".lm_dragProxy").remove();
+        }
+      }
+    }
+  }, {
     key: "_startDrag",
@@ -154,9 +201,9 @@ value: function _startDrag() {
 
-      this._eBody.addClass('lm_dragging');
+      this._eBody.addClass("lm_dragging");
 
-      this._eElement.addClass('lm_dragging');
+      this._eElement.addClass("lm_dragging");
 
-      this._oDocument.find('iframe').css('pointer-events', 'none');
+      this._oDocument.find("iframe").css("pointer-events", "none");
 
-      this.emit('dragStart', this._nOriginalX, this._nOriginalY);
+      this.emit("dragStart", this._nOriginalX, this._nOriginalY);
     }
@@ -163,0 +210,0 @@ }, {

dist/es2015/js_es6/utils/ReactComponentHandler.js

@@ -7,3 +7,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import $ from 'jquery';
+import $ from "jquery";
 /**
@@ -13,2 +13,4 @@ * A specialised GoldenLayout component that binds GoldenLayout container
  *
+ * VEGA: This file has been modified to support windows as react portals
+ *
  * @constructor
@@ -30,5 +32,5 @@ *
 
-    this._container.on('open', this._render, this);
+    this._container.on("open", this._render, this);
 
-    this._container.on('destroy', this._destroy, this);
+    this._container.on("destroy", this._destroy, this);
   }
@@ -49,3 +51,7 @@ /**
     value: function _render() {
-      ReactDOM.render(this._getReactComponent(), this._container.getElement()[0]);
+      var reactContainer = this._container.layoutManager.reactContainer; // Instance of GL Class
+
+      if (reactContainer && reactContainer.componentRender) {
+        reactContainer.componentRender(this);
+      }
     }
@@ -89,7 +95,11 @@ /**
     value: function _destroy() {
-      ReactDOM.unmountComponentAtNode(this._container.getElement()[0]);
+      var reactContainer = this._container.layoutManager.reactContainer;
 
-      this._container.off('open', this._render, this);
+      this._container.off("open", this._render, this);
 
-      this._container.off('destroy', this._destroy, this);
+      this._container.off("destroy", this._destroy, this);
+
+      if (reactContainer && reactContainer.componentDestroy) {
+        reactContainer.componentDestroy(this);
+      }
     }
@@ -125,3 +135,3 @@ /**
       if (!componentName) {
-        throw new Error('No react component name. type: react-component needs a field `component`');
+        throw new Error("No react component name. type: react-component needs a field `component`");
       }
@@ -132,3 +142,3 @@
       if (!reactClass) {
-        throw new Error('React component "' + componentName + '" not found. ' + 'Please register all components with GoldenLayout using `registerComponent(name, component)`');
+        throw new Error('React component "' + componentName + '" not found. ' + "Please register all components with GoldenLayout using `registerComponent(name, component)`");
       }
@@ -135,0 +145,0 @@

dist/esm/js_es6/items/Stack.js

@@ -23,7 +23,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import AbstractContentItem from '../items/AbstractContentItem';
-import RowOrColumn from '../items/RowOrColumn';
-import Header from '../controls/Header';
-import { fnBind, copy, indexOf } from '../utils/utils';
-import $ from 'jquery';
+import AbstractContentItem from "../items/AbstractContentItem";
+import RowOrColumn from "../items/RowOrColumn";
+import Header from "../controls/Header";
+import { fnBind, copy, indexOf } from "../utils/utils";
+import $ from "jquery";
 
@@ -66,4 +66,4 @@ var Stack = /*#__PURE__*/function (_AbstractContentItem) {
 
-    _this.element.on('mouseleave mouseenter', fnBind(function (event) {
-      if (this._docker && this._docker.docked) this.childElementContainer[this._docker.dimension](event.type == 'mouseenter' ? this._docker.realSize : 0);
+    _this.element.on("mouseleave mouseenter", fnBind(function (event) {
+      if (this._docker && this._docker.docked) this.childElementContainer[this._docker.dimension](event.type == "mouseenter" ? this._docker.realSize : 0);
     }, _assertThisInitialized(_this)));
@@ -90,3 +90,3 @@
     value: function setSize() {
-      if (this.element.css('display') === 'none') return;
+      if (this.element.css("display") === "none") return;
       var isDocked = this._docker && this._docker.docked,
@@ -97,6 +97,6 @@ content = {
       };
-      if (this._header.show) content[this._sided ? 'width' : 'height'] -= this.layoutManager.config.dimensions.headerHeight;
+      if (this._header.show) content[this._sided ? "width" : "height"] -= this.layoutManager.config.dimensions.headerHeight;
       if (isDocked) content[this._docker.dimension] = this._docker.realSize;
-      if (!isDocked || this._docker.dimension == 'height') this.childElementContainer.width(content.width);
-      if (!isDocked || this._docker.dimension == 'width') this.childElementContainer.height(content.height);
+      if (!isDocked || this._docker.dimension == "height") this.childElementContainer.width(content.width);
+      if (!isDocked || this._docker.dimension == "width") this.childElementContainer.height(content.height);
 
@@ -108,4 +108,4 @@ for (var i = 0; i < this.contentItems.length; i++) {
 
-      this.emit('resize');
-      this.emitBubblingEvent('stateChanged');
+      this.emit("resize");
+      this.emitBubblingEvent("stateChanged");
     }
@@ -130,3 +130,3 @@ }, {
         if (!initialItem) {
-          throw new Error('Configured activeItemIndex out of bounds');
+          throw new Error("Configured activeItemIndex out of bounds");
         }
@@ -149,3 +149,3 @@
       if (indexOf(contentItem, this.contentItems) === -1) {
-        throw new Error('contentItem is not a child of this stack');
+        throw new Error("contentItem is not a child of this stack");
       }
@@ -162,5 +162,5 @@
 
-      this.emit('activeContentItemChanged', contentItem);
-      this.layoutManager.emit('activeContentItemChanged', contentItem);
-      this.emitBubblingEvent('stateChanged');
+      this.emit("activeContentItemChanged", contentItem);
+      this.layoutManager.emit("activeContentItemChanged", contentItem);
+      this.emitBubblingEvent("stateChanged");
     }
@@ -176,7 +176,7 @@ }, {
       if (index > this.contentItems.length) {
-        /* 
-         * UGLY PATCH: PR #428, commit a4e84ec5 fixed a bug appearing on touchscreens during the drag of a panel. 
-         * The bug was caused by the physical removal of the element on drag: partial documentation is at issue #425. 
-         * The fix introduced the function undisplayChild() (called 'undisplay' to differentiate it from jQuery.hide), 
-         * which doesn't remove the element but only hides it: that's why when a tab is dragged & dropped into its 
+        /*
+         * UGLY PATCH: PR #428, commit a4e84ec5 fixed a bug appearing on touchscreens during the drag of a panel.
+         * The bug was caused by the physical removal of the element on drag: partial documentation is at issue #425.
+         * The fix introduced the function undisplayChild() (called 'undisplay' to differentiate it from jQuery.hide),
+         * which doesn't remove the element but only hides it: that's why when a tab is dragged & dropped into its
          * original container (at the end), the index here could be off by one.
@@ -192,3 +192,3 @@ */
       this.setActiveContentItem(contentItem);
-      this.callDownwards('setSize');
+      this.callDownwards("setSize");
 
@@ -198,3 +198,3 @@ this._$validateClosability();
       if (this.parent instanceof RowOrColumn) this.parent._validateDocking();
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -219,8 +219,17 @@ }, {
         }
-      }
+      } // Vega BEGIN
+      //
+      // If its not the active item and its index is less than current active
+      // item we need to decrement the active index by one. Otherwise when you
+      // reload the page the activeItemIndex will be greater than items.length
+      // causing the error on line 101
+      else if (index <= this.config.activeContentItem) {
+          this.config.activeItemIndex -= 1;
+        } // Vega END
 
+
       this._$validateClosability();
 
       if (this.parent instanceof RowOrColumn) this.parent._validateDocking();
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -241,3 +250,3 @@ }, {
 
-      this.emitBubblingEvent('stateChanged');
+      this.emitBubblingEvent("stateChanged");
     }
@@ -275,3 +284,3 @@ /**
 
-      this.element.off('mouseenter mouseleave');
+      this.element.off("mouseenter mouseleave");
     }
@@ -307,3 +316,3 @@ /**
        */
-      if (this._dropSegment === 'header') {
+      if (this._dropSegment === "header") {
         this._resetHeaderDropZone();
@@ -319,3 +328,3 @@
 
-      if (this._dropSegment === 'body') {
+      if (this._dropSegment === "body") {
         this.addChild(contentItem);
@@ -330,8 +339,8 @@ return;
 
-      var isVertical = this._dropSegment === 'top' || this._dropSegment === 'bottom',
-          isHorizontal = this._dropSegment === 'left' || this._dropSegment === 'right',
-          insertBefore = this._dropSegment === 'top' || this._dropSegment === 'left',
+      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',
+          type = isVertical ? "column" : "row",
+          dimension = isVertical ? "height" : "width",
           index,
@@ -346,3 +355,3 @@ stack,
         stack = this.layoutManager.createContentItem({
-          type: 'stack',
+          type: "stack",
           header: contentItem.config.header || {}
@@ -357,3 +366,3 @@ }, this);
       /*
-       * If the contentItem that's being dropped is not dropped on a Stack (cases which just passed above and 
+       * If the contentItem that's being dropped is not dropped on a Stack (cases which just passed above and
        * which would wrap the contentItem in a Stack) we need to check whether contentItem is a RowOrColumn.
@@ -364,5 +373,5 @@ * If it is, we need to re-wrap it in a Stack like it was when it was dragged by its Tab (it was dragged!).
 
-      if (contentItem.config.type === 'row' || contentItem.config.type === 'column') {
+      if (contentItem.config.type === "row" || contentItem.config.type === "column") {
         stack = this.layoutManager.createContentItem({
-          type: 'stack'
+          type: "stack"
         }, this);
@@ -383,3 +392,3 @@ stack.addChild(contentItem);
         contentItem.config[dimension] = this.config[dimension];
-        this.parent.callDownwards('setSize');
+        this.parent.callDownwards("setSize");
         /*
@@ -390,3 +399,3 @@ * This handles items that are dropped on top or bottom of a row or left / right of a column. We need
       } else {
-        type = isVertical ? 'column' : 'row';
+        type = isVertical ? "column" : "row";
         rowOrColumn = this.layoutManager.createContentItem({
@@ -400,3 +409,3 @@ type: type
         contentItem.config[dimension] = 50;
-        rowOrColumn.callDownwards('setSize');
+        rowOrColumn.callDownwards("setSize");
       }
@@ -425,4 +434,4 @@
         if (area.x1 < x && area.x2 > x && area.y1 < y && area.y2 > y) {
-          if (segment === 'header') {
-            this._dropSegment = 'header';
+          if (segment === "header") {
+            this._dropSegment = "header";
 
@@ -443,3 +452,3 @@ this._highlightHeaderDropZone(this._sided ? y : x);
     value: function _$getArea() {
-      if (this.element.css('display') === 'none') {
+      if (this.element.css("display") === "none") {
         return null;
@@ -651,14 +660,14 @@ }
     value: function _setupHeaderPosition() {
-      var side = ['right', 'left', 'bottom'].indexOf(this._header.show) >= 0 && this._header.show;
+      var side = ["right", "left", "bottom"].indexOf(this._header.show) >= 0 && this._header.show;
 
       this.header.element.toggle(!!this._header.show);
       this._side = side;
-      this._sided = ['right', 'left'].indexOf(this._side) >= 0;
-      this.element.removeClass('lm_left lm_right lm_bottom');
-      if (this._side) this.element.addClass('lm_' + this._side);
+      this._sided = ["right", "left"].indexOf(this._side) >= 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';
+      if (this.element.find(".lm_header").length && this.childElementContainer) {
+        var headerPosition = ["right", "bottom"].indexOf(this._side) >= 0 ? "before" : "after";
         this.header.element[headerPosition](this.childElementContainer);
-        this.callDownwards('setSize');
+        this.callDownwards("setSize");
       }
@@ -665,0 +674,0 @@ }

dist/esm/js_es6/utils/DragListener.js

@@ -23,5 +23,5 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import EventEmitter from '../utils/EventEmitter';
-import { fnBind, getTouchEvent } from '../utils/utils';
-import $ from 'jquery';
+import EventEmitter from "../utils/EventEmitter";
+import { fnBind, getTouchEvent } from "../utils/utils";
+import $ from "jquery";
 
@@ -64,3 +64,3 @@ var DragListener = /*#__PURE__*/function (_EventEmitter) {
 
-    _this._eElement.on('mousedown touchstart', _this._fDown);
+    _this._eElement.on("mousedown touchstart", _this._fDown);
 
@@ -73,5 +73,5 @@ return _this;
     value: function destroy() {
-      this._eElement.unbind('mousedown touchstart', this._fDown);
+      this._eElement.unbind("mousedown touchstart", this._fDown);
 
-      this._oDocument.unbind('mouseup touchend', this._fUp);
+      this._oDocument.unbind("mouseup touchend", this._fUp);
 
@@ -93,6 +93,9 @@ this._eElement = null;
 
-        this._oDocument.on('mousemove touchmove', this._fMove);
+        this._oDocument.on("mousemove touchmove", this._fMove);
 
-        this._oDocument.one('mouseup touchend', this._fUp);
+        this._oDocument.one("mouseup touchend", this._fUp); // VEGA: Bind keydown listener only after an initial mouse down. IE we are in drag mode
 
+
+        this._oDocument.on("keydown", this._fKeyDown);
+
         this._timeout = setTimeout(fnBind(this._startDrag, this), this._nDelay);
@@ -121,3 +124,3 @@ }
         if (this._bDragging) {
-          this.emit('drag', this._nX, this._nY, oEvent);
+          this.emit("drag", this._nX, this._nY, oEvent);
         }
@@ -132,19 +135,63 @@ }
 
-        this._eBody.removeClass('lm_dragging');
+        this._eBody.removeClass("lm_dragging");
 
-        this._eElement.removeClass('lm_dragging');
+        this._eElement.removeClass("lm_dragging");
 
-        this._oDocument.find('iframe').css('pointer-events', '');
+        this._oDocument.find("iframe").css("pointer-events", "");
 
-        this._oDocument.unbind('mousemove touchmove', this._fMove);
+        this._oDocument.unbind("mousemove touchmove", this._fMove);
 
-        this._oDocument.unbind('mouseup touchend', this._fUp);
+        this._oDocument.unbind("mouseup touchend", this._fUp); // VEGA: Unbind keydown listener when we mouse up
 
+
+        this._oDocument.unbind("keydown", this._fKeyDown);
+
         if (this._bDragging === true) {
           this._bDragging = false;
-          this.emit('dragStop', oEvent, this._nOriginalX + this._nX);
+          this.emit("dragStop", oEvent, this._nOriginalX + this._nX);
         }
       }
     }
+    /**
+     * VEGA: After clicking an add-target add mousemove and mouse up handlers and start drag mode
+     */
+
   }, {
+    key: "onClick",
+    value: function onClick() {
+      this._oDocument.on("mousemove touchmove", this._fMove);
+
+      this._oDocument.one("mouseup touchend", this._fUp);
+
+      this._oDocument.on("keydown", this._fKeyDown);
+
+      this._timeout = setTimeout(fnBind(this._startDrag, this), this._nDelay);
+    }
+    /**
+     * VEGA: Handler for key down
+     */
+
+  }, {
+    key: "onKeyDown",
+    value: function onKeyDown(e) {
+      if (this._bDragging === true) {
+        if (e.keyCode === 27) {
+          this._eBody.removeClass("lm_dragging");
+
+          this._eElement.removeClass("lm_dragging");
+
+          this._oDocument.find("iframe").css("pointer-events", "");
+
+          this._oDocument.unbind("mousemove touchmove", this._fMove);
+
+          this._oDocument.unbind("mouseup touchend", this._fUp);
+
+          this._oDocument.unbind("keydown", this._fKeyDown);
+
+          $(".lm_dropTargetIndicator").hide();
+          $(".lm_dragProxy").remove();
+        }
+      }
+    }
+  }, {
     key: "_startDrag",
@@ -154,9 +201,9 @@ value: function _startDrag() {
 
-      this._eBody.addClass('lm_dragging');
+      this._eBody.addClass("lm_dragging");
 
-      this._eElement.addClass('lm_dragging');
+      this._eElement.addClass("lm_dragging");
 
-      this._oDocument.find('iframe').css('pointer-events', 'none');
+      this._oDocument.find("iframe").css("pointer-events", "none");
 
-      this.emit('dragStart', this._nOriginalX, this._nOriginalY);
+      this.emit("dragStart", this._nOriginalX, this._nOriginalY);
     }
@@ -163,0 +210,0 @@ }, {

dist/esm/js_es6/utils/ReactComponentHandler.js

@@ -7,3 +7,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import $ from 'jquery';
+import $ from "jquery";
 /**
@@ -13,2 +13,4 @@ * A specialised GoldenLayout component that binds GoldenLayout container
  *
+ * VEGA: This file has been modified to support windows as react portals
+ *
  * @constructor
@@ -30,5 +32,5 @@ *
 
-    this._container.on('open', this._render, this);
+    this._container.on("open", this._render, this);
 
-    this._container.on('destroy', this._destroy, this);
+    this._container.on("destroy", this._destroy, this);
   }
@@ -49,3 +51,7 @@ /**
     value: function _render() {
-      ReactDOM.render(this._getReactComponent(), this._container.getElement()[0]);
+      var reactContainer = this._container.layoutManager.reactContainer; // Instance of GL Class
+
+      if (reactContainer && reactContainer.componentRender) {
+        reactContainer.componentRender(this);
+      }
     }
@@ -89,7 +95,11 @@ /**
     value: function _destroy() {
-      ReactDOM.unmountComponentAtNode(this._container.getElement()[0]);
+      var reactContainer = this._container.layoutManager.reactContainer;
 
-      this._container.off('open', this._render, this);
+      this._container.off("open", this._render, this);
 
-      this._container.off('destroy', this._destroy, this);
+      this._container.off("destroy", this._destroy, this);
+
+      if (reactContainer && reactContainer.componentDestroy) {
+        reactContainer.componentDestroy(this);
+      }
     }
@@ -125,3 +135,3 @@ /**
       if (!componentName) {
-        throw new Error('No react component name. type: react-component needs a field `component`');
+        throw new Error("No react component name. type: react-component needs a field `component`");
       }
@@ -132,3 +142,3 @@
       if (!reactClass) {
-        throw new Error('React component "' + componentName + '" not found. ' + 'Please register all components with GoldenLayout using `registerComponent(name, component)`');
+        throw new Error('React component "' + componentName + '" not found. ' + "Please register all components with GoldenLayout using `registerComponent(name, component)`");
       }
@@ -135,0 +145,0 @@

package.json

 {
     "name": "@vegaprotocol/golden-layout",
-    "version": "2.0.0-alpha.5",
+    "version": "2.0.0-alpha.6",
     "description": "A multi-screen javascript Layout manager \r https://golden-layout.com",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

1676693

increased by1.11%

Lines of code

20185

increased by0.73%

No dependency changes