@datagrok-libraries/dock-spawn-dg 0.0.1

package/lib/DockManager.js

@@ -0,0 +1,752 @@
+import { DockWheel } from './DockWheel.js';
+import { Utils } from './Utils.js';
+import { Point } from './Point.js';
+import { DockManagerContext } from './DockManagerContext.js';
+import { DockNode } from './DockNode.js';
+import { DockLayoutEngine } from './DockLayoutEngine.js';
+import { EventHandler } from './EventHandler.js';
+import { Dialog } from './Dialog.js';
+import { DockGraphSerializer } from './DockGraphSerializer.js';
+import { DockGraphDeserializer } from './DockGraphDeserializer.js';
+import { PanelContainer } from './PanelContainer.js';
+import { DockConfig } from './DockConfig.js';
+import { PanelType } from './enums/PanelType.js';
+/**
+ * Dock manager manages all the dock panels in a hierarchy, similar to visual studio.
+ * It owns a Html Div element inside which all panels are docked
+ * Initially the document manager takes up the central space and acts as the root node
+ */
+export class DockManager {
+    element;
+    context;
+    dockWheel;
+    layoutEngine;
+    mouseMoveHandler;
+    touchMoveHandler;
+    layoutEventListeners;
+    closePanelContainerCallback;
+    defaultDialogPosition;
+    backgroundContext;
+    zIndexCounter;
+    zIndexTabHost;
+    zIndexTabHandle;
+    zIndexDialogCounter;
+    onKeyPressBound;
+    iframes;
+    _undockEnabled;
+    getElementCallback;
+    _config;
+    _activePanel;
+    _lastPanelNotADialog;
+    _activeDocument;
+    constructor(element, config) {
+        if (element === undefined)
+            throw new Error('Invalid Dock Manager element provided');
+        this._config = Object.assign(new DockConfig(), config);
+        this.element = element;
+        this.context = this.dockWheel = this.layoutEngine = this.mouseMoveHandler = this.touchMoveHandler = undefined;
+        this.layoutEventListeners = [];
+        this.defaultDialogPosition = new Point(0, 0);
+    }
+    get config() {
+        return this._config;
+    }
+    initialize() {
+        this.backgroundContext = this.element.children[0];
+        this.context = new DockManagerContext(this);
+        const documentNode = new DockNode(this.context.documentManagerView);
+        this.context.model.rootNode = documentNode;
+        this.context.model.documentManagerNode = documentNode;
+        this.context.model.dialogs = [];
+        this.setRootNode(this.context.model.rootNode);
+        // Resize the layout
+        this.resize(this.element.clientWidth, this.element.clientHeight);
+        this.dockWheel = new DockWheel(this);
+        this.layoutEngine = new DockLayoutEngine(this);
+        this._undockEnabled = true;
+        this.rebuildLayout(this.context.model.rootNode);
+        this.zIndexCounter = 1001;
+        this.zIndexTabHost = 1000;
+        this.zIndexTabHandle = 100;
+        this.zIndexDialogCounter = 10001;
+        if (this.backgroundContext != null) {
+            this.context.model.rootNode.container.tabHost.hostElement
+                .insertBefore(this.backgroundContext, this.context.model.rootNode.container.tabHost.hostElement.firstChild);
+        }
+        this.onKeyPressBound = this.onKeyPress.bind(this);
+        this.element.addEventListener('keydown', this.onKeyPressBound);
+    }
+    onKeyPress(e) {
+        if (e.key == 'Escape' && this.activePanel && !this.activePanel._hideCloseButton) {
+            if ((this.activePanel.isDialog && this._config.escClosesDialog) || (!this.activePanel.isDialog && this._config.escClosesWindow)) {
+                const panel = this.activePanel;
+                this.activePanel = null;
+                panel.close();
+            }
+        }
+    }
+    checkXBounds(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast);
+        const rect = this.element.getBoundingClientRect();
+        let dx = Math.floor(currentMousePosition.x - previousMousePosition.x);
+        const leftBounds = container.offsetLeft + container.offsetWidth + dx + rect.left < 40; // || (container.offsetLeft + container.offsetWidth + dx - 40 ) < 0;
+        const rightBounds = container.offsetLeft + dx + rect.left > (window.innerWidth - 40);
+        if (leftBounds) {
+            previousMousePosition.x = currentMousePosition.x;
+            dx = 0;
+            const d = 40 - (container.offsetWidth + container.offsetLeft + rect.left);
+            if (d > 0)
+                dx = d;
+        }
+        else if (rightBounds) {
+            previousMousePosition.x = currentMousePosition.x;
+            dx = 0;
+            const d = (window.innerWidth - 40) - container.offsetLeft - rect.left;
+            if (d > 0)
+                dx = d;
+        }
+        return dx;
+    }
+    checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast) {
+        let dx = currentMousePosition.x - previousMousePosition.x;
+        const bbOuter = this.element.getBoundingClientRect();
+        const bbInner = container.getBoundingClientRect();
+        const leftBounds = dx < 0 && bbInner.left + dx < bbOuter.left && !resizeEast;
+        const rightBounds = dx > 0 && bbInner.right + dx > bbOuter.right && !resizeWest;
+        if (leftBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.left - bbInner.left;
+            currentMousePosition.x -= dx;
+        }
+        else if (rightBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.right - bbInner.right;
+            currentMousePosition.x -= dx;
+        }
+        return dx;
+    }
+    checkYBounds(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth);
+        const rect = this.element.getBoundingClientRect();
+        let dy = Math.floor(currentMousePosition.y - previousMousePosition.y);
+        const topBounds = container.offsetTop + dy + rect.top < 0;
+        const bottomBounds = container.offsetTop + dy + rect.top > (window.innerHeight - 16);
+        if (topBounds) {
+            previousMousePosition.y = currentMousePosition.y;
+            dy = 0;
+        }
+        else if (bottomBounds) {
+            previousMousePosition.y = currentMousePosition.y;
+            dy = 0;
+            const d = (window.innerHeight - 16) - container.offsetTop - rect.top;
+            if (d > 0)
+                dy = d;
+        }
+        return dy;
+    }
+    checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth) {
+        let dy = currentMousePosition.y - previousMousePosition.y;
+        const bbOuter = this.element.getBoundingClientRect();
+        const bbInner = container.getBoundingClientRect();
+        const topBounds = dy < 0 && bbInner.top + dy < bbOuter.top && !resizeSouth;
+        const bottomBounds = dy > 0 && bbInner.bottom + dy > bbOuter.bottom && !resizeNorth;
+        if (topBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.top - bbInner.top;
+            currentMousePosition.y -= dy;
+        }
+        else if (bottomBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.bottom - bbInner.bottom;
+            currentMousePosition.y -= dy;
+        }
+        return dy;
+    }
+    rebuildLayout(node) {
+        node.children.forEach((child) => {
+            this.rebuildLayout(child);
+        });
+        node.performLayout(false);
+    }
+    invalidate() {
+        this.resize(this.element.clientWidth, this.element.clientHeight);
+    }
+    resize(width, height) {
+        this.element.style.width = width + 'px';
+        this.element.style.height = height + 'px';
+        this.context.model.rootNode.container.resize(width, height);
+        let offsetX = 0;
+        let offsetY = 0;
+        for (const dialog of this.context.model.dialogs) {
+            if (dialog.position.x > this.element.clientWidth || dialog.position.y > this.element.clientHeight) {
+                if (offsetX > this.element.clientWidth || offsetY > this.element.clientHeight)
+                    offsetX = 0, offsetY = 0;
+                dialog.setPosition(100 + offsetX, 100 + offsetY);
+                offsetX += 100;
+                offsetY += 100;
+            }
+        }
+    }
+    /**
+       * Reset the dock model . This happens when the state is loaded from json
+       */
+    setModel(model) {
+        Utils.removeNode(this.context.documentManagerView.containerElement);
+        this.context.model = model;
+        this.setRootNode(model.rootNode);
+        this.rebuildLayout(model.rootNode);
+        this.loadResize(model.rootNode);
+        // this.invalidate();
+    }
+    loadResize(node) {
+        node.children.reverse().forEach((child) => {
+            this.loadResize(child);
+            node.container.setActiveChild(child.container);
+        });
+        node.children.reverse();
+        const container = node.container;
+        node.container.resize(container.state.width, container.state.height);
+        // node.performLayout();
+    }
+    setRootNode(node) {
+        // if (this.context.model.rootNode)
+        // {
+        //     // detach it from the dock manager's base element
+        //     context.model.rootNode.detachFromParent();
+        // }
+        // Attach the new node to the dock manager's base element and set as root node
+        node.detachFromParent();
+        this.context.model.rootNode = node;
+        this.element.appendChild(node.container.containerElement);
+    }
+    _onDialogDragStarted(sender, e) {
+        this.dockWheel.activeNode = this._findNodeOnPoint(e.clientX, e.clientY);
+        this.dockWheel.activeDialog = sender;
+        if (sender.noDocking == null || sender.noDocking !== true)
+            this.dockWheel.showWheel();
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
+        }
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
+            delete this.touchMoveHandler;
+        }
+        this.mouseMoveHandler = new EventHandler(window, 'mousemove', this._onMouseMoved.bind(this));
+        this.touchMoveHandler = new EventHandler(window, 'touchmove', this._onMouseMoved.bind(this));
+    }
+    _onDialogDragEnded(sender, e) {
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
+        }
+        if (this.touchMoveHandler) {
+            this.touchMoveHandler.cancel();
+            delete this.touchMoveHandler;
+        }
+        this.dockWheel.onDialogDropped(sender);
+        this.dockWheel.hideWheel();
+        delete this.dockWheel.activeDialog;
+        //TODO: not so good
+        sender.saveState(sender.elementDialog.offsetLeft, sender.elementDialog.offsetTop);
+    }
+    _onMouseMoved(e) {
+        if (e.changedTouches != null) { // TouchMove Event
+            e = e.changedTouches[0];
+        }
+        this.dockWheel.activeNode = this._findNodeOnPoint(e.clientX, e.clientY);
+    }
+    /**
+       * Perform a DFS (DeepFirstSearch) on the dock model's tree to find the
+       * deepest level panel (i.e. the top-most non-overlapping panel)
+       * that is under the mouse cursor
+       * Retuns null if no node is found under this point
+       */
+    _findNodeOnPoint(x, y) {
+        const stack = [];
+        stack.push(this.context.model.rootNode);
+        let bestMatch;
+        while (stack.length > 0) {
+            const topNode = stack.pop();
+            if (Utils.isPointInsideNode(x, y, topNode)) {
+                // This node contains the point.
+                bestMatch = topNode;
+                // Keep looking future down
+                [].push.apply(stack, topNode.children);
+            }
+        }
+        return bestMatch;
+    }
+    /** Dock the [dialog] to the left of the [referenceNode] node */
+    dockDialogLeft(referenceNode, dialog) {
+        return this._requestDockDialog(referenceNode, dialog, this.layoutEngine.dockLeft.bind(this.layoutEngine));
+    }
+    /** Dock the [dialog] to the right of the [referenceNode] node */
+    dockDialogRight(referenceNode, dialog) {
+        return this._requestDockDialog(referenceNode, dialog, this.layoutEngine.dockRight.bind(this.layoutEngine));
+    }
+    /** Dock the [dialog] above the [referenceNode] node */
+    dockDialogUp(referenceNode, dialog) {
+        return this._requestDockDialog(referenceNode, dialog, this.layoutEngine.dockUp.bind(this.layoutEngine));
+    }
+    /** Dock the [dialog] below the [referenceNode] node */
+    dockDialogDown(referenceNode, dialog) {
+        return this._requestDockDialog(referenceNode, dialog, this.layoutEngine.dockDown.bind(this.layoutEngine));
+    }
+    /** Dock the [dialog] as a tab inside the [referenceNode] node */
+    dockDialogFill(referenceNode, dialog) {
+        return this._requestDockDialog(referenceNode, dialog, this.layoutEngine.dockFill.bind(this.layoutEngine));
+    }
+    /** Dock the [container] to the left of the [referenceNode] node */
+    dockLeft(referenceNode, container, ratio) {
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockLeft.bind(this.layoutEngine), false, ratio);
+    }
+    /** Dock the [container] to the right of the [referenceNode] node */
+    dockRight(referenceNode, container, ratio) {
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockRight.bind(this.layoutEngine), true, ratio);
+    }
+    /** Dock the [container] above the [referenceNode] node */
+    dockUp(referenceNode, container, ratio) {
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockUp.bind(this.layoutEngine), false, ratio);
+    }
+    /** Dock the [container] below the [referenceNode] node */
+    dockDown(referenceNode, container, ratio) {
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockDown.bind(this.layoutEngine), true, ratio);
+    }
+    /** Dock the [container] as a tab inside the [referenceNode] node */
+    dockFill(referenceNode, container) {
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine), false);
+    }
+    floatDialog(container, x, y, grayoutParent, disableResize) {
+        let retdiag = undefined;
+        //check the dialog do not already exist
+        this.context.model.dialogs.forEach((dialog) => {
+            if (container == dialog.panel) {
+                dialog.show();
+                dialog.setPosition(x, y);
+                retdiag = dialog;
+            }
+        });
+        if (retdiag)
+            return retdiag;
+        //try to undock just in case
+        try {
+            const node = this._findNodeFromContainer(container);
+            this.layoutEngine.undock(node);
+        }
+        catch (err) { }
+        const panel = container;
+        Utils.removeNode(panel.elementPanel);
+        panel.isDialog = true;
+        const dialog = new Dialog(panel, this, grayoutParent, disableResize);
+        dialog.setPosition(x, y);
+        return dialog;
+    }
+    _requestDockDialog(referenceNode, dialog, layoutDockFunction) {
+        // Get the active dialog that was dragged on to the dock wheel
+        const panel = dialog.panel;
+        const newNode = new DockNode(panel);
+        panel.prepareForDocking();
+        panel.elementContentContainer.style.zIndex = '';
+        dialog.destroy();
+        layoutDockFunction(referenceNode, newNode);
+        // this.invalidate();
+        return newNode;
+    }
+    _checkShowBackgroundContext() {
+        if (this.backgroundContext != null) {
+            if (this.context.model.documentManagerNode.children.length > 0)
+                this.backgroundContext.style.display = 'none';
+            else
+                this.backgroundContext.style.display = 'block';
+        }
+    }
+    _requestDockContainer(referenceNode, container, layoutDockFunction, dockedToPrevious, ratio) {
+        // Get the active dialog that was dragged on to the dock wheel
+        const newNode = new DockNode(container);
+        if (container.containerType === 'panel') {
+            const panel = container;
+            panel.prepareForDocking();
+            Utils.removeNode(panel.elementPanel);
+        }
+        let ratios = null;
+        let oldSplitter;
+        if (referenceNode?.parent && referenceNode.parent.container) {
+            oldSplitter = referenceNode.parent.container;
+            if (oldSplitter.getRatios)
+                ratios = oldSplitter.getRatios();
+        }
+        layoutDockFunction(referenceNode, newNode);
+        if (ratio && newNode.parent && (newNode.parent.container.containerType === 'vertical' || newNode.parent.container.containerType === 'horizontal')) {
+            const splitter = newNode.parent.container;
+            if (ratios && oldSplitter == splitter) {
+                if (dockedToPrevious) {
+                    for (let i = 0; i < ratios.length; i++)
+                        ratios[i] = ratios[i] - ratios[i] * ratio;
+                    ratios.push(ratio);
+                }
+                else {
+                    ratios[0] = ratios[0] - ratio;
+                    ratios.unshift(ratio);
+                }
+                splitter.setRatios(ratios);
+            }
+            else
+                splitter.setContainerRatio(container, ratio);
+        }
+        this.rebuildLayout(this.context.model.rootNode);
+        this.invalidate();
+        this._checkShowBackgroundContext();
+        return newNode;
+    }
+    _requestTabReorder(container, e) {
+        const node = this._findNodeFromContainer(container);
+        this.layoutEngine.reorderTabs(node, e.handle, e.state, e.index);
+    }
+    /**
+       * Undocks a panel and converts it into a floating dialog window
+       * It is assumed that only leaf nodes (panels) can be undocked
+       */
+    requestUndockToDialog(container, event, dragOffset) {
+        const node = this._findNodeFromContainer(container);
+        this.layoutEngine.undock(node);
+        const panelContainer = node.container;
+        panelContainer.elementPanel.style.display = 'block';
+        // Create a new dialog window for the undocked panel
+        const dialog = new Dialog(panelContainer, this, null);
+        if (panelContainer.lastDialogSize)
+            dialog.resize(panelContainer.lastDialogSize.width, panelContainer.lastDialogSize.height);
+        if (event !== undefined) {
+            // Adjust the relative position
+            const dialogWidth = dialog.elementDialog.clientWidth;
+            if (dragOffset.x > dialogWidth)
+                dragOffset.x = 0.75 * dialogWidth;
+            dialog.setPosition(event.clientX - dragOffset.x, event.clientY - dragOffset.y);
+            dialog.draggable.onMouseDown(event);
+        }
+        return dialog;
+    }
+    /**
+      * closes a Panel
+      */
+    requestClose(container) {
+        const node = this._findNodeFromContainer(container);
+        this.layoutEngine.close(node);
+        if (this.activePanel == container)
+            this.activePanel = null;
+        if (this._activeDocument == container) {
+            const last = this._activeDocument;
+            this._activeDocument = null;
+            this.notifyOnActiveDocumentChange(null, last);
+        }
+    }
+    /**
+       * Opens a Element in a Dialog
+       * It is assumed that only leaf nodes (panels) can be undocked
+       */
+    openInDialog(container, event, dragOffset, disableResize) {
+        // Create a new dialog window for the undocked panel
+        const dialog = new Dialog(container, this, null, disableResize);
+        if (event != null) {
+            // Adjust the relative position
+            const dialogWidth = dialog.elementDialog.clientWidth;
+            if (dragOffset.x > dialogWidth)
+                dragOffset.x = 0.75 * dialogWidth;
+            dialog.setPosition(event.clientX - dragOffset.x, event.clientY - dragOffset.y);
+            dialog.draggable.onMouseDown(event);
+        }
+        return dialog;
+    }
+    /** Undocks a panel and converts it into a floating dialog window
+       * It is assumed that only leaf nodes (panels) can be undocked
+       */
+    requestUndock(container) {
+        const node = this._findNodeFromContainer(container);
+        this.layoutEngine.undock(node);
+    }
+    /**
+       * Removes a dock container from the dock layout hierarcy
+       * Returns the node that was removed from the dock tree
+       */
+    requestRemove(container) {
+        const node = this._findNodeFromContainer(container);
+        const parent = node.parent;
+        node.detachFromParent();
+        if (parent)
+            this.rebuildLayout(parent);
+        return node;
+    }
+    getNodeByElementId(id) {
+        const stack = [];
+        stack.push(this.context.model.rootNode);
+        while (stack.length > 0) {
+            const topNode = stack.pop();
+            if (topNode.container instanceof PanelContainer) {
+                if (topNode.container.elementContent.id === id)
+                    return topNode;
+                if (topNode.container.elementContent instanceof HTMLSlotElement) {
+                    if (topNode.container.elementContent.assignedElements()?.[0]?.id === id)
+                        return topNode;
+                }
+            }
+            [].push.apply(stack, topNode.children);
+        }
+        return null;
+    }
+    getNodeByElement(element) {
+        const stack = [];
+        stack.push(this.context.model.rootNode);
+        while (stack.length > 0) {
+            const topNode = stack.pop();
+            if (topNode.container instanceof PanelContainer) {
+                if (topNode.container.elementContent === element)
+                    return topNode;
+                if (topNode.container.elementContent instanceof HTMLSlotElement) {
+                    if (topNode.container.elementContent.assignedElements()?.[0] === element)
+                        return topNode;
+                }
+            }
+            [].push.apply(stack, topNode.children);
+        }
+        return null;
+    }
+    /** Finds the node that owns the specified [container] */
+    _findNodeFromContainer(container) {
+        const stack = [];
+        stack.push(this.context.model.rootNode);
+        while (stack.length > 0) {
+            const topNode = stack.pop();
+            if (topNode.container === container)
+                return topNode;
+            [].push.apply(stack, topNode.children);
+        }
+        return null;
+    }
+    findNodeFromContainerElement(containerElement) {
+        const stack = [];
+        stack.push(this.context.model.rootNode);
+        while (stack.length > 0) {
+            const topNode = stack.pop();
+            if (topNode.container.containerElement === containerElement)
+                return topNode;
+            [].push.apply(stack, topNode.children);
+        }
+        return null;
+    }
+    addLayoutListener(listener) {
+        this.layoutEventListeners.push(listener);
+    }
+    removeLayoutListener(listener) {
+        this.layoutEventListeners.splice(this.layoutEventListeners.indexOf(listener), 1);
+    }
+    suspendLayout(panel) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onSuspendLayout)
+                listener.onSuspendLayout(this, panel);
+        });
+    }
+    resumeLayout(panel) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onResumeLayout)
+                listener.onResumeLayout(this, panel);
+        });
+    }
+    notifyOnDock(dockNode) {
+        this._checkShowBackgroundContext();
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onDock) {
+                listener.onDock(this, dockNode);
+                dockNode.container.resize(dockNode.container.width, dockNode.container.height);
+            }
+        });
+    }
+    notifyOnTabsReorder(dockNode) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onTabsReorder)
+                listener.onTabsReorder(this, dockNode);
+        });
+    }
+    notifyOnUnDock(dockNode) {
+        this._checkShowBackgroundContext();
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onUndock)
+                listener.onUndock(this, dockNode);
+        });
+    }
+    notifyOnClosePanel(panel) {
+        this._checkShowBackgroundContext();
+        if (this.activePanel == panel)
+            this.activePanel = null;
+        if (this._activeDocument == panel) {
+            const last = this._activeDocument;
+            this._activeDocument = null;
+            this.notifyOnActiveDocumentChange(null, last);
+        }
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onClosePanel)
+                listener.onClosePanel(this, panel);
+        });
+    }
+    notifyOnCreateDialog(dialog) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onCreateDialog)
+                listener.onCreateDialog(this, dialog);
+        });
+    }
+    notifyOnHideDialog(dialog) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onHideDialog)
+                listener.onHideDialog(this, dialog);
+        });
+    }
+    notifyOnShowDialog(dialog) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onShowDialog)
+                listener.onShowDialog(this, dialog);
+        });
+    }
+    notifyOnChangeDialogPosition(dialog, x, y) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onChangeDialogPosition)
+                listener.onChangeDialogPosition(this, dialog, x, y);
+        });
+    }
+    notifyOnContainerResized(dockContainer) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onContainerResized)
+                listener.onContainerResized(this, dockContainer);
+        });
+    }
+    notifyOnTabChange(tabpage) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onTabChanged)
+                listener.onTabChanged(this, tabpage);
+        });
+    }
+    notifyOnActivePanelChange(panel, oldActive) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onActivePanelChange)
+                listener.onActivePanelChange(this, panel, oldActive);
+        });
+    }
+    notifyOnActiveDocumentChange(panel, oldActive) {
+        this.layoutEventListeners.forEach((listener) => {
+            if (listener.onActiveDocumentChange)
+                listener.onActiveDocumentChange(this, panel, oldActive);
+        });
+    }
+    saveState() {
+        const serializer = new DockGraphSerializer();
+        return serializer.serialize(this.context.model);
+    }
+    async loadState(json) {
+        const deserializer = new DockGraphDeserializer(this);
+        this.context.model = await deserializer.deserialize(json);
+        this.setModel(this.context.model);
+    }
+    getPanels() {
+        const panels = [];
+        //all visible nodes
+        this._allPanels(this.context.model.rootNode, panels);
+        //all visible or not dialogs
+        this.context.model.dialogs.forEach((dialog) => {
+            //TODO: check visible
+            panels.push(dialog.panel);
+        });
+        return panels;
+    }
+    undockEnabled(state) {
+        this._undockEnabled = state;
+        this.getPanels().forEach((panel) => {
+            panel.canUndock(state);
+        });
+    }
+    lockDockState(state) {
+        this.undockEnabled(!state); // false - not enabled
+        this.hideCloseButton(state); //true - hide
+    }
+    hideCloseButton(state) {
+        this.getPanels().forEach((panel) => {
+            panel.hideCloseButton(state);
+        });
+    }
+    updatePanels(ids) {
+        const panels = [];
+        //all visible nodes
+        this._allPanels(this.context.model.rootNode, panels);
+        //only remove
+        panels.forEach((panel) => {
+            if (!Utils.arrayContains(ids, panel.elementContent.id))
+                panel.close();
+        });
+        this.context.model.dialogs.forEach((dialog) => {
+            if (Utils.arrayContains(ids, dialog.panel.elementContent.id))
+                dialog.show();
+            else
+                dialog.hide();
+        });
+        return panels;
+    }
+    getVisiblePanels() {
+        const panels = [];
+        //all visible nodes
+        this._allPanels(this.context.model.rootNode, panels);
+        //all visible
+        this.context.model.dialogs.forEach((dialog) => {
+            if (!dialog.isHidden)
+                panels.push(dialog.panel);
+        });
+        return panels;
+    }
+    _allPanels(node, panels) {
+        node.children.forEach((child) => {
+            this._allPanels(child, panels);
+        });
+        if (node.container.containerType === 'panel')
+            panels.push(node.container);
+    }
+    get activeDocument() {
+        return this._activeDocument;
+    }
+    get activePanel() {
+        return this._activePanel;
+    }
+    set activePanel(value) {
+        if (value !== this._activePanel) {
+            if (value && !value.isDialog) //todo store compliete list of panels, remove the closed ones and switch back focus
+                this._lastPanelNotADialog = value;
+            if (this._lastPanelNotADialog && this.getPanels().indexOf(this._lastPanelNotADialog) < 0)
+                this._lastPanelNotADialog = null;
+            const oldActive = this.activePanel;
+            if (this.activePanel) {
+                this.activePanel.elementTitle.classList.remove('dockspan-panel-active');
+                this.activePanel.elementTitleText.classList.remove('dockspan-panel-titlebar-text-active');
+                if (this.activePanel.tabPage)
+                    this.activePanel.tabPage.host.setActive(false);
+            }
+            this._activePanel = value;
+            const lastActiveDocument = this._activeDocument;
+            if (value && value.panelType == PanelType.document)
+                this._activeDocument = value;
+            if (!value && oldActive && oldActive.isDialog && value == null && this._lastPanelNotADialog && this.activePanel != this._lastPanelNotADialog) {
+                value = this._lastPanelNotADialog;
+                this._lastPanelNotADialog = undefined;
+            }
+            this.notifyOnActivePanelChange(value, oldActive);
+            if (lastActiveDocument != this._activeDocument)
+                this.notifyOnActiveDocumentChange(this._activeDocument, lastActiveDocument);
+            if (value) {
+                value.elementTitle.classList.add('dockspan-panel-active');
+                value.elementTitleText.classList.add('dockspan-panel-titlebar-text-active');
+                if (value.tabPage)
+                    value.tabPage.host.setActive(true);
+            }
+        }
+        else {
+            if (value && value.tabPage)
+                value.tabPage.host.setActive(true);
+        }
+    }
+}