dock-spawn-ts - npm Package Compare versions

Comparing version 2.43.0 to 2.44.0

lib/js/DraggableContainer.js

@@ -61,2 +61,3 @@ import { EventHandler } from "./EventHandler.js";
     onMouseDown(event) {
+        event.preventDefault();
         let touchOrMouseData = null;
@@ -90,3 +91,3 @@ if (event.touches) {
         this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
-        this.touchMoveHandler = new EventHandler(event.target, 'touchmove', this.onMouseMove.bind(this));
+        this.touchMoveHandler = new EventHandler(event.target, 'touchmove', this.onMouseMove.bind(this), { passive: false });
         this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
@@ -136,2 +137,3 @@ this.touchUpHandler = new EventHandler(event.target, 'touchend', this.onMouseUp.bind(this));
     onMouseMove(event, iframeOffset) {
+        event.preventDefault();
         let br = document.body.getBoundingClientRect();
@@ -138,0 +140,0 @@ if (event.touches != null) {

lib/js/TabHandle.d.ts

@@ -15,2 +15,3 @@ import { TabPage } from "./TabPage.js";
     mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
     closeButtonHandler: EventHandler;
@@ -17,0 +18,0 @@ auxClickHandler: EventHandler;

lib/js/TabHandle.js

@@ -9,243 +9,251 @@ import { PanelContainer } from "./PanelContainer.js";
  */
-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.closeButtonHandler = new EventHandler(this.elementCloseButton, 'mousedown', 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);
+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, 'mousedown', 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;
         }
-        else {
+        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);
+            }
+            else {
+                this.closeContextMenu();
+            }
+        }
+        closeContextMenu() {
+            if (this._ctxMenu) {
+                document.body.removeChild(this._ctxMenu);
+                delete this._ctxMenu;
+                window.removeEventListener('mouseup', this._windowsContextMenuCloseBound);
+            }
+        }
+        windowsContextMenuClose(e) {
+            let cp = e.composedPath();
+            for (let i in cp) {
+                let el = cp[i];
+                if (el == this._ctxMenu)
+                    return;
+            }
             this.closeContextMenu();
         }
-    }
-    closeContextMenu() {
-        if (this._ctxMenu) {
-            document.body.removeChild(this._ctxMenu);
-            delete this._ctxMenu;
-            window.removeEventListener('mouseup', this._windowsContextMenuCloseBound);
+        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));
         }
-    }
-    windowsContextMenuClose(e) {
-        let cp = e.composedPath();
-        for (let i in cp) {
-            let el = cp[i];
-            if (el == this._ctxMenu)
-                return;
-        }
-        this.closeContextMenu();
-    }
-    onMouseDown(e) {
-        this.parent.onSelected();
-        if (this.mouseMoveHandler) {
-            this.mouseMoveHandler.cancel();
+        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;
-        }
-        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));
-        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');
+        moveTabEvent(that, state) {
+            that.eventListeners.forEach((listener) => {
+                if (listener.onMoveTab) {
+                    listener.onMoveTab({ self: that, state: 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);
             }
-        });
-    }
-    onMouseMove(e) {
-        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';
-    }
-    updateTitle() {
-        if (this.parent.container instanceof PanelContainer) {
-            let panel = this.parent.container;
-            let title = panel.getRawTitle();
-            this.elementText.innerHTML = title;
+        hideCloseButton(state) {
+            this.elementCloseButton.style.display = state ? 'none' : 'block';
         }
-    }
-    destroy() {
-        let panel = this.parent.container;
-        panel.removeListener(this.undockListener);
-        this.mouseDownHandler.cancel();
-        this.closeButtonHandler.cancel();
-        this.auxClickHandler.cancel();
-        if (this.mouseUpHandler) {
-            this.mouseUpHandler.cancel();
+        updateTitle() {
+            if (this.parent.container instanceof PanelContainer) {
+                let panel = this.parent.container;
+                let title = panel.getRawTitle();
+                this.elementText.innerHTML = title;
+            }
         }
-        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;
-    }
-    _performUndock(e, dragOffset) {
-        if (this.parent.container.containerType === 'panel') {
-            this.undockInitiator.enabled = false;
+        destroy() {
             let panel = this.parent.container;
-            return panel.performUndockToDialog(e, dragOffset);
+            panel.removeListener(this.undockListener);
+            this.mouseDownHandler.cancel();
+            this.touchDownHandler.cancel();
+            this.closeButtonHandler.cancel();
+            this.auxClickHandler.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;
         }
-        else
-            return null;
-    }
-    onCloseButtonClicked(e) {
-        if (e.button !== 2) {
-            // If the page contains a panel element, undock it and destroy it
+        _performUndock(e, dragOffset) {
             if (this.parent.container.containerType === 'panel') {
+                this.undockInitiator.enabled = false;
                 let panel = this.parent.container;
-                panel.close();
+                return panel.performUndockToDialog(e, dragOffset);
             }
+            else
+                return null;
         }
-    }
-    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');
+        onCloseButtonClicked(e) {
+            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();
+                }
+            }
         }
-    }
-    setActive(isActive) {
-        if (this.elementBase) {
-            if (isActive)
-                this.elementBase.classList.add('dockspan-tab-handle-active');
-            else
+        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');
+            }
         }
-    }
-    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();
+        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.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();
+        setZIndex(zIndex) {
+            this.elementBase.style.zIndex = zIndex;
         }
-        tabHandle.closeContextMenu();
+        _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();
+        };
+        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();
+        };
     };
-};
+    return TabHandle;
+})();
+export { TabHandle };
 //# sourceMappingURL=TabHandle.js.map

lib/js/UndockInitiator.js

@@ -34,3 +34,3 @@ import { EventHandler } from "./EventHandler.js";
             this.mouseDownHandler = new EventHandler(this.element, 'mousedown', this.onMouseDown.bind(this));
-            this.touchDownHandler = new EventHandler(this.element, 'touchstart', this.onMouseDown.bind(this));
+            this.touchDownHandler = new EventHandler(this.element, 'touchstart', this.onMouseDown.bind(this), { passive: false });
         }
@@ -65,2 +65,3 @@ else {
     onMouseDown(e) {
+        e.preventDefault();
         // Make sure we dont do this on floating dialogs
@@ -67,0 +68,0 @@ if (this.enabled) {

lib/js/Utils.js

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

lib/js/webcomponent/DockSpawnTsWebcomponent.js

 import { DockManager } from "../DockManager.js";
 import { PanelContainer } from "../PanelContainer.js";
-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 Map();
-    }
-    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;
-        this.dockManager.initialize();
-        this.dockManager.addLayoutListener({
-            onClosePanel: (dockManager, dockNode) => {
-                let slot = dockNode.elementContent;
-                let element = this.slotElementMap.get(slot);
-                this.removeChild(element);
-                this.slotElementMap.delete(slot);
+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 Map();
+        }
+        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;
+            this.dockManager.initialize();
+            this.dockManager.addLayoutListener({
+                onClosePanel: (dockManager, dockNode) => {
+                    let slot = dockNode.elementContent;
+                    let element = this.slotElementMap.get(slot);
+                    this.removeChild(element);
+                    this.slotElementMap.delete(slot);
+                }
+            });
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
+        }
+        cssLoaded() {
+            this.dockManager.resize(this.clientWidth, this.clientHeight);
+            for (let element of this.children) {
+                this.handleAddedChildNode(element);
             }
-        });
-        this.dockManager.resize(this.clientWidth, this.clientHeight);
-    }
-    cssLoaded() {
-        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);
+            this.observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        this.handleAddedChildNode(node);
+                    });
+                    mutation.removedNodes.forEach((node) => {
+                        this.handleRemovedChildNode(node);
+                    });
                 });
-                mutation.removedNodes.forEach((node) => {
-                    this.handleRemovedChildNode(node);
-                });
             });
-        });
-        this.observer.observe(this, { childList: true });
-    }
-    handleAddedChildNode(element) {
-        let slot = document.createElement('slot');
-        let slotName = 'slot_' + this.slotId++;
-        slot.name = slotName;
-        let container = new PanelContainer(slot, this.dockManager, element.title);
-        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);
+            this.observer.observe(this, { childList: true });
         }
-        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;
+        handleAddedChildNode(element) {
+            let slot = document.createElement('slot');
+            let slotName = 'slot_' + this.slotId++;
+            slot.name = slotName;
+            let container = new PanelContainer(slot, this.dockManager, element.title);
+            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';
         }
-        window.addEventListener('resize', this.windowResizedBound);
-        window.addEventListener('orientationchange', this.windowResizedBound);
+        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);
+        }
     }
-    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/";
+    DockSpawnTsWebcomponent.cssRootDirectory = "../../lib/css/";
+    return DockSpawnTsWebcomponent;
+})();
+export { DockSpawnTsWebcomponent };
 window.customElements.define('dock-spawn-ts', DockSpawnTsWebcomponent);
 //# sourceMappingURL=DockSpawnTsWebcomponent.js.map

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.43.0",
+  "version": "2.44.0",
   "description": "DockSpawn Typescript Version",
@@ -14,11 +14,10 @@ "license": "MIT",
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
-    "@types/node": "^13.9.2",
-    "http-server": "^0.12.1",
-    "typescript": "^3.8.3",
-    "uglify-js": "^3.8.0",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "yarn": "^1.22.4"
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@types/node": "^14.0.5",
+    "http-server": "^0.12.3",
+    "typescript": "^3.9.3",
+    "uglify-js": "^3.9.3",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   },
@@ -25,0 +24,0 @@ "main": "/dist/Exports.js",

src/DraggableContainer.ts

@@ -96,2 +96,4 @@ import { Dialog } from "./Dialog.js";
     onMouseDown(event: TouchEvent | MouseEvent) {
+        event.preventDefault();
+        
         let touchOrMouseData: { clientX: number, clientY: number } = null;
@@ -126,3 +128,3 @@ if ((<TouchEvent>event).touches) {
         this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
-        this.touchMoveHandler = new EventHandler(<Element>event.target, 'touchmove', this.onMouseMove.bind(this));
+        this.touchMoveHandler = new EventHandler(<Element>event.target, 'touchmove', this.onMouseMove.bind(this), { passive: false });
         this.mouseUpHandler = new EventHandler(window, 'mouseup', this.onMouseUp.bind(this));
@@ -178,2 +180,4 @@ this.touchUpHandler = new EventHandler(<Element>event.target, 'touchend', this.onMouseUp.bind(this));
     onMouseMove(event: TouchEvent | MouseEvent, iframeOffset?: { x: number, y: number }) {
+        event.preventDefault();
+
         let br = document.body.getBoundingClientRect();
@@ -180,0 +184,0 @@

src/TabHandle.ts

@@ -19,2 +19,3 @@ import { TabPage } from "./TabPage.js";
     mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
     closeButtonHandler: EventHandler;
@@ -38,3 +39,3 @@ auxClickHandler: EventHandler;
     _windowsContextMenuCloseBound: any;
-
+    
     constructor(parent: TabPage) {
@@ -74,2 +75,3 @@ this.parent = parent;
         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, 'mousedown', this.onCloseButtonClicked.bind(this));
@@ -162,2 +164,4 @@ this.auxClickHandler = new EventHandler(this.elementBase, 'auxclick', this.onCloseButtonClicked.bind(this));
     onMouseDown(e) {
+        e.preventDefault();
+
         this.parent.onSelected();
@@ -183,3 +187,3 @@
         this.mouseMoveHandler = new EventHandler(window, 'mousemove', this.onMouseMove.bind(this));
-        this.touchMoveHandler = new EventHandler(window, 'touchmove', 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));
@@ -217,2 +221,4 @@ this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
     onMouseMove(e) {
+        e.preventDefault();
+
         if (Math.abs(this.stargDragPosition - e.clientX) < 10)
@@ -252,2 +258,3 @@ return;
         this.mouseDownHandler.cancel();
+        this.touchDownHandler.cancel();
         this.closeButtonHandler.cancel();
@@ -254,0 +261,0 @@ this.auxClickHandler.cancel();

src/UndockInitiator.ts

@@ -53,3 +53,3 @@ import { EventHandler } from "./EventHandler.js";
             this.mouseDownHandler = new EventHandler(this.element, 'mousedown', this.onMouseDown.bind(this));
-            this.touchDownHandler = new EventHandler(this.element, 'touchstart', this.onMouseDown.bind(this));
+            this.touchDownHandler = new EventHandler(this.element, 'touchstart', this.onMouseDown.bind(this), { passive: false });
         }
@@ -89,3 +89,5 @@ else {
 
-    onMouseDown(e: any) {
+    onMouseDown(e) {
+        e.preventDefault();
+
         // Make sure we dont do this on floating dialogs
@@ -92,0 +94,0 @@ if (this.enabled) {

No alert changes

Improved metrics

Total package byte prevSize

700273

increased by0.35%

Dev dependency count

9

decreased by-10%

Lines of code

9844

increased by0.09%

Worsened metrics

Number of package files

201

decreased by-5.63%

No dependency changes