golden-layout - npm Package Compare versions

src/img/lm_close_black.png

src/img/lm_close_tab_white.png

src/img/lm_close_white.png

src/img/lm_docked_black.png

src/img/lm_docked_white.png

src/img/lm_maximise_black.png

src/img/lm_maximise_white.png

src/img/lm_minimize_black.png

src/img/lm_minimize_white.png

src/img/lm_popin_black.png

src/img/lm_popin_white.png

src/img/lm_popout_black.png

src/img/lm_popout_white.png

src/index.ts

src/less/goldenlayout-base.less

src/less/themes/goldenlayout-dark-theme.less

src/less/themes/goldenlayout-light-theme.less

src/less/themes/goldenlayout-soda-theme.less

src/less/themes/goldenlayout-translucent-theme.less

src/scss/goldenlayout-base.scss

src/scss/themes/_goldenlayout-var-theme.scss

src/TOOLCHAIN.md

src/ts/config/config.ts

src/ts/config/resolved-config.ts

src/ts/container/component-container.ts

src/ts/controls/browser-popout.ts

src/ts/controls/drag-proxy.ts

src/ts/controls/drag-source.ts

src/ts/controls/drop-target-indicator.ts

src/ts/controls/header-button.ts

src/ts/controls/header.ts

src/ts/controls/splitter.ts

src/ts/controls/tab.ts

src/ts/controls/tabs-container.ts

src/ts/controls/transition-indicator.ts

src/ts/errors/external-error.ts

src/ts/errors/internal-error.ts

src/ts/golden-layout.ts

src/ts/items/component-item.ts

src/ts/items/component-parentable-item.ts

src/ts/items/content-item.ts

src/ts/items/ground-item.ts

src/ts/items/row-or-column.ts

src/ts/items/stack.ts

src/ts/layout-manager.ts

src/ts/utils/config-minifier.ts

src/ts/utils/dom-constants.ts

src/ts/utils/drag-listener.ts

src/ts/utils/event-emitter.ts

src/ts/utils/event-hub.ts

src/ts/utils/i18n-strings.ts

src/ts/utils/jquery-legacy.ts

src/ts/utils/types.ts

src/ts/utils/utils.ts

11

dist/cjs/ts/container/component-container.js

		@@ -247,4 +247,9 @@ "use strict";
		}
		/** @internal */
		/**
		* Set the container's size, but considered temporary (for dragging)
		* so don't emit any events.
		* @internal */
		setDragSize(width, height) {
		this._width = width;
		this._height = height;
		utils_1.setElementWidth(this._element, width);
		@@ -254,4 +259,4 @@ utils_1.setElementHeight(this._element, height);
		/**
		* Set's the containers size. Called by the container's component item.
		* To set the size programmatically from within the component itself,
		* Sets the container's size. Called by the container's component item.
		* To instead set the size programmatically from within the component itself,
		* use the public setSize method
		@@ -258,0 +263,0 @@ * @param width - in px

120

dist/cjs/ts/controls/drag-proxy.js

		@@ -32,2 +32,26 @@ "use strict";
		this._dragListener.on('dragStop', () => this.onDrop());
		this.createDragProxyElements(x, y);
		if (this._componentItem.parent === null) {
		// Note that _contentItem will have dummy GroundItem as parent if initiated by a external drag source
		throw new internal_error_1.UnexpectedNullError('DPC10097');
		}
		this._componentItemFocused = this._componentItem.focused;
		if (this._componentItemFocused) {
		this._componentItem.blur();
		}
		this._componentItem.parent.removeChild(this._componentItem, true);
		this.setDimensions();
		document.body.appendChild(this._element);
		this.determineMinMaxXY();
		if (this._layoutManager.layoutConfig.settings.constrainDragToContainer) {
		const constrainedPosition = this.getXYWithinMinMax(x, y);
		x = constrainedPosition.x;
		y = constrainedPosition.y;
		}
		this._layoutManager.calculateItemAreas();
		this.setDropPosition(x, y);
		}
		get element() { return this._element; }
		/** Create Stack-like structure to contain the dragged component */
		createDragProxyElements(initialX, initialY) {
		this._element = document.createElement('div');
		@@ -57,51 +81,31 @@ this._element.classList.add("lm_dragProxy" /* DragProxy */);
		}
		this._element.style.left = utils_1.numberToPixels(x);
		this._element.style.top = utils_1.numberToPixels(y);
		this._element.style.left = utils_1.numberToPixels(initialX);
		this._element.style.top = utils_1.numberToPixels(initialY);
		tabElement.setAttribute('title', utils_1.stripTags(this._componentItem.title));
		titleElement.insertAdjacentText('afterbegin', this._componentItem.title);
		this._proxyContainerElement.appendChild(this._componentItem.element);
		if (this._componentItem.parent === null) {
		// Note that _contentItem will have dummy GroundItem as parent if initiated by a external drag source
		throw new internal_error_1.UnexpectedNullError('DPC10097');
		}
		determineMinMaxXY() {
		const offset = jquery_legacy_1.getJQueryOffset(this._layoutManager.container);
		this._minX = offset.left;
		this._minY = offset.top;
		const { width: containerWidth, height: containerHeight } = utils_1.getElementWidthAndHeight(this._layoutManager.container);
		this._maxX = containerWidth + this._minX;
		this._maxY = containerHeight + this._minY;
		}
		getXYWithinMinMax(x, y) {
		if (x <= this._minX) {
		x = Math.ceil(this._minX + 1);
		}
		else {
		this._componentItemFocused = this._componentItem.focused;
		if (this._componentItemFocused) {
		this._componentItem.blur();
		}
		this._componentItem.parent.removeChild(this._componentItem, true);
		this._layoutManager.calculateItemAreas();
		this.setDimensions();
		document.body.appendChild(this._element);
		const offset = jquery_legacy_1.getJQueryOffset(this._layoutManager.container);
		this._minX = offset.left;
		this._minY = offset.top;
		const { width: containerWidth, height: containerHeight } = utils_1.getElementWidthAndHeight(this._layoutManager.container);
		this._maxX = containerWidth + this._minX;
		this._maxY = containerHeight + this._minY;
		const { width: elementWidth, height: elementHeight } = utils_1.getElementWidthAndHeight(this._element);
		this._width = elementWidth;
		this._height = elementHeight;
		if (this._layoutManager.layoutConfig.settings.constrainDragToContainer) {
		if (x <= this._minX) {
		x = Math.ceil(this._minX + 1);
		}
		else {
		if (x >= this._maxX) {
		x = Math.floor(this._maxX - 1);
		}
		}
		if (y <= this._minY) {
		y = Math.ceil(this._minY + 1);
		}
		else {
		if (y >= this._maxY) {
		y = Math.floor(this._maxY - 1);
		}
		}
		}
		this.setDropPosition(x, y);
		else if (x >= this._maxX) {
		x = Math.floor(this._maxX - 1);
		}
		if (y <= this._minY) {
		y = Math.ceil(this._minY + 1);
		}
		else if (y >= this._maxY) {
		y = Math.floor(this._maxY - 1);
		}
		return { x, y };
		}
		get element() { return this._element; }
		/**
		@@ -209,20 +213,16 @@ * Callback on every mouseMove event during a drag. Determines if the drag is
		}
		else {
		let width = dimensions.dragProxyWidth;
		let height = dimensions.dragProxyHeight;
		if (width === undefined \|\| height === undefined) {
		throw new Error('DragProxy.setDimensions: width and/or height undefined');
		}
		else {
		const headerHeight = this._layoutManager.layoutConfig.header.show === false ? 0 : dimensions.headerHeight;
		this._element.style.width = utils_1.numberToPixels(width);
		this._element.style.height = utils_1.numberToPixels(height);
		width -= (this._sided ? headerHeight : 0);
		height -= (!this._sided ? headerHeight : 0);
		this._proxyContainerElement.style.width = utils_1.numberToPixels(width);
		this._proxyContainerElement.style.height = utils_1.numberToPixels(height);
		this._componentItem.show();
		this._componentItem.setDragSize(width, height);
		}
		let width = dimensions.dragProxyWidth;
		let height = dimensions.dragProxyHeight;
		if (width === undefined \|\| height === undefined) {
		throw new Error('DragProxy.setDimensions: width and/or height undefined');
		}
		const headerHeight = this._layoutManager.layoutConfig.header.show === false ? 0 : dimensions.headerHeight;
		this._element.style.width = utils_1.numberToPixels(width);
		this._element.style.height = utils_1.numberToPixels(height);
		width -= (this._sided ? headerHeight : 0);
		height -= (!this._sided ? headerHeight : 0);
		this._proxyContainerElement.style.width = utils_1.numberToPixels(width);
		this._proxyContainerElement.style.height = utils_1.numberToPixels(height);
		this._componentItem.setDragSize(width, height);
		this._componentItem.show();
		}
		@@ -229,0 +229,0 @@ }

6

dist/cjs/ts/controls/header.js

		@@ -360,8 +360,6 @@ "use strict";
		const activeComponentItem = this._getActiveComponentItemEvent();
		if (activeComponentItem === null) {
		throw new internal_error_1.UnexpectedNullError('HOPC70222');
		}
		else {
		if (activeComponentItem) {
		activeComponentItem.popout();
		}
		// else: if the stack is empty there won't be an active item (and nothing to popout)
		}
		@@ -368,0 +366,0 @@ }

3

dist/cjs/ts/controls/tabs-container.js

		@@ -124,2 +124,5 @@ "use strict";
		if (this._tabs.length > 0) {
		if (activeComponentItem === undefined) {
		throw new Error('non-empty tabs must have active component item');
		}
		let cumulativeTabWidth = 0;
		@@ -126,0 +129,0 @@ let tabOverlapAllowanceExceeded = false;

9

dist/cjs/ts/items/component-item.js

		@@ -83,8 +83,5 @@ "use strict";
		setDragSize(width, height) {
		if (this.element.style.display !== 'none') {
		// Do not update size of hidden components to prevent unwanted reflows
		utils_1.setElementWidth(this.element, width);
		utils_1.setElementHeight(this.element, height);
		this._container.setDragSize(width, height);
		}
		utils_1.setElementWidth(this.element, width);
		utils_1.setElementHeight(this.element, height);
		this._container.setDragSize(width, height);
		}
		@@ -91,0 +88,0 @@ /** @internal */

4

dist/cjs/ts/items/content-item.js

		@@ -65,2 +65,4 @@ "use strict";
		* Removes a child node (and its children) from the tree
		* @param contentItem - The child item to remove
		* @param keepChild - Whether to destroy the removed item
		*/
		@@ -79,3 +81,3 @@ removeChild(contentItem, keepChild = false) {
		/**
		* Call ._$destroy on the content item.
		* Call destroy on the content item.
		* All children are destroyed as well
		@@ -82,0 +84,0 @@ */

26

dist/cjs/ts/items/stack.js

		@@ -184,8 +184,4 @@ "use strict";
		getActiveContentItem() {
		let result;
		result = this.getActiveComponentItem();
		if (result === undefined) {
		result = null;
		}
		return result;
		var _a;
		return (_a = this.getActiveComponentItem()) !== null && _a !== void 0 ? _a : null;
		}
		@@ -197,3 +193,4 @@ getActiveComponentItem() {
		focusActiveContentItem() {
		this._activeComponentItem.focus();
		var _a;
		(_a = this._activeComponentItem) === null \|\| _a === void 0 ? void 0 : _a.focus();
		}
		@@ -334,3 +331,4 @@ /** @internal */
		destroy() {
		if (this._activeComponentItem.focused) {
		var _a;
		if ((_a = this._activeComponentItem) === null \|\| _a === void 0 ? void 0 : _a.focused) {
		this._activeComponentItem.blur();
		@@ -349,6 +347,12 @@ }
		toConfig() {
		const activeItemIndex = this.contentItems.indexOf(this._activeComponentItem);
		if (activeItemIndex < 0) {
		throw new internal_error_1.AssertError('STC69221');
		let activeItemIndex;
		if (this._activeComponentItem) {
		activeItemIndex = this.contentItems.indexOf(this._activeComponentItem);
		if (activeItemIndex < 0) {
		throw new Error('active component item not found in stack');
		}
		}
		if (this.contentItems.length > 0 && activeItemIndex === undefined) {
		throw new Error('expected non-empty stack to have an active component item');
		}
		else {
		@@ -355,0 +359,0 @@ const result = {

2

dist/cjs/ts/utils/event-emitter.js

		@@ -69,3 +69,3 @@ "use strict";
		/**
		* Removes a listener for an event, or all listeners if no callback and context is provided.
		* Removes a listener for an event.
		* @param eventName - The name of the event
		@@ -72,0 +72,0 @@ * @param callback - The previously registered callback method (optional)

11

dist/esm/ts/container/component-container.js

		@@ -244,4 +244,9 @@ import { ComponentItemConfig, ItemConfig } from '../config/config';
		}
		/** @internal */
		/**
		* Set the container's size, but considered temporary (for dragging)
		* so don't emit any events.
		* @internal */
		setDragSize(width, height) {
		this._width = width;
		this._height = height;
		setElementWidth(this._element, width);
		@@ -251,4 +256,4 @@ setElementHeight(this._element, height);
		/**
		* Set's the containers size. Called by the container's component item.
		* To set the size programmatically from within the component itself,
		* Sets the container's size. Called by the container's component item.
		* To instead set the size programmatically from within the component itself,
		* use the public setSize method
		@@ -255,0 +260,0 @@ * @param width - in px

120

dist/esm/ts/controls/drag-proxy.js

		@@ -29,2 +29,26 @@ import { UnexpectedNullError } from '../errors/internal-error';
		this._dragListener.on('dragStop', () => this.onDrop());
		this.createDragProxyElements(x, y);
		if (this._componentItem.parent === null) {
		// Note that _contentItem will have dummy GroundItem as parent if initiated by a external drag source
		throw new UnexpectedNullError('DPC10097');
		}
		this._componentItemFocused = this._componentItem.focused;
		if (this._componentItemFocused) {
		this._componentItem.blur();
		}
		this._componentItem.parent.removeChild(this._componentItem, true);
		this.setDimensions();
		document.body.appendChild(this._element);
		this.determineMinMaxXY();
		if (this._layoutManager.layoutConfig.settings.constrainDragToContainer) {
		const constrainedPosition = this.getXYWithinMinMax(x, y);
		x = constrainedPosition.x;
		y = constrainedPosition.y;
		}
		this._layoutManager.calculateItemAreas();
		this.setDropPosition(x, y);
		}
		get element() { return this._element; }
		/** Create Stack-like structure to contain the dragged component */
		createDragProxyElements(initialX, initialY) {
		this._element = document.createElement('div');
		@@ -54,51 +78,31 @@ this._element.classList.add("lm_dragProxy" /* DragProxy */);
		}
		this._element.style.left = numberToPixels(x);
		this._element.style.top = numberToPixels(y);
		this._element.style.left = numberToPixels(initialX);
		this._element.style.top = numberToPixels(initialY);
		tabElement.setAttribute('title', stripTags(this._componentItem.title));
		titleElement.insertAdjacentText('afterbegin', this._componentItem.title);
		this._proxyContainerElement.appendChild(this._componentItem.element);
		if (this._componentItem.parent === null) {
		// Note that _contentItem will have dummy GroundItem as parent if initiated by a external drag source
		throw new UnexpectedNullError('DPC10097');
		}
		determineMinMaxXY() {
		const offset = getJQueryOffset(this._layoutManager.container);
		this._minX = offset.left;
		this._minY = offset.top;
		const { width: containerWidth, height: containerHeight } = getElementWidthAndHeight(this._layoutManager.container);
		this._maxX = containerWidth + this._minX;
		this._maxY = containerHeight + this._minY;
		}
		getXYWithinMinMax(x, y) {
		if (x <= this._minX) {
		x = Math.ceil(this._minX + 1);
		}
		else {
		this._componentItemFocused = this._componentItem.focused;
		if (this._componentItemFocused) {
		this._componentItem.blur();
		}
		this._componentItem.parent.removeChild(this._componentItem, true);
		this._layoutManager.calculateItemAreas();
		this.setDimensions();
		document.body.appendChild(this._element);
		const offset = getJQueryOffset(this._layoutManager.container);
		this._minX = offset.left;
		this._minY = offset.top;
		const { width: containerWidth, height: containerHeight } = getElementWidthAndHeight(this._layoutManager.container);
		this._maxX = containerWidth + this._minX;
		this._maxY = containerHeight + this._minY;
		const { width: elementWidth, height: elementHeight } = getElementWidthAndHeight(this._element);
		this._width = elementWidth;
		this._height = elementHeight;
		if (this._layoutManager.layoutConfig.settings.constrainDragToContainer) {
		if (x <= this._minX) {
		x = Math.ceil(this._minX + 1);
		}
		else {
		if (x >= this._maxX) {
		x = Math.floor(this._maxX - 1);
		}
		}
		if (y <= this._minY) {
		y = Math.ceil(this._minY + 1);
		}
		else {
		if (y >= this._maxY) {
		y = Math.floor(this._maxY - 1);
		}
		}
		}
		this.setDropPosition(x, y);
		else if (x >= this._maxX) {
		x = Math.floor(this._maxX - 1);
		}
		if (y <= this._minY) {
		y = Math.ceil(this._minY + 1);
		}
		else if (y >= this._maxY) {
		y = Math.floor(this._maxY - 1);
		}
		return { x, y };
		}
		get element() { return this._element; }
		/**
		@@ -206,22 +210,18 @@ * Callback on every mouseMove event during a drag. Determines if the drag is
		}
		else {
		let width = dimensions.dragProxyWidth;
		let height = dimensions.dragProxyHeight;
		if (width === undefined \|\| height === undefined) {
		throw new Error('DragProxy.setDimensions: width and/or height undefined');
		}
		else {
		const headerHeight = this._layoutManager.layoutConfig.header.show === false ? 0 : dimensions.headerHeight;
		this._element.style.width = numberToPixels(width);
		this._element.style.height = numberToPixels(height);
		width -= (this._sided ? headerHeight : 0);
		height -= (!this._sided ? headerHeight : 0);
		this._proxyContainerElement.style.width = numberToPixels(width);
		this._proxyContainerElement.style.height = numberToPixels(height);
		this._componentItem.show();
		this._componentItem.setDragSize(width, height);
		}
		let width = dimensions.dragProxyWidth;
		let height = dimensions.dragProxyHeight;
		if (width === undefined \|\| height === undefined) {
		throw new Error('DragProxy.setDimensions: width and/or height undefined');
		}
		const headerHeight = this._layoutManager.layoutConfig.header.show === false ? 0 : dimensions.headerHeight;
		this._element.style.width = numberToPixels(width);
		this._element.style.height = numberToPixels(height);
		width -= (this._sided ? headerHeight : 0);
		height -= (!this._sided ? headerHeight : 0);
		this._proxyContainerElement.style.width = numberToPixels(width);
		this._proxyContainerElement.style.height = numberToPixels(height);
		this._componentItem.setDragSize(width, height);
		this._componentItem.show();
		}
		}
		//# sourceMappingURL=drag-proxy.js.map

8

dist/esm/ts/controls/header.js

		@@ -1,2 +0,2 @@
		import { UnexpectedNullError, UnexpectedUndefinedError } from '../errors/internal-error';
		import { UnexpectedUndefinedError } from '../errors/internal-error';
		import { EventEmitter } from '../utils/event-emitter';
		@@ -357,8 +357,6 @@ import { Side } from '../utils/types';
		const activeComponentItem = this._getActiveComponentItemEvent();
		if (activeComponentItem === null) {
		throw new UnexpectedNullError('HOPC70222');
		}
		else {
		if (activeComponentItem) {
		activeComponentItem.popout();
		}
		// else: if the stack is empty there won't be an active item (and nothing to popout)
		}
		@@ -365,0 +363,0 @@ }

3

dist/esm/ts/controls/tabs-container.js

		@@ -121,2 +121,5 @@ import { AssertError } from '../errors/internal-error';
		if (this._tabs.length > 0) {
		if (activeComponentItem === undefined) {
		throw new Error('non-empty tabs must have active component item');
		}
		let cumulativeTabWidth = 0;
		@@ -123,0 +126,0 @@ let tabOverlapAllowanceExceeded = false;

9

dist/esm/ts/items/component-item.js

		@@ -80,8 +80,5 @@ import { ResolvedComponentItemConfig, ResolvedHeaderedItemConfig } from '../config/resolved-config';
		setDragSize(width, height) {
		if (this.element.style.display !== 'none') {
		// Do not update size of hidden components to prevent unwanted reflows
		setElementWidth(this.element, width);
		setElementHeight(this.element, height);
		this._container.setDragSize(width, height);
		}
		setElementWidth(this.element, width);
		setElementHeight(this.element, height);
		this._container.setDragSize(width, height);
		}
		@@ -88,0 +85,0 @@ /** @internal */

4

dist/esm/ts/items/content-item.js

		@@ -62,2 +62,4 @@ import { AssertError, UnexpectedNullError } from '../errors/internal-error';
		* Removes a child node (and its children) from the tree
		* @param contentItem - The child item to remove
		* @param keepChild - Whether to destroy the removed item
		*/
		@@ -76,3 +78,3 @@ removeChild(contentItem, keepChild = false) {
		/**
		* Call ._$destroy on the content item.
		* Call destroy on the content item.
		* All children are destroyed as well
		@@ -79,0 +81,0 @@ */

26

dist/esm/ts/items/stack.js

		@@ -181,8 +181,4 @@ import { ItemConfig } from '../config/config';
		getActiveContentItem() {
		let result;
		result = this.getActiveComponentItem();
		if (result === undefined) {
		result = null;
		}
		return result;
		var _a;
		return (_a = this.getActiveComponentItem()) !== null && _a !== void 0 ? _a : null;
		}
		@@ -194,3 +190,4 @@ getActiveComponentItem() {
		focusActiveContentItem() {
		this._activeComponentItem.focus();
		var _a;
		(_a = this._activeComponentItem) === null \|\| _a === void 0 ? void 0 : _a.focus();
		}
		@@ -331,3 +328,4 @@ /** @internal */
		destroy() {
		if (this._activeComponentItem.focused) {
		var _a;
		if ((_a = this._activeComponentItem) === null \|\| _a === void 0 ? void 0 : _a.focused) {
		this._activeComponentItem.blur();
		@@ -346,6 +344,12 @@ }
		toConfig() {
		const activeItemIndex = this.contentItems.indexOf(this._activeComponentItem);
		if (activeItemIndex < 0) {
		throw new AssertError('STC69221');
		let activeItemIndex;
		if (this._activeComponentItem) {
		activeItemIndex = this.contentItems.indexOf(this._activeComponentItem);
		if (activeItemIndex < 0) {
		throw new Error('active component item not found in stack');
		}
		}
		if (this.contentItems.length > 0 && activeItemIndex === undefined) {
		throw new Error('expected non-empty stack to have an active component item');
		}
		else {
		@@ -352,0 +356,0 @@ const result = {

2

dist/esm/ts/utils/event-emitter.js

		@@ -66,3 +66,3 @@ /**
		/**
		* Removes a listener for an event, or all listeners if no callback and context is provided.
		* Removes a listener for an event.
		* @param eventName - The name of the event
		@@ -69,0 +69,0 @@ * @param callback - The previously registered callback method (optional)

9

package.json

		{
		"name": "golden-layout",
		"version": "2.2.0",
		"version": "2.2.1",
		"description": "A multi-screen javascript Layout manager",
		@@ -23,3 +23,4 @@ "keywords": [
		"files": [
		"dist/*/"
		"dist/*/",
		"src/*/"
		],
		@@ -41,5 +42,7 @@ "sideEffects": false,
		"clean:lib": "npx del-cli lib",
		"clean:test": "npx del-cli test/dist",
		"lint:autofix": "eslint src/ts --fix",
		"lint:ts": "eslint -c .eslintrc.js --ext .ts src/ts test",
		"test": "cross-env karma start",
		"test:watch": "karma start",
		"test": "karma start --single-run --browsers ChromeHeadless",
		"coverage": "karma start --single-run --no-auto-watch --coverage=true \|\| echo done",
		@@ -46,0 +49,0 @@ "doc": "npm run build && npx copyfiles -f temp/golden-layout.api.json doc/input && cd doc && npx api-documenter markdown",

dist/cjs/ts/config/resolved-config.js.map