dock-spawn-ts - npm Package Compare versions

Comparing version 2.210.0 to 2.220.0

lib/js/DockWheel.js

@@ -62,4 +62,6 @@ import { Utils } from "./Utils.js";
         let baseY = Math.floor(containerHeight / 2); // + element.offsetTop;
-        this.elementMainWheel.style.left = baseX + 'px';
-        this.elementMainWheel.style.top = baseY + 'px';
+        let bcElement = element.getBoundingClientRect();
+        let bcdockManagerElement = this.dockManager.element.getBoundingClientRect();
+        this.elementMainWheel.style.left = (bcElement.left - bcdockManagerElement.left + baseX) + 'px';
+        this.elementMainWheel.style.top = (bcElement.top - bcdockManagerElement.top + baseY) + 'px';
         // The positioning of the main dock wheel buttons is done automatically through CSS
@@ -72,3 +74,3 @@ // Dynamically calculate the positions of the buttons on the extreme sides of the dock manager
         Utils.removeNode(this.elementSideWheel);
-        element.appendChild(this.elementMainWheel);
+        this.dockManager.element.appendChild(this.elementMainWheel);
         this.dockManager.element.appendChild(this.elementSideWheel);
@@ -75,0 +77,0 @@ this._setWheelButtonPosition(WheelTypes["left-s"], sideMargin, -dockManagerHeight / 2);

lib/js/interfaces/IDockContainer.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IDockContainer.js.map

lib/js/interfaces/IDockContainerWithSize.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IDockContainerWithSize.js.map

lib/js/interfaces/ILayoutEventListener.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=ILayoutEventListener.js.map

lib/js/interfaces/IMouseOrTouchEvent.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IMouseOrTouchEvent.js.map

lib/js/interfaces/INodeInfo.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=INodeInfo.js.map

lib/js/interfaces/IPanelInfo.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IPanelInfo.js.map

lib/js/interfaces/IRectangle.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IRectangle.js.map

lib/js/interfaces/ISize.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=ISize.js.map

lib/js/interfaces/IState.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IState.js.map

lib/js/interfaces/IThickness.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=IThickness.js.map

lib/js/TabHandle.js

@@ -9,261 +9,257 @@ import { PanelContainer } from "./PanelContainer.js";
  */
-let TabHandle = /** @class */ (() => {
-    class TabHandle {
-        constructor(parent) {
-            this.parent = parent;
-            let undockHandler = this._performUndock.bind(this);
-            this.elementBase = document.createElement('div');
-            this.elementText = document.createElement('div');
-            this.elementCloseButton = document.createElement('div');
-            this.elementBase.classList.add('dockspan-tab-handle');
-            this.elementBase.classList.add('disable-selection'); // Disable text selection
-            this.elementText.classList.add('dockspan-tab-handle-text');
-            this.elementCloseButton.classList.add('dockspan-tab-handle-close-button');
-            this.elementBase.appendChild(this.elementText);
-            if (this.parent.host.displayCloseButton)
-                this.elementBase.appendChild(this.elementCloseButton);
-            if (this.parent.container._hideCloseButton)
-                this.elementCloseButton.style.display = 'none';
-            this.parent.host.tabListElement.appendChild(this.elementBase);
-            let panel = parent.container;
-            let title = panel.getRawTitle();
-            this.undockListener = {
-                onDockEnabled: (e) => { this.undockEnabled(e.state); },
-                onHideCloseButton: (e) => { this.hideCloseButton(e.state); }
-            };
-            this.eventListeners = [];
-            panel.addListener(this.undockListener);
-            this.elementText.innerHTML = title;
-            this.elementText.title = this.elementText.innerText;
-            this._bringToFront(this.elementBase);
-            this.undockInitiator = new UndockInitiator(this.elementBase, undockHandler);
-            this.undockInitiator.enabled = true;
-            this.mouseDownHandler = new EventHandler(this.elementBase, 'mousedown', this.onMouseDown.bind(this));
-            this.touchDownHandler = new EventHandler(this.elementBase, 'touchstart', this.onMouseDown.bind(this), { passive: false });
-            this.closeButtonHandler = new EventHandler(this.elementCloseButton, 'click', this.onCloseButtonClicked.bind(this));
-            this.closeButtonTouchHandler = new EventHandler(this.elementCloseButton, 'touchstart', this.onCloseButtonClicked.bind(this));
-            this.auxClickHandler = new EventHandler(this.elementBase, 'auxclick', this.onCloseButtonClicked.bind(this));
-            this.contextMenuHandler = new EventHandler(this.elementBase, 'contextmenu', this.oncontextMenuClicked.bind(this));
-            this.zIndexCounter = parent.host.dockManager.zIndexTabHandle;
+export class TabHandle {
+    constructor(parent) {
+        this.parent = parent;
+        let undockHandler = this._performUndock.bind(this);
+        this.elementBase = document.createElement('div');
+        this.elementText = document.createElement('div');
+        this.elementCloseButton = document.createElement('div');
+        this.elementBase.classList.add('dockspan-tab-handle');
+        this.elementBase.classList.add('disable-selection'); // Disable text selection
+        this.elementText.classList.add('dockspan-tab-handle-text');
+        this.elementCloseButton.classList.add('dockspan-tab-handle-close-button');
+        this.elementBase.appendChild(this.elementText);
+        if (this.parent.host.displayCloseButton)
+            this.elementBase.appendChild(this.elementCloseButton);
+        if (this.parent.container._hideCloseButton)
+            this.elementCloseButton.style.display = 'none';
+        this.parent.host.tabListElement.appendChild(this.elementBase);
+        let panel = parent.container;
+        let title = panel.getRawTitle();
+        this.undockListener = {
+            onDockEnabled: (e) => { this.undockEnabled(e.state); },
+            onHideCloseButton: (e) => { this.hideCloseButton(e.state); }
+        };
+        this.eventListeners = [];
+        panel.addListener(this.undockListener);
+        this.elementText.innerHTML = title;
+        this.elementText.title = this.elementText.innerText;
+        this._bringToFront(this.elementBase);
+        this.undockInitiator = new UndockInitiator(this.elementBase, undockHandler);
+        this.undockInitiator.enabled = true;
+        this.mouseDownHandler = new EventHandler(this.elementBase, 'mousedown', this.onMouseDown.bind(this));
+        this.touchDownHandler = new EventHandler(this.elementBase, 'touchstart', this.onMouseDown.bind(this), { passive: false });
+        this.closeButtonHandler = new EventHandler(this.elementCloseButton, 'click', this.onCloseButtonClicked.bind(this));
+        this.closeButtonTouchHandler = new EventHandler(this.elementCloseButton, 'touchstart', this.onCloseButtonClicked.bind(this));
+        this.auxClickHandler = new EventHandler(this.elementBase, 'auxclick', this.onCloseButtonClicked.bind(this));
+        this.contextMenuHandler = new EventHandler(this.elementBase, 'contextmenu', this.oncontextMenuClicked.bind(this));
+        this.zIndexCounter = parent.host.dockManager.zIndexTabHandle;
+    }
+    addListener(listener) {
+        this.eventListeners.push(listener);
+    }
+    removeListener(listener) {
+        this.eventListeners.splice(this.eventListeners.indexOf(listener), 1);
+    }
+    undockEnabled(state) {
+        this.undockInitiator.enabled = state;
+    }
+    oncontextMenuClicked(e) {
+        e.preventDefault();
+        if (!this._ctxMenu && TabHandle.createContextMenuContentCallback) {
+            this._ctxMenu = document.createElement('div');
+            this._ctxMenu.className = 'dockspab-tab-handle-context-menu';
+            TabHandle.createContextMenuContentCallback(this, this._ctxMenu, this.parent.container.dockManager.context.model.documentManagerNode.children);
+            this._ctxMenu.style.left = e.pageX + "px";
+            this._ctxMenu.style.top = e.pageY + "px";
+            document.body.appendChild(this._ctxMenu);
+            this._windowsContextMenuCloseBound = this.windowsContextMenuClose.bind(this);
+            window.addEventListener('mouseup', this._windowsContextMenuCloseBound);
         }
-        addListener(listener) {
-            this.eventListeners.push(listener);
+        else {
+            this.closeContextMenu();
         }
-        removeListener(listener) {
-            this.eventListeners.splice(this.eventListeners.indexOf(listener), 1);
+    }
+    closeContextMenu() {
+        if (this._ctxMenu) {
+            document.body.removeChild(this._ctxMenu);
+            delete this._ctxMenu;
+            window.removeEventListener('mouseup', this._windowsContextMenuCloseBound);
         }
-        undockEnabled(state) {
-            this.undockInitiator.enabled = state;
+    }
+    windowsContextMenuClose(e) {
+        let cp = e.composedPath();
+        for (let i in cp) {
+            let el = cp[i];
+            if (el == this._ctxMenu)
+                return;
         }
-        oncontextMenuClicked(e) {
-            e.preventDefault();
-            if (!this._ctxMenu && TabHandle.createContextMenuContentCallback) {
-                this._ctxMenu = document.createElement('div');
-                this._ctxMenu.className = 'dockspab-tab-handle-context-menu';
-                TabHandle.createContextMenuContentCallback(this, this._ctxMenu, this.parent.container.dockManager.context.model.documentManagerNode.children);
-                this._ctxMenu.style.left = e.pageX + "px";
-                this._ctxMenu.style.top = e.pageY + "px";
-                document.body.appendChild(this._ctxMenu);
-                this._windowsContextMenuCloseBound = this.windowsContextMenuClose.bind(this);
-                window.addEventListener('mouseup', this._windowsContextMenuCloseBound);
-            }
-            else {
-                this.closeContextMenu();
-            }
+        this.closeContextMenu();
+    }
+    onMouseDown(e) {
+        e.preventDefault();
+        this.parent.onSelected();
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
         }
-        closeContextMenu() {
-            if (this._ctxMenu) {
-                document.body.removeChild(this._ctxMenu);
-                delete this._ctxMenu;
-                window.removeEventListener('mouseup', this._windowsContextMenuCloseBound);
-            }
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
+            delete this.touchMoveHandler;
         }
-        windowsContextMenuClose(e) {
-            let cp = e.composedPath();
-            for (let i in cp) {
-                let el = cp[i];
-                if (el == this._ctxMenu)
-                    return;
-            }
-            this.closeContextMenu();
+        if (this.mouseUpHandler) {
+            this.mouseUpHandler.cancel();
+            delete this.mouseUpHandler;
         }
-        onMouseDown(e) {
-            e.preventDefault();
-            this.parent.onSelected();
-            if (this.mouseMoveHandler) {
-                this.mouseMoveHandler.cancel();
-                delete this.mouseMoveHandler;
-            }
-            if (this.touchMoveHandler) {
-                this.touchMoveHandler.cancel();
-                delete this.touchMoveHandler;
-            }
-            if (this.mouseUpHandler) {
-                this.mouseUpHandler.cancel();
-                delete this.mouseUpHandler;
-            }
-            if (this.touchUpHandler) {
-                this.touchUpHandler.cancel();
-                delete this.touchUpHandler;
-            }
-            this.stargDragPosition = e.clientX;
-            this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
-            this.touchMoveHandler = new EventHandler(window, 'touchmove', this.onMouseMove.bind(this), { passive: false });
-            this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
-            this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
-        }
-        onMouseUp(e) {
-            if (this.elementBase) {
-                this.elementBase.classList.remove('dockspan-tab-handle-dragged');
-            }
-            this.dragged = false;
-            if (this.mouseMoveHandler)
-                this.mouseMoveHandler.cancel();
-            if (this.touchMoveHandler)
-                this.touchMoveHandler.cancel();
-            if (this.mouseUpHandler)
-                this.mouseUpHandler.cancel();
-            if (this.touchUpHandler)
-                this.touchUpHandler.cancel();
-            delete this.mouseMoveHandler;
-            delete this.touchMoveHandler;
-            delete this.mouseUpHandler;
+        if (this.touchUpHandler) {
+            this.touchUpHandler.cancel();
             delete this.touchUpHandler;
         }
-        moveTabEvent(that, state) {
-            that.eventListeners.forEach((listener) => {
-                if (listener.onMoveTab) {
-                    listener.onMoveTab({ self: that, state: state });
-                }
-            });
+        this.stargDragPosition = e.clientX;
+        this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
+        this.touchMoveHandler = new EventHandler(window, 'touchmove', this.onMouseMove.bind(this), { passive: false });
+        this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
+        this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
+    }
+    onMouseUp(e) {
+        if (this.elementBase) {
+            this.elementBase.classList.remove('dockspan-tab-handle-dragged');
         }
-        onMouseMove(e) {
-            e.preventDefault();
-            if (Math.abs(this.stargDragPosition - e.clientX) < 10)
-                return;
-            if (this.elementBase != null) { //Todo: because of this is null, we need to drag 2 times, needs fix
-                this.elementBase.classList.add('dockspan-tab-handle-dragged');
-                this.dragged = true;
-                this.prev = this.current;
-                this.current = e.clientX;
-                this.direction = this.current - this.prev;
-                let tabRect = this.elementBase.getBoundingClientRect();
-                let event = this.direction < 0
-                    ? { state: 'left', bound: tabRect.left, rect: tabRect }
-                    : { state: 'right', bound: tabRect.right, rect: tabRect };
-                if ((e.clientX < tabRect.left && this.direction < 0) || (e.clientX > tabRect.left + tabRect.width && this.direction > 0))
-                    this.moveTabEvent(this, event.state);
+        this.dragged = false;
+        if (this.mouseMoveHandler)
+            this.mouseMoveHandler.cancel();
+        if (this.touchMoveHandler)
+            this.touchMoveHandler.cancel();
+        if (this.mouseUpHandler)
+            this.mouseUpHandler.cancel();
+        if (this.touchUpHandler)
+            this.touchUpHandler.cancel();
+        delete this.mouseMoveHandler;
+        delete this.touchMoveHandler;
+        delete this.mouseUpHandler;
+        delete this.touchUpHandler;
+    }
+    moveTabEvent(that, state) {
+        that.eventListeners.forEach((listener) => {
+            if (listener.onMoveTab) {
+                listener.onMoveTab({ self: that, state: state });
             }
+        });
+    }
+    onMouseMove(e) {
+        e.preventDefault();
+        if (Math.abs(this.stargDragPosition - e.clientX) < 10)
+            return;
+        if (this.elementBase != null) { //Todo: because of this is null, we need to drag 2 times, needs fix
+            this.elementBase.classList.add('dockspan-tab-handle-dragged');
+            this.dragged = true;
+            this.prev = this.current;
+            this.current = e.clientX;
+            this.direction = this.current - this.prev;
+            let tabRect = this.elementBase.getBoundingClientRect();
+            let event = this.direction < 0
+                ? { state: 'left', bound: tabRect.left, rect: tabRect }
+                : { state: 'right', bound: tabRect.right, rect: tabRect };
+            if ((e.clientX < tabRect.left && this.direction < 0) || (e.clientX > tabRect.left + tabRect.width && this.direction > 0))
+                this.moveTabEvent(this, event.state);
         }
-        hideCloseButton(state) {
-            this.elementCloseButton.style.display = state ? 'none' : 'block';
+    }
+    hideCloseButton(state) {
+        this.elementCloseButton.style.display = state ? 'none' : 'block';
+    }
+    updateTitle() {
+        if (this.parent.container instanceof PanelContainer) {
+            let panel = this.parent.container;
+            let title = panel.getRawTitle();
+            this.elementText.innerHTML = title;
         }
-        updateTitle() {
-            if (this.parent.container instanceof PanelContainer) {
-                let panel = this.parent.container;
-                let title = panel.getRawTitle();
-                this.elementText.innerHTML = title;
-            }
+    }
+    destroy() {
+        let panel = this.parent.container;
+        panel.removeListener(this.undockListener);
+        this.mouseDownHandler.cancel();
+        this.touchDownHandler.cancel();
+        this.closeButtonHandler.cancel();
+        this.closeButtonTouchHandler.cancel();
+        this.auxClickHandler.cancel();
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
         }
-        destroy() {
-            let panel = this.parent.container;
-            panel.removeListener(this.undockListener);
-            this.mouseDownHandler.cancel();
-            this.touchDownHandler.cancel();
-            this.closeButtonHandler.cancel();
-            this.closeButtonTouchHandler.cancel();
-            this.auxClickHandler.cancel();
-            if (this.mouseMoveHandler) {
-                this.mouseMoveHandler.cancel();
-            }
-            if (this.touchMoveHandler) {
-                this.touchMoveHandler.cancel();
-            }
-            if (this.mouseUpHandler) {
-                this.mouseUpHandler.cancel();
-            }
-            if (this.touchUpHandler) {
-                this.touchUpHandler.cancel();
-            }
-            if (this.contextMenuHandler) {
-                this.contextMenuHandler.cancel();
-            }
-            Utils.removeNode(this.elementBase);
-            Utils.removeNode(this.elementCloseButton);
-            delete this.elementBase;
-            delete this.elementCloseButton;
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
         }
-        _performUndock(e, dragOffset) {
-            if (this.parent.container.containerType === 'panel') {
-                this.undockInitiator.enabled = false;
-                let panel = this.parent.container;
-                return panel.performUndockToDialog(e, dragOffset);
-            }
-            else
-                return null;
+        if (this.mouseUpHandler) {
+            this.mouseUpHandler.cancel();
         }
-        onCloseButtonClicked(e) {
-            if (this.elementCloseButton.style.display !== 'none') {
-                if (e.button !== 2) {
-                    // If the page contains a panel element, undock it and destroy it
-                    if (this.parent.container.containerType === 'panel') {
-                        let panel = this.parent.container;
-                        panel.close();
-                    }
-                }
-            }
+        if (this.touchUpHandler) {
+            this.touchUpHandler.cancel();
         }
-        setSelected(isSelected) {
-            if (isSelected)
-                this.elementBase.classList.add('dockspan-tab-handle-selected');
-            else {
-                this.elementBase.classList.remove('dockspan-tab-handle-selected');
-                this.elementBase.classList.remove('dockspan-tab-handle-active');
-            }
+        if (this.contextMenuHandler) {
+            this.contextMenuHandler.cancel();
         }
-        setActive(isActive) {
-            if (this.elementBase) {
-                if (isActive)
-                    this.elementBase.classList.add('dockspan-tab-handle-active');
-                else
-                    this.elementBase.classList.remove('dockspan-tab-handle-active');
+        Utils.removeNode(this.elementBase);
+        Utils.removeNode(this.elementCloseButton);
+        delete this.elementBase;
+        delete this.elementCloseButton;
+    }
+    _performUndock(e, dragOffset) {
+        if (this.parent.container.containerType === 'panel') {
+            this.undockInitiator.enabled = false;
+            let panel = this.parent.container;
+            return panel.performUndockToDialog(e, dragOffset);
+        }
+        else
+            return null;
+    }
+    onCloseButtonClicked(e) {
+        if (this.elementCloseButton.style.display !== 'none') {
+            if (e.button !== 2) {
+                // If the page contains a panel element, undock it and destroy it
+                if (this.parent.container.containerType === 'panel') {
+                    let panel = this.parent.container;
+                    panel.close();
+                }
             }
         }
-        setZIndex(zIndex) {
-            this.elementBase.style.zIndex = zIndex;
+    }
+    setSelected(isSelected) {
+        if (isSelected)
+            this.elementBase.classList.add('dockspan-tab-handle-selected');
+        else {
+            this.elementBase.classList.remove('dockspan-tab-handle-selected');
+            this.elementBase.classList.remove('dockspan-tab-handle-active');
         }
-        _bringToFront(element) {
-            element.style.zIndex = this.zIndexCounter;
-            this.zIndexCounter++;
+    }
+    setActive(isActive) {
+        if (this.elementBase) {
+            if (isActive)
+                this.elementBase.classList.add('dockspan-tab-handle-active');
+            else
+                this.elementBase.classList.remove('dockspan-tab-handle-active');
         }
     }
-    TabHandle.createContextMenuContentCallback = (tabHandle, contextMenuContainer, documentMangerNodes) => {
-        let btnCloseAll = document.createElement('div');
-        btnCloseAll.innerText = 'Close all documents';
-        contextMenuContainer.append(btnCloseAll);
-        let btnCloseAllButThis = document.createElement('div');
-        btnCloseAllButThis.innerText = 'Close all documents but this';
-        contextMenuContainer.append(btnCloseAllButThis);
-        btnCloseAll.onclick = () => {
-            let length = documentMangerNodes.length;
-            for (let i = length - 1; i >= 0; i--) {
-                let panel = documentMangerNodes[i].container;
-                if (panel.panelType == PanelType.document)
-                    panel.close();
-            }
-            tabHandle.closeContextMenu();
-        };
-        btnCloseAllButThis.onclick = () => {
-            let length = documentMangerNodes.length;
-            for (let i = length - 1; i >= 0; i--) {
-                let panel = documentMangerNodes[i].container;
-                if (tabHandle.parent.container != panel && panel.panelType == PanelType.document)
-                    panel.close();
-            }
-            tabHandle.closeContextMenu();
-        };
+    setZIndex(zIndex) {
+        this.elementBase.style.zIndex = zIndex;
+    }
+    _bringToFront(element) {
+        element.style.zIndex = this.zIndexCounter;
+        this.zIndexCounter++;
+    }
+}
+TabHandle.createContextMenuContentCallback = (tabHandle, contextMenuContainer, documentMangerNodes) => {
+    let btnCloseAll = document.createElement('div');
+    btnCloseAll.innerText = 'Close all documents';
+    contextMenuContainer.append(btnCloseAll);
+    let btnCloseAllButThis = document.createElement('div');
+    btnCloseAllButThis.innerText = 'Close all documents but this';
+    contextMenuContainer.append(btnCloseAllButThis);
+    btnCloseAll.onclick = () => {
+        let length = documentMangerNodes.length;
+        for (let i = length - 1; i >= 0; i--) {
+            let panel = documentMangerNodes[i].container;
+            if (panel.panelType == PanelType.document)
+                panel.close();
+        }
+        tabHandle.closeContextMenu();
     };
-    return TabHandle;
-})();
-export { TabHandle };
+    btnCloseAllButThis.onclick = () => {
+        let length = documentMangerNodes.length;
+        for (let i = length - 1; i >= 0; i--) {
+            let panel = documentMangerNodes[i].container;
+            if (tabHandle.parent.container != panel && panel.panelType == PanelType.document)
+                panel.close();
+        }
+        tabHandle.closeContextMenu();
+    };
+};
 //# sourceMappingURL=TabHandle.js.map

lib/js/Utils.js

@@ -1,74 +0,70 @@
-let Utils = /** @class */ (() => {
-    class Utils {
-        static getPixels(pixels) {
-            if (pixels === null) {
-                return 0;
-            }
-            return parseInt(pixels.replace('px', ''));
+export class Utils {
+    static getPixels(pixels) {
+        if (pixels === null) {
+            return 0;
         }
-        static disableGlobalTextSelection(element) {
-            element.classList.add('disable-selection');
+        return parseInt(pixels.replace('px', ''));
+    }
+    static disableGlobalTextSelection(element) {
+        element.classList.add('disable-selection');
+    }
+    static enableGlobalTextSelection(element) {
+        element.classList.remove('disable-selection');
+    }
+    static isPointInsideNode(px, py, node) {
+        let element = node.container.containerElement;
+        let rect = element.getBoundingClientRect();
+        return (px >= rect.left &&
+            px <= rect.left + rect.width &&
+            py >= rect.top &&
+            py <= rect.top + rect.height);
+    }
+    static getNextId(prefix) {
+        return prefix + Utils._counter++;
+    }
+    static removeNode(node) {
+        if (node.parentNode === null) {
+            return false;
         }
-        static enableGlobalTextSelection(element) {
-            element.classList.remove('disable-selection');
+        node.parentNode.removeChild(node);
+        return true;
+    }
+    static orderByIndexes(array, indexes) {
+        let sortedArray = [];
+        for (let i = 0; i < indexes.length; i++) {
+            sortedArray.push(array[indexes[i]]);
         }
-        static isPointInsideNode(px, py, node) {
-            let element = node.container.containerElement;
-            let rect = element.getBoundingClientRect();
-            return (px >= rect.left &&
-                px <= rect.left + rect.width &&
-                py >= rect.top &&
-                py <= rect.top + rect.height);
+        return sortedArray;
+    }
+    static arrayRemove(array, value) {
+        let idx = array.indexOf(value);
+        if (idx !== -1) {
+            return array.splice(idx, 1);
         }
-        static getNextId(prefix) {
-            return prefix + Utils._counter++;
+        return false;
+    }
+    static arrayContains(array, value) {
+        let i = array.length;
+        while (i--) {
+            if (array[i] === value) {
+                return true;
+            }
         }
-        static removeNode(node) {
-            if (node.parentNode === null) {
-                return false;
-            }
-            node.parentNode.removeChild(node);
+        return false;
+    }
+    static arrayEqual(a, b) {
+        if (a === b)
             return true;
-        }
-        static orderByIndexes(array, indexes) {
-            let sortedArray = [];
-            for (let i = 0; i < indexes.length; i++) {
-                sortedArray.push(array[indexes[i]]);
-            }
-            return sortedArray;
-        }
-        static arrayRemove(array, value) {
-            let idx = array.indexOf(value);
-            if (idx !== -1) {
-                return array.splice(idx, 1);
-            }
+        if (a == null || b == null)
             return false;
-        }
-        static arrayContains(array, value) {
-            let i = array.length;
-            while (i--) {
-                if (array[i] === value) {
-                    return true;
-                }
-            }
+        if (a.length != b.length)
             return false;
-        }
-        static arrayEqual(a, b) {
-            if (a === b)
-                return true;
-            if (a == null || b == null)
+        for (let i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i])
                 return false;
-            if (a.length != b.length)
-                return false;
-            for (let i = 0; i < a.length; ++i) {
-                if (a[i] !== b[i])
-                    return false;
-            }
-            return true;
         }
+        return true;
     }
-    Utils._counter = 0;
-    return Utils;
-})();
-export { Utils };
+}
+Utils._counter = 0;
 //# sourceMappingURL=Utils.js.map

lib/js/webcomponent/DockSpawnTsWebcomponent.js

 import { DockManager } from "../DockManager.js";
 import { PanelContainer } from "../PanelContainer.js";
 import { PanelType } from "../enums/PanelType.js";
-let DockSpawnTsWebcomponent = /** @class */ (() => {
-    class DockSpawnTsWebcomponent extends HTMLElement {
-        constructor() {
-            super();
-            this.slotId = 0;
-            this.initialized = false;
-            this.elementContainerMap = new Map();
-            this.windowResizedBound = this.windowResized.bind(this);
-            this.slotElementMap = new WeakMap();
-        }
-        initDockspawn() {
-            const shadowRoot = this.attachShadow({ mode: 'open' });
-            const linkElement1 = document.createElement("link");
-            linkElement1.rel = "stylesheet";
-            linkElement1.href = DockSpawnTsWebcomponent.cssRootDirectory + "dock-manager.css";
-            linkElement1.onload = this.cssLoaded.bind(this);
-            const linkElement2 = document.createElement("link");
-            linkElement2.rel = "stylesheet";
-            linkElement2.href = DockSpawnTsWebcomponent.cssRootDirectory + "dock-manager-style.css";
-            shadowRoot.appendChild(linkElement1);
-            shadowRoot.appendChild(linkElement2);
-            const dockSpawnDiv = document.createElement('div');
-            dockSpawnDiv.id = "dockSpawnDiv";
-            dockSpawnDiv.style.width = "100%";
-            dockSpawnDiv.style.height = "100%";
-            dockSpawnDiv.style.position = "relative";
-            shadowRoot.appendChild(dockSpawnDiv);
-            this.dockManager = new DockManager(dockSpawnDiv);
-            this.dockManager.config.dialogRootElement = dockSpawnDiv;
-        }
-        getElementInSlot(slot) {
-            return this.slotElementMap.get(slot);
-        }
-        cssLoaded() {
-            setTimeout(() => {
-                this.dockManager.initialize();
-                this.dockManager.addLayoutListener({
-                    onClosePanel: (dockManager, dockNode) => {
-                        let slot = dockNode.elementContent;
-                        let element = this.slotElementMap.get(slot);
-                        this.removeChild(element);
-                    }
-                });
-                this.dockManager.resize(this.clientWidth, this.clientHeight);
-                for (let element of this.children) {
-                    this.handleAddedChildNode(element);
+export class DockSpawnTsWebcomponent extends HTMLElement {
+    constructor() {
+        super();
+        this.slotId = 0;
+        this.initialized = false;
+        this.elementContainerMap = new Map();
+        this.windowResizedBound = this.windowResized.bind(this);
+        this.slotElementMap = new WeakMap();
+    }
+    initDockspawn() {
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const linkElement1 = document.createElement("link");
+        linkElement1.rel = "stylesheet";
+        linkElement1.href = DockSpawnTsWebcomponent.cssRootDirectory + "dock-manager.css";
+        linkElement1.onload = this.cssLoaded.bind(this);
+        const linkElement2 = document.createElement("link");
+        linkElement2.rel = "stylesheet";
+        linkElement2.href = DockSpawnTsWebcomponent.cssRootDirectory + "dock-manager-style.css";
+        shadowRoot.appendChild(linkElement1);
+        shadowRoot.appendChild(linkElement2);
+        const dockSpawnDiv = document.createElement('div');
+        dockSpawnDiv.id = "dockSpawnDiv";
+        dockSpawnDiv.style.width = "100%";
+        dockSpawnDiv.style.height = "100%";
+        dockSpawnDiv.style.position = "relative";
+        shadowRoot.appendChild(dockSpawnDiv);
+        this.dockManager = new DockManager(dockSpawnDiv);
+        this.dockManager.config.dialogRootElement = dockSpawnDiv;
+    }
+    getElementInSlot(slot) {
+        return this.slotElementMap.get(slot);
+    }
+    cssLoaded() {
+        setTimeout(() => {
+            this.dockManager.initialize();
+            this.dockManager.addLayoutListener({
+                onClosePanel: (dockManager, dockNode) => {
+                    let slot = dockNode.elementContent;
+                    let element = this.slotElementMap.get(slot);
+                    this.removeChild(element);
                 }
-                this.observer = new MutationObserver((mutations) => {
-                    mutations.forEach((mutation) => {
-                        mutation.addedNodes.forEach((node) => {
-                            this.handleAddedChildNode(node);
-                        });
-                        mutation.removedNodes.forEach((node) => {
-                            this.handleRemovedChildNode(node);
-                        });
+            });
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
+            for (let element of this.children) {
+                this.handleAddedChildNode(element);
+            }
+            this.observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        this.handleAddedChildNode(node);
                     });
+                    mutation.removedNodes.forEach((node) => {
+                        this.handleRemovedChildNode(node);
+                    });
                 });
-                this.observer.observe(this, { childList: true });
-            }, 50);
+            });
+            this.observer.observe(this, { childList: true });
+        }, 50);
+    }
+    handleAddedChildNode(element) {
+        let slot = document.createElement('slot');
+        let slotName = 'slot_' + this.slotId++;
+        slot.name = slotName;
+        let dockPanelType = PanelType.panel;
+        let dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
+        if (dockPanelTypeAttribute)
+            dockPanelType = dockPanelTypeAttribute;
+        let container = new PanelContainer(slot, this.dockManager, element.title, dockPanelType);
+        element.slot = slotName;
+        this.slotElementMap.set(slot, element);
+        this.elementContainerMap.set(element, container);
+        let dockRatio = 0.5;
+        let dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
+        if (dockRatioAttribute)
+            dockRatio = dockRatioAttribute;
+        let dockType = element.getAttribute('dock-spawn-dock-type');
+        let dockRelativeTo = this.dockManager.context.model.documentManagerNode;
+        let dockToAttribute = element.getAttribute('dock-spawn-dock-to');
+        if (dockToAttribute) {
+            //@ts-ignore
+            let dockToElement = this.getRootNode().getElementById(dockToAttribute);
+            dockRelativeTo = this.dockManager.findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement);
         }
-        handleAddedChildNode(element) {
-            let slot = document.createElement('slot');
-            let slotName = 'slot_' + this.slotId++;
-            slot.name = slotName;
-            let dockPanelType = PanelType.panel;
-            let dockPanelTypeAttribute = element.getAttribute('dock-spawn-panel-type');
-            if (dockPanelTypeAttribute)
-                dockPanelType = dockPanelTypeAttribute;
-            let container = new PanelContainer(slot, this.dockManager, element.title, dockPanelType);
-            element.slot = slotName;
-            this.slotElementMap.set(slot, element);
-            this.elementContainerMap.set(element, container);
-            let dockRatio = 0.5;
-            let dockRatioAttribute = element.getAttribute('dock-spawn-dock-ratio');
-            if (dockRatioAttribute)
-                dockRatio = dockRatioAttribute;
-            let dockType = element.getAttribute('dock-spawn-dock-type');
-            let dockRelativeTo = this.dockManager.context.model.documentManagerNode;
-            let dockToAttribute = element.getAttribute('dock-spawn-dock-to');
-            if (dockToAttribute) {
-                //@ts-ignore
-                let dockToElement = this.getRootNode().getElementById(dockToAttribute);
-                dockRelativeTo = this.dockManager.findNodeFromContainerElement(this.elementContainerMap.get(dockToElement).containerElement);
-            }
-            if (dockType == 'left')
-                this.dockManager.dockLeft(dockRelativeTo, container, dockRatio);
-            else if (dockType == 'right')
-                this.dockManager.dockRight(dockRelativeTo, container, dockRatio);
-            else if (dockType == 'up')
-                this.dockManager.dockUp(dockRelativeTo, container, dockRatio);
-            else if (dockType == 'down')
-                this.dockManager.dockDown(dockRelativeTo, container, dockRatio);
-            else
-                this.dockManager.dockFill(dockRelativeTo, container);
-            if (element.style.display == 'none')
-                element.style.display = 'block';
+        if (dockType == 'left')
+            this.dockManager.dockLeft(dockRelativeTo, container, dockRatio);
+        else if (dockType == 'right')
+            this.dockManager.dockRight(dockRelativeTo, container, dockRatio);
+        else if (dockType == 'up')
+            this.dockManager.dockUp(dockRelativeTo, container, dockRatio);
+        else if (dockType == 'down')
+            this.dockManager.dockDown(dockRelativeTo, container, dockRatio);
+        else
+            this.dockManager.dockFill(dockRelativeTo, container);
+        if (element.style.display == 'none')
+            element.style.display = 'block';
+    }
+    handleRemovedChildNode(element) {
+        let node = this.getDockNodeForElement(element);
+        if (node)
+            node.container.close();
+        this.elementContainerMap.delete(element);
+    }
+    connectedCallback() {
+        if (!this.initialized) {
+            this.initDockspawn();
+            this.initialized = true;
         }
-        handleRemovedChildNode(element) {
-            let node = this.getDockNodeForElement(element);
-            if (node)
-                node.container.close();
-            this.elementContainerMap.delete(element);
-        }
-        connectedCallback() {
-            if (!this.initialized) {
-                this.initDockspawn();
-                this.initialized = true;
-            }
-            window.addEventListener('resize', this.windowResizedBound);
-            window.addEventListener('orientationchange', this.windowResizedBound);
-        }
-        disconnectedCallback() {
-            window.removeEventListener('resize', this.windowResizedBound);
-            window.removeEventListener('orientationchange', this.windowResizedBound);
-        }
-        windowResized() {
-            this.resize();
-        }
-        resize() {
-            this.dockManager.resize(this.clientWidth, this.clientHeight);
-        }
-        getDockNodeForElement(elementOrContainer) {
-            let element = elementOrContainer;
-            if (element.containerElement)
-                element = elementOrContainer.containerElement;
-            return this.dockManager.findNodeFromContainerElement(element);
-        }
-        dockFill(element, panelType, dockNode, title) {
-            let container = new PanelContainer(element, this.dockManager, title, panelType);
-            this.dockManager.dockFill(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container);
-        }
-        dockLeft(element, panelType, dockNode, ratio, title) {
-            let container = new PanelContainer(element, this.dockManager, title, panelType);
-            this.dockManager.dockLeft(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
-        }
-        dockRight(element, panelType, dockNode, ratio, title) {
-            let container = new PanelContainer(element, this.dockManager, title, panelType);
-            this.dockManager.dockRight(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
-        }
-        dockUp(element, panelType, dockNode, ratio, title) {
-            let container = new PanelContainer(element, this.dockManager, title, panelType);
-            this.dockManager.dockUp(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
-        }
-        dockDown(element, panelType, dockNode, ratio, title) {
-            let container = new PanelContainer(element, this.dockManager, title, panelType);
-            this.dockManager.dockDown(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
-        }
+        window.addEventListener('resize', this.windowResizedBound);
+        window.addEventListener('orientationchange', this.windowResizedBound);
     }
-    DockSpawnTsWebcomponent.cssRootDirectory = "../../lib/css/";
-    return DockSpawnTsWebcomponent;
-})();
-export { DockSpawnTsWebcomponent };
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.windowResizedBound);
+        window.removeEventListener('orientationchange', this.windowResizedBound);
+    }
+    windowResized() {
+        this.resize();
+    }
+    resize() {
+        this.dockManager.resize(this.clientWidth, this.clientHeight);
+    }
+    getDockNodeForElement(elementOrContainer) {
+        let element = elementOrContainer;
+        if (element.containerElement)
+            element = elementOrContainer.containerElement;
+        return this.dockManager.findNodeFromContainerElement(element);
+    }
+    dockFill(element, panelType, dockNode, title) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType);
+        this.dockManager.dockFill(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container);
+    }
+    dockLeft(element, panelType, dockNode, ratio, title) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType);
+        this.dockManager.dockLeft(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockRight(element, panelType, dockNode, ratio, title) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType);
+        this.dockManager.dockRight(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockUp(element, panelType, dockNode, ratio, title) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType);
+        this.dockManager.dockUp(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+    dockDown(element, panelType, dockNode, ratio, title) {
+        let container = new PanelContainer(element, this.dockManager, title, panelType);
+        this.dockManager.dockDown(dockNode != null ? dockNode : this.dockManager.context.model.documentManagerNode, container, ratio);
+    }
+}
+DockSpawnTsWebcomponent.cssRootDirectory = "../../lib/css/";
 window.customElements.define('dock-spawn-ts', DockSpawnTsWebcomponent);
 //# sourceMappingURL=DockSpawnTsWebcomponent.js.map

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.210.0",
+  "version": "2.220.0",
   "description": "DockSpawn Typescript Version",
@@ -13,11 +13,11 @@ "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
-    "@types/node": "^14.14.13",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@types/node": "^16.0.0",
     "http-server": "^0.12.3",
-    "typescript": "^4.1.3",
-    "uglify-js": "^3.12.1",
-    "webpack": "^5.10.1",
-    "webpack-cli": "^4.2.0"
+    "typescript": "^4.3.5",
+    "uglify-js": "^3.13.10",
+    "webpack": "^5.43.0",
+    "webpack-cli": "^4.7.2"
   },
@@ -24,0 +24,0 @@ "main": "/lib/js/Exports.js",

src/DockWheel.ts

@@ -78,4 +78,6 @@ import { Utils } from "./Utils.js";
         let baseY = Math.floor(containerHeight / 2); // + element.offsetTop;
-        this.elementMainWheel.style.left = baseX + 'px';
-        this.elementMainWheel.style.top = baseY + 'px';
+        let bcElement = element.getBoundingClientRect();
+        let bcdockManagerElement = this.dockManager.element.getBoundingClientRect()
+        this.elementMainWheel.style.left = (bcElement.left - bcdockManagerElement.left + baseX) + 'px';
+        this.elementMainWheel.style.top = (bcElement.top - bcdockManagerElement.top + baseY) + 'px';
 
@@ -90,3 +92,3 @@ // The positioning of the main dock wheel buttons is done automatically through CSS
         Utils.removeNode(this.elementSideWheel);
-        element.appendChild(this.elementMainWheel);
+        this.dockManager.element.appendChild(this.elementMainWheel);
         this.dockManager.element.appendChild(this.elementSideWheel);
@@ -93,0 +95,0 @@

No alert changes

Improved metrics

Lines of code

10016

increased by0.01%

Worsened metrics

Total package byte prevSize

711356

decreased by-0.25%

No dependency changes