@datagrok-libraries/dock-spawn-dg 0.0.2 → 0.1.0

package/{lib → src}/DockManager.js

@@ -1,44 +1,31 @@
-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';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { DockWheel } from "./DockWheel";
+import { Utils } from "./Utils";
+import { Point } from "./Point";
+import { DockManagerContext } from "./DockManagerContext";
+import { DockNode } from "./DockNode";
+import { DockLayoutEngine } from "./DockLayoutEngine";
+import { EventHandler } from "./EventHandler";
+import { Dialog } from "./Dialog";
+import { DockGraphSerializer } from "./DockGraphSerializer";
+import { DockGraphDeserializer } from "./DockGraphDeserializer";
+import { PanelContainer } from "./PanelContainer";
+import { DockConfig } from "./DockConfig";
+import { PanelType } from "./enums/PanelType";
 /**
  * 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');
@@ -54,7 +41,7 @@ export class DockManager {
     initialize() {
         this.backgroundContext = this.element.children[0];
         this.context = new DockManagerContext(this);
-        const documentNode = new DockNode(this.context.documentManagerView);
+        let documentNode = new DockNode(this.context.documentManagerView);
         this.context.model.rootNode = documentNode;
         this.context.model.documentManagerNode = documentNode;
         this.context.model.dialogs = [];
@@ -77,9 +64,9 @@ export class DockManager {
         this.element.addEventListener('keydown', this.onKeyPressBound);
     }
     onKeyPress(e) {
-        if (e.key == 'Escape' && this.activePanel && !this.activePanel._hideCloseButton) {
+        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;
+                let panel = this.activePanel;
                 this.activePanel = null;
                 panel.close();
             }
@@ -88,21 +75,21 @@ export class DockManager {
     checkXBounds(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast) {
         if (this._config.moveOnlyWithinDockConatiner)
             return this.checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast);
-        const rect = this.element.getBoundingClientRect();
+        let 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);
+        let leftBounds = container.offsetLeft + container.offsetWidth + dx + rect.left < 40; // || (container.offsetLeft + container.offsetWidth + dx - 40 ) < 0;
+        let 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);
+            let 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;
+            let d = (window.innerWidth - 40) - container.offsetLeft - rect.left;
             if (d > 0)
                 dx = d;
         }
@@ -110,10 +97,10 @@ export class DockManager {
     }
     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;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let leftBounds = dx < 0 && bbInner.left + dx < bbOuter.left && !resizeEast;
+        let rightBounds = dx > 0 && bbInner.right + dx > bbOuter.right && !resizeWest;
         if (leftBounds) {
             currentMousePosition.x -= dx;
             dx = bbOuter.left - bbInner.left;
@@ -129,10 +116,10 @@ export class DockManager {
     checkYBounds(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth) {
         if (this._config.moveOnlyWithinDockConatiner)
             return this.checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth);
-        const rect = this.element.getBoundingClientRect();
+        let 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);
+        let topBounds = container.offsetTop + dy + rect.top < 0;
+        let bottomBounds = container.offsetTop + dy + rect.top > (window.innerHeight - 16);
         if (topBounds) {
             previousMousePosition.y = currentMousePosition.y;
             dy = 0;
@@ -140,7 +127,7 @@ export class DockManager {
         else if (bottomBounds) {
             previousMousePosition.y = currentMousePosition.y;
             dy = 0;
-            const d = (window.innerHeight - 16) - container.offsetTop - rect.top;
+            let d = (window.innerHeight - 16) - container.offsetTop - rect.top;
             if (d > 0)
                 dy = d;
         }
@@ -148,10 +135,10 @@ export class DockManager {
     }
     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;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let topBounds = dy < 0 && bbInner.top + dy < bbOuter.top && !resizeSouth;
+        let bottomBounds = dy > 0 && bbInner.bottom + dy > bbOuter.bottom && !resizeNorth;
         if (topBounds) {
             currentMousePosition.y -= dy;
             dy = bbOuter.top - bbInner.top;
@@ -177,9 +164,8 @@ export class DockManager {
         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) {
+        let offsetX = 0, offsetY = 0;
+        for (let 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;
@@ -190,8 +176,8 @@ export class DockManager {
         }
     }
     /**
-       * Reset the dock model . This happens when the state is loaded from json
-       */
+     * 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;
@@ -206,7 +192,7 @@ export class DockManager {
             node.container.setActiveChild(child.container);
         });
         node.children.reverse();
-        const container = node.container;
+        let container = node.container;
         node.container.resize(container.state.width, container.state.height);
         // node.performLayout();
     }
@@ -259,17 +245,17 @@ export class DockManager {
         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
-       */
+     * 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 = [];
+        let stack = [];
         stack.push(this.context.model.rootNode);
         let bestMatch;
         while (stack.length > 0) {
-            const topNode = stack.pop();
+            let topNode = stack.pop();
             if (Utils.isPointInsideNode(x, y, topNode)) {
                 // This node contains the point.
                 bestMatch = topNode;
@@ -333,21 +319,21 @@ export class DockManager {
             return retdiag;
         //try to undock just in case
         try {
-            const node = this._findNodeFromContainer(container);
+            let node = this._findNodeFromContainer(container);
             this.layoutEngine.undock(node);
         }
         catch (err) { }
-        const panel = container;
+        let panel = container;
         Utils.removeNode(panel.elementPanel);
         panel.isDialog = true;
-        const dialog = new Dialog(panel, this, grayoutParent, disableResize);
+        let 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);
+        let panel = dialog.panel;
+        let newNode = new DockNode(panel);
         panel.prepareForDocking();
         panel.elementContentContainer.style.zIndex = '';
         dialog.destroy();
@@ -357,34 +343,37 @@ export class DockManager {
     }
     _checkShowBackgroundContext() {
         if (this.backgroundContext != null) {
-            if (this.context.model.documentManagerNode.children.length > 0)
-                this.backgroundContext.style.display = 'none';
-            else
-                this.backgroundContext.style.display = 'block';
+            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);
+        let newNode = new DockNode(container);
         if (container.containerType === 'panel') {
-            const panel = container;
+            let panel = container;
             panel.prepareForDocking();
             Utils.removeNode(panel.elementPanel);
         }
         let ratios = null;
         let oldSplitter;
-        if (referenceNode?.parent && referenceNode.parent.container) {
+        if ((referenceNode === null || referenceNode === void 0 ? void 0 : 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;
+            let splitter = newNode.parent.container;
             if (ratios && oldSplitter == splitter) {
                 if (dockedToPrevious) {
-                    for (let i = 0; i < ratios.length; i++)
+                    for (let i = 0; i < ratios.length; i++) {
                         ratios[i] = ratios[i] - ratios[i] * ratio;
+                    }
                     ratios.push(ratio);
                 }
                 else {
@@ -402,25 +391,25 @@ export class DockManager {
         return newNode;
     }
     _requestTabReorder(container, e) {
-        const node = this._findNodeFromContainer(container);
+        let 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
-       */
+     * 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);
+        let node = this._findNodeFromContainer(container);
         this.layoutEngine.undock(node);
-        const panelContainer = node.container;
+        let panelContainer = node.container;
         panelContainer.elementPanel.style.display = 'block';
         // Create a new dialog window for the undocked panel
-        const dialog = new Dialog(panelContainer, this, null);
+        let 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;
+            let dialogWidth = dialog.elementDialog.clientWidth;
             if (dragOffset.x > dialogWidth)
                 dragOffset.x = 0.75 * dialogWidth;
             dialog.setPosition(event.clientX - dragOffset.x, event.clientY - dragOffset.y);
@@ -429,10 +418,10 @@ export class DockManager {
         return dialog;
     }
     /**
-      * closes a Panel
-      */
+    * closes a Panel
+    */
     requestClose(container) {
-        const node = this._findNodeFromContainer(container);
+        let node = this._findNodeFromContainer(container);
         this.layoutEngine.close(node);
         if (this.activePanel == container)
             this.activePanel = null;
@@ -443,15 +432,15 @@ export class DockManager {
         }
     }
     /**
-       * Opens a Element in a Dialog
-       * It is assumed that only leaf nodes (panels) can be undocked
-       */
+     * 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);
+        let dialog = new Dialog(container, this, null, disableResize);
         if (event != null) {
             // Adjust the relative position
-            const dialogWidth = dialog.elementDialog.clientWidth;
+            let dialogWidth = dialog.elementDialog.clientWidth;
             if (dragOffset.x > dialogWidth)
                 dragOffset.x = 0.75 * dialogWidth;
             dialog.setPosition(event.clientX - dragOffset.x, event.clientY - dragOffset.y);
@@ -460,34 +449,35 @@ export class DockManager {
         return dialog;
     }
     /** Undocks a panel and converts it into a floating dialog window
-       * It is assumed that only leaf nodes (panels) can be undocked
-       */
+     * It is assumed that only leaf nodes (panels) can be undocked
+     */
     requestUndock(container) {
-        const node = this._findNodeFromContainer(container);
+        let 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
-       */
+     * 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;
+        let node = this._findNodeFromContainer(container);
+        let parent = node.parent;
         node.detachFromParent();
         if (parent)
             this.rebuildLayout(parent);
         return node;
     }
     getNodeByElementId(id) {
-        const stack = [];
+        var _a, _b;
+        let stack = [];
         stack.push(this.context.model.rootNode);
         while (stack.length > 0) {
-            const topNode = stack.pop();
+            let 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)
+                    if (((_b = (_a = topNode.container.elementContent.assignedElements()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) === id)
                         return topNode;
                 }
             }
@@ -496,15 +486,16 @@ export class DockManager {
         return null;
     }
     getNodeByElement(element) {
-        const stack = [];
+        var _a;
+        let stack = [];
         stack.push(this.context.model.rootNode);
         while (stack.length > 0) {
-            const topNode = stack.pop();
+            let 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)
+                    if (((_a = topNode.container.elementContent.assignedElements()) === null || _a === void 0 ? void 0 : _a[0]) === element)
                         return topNode;
                 }
             }
@@ -514,10 +505,13 @@ export class DockManager {
     }
     /** Finds the node that owns the specified [container] */
     _findNodeFromContainer(container) {
-        const stack = [];
+        //@ts-ignore
+        if (!container.title)
+            return this.findNodeFromContainerElement(container.containerElement);
+        let stack = [];
         stack.push(this.context.model.rootNode);
         while (stack.length > 0) {
-            const topNode = stack.pop();
+            let topNode = stack.pop();
             //@ts-ignore
             if (topNode.container.title === container.title)
                 return topNode;
@@ -526,10 +520,10 @@ export class DockManager {
         return null;
     }
     findNodeFromContainerElement(containerElement) {
-        const stack = [];
+        let stack = [];
         stack.push(this.context.model.rootNode);
         while (stack.length > 0) {
-            const topNode = stack.pop();
+            let topNode = stack.pop();
             if (topNode.container.containerElement === containerElement)
                 return topNode;
             [].push.apply(stack, topNode.children);
@@ -565,15 +559,17 @@ export class DockManager {
     }
     notifyOnTabsReorder(dockNode) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onTabsReorder)
+            if (listener.onTabsReorder) {
                 listener.onTabsReorder(this, dockNode);
+            }
         });
     }
     notifyOnUnDock(dockNode) {
         this._checkShowBackgroundContext();
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onUndock)
+            if (listener.onUndock) {
                 listener.onUndock(this, dockNode);
+            }
         });
     }
     notifyOnClosePanel(panel) {
@@ -586,69 +582,80 @@ export class DockManager {
             this.notifyOnActiveDocumentChange(null, last);
         }
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onClosePanel)
+            if (listener.onClosePanel) {
                 listener.onClosePanel(this, panel);
+            }
         });
     }
     notifyOnCreateDialog(dialog) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onCreateDialog)
+            if (listener.onCreateDialog) {
                 listener.onCreateDialog(this, dialog);
+            }
         });
     }
     notifyOnHideDialog(dialog) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onHideDialog)
+            if (listener.onHideDialog) {
                 listener.onHideDialog(this, dialog);
+            }
         });
     }
     notifyOnShowDialog(dialog) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onShowDialog)
+            if (listener.onShowDialog) {
                 listener.onShowDialog(this, dialog);
+            }
         });
     }
     notifyOnChangeDialogPosition(dialog, x, y) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onChangeDialogPosition)
+            if (listener.onChangeDialogPosition) {
                 listener.onChangeDialogPosition(this, dialog, x, y);
+            }
         });
     }
     notifyOnContainerResized(dockContainer) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onContainerResized)
+            if (listener.onContainerResized) {
                 listener.onContainerResized(this, dockContainer);
+            }
         });
     }
     notifyOnTabChange(tabpage) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onTabChanged)
+            if (listener.onTabChanged) {
                 listener.onTabChanged(this, tabpage);
+            }
         });
     }
     notifyOnActivePanelChange(panel, oldActive) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onActivePanelChange)
+            if (listener.onActivePanelChange) {
                 listener.onActivePanelChange(this, panel, oldActive);
+            }
         });
     }
     notifyOnActiveDocumentChange(panel, oldActive) {
         this.layoutEventListeners.forEach((listener) => {
-            if (listener.onActiveDocumentChange)
+            if (listener.onActiveDocumentChange) {
                 listener.onActiveDocumentChange(this, panel, oldActive);
+            }
         });
     }
     saveState() {
-        const serializer = new DockGraphSerializer();
+        let 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);
+    loadState(json) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let deserializer = new DockGraphDeserializer(this);
+            this.context.model = yield deserializer.deserialize(json);
+            this.setModel(this.context.model);
+        });
     }
     getPanels() {
-        const panels = [];
+        let panels = [];
         //all visible nodes
         this._allPanels(this.context.model.rootNode, panels);
         //all visible or not dialogs
@@ -674,30 +681,34 @@ export class DockManager {
         });
     }
     updatePanels(ids) {
-        const panels = [];
+        let panels = [];
         //all visible nodes
         this._allPanels(this.context.model.rootNode, panels);
         //only remove
         panels.forEach((panel) => {
-            if (!Utils.arrayContains(ids, panel.elementContent.id))
+            if (!Utils.arrayContains(ids, panel.elementContent.id)) {
                 panel.close();
+            }
         });
         this.context.model.dialogs.forEach((dialog) => {
-            if (Utils.arrayContains(ids, dialog.panel.elementContent.id))
+            if (Utils.arrayContains(ids, dialog.panel.elementContent.id)) {
                 dialog.show();
-            else
+            }
+            else {
                 dialog.hide();
+            }
         });
         return panels;
     }
     getVisiblePanels() {
-        const panels = [];
+        let panels = [];
         //all visible nodes
         this._allPanels(this.context.model.rootNode, panels);
         //all visible
         this.context.model.dialogs.forEach((dialog) => {
-            if (!dialog.isHidden)
+            if (!dialog.isHidden) {
                 panels.push(dialog.panel);
+            }
         });
         return panels;
     }
@@ -705,8 +716,9 @@ export class DockManager {
         node.children.forEach((child) => {
             this._allPanels(child, panels);
         });
-        if (node.container.containerType === 'panel')
+        if (node.container.containerType === 'panel') {
             panels.push(node.container);
+        }
     }
     get activeDocument() {
         return this._activeDocument;
@@ -720,34 +732,39 @@ export class DockManager {
                 this._lastPanelNotADialog = value;
             if (this._lastPanelNotADialog && this.getPanels().indexOf(this._lastPanelNotADialog) < 0)
                 this._lastPanelNotADialog = null;
-            const oldActive = this.activePanel;
+            let 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.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)
+            let 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)
+            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.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)
+            if (value && value.tabPage) {
                 value.tabPage.host.setActive(true);
+            }
         }
     }
 }