@datagrok-libraries/dock-spawn-dg 0.0.1

package/lib/ResizableContainer.js

@@ -0,0 +1,254 @@
+import { ResizeHandle } from "./ResizeHandle.js";
+import { EventHandler } from "./EventHandler.js";
+import { Point } from "./Point.js";
+import { Utils } from "./Utils.js";
+/**
+ * Decorates a dock container with resizer handles around its base element
+ * This enables the container to be resized from all directions
+ */
+export class ResizableContainer {
+    topLevelElement;
+    dialog;
+    delegate;
+    dockManager;
+    containerElement;
+    containerType;
+    minimumAllowedChildNodes;
+    readyToProcessNextResize;
+    dockSpawnResizedEvent;
+    resizeHandles;
+    previousMousePosition;
+    iframeEventHandlers;
+    disableResize;
+    constructor(dialog, delegate, topLevelElement, disableResize = false) {
+        this.dialog = dialog;
+        this.disableResize = disableResize;
+        this.delegate = delegate;
+        this.containerElement = delegate.containerElement;
+        this.dockManager = delegate.dockManager;
+        this.topLevelElement = topLevelElement;
+        this.containerType = delegate.containerType;
+        this.topLevelElement.style.left = this.topLevelElement.offsetLeft + 'px';
+        this.topLevelElement.style.top = this.topLevelElement.offsetTop + 'px';
+        this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
+        this._buildResizeHandles();
+        this.readyToProcessNextResize = true;
+        this.dockSpawnResizedEvent = new CustomEvent("DockSpawnResizedEvent", { composed: true, bubbles: true });
+        this.iframeEventHandlers = [];
+    }
+    setActiveChild( /*child*/) {
+    }
+    _buildResizeHandles() {
+        this.resizeHandles = [];
+        //    this._buildResizeHandle(true, false, true, false); // Dont need the corner resizer near the close button
+        if (!this.disableResize) {
+            this._buildResizeHandle(false, true, true, false);
+            this._buildResizeHandle(true, false, false, true);
+            this._buildResizeHandle(false, true, false, true);
+            this._buildResizeHandle(true, false, false, false);
+            this._buildResizeHandle(false, true, false, false);
+            this._buildResizeHandle(false, false, true, false);
+            this._buildResizeHandle(false, false, false, true);
+        }
+    }
+    _buildResizeHandle(east, west, north, south) {
+        let handle = new ResizeHandle();
+        handle.east = east;
+        handle.west = west;
+        handle.north = north;
+        handle.south = south;
+        // Create an invisible div for the handle
+        handle.element = document.createElement('div');
+        this.topLevelElement.appendChild(handle.element);
+        // Build the class name for the handle
+        let verticalClass = '';
+        let horizontalClass = '';
+        if (north)
+            verticalClass = 'n';
+        if (south)
+            verticalClass = 's';
+        if (east)
+            horizontalClass = 'e';
+        if (west)
+            horizontalClass = 'w';
+        let cssClass = 'resize-handle-' + verticalClass + horizontalClass;
+        if (verticalClass.length > 0 && horizontalClass.length > 0)
+            handle.corner = true;
+        handle.element.classList.add(handle.corner ? 'resize-handle-corner' : 'resize-handle');
+        handle.element.classList.add(cssClass);
+        this.resizeHandles.push(handle);
+        handle.mouseDownHandler = new EventHandler(handle.element, 'mousedown', (e) => { this.onMouseDown(handle, e); });
+        handle.touchDownHandler = new EventHandler(handle.element, 'touchstart', (e) => { this.onMouseDown(handle, e); });
+    }
+    saveState(state) {
+        this.delegate.saveState(state);
+    }
+    loadState(state) {
+        this.delegate.loadState(state);
+    }
+    get width() {
+        return this.delegate.width;
+    }
+    get height() {
+        return this.delegate.height;
+    }
+    get name() {
+        return this.delegate.name;
+    }
+    set name(value) {
+        if (value)
+            this.delegate.name = value;
+    }
+    resize(width, height) {
+        this.delegate.resize(width, height);
+        this._adjustResizeHandles(width, height);
+        document.dispatchEvent(this.dockSpawnResizedEvent);
+    }
+    _adjustResizeHandles(width, height) {
+        this.resizeHandles.forEach((handle) => {
+            handle.adjustSize(width, height);
+        });
+    }
+    performLayout(children) {
+        this.delegate.performLayout(children, false);
+    }
+    destroy() {
+        this.removeDecorator();
+        this.delegate.destroy();
+    }
+    removeDecorator() {
+    }
+    onMouseMovedIframe(handle, e, iframe) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMoved(handle, e, { x: posIf.x, y: posIf.y });
+    }
+    onMouseMoved(handle, event, iframeOffset) {
+        let touchOrMouseData = null;
+        if (event.changedTouches) {
+            if (event.changedTouches.length > 1)
+                return;
+            touchOrMouseData = event.changedTouches[0];
+        }
+        else {
+            touchOrMouseData = event;
+        }
+        if (!this.readyToProcessNextResize)
+            return;
+        this.readyToProcessNextResize = false;
+        if (this.dialog.panel)
+            this.dockManager.suspendLayout(this.dialog.panel);
+        let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(touchOrMouseData.clientX + iframeOffset.x, touchOrMouseData.clientY + iframeOffset.y);
+        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.west, handle.east);
+        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.north, handle.south);
+        this._performDrag(handle, dx, dy);
+        this.previousMousePosition = currentMousePosition;
+        this.readyToProcessNextResize = true;
+        if (this.dialog.panel)
+            this.dockManager.resumeLayout(this.dialog.panel);
+        this.dockManager.notifyOnContainerResized(this);
+    }
+    onMouseDown(handle, event) {
+        let touchOrMouseData = null;
+        if (event.touches) {
+            if (event.touches.length > 1)
+                return;
+            touchOrMouseData = event.touches[0];
+        }
+        else {
+            touchOrMouseData = event;
+        }
+        this.previousMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (handle.mouseMoveHandler) {
+            handle.mouseMoveHandler.cancel();
+            delete handle.mouseMoveHandler;
+        }
+        if (handle.touchMoveHandler) {
+            handle.touchMoveHandler.cancel();
+            delete handle.touchMoveHandler;
+        }
+        if (handle.mouseUpHandler) {
+            handle.mouseUpHandler.cancel();
+            delete handle.mouseUpHandler;
+        }
+        if (handle.touchUpHandler) {
+            handle.touchUpHandler.cancel();
+            delete handle.touchUpHandler;
+        }
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
+        // Create the mouse event handlers
+        handle.mouseMoveHandler = new EventHandler(window, 'mousemove', (e) => { this.onMouseMoved(handle, e); });
+        handle.touchMoveHandler = new EventHandler(window, 'touchmove', (e) => { this.onMouseMoved(handle, e); });
+        handle.mouseUpHandler = new EventHandler(window, 'mouseup', (e) => { this.onMouseUp(handle); });
+        handle.touchUpHandler = new EventHandler(window, 'touchend', (e) => { this.onMouseUp(handle); });
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mousemove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mouseup', (e) => this.onMouseUp(handle)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchmove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchend', (e) => this.onMouseUp(handle)));
+            }
+        }
+        Utils.disableGlobalTextSelection(this.dockManager.config.dialogRootElement);
+    }
+    onMouseUp(handle) {
+        handle.mouseMoveHandler.cancel();
+        handle.touchMoveHandler.cancel();
+        handle.mouseUpHandler.cancel();
+        handle.touchUpHandler.cancel();
+        delete handle.mouseMoveHandler;
+        delete handle.touchMoveHandler;
+        delete handle.mouseUpHandler;
+        delete handle.touchUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
+        Utils.enableGlobalTextSelection(this.dockManager.config.dialogRootElement);
+    }
+    _performDrag(handle, dx, dy) {
+        let bounds = {};
+        bounds.left = Utils.getPixels(this.topLevelElement.style.left);
+        bounds.top = Utils.getPixels(this.topLevelElement.style.top);
+        bounds.width = this.topLevelElement.clientWidth;
+        bounds.height = this.topLevelElement.clientHeight;
+        if (handle.east)
+            this._resizeEast(dx, bounds);
+        if (handle.west)
+            this._resizeWest(dx, bounds);
+        if (handle.north)
+            this._resizeNorth(dy, bounds);
+        if (handle.south)
+            this._resizeSouth(dy, bounds);
+    }
+    _resizeWest(dx, bounds) {
+        this._resizeContainer(dx, 0, -dx, 0, bounds);
+    }
+    _resizeEast(dx, bounds) {
+        this._resizeContainer(0, 0, dx, 0, bounds);
+    }
+    _resizeNorth(dy, bounds) {
+        this._resizeContainer(0, dy, 0, -dy, bounds);
+    }
+    _resizeSouth(dy, bounds) {
+        this._resizeContainer(0, 0, 0, dy, bounds);
+    }
+    _resizeContainer(leftDelta, topDelta, widthDelta, heightDelta, bounds) {
+        bounds.left += leftDelta;
+        bounds.top += topDelta;
+        bounds.width += widthDelta;
+        bounds.height += heightDelta;
+        let minWidth = 50; // TODO: Move to external configuration
+        let minHeight = 50; // TODO: Move to external configuration
+        bounds.width = Math.max(bounds.width, minWidth);
+        bounds.height = Math.max(bounds.height, minHeight);
+        this.topLevelElement.style.left = bounds.left + 'px';
+        this.topLevelElement.style.top = bounds.top + 'px';
+        this.resize(bounds.width, bounds.height);
+    }
+}

package/lib/ResizeHandle.d.ts

@@ -0,0 +1,16 @@
+import { EventHandler } from "./EventHandler.js";
+export declare class ResizeHandle {
+    element: HTMLElement;
+    handleSize: number;
+    cornerSize: number;
+    east: boolean;
+    west: boolean;
+    north: boolean;
+    south: boolean;
+    corner: boolean;
+    mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
+    constructor();
+    adjustSize(clientWidth: number, clientHeight: number): void;
+}
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/lib/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../src/ResizeHandle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,qBAAa,YAAY;IAErB,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,YAAY,CAAC;IAC/B,gBAAgB,EAAE,YAAY,CAAC;;IAa/B,UAAU,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM;CAgCvD"}

package/lib/ResizeHandle.js

@@ -0,0 +1,58 @@
+export class ResizeHandle {
+    element;
+    handleSize;
+    cornerSize;
+    east;
+    west;
+    north;
+    south;
+    corner;
+    mouseDownHandler;
+    touchDownHandler;
+    constructor() {
+        this.element = undefined;
+        this.handleSize = 6; // TODO: Get this from DOM
+        this.cornerSize = 12; // TODO: Get this from DOM
+        this.east = false;
+        this.west = false;
+        this.north = false;
+        this.south = false;
+        this.corner = false;
+    }
+    adjustSize(clientWidth, clientHeight) {
+        if (this.corner) {
+            if (this.west)
+                this.element.style.left = '0px';
+            if (this.east)
+                this.element.style.left = (clientWidth - this.cornerSize) + 'px';
+            if (this.north)
+                this.element.style.top = '0px';
+            if (this.south)
+                this.element.style.top = (clientHeight - this.cornerSize) + 'px';
+        }
+        else {
+            if (this.west) {
+                this.element.style.left = '0px';
+                this.element.style.top = this.cornerSize + 'px';
+            }
+            if (this.east) {
+                this.element.style.left = (clientWidth - this.handleSize) + 'px';
+                this.element.style.top = this.cornerSize + 'px';
+            }
+            if (this.north) {
+                this.element.style.left = this.cornerSize + 'px';
+                this.element.style.top = '0px';
+            }
+            if (this.south) {
+                this.element.style.left = this.cornerSize + 'px';
+                this.element.style.top = (clientHeight - this.handleSize) + 'px';
+            }
+            if (this.west || this.east) {
+                this.element.style.height = (clientHeight - this.cornerSize * 2) + 'px';
+            }
+            else {
+                this.element.style.width = (clientWidth - this.cornerSize * 2) + 'px';
+            }
+        }
+    }
+}

package/lib/SplitterBar.d.ts

@@ -0,0 +1,33 @@
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { EventHandler } from "./EventHandler.js";
+import { IMouseOrTouchEvent } from "./interfaces/IMouseOrTouchEvent.js";
+export declare class SplitterBar {
+    previousContainer: IDockContainer;
+    nextContainer: IDockContainer;
+    stackedVertical: boolean;
+    barElement: HTMLDivElement;
+    pointerDownHandler: EventHandler;
+    minPanelSize: number;
+    readyToProcessNextDrag: boolean;
+    dockSpawnResizedEvent: CustomEvent<{}>;
+    previousMouseEvent: {
+        x: number;
+        y: number;
+    };
+    pointerMovedHandler: EventHandler;
+    pointerUpHandler: EventHandler;
+    private iframeEventHandlers;
+    constructor(previousContainer: IDockContainer, nextContainer: IDockContainer, stackedVertical: boolean);
+    onPointerDown(e: PointerEvent): void;
+    onPointerUp(e: PointerEvent): void;
+    onPointerMovedIframe(e: IMouseOrTouchEvent, iframe: HTMLIFrameElement): void;
+    onPointerMoved(e: IMouseOrTouchEvent): void;
+    handleMoveEvent(pos: {
+        x: number;
+        y: number;
+    }): void;
+    _performDrag(dx: number, dy: number): void;
+    _startDragging(e: IMouseOrTouchEvent): void;
+    _stopDragging(): void;
+}
+//# sourceMappingURL=SplitterBar.d.ts.map

package/lib/SplitterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitterBar.d.ts","sourceRoot":"","sources":["../src/SplitterBar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,qBAAa,WAAW;IACpB,iBAAiB,EAAE,cAAc,CAAC;IAClC,aAAa,EAAE,cAAc,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,kBAAkB,EAAE,YAAY,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,OAAO,CAAC;IAChC,qBAAqB,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;IACvC,kBAAkB,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,mBAAmB,EAAE,YAAY,CAAC;IAClC,gBAAgB,EAAE,YAAY,CAAC;IAE/B,OAAO,CAAC,mBAAmB,CAAiB;gBAEhC,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,OAAO;IAetG,aAAa,CAAC,CAAC,EAAE,YAAY;IAK7B,WAAW,CAAC,CAAC,EAAE,YAAY;IAK3B,oBAAoB,CAAC,CAAC,EAAE,kBAAkB,EAAE,MAAM,EAAE,iBAAiB;IAQrE,cAAc,CAAC,CAAC,EAAE,kBAAkB;IAOpC,eAAe,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAiB7C,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;IAwCnC,cAAc,CAAC,CAAC,EAAE,kBAAkB;IAwBpC,aAAa;CAehB"}

package/lib/SplitterBar.js

@@ -0,0 +1,137 @@
+import { EventHandler } from "./EventHandler.js";
+import { Utils } from "./Utils.js";
+export class SplitterBar {
+    previousContainer;
+    nextContainer;
+    stackedVertical;
+    barElement;
+    pointerDownHandler;
+    minPanelSize;
+    readyToProcessNextDrag;
+    dockSpawnResizedEvent;
+    previousMouseEvent;
+    pointerMovedHandler;
+    pointerUpHandler;
+    iframeEventHandlers;
+    constructor(previousContainer, nextContainer, stackedVertical) {
+        // The panel to the left/top side of the bar, depending on the bar orientation
+        this.previousContainer = previousContainer;
+        // The panel to the right/bottom side of the bar, depending on the bar orientation
+        this.nextContainer = nextContainer;
+        this.stackedVertical = stackedVertical;
+        this.barElement = document.createElement('div');
+        this.barElement.classList.add(stackedVertical ? 'splitbar-horizontal' : 'splitbar-vertical');
+        this.pointerDownHandler = new EventHandler(this.barElement, 'pointerdown', this.onPointerDown.bind(this));
+        this.minPanelSize = 50; // TODO: Get from container configuration
+        this.readyToProcessNextDrag = true;
+        this.dockSpawnResizedEvent = new CustomEvent("DockSpawnResizedEvent", { composed: true, bubbles: true });
+        this.iframeEventHandlers = [];
+    }
+    onPointerDown(e) {
+        this.barElement.setPointerCapture(e.pointerId);
+        this._startDragging(e);
+    }
+    onPointerUp(e) {
+        this.barElement.releasePointerCapture(e.pointerId);
+        this._stopDragging();
+    }
+    onPointerMovedIframe(e, iframe) {
+        if (e.changedTouches != null) {
+            e = e.changedTouches[0];
+        }
+        let posIf = iframe.getBoundingClientRect();
+        this.handleMoveEvent({ x: parseInt("" + e.clientX + posIf.x), y: parseInt("" + e.clientY + posIf.y) });
+    }
+    onPointerMoved(e) {
+        if (e.changedTouches != null) {
+            e = e.changedTouches[0];
+        }
+        this.handleMoveEvent({ x: parseInt("" + e.clientX), y: parseInt("" + e.clientY) });
+    }
+    handleMoveEvent(pos) {
+        if (!this.readyToProcessNextDrag)
+            return;
+        this.readyToProcessNextDrag = false;
+        let dockManager = this.previousContainer.dockManager;
+        dockManager.suspendLayout(this.previousContainer);
+        dockManager.suspendLayout(this.nextContainer);
+        let dx = pos.x - this.previousMouseEvent.x;
+        let dy = pos.y - this.previousMouseEvent.y;
+        this._performDrag(dx, dy);
+        this.previousMouseEvent = pos;
+        this.readyToProcessNextDrag = true;
+        dockManager.resumeLayout(this.previousContainer);
+        dockManager.resumeLayout(this.nextContainer);
+    }
+    _performDrag(dx, dy) {
+        let previousWidth = this.previousContainer.containerElement.clientWidth;
+        let previousHeight = this.previousContainer.containerElement.clientHeight;
+        let nextWidth = this.nextContainer.containerElement.clientWidth;
+        let nextHeight = this.nextContainer.containerElement.clientHeight;
+        let previousPanelSize = this.stackedVertical ? previousHeight : previousWidth;
+        let nextPanelSize = this.stackedVertical ? nextHeight : nextWidth;
+        let deltaMovement = this.stackedVertical ? dy : dx;
+        let newPreviousPanelSize = previousPanelSize + deltaMovement;
+        let newNextPanelSize = nextPanelSize - deltaMovement;
+        if (newPreviousPanelSize < this.minPanelSize || newNextPanelSize < this.minPanelSize) {
+            // One of the panels is smaller than it should be.
+            // In that case, check if the small panel's size is being increased
+            let continueProcessing = (newPreviousPanelSize < this.minPanelSize && newPreviousPanelSize > previousPanelSize) ||
+                (newNextPanelSize < this.minPanelSize && newNextPanelSize > nextPanelSize);
+            if (!continueProcessing)
+                return;
+        }
+        if (this.stackedVertical) {
+            this.previousContainer.resize(previousWidth, newPreviousPanelSize);
+            this.nextContainer.resize(nextWidth, newNextPanelSize);
+        }
+        else {
+            if (deltaMovement < 0) {
+                this.previousContainer.resize(newPreviousPanelSize, previousHeight);
+                this.nextContainer.resize(newNextPanelSize, nextHeight);
+            }
+            else {
+                this.nextContainer.resize(newNextPanelSize, nextHeight);
+                this.previousContainer.resize(newPreviousPanelSize, previousHeight);
+                this.nextContainer.resize(newNextPanelSize, nextHeight);
+            }
+        }
+        document.dispatchEvent(this.dockSpawnResizedEvent);
+    }
+    _startDragging(e) {
+        Utils.disableGlobalTextSelection(this.previousContainer.dockManager.config.dialogRootElement);
+        if (this.pointerMovedHandler) {
+            this.pointerMovedHandler.cancel();
+            delete this.pointerMovedHandler;
+        }
+        if (this.pointerUpHandler) {
+            this.pointerUpHandler.cancel();
+            delete this.pointerUpHandler;
+        }
+        this.pointerMovedHandler = new EventHandler(window, 'pointermove', this.onPointerMoved.bind(this));
+        this.pointerUpHandler = new EventHandler(window, 'pointerup', this.onPointerUp.bind(this));
+        if (this.previousContainer.dockManager.iframes) {
+            for (let f of this.previousContainer.dockManager.iframes) {
+                let mmi = this.onPointerMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'pointermove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'pointerup', this.onPointerUp.bind(this)));
+            }
+        }
+        this.previousMouseEvent = { x: e.clientX, y: e.clientY };
+    }
+    _stopDragging() {
+        Utils.enableGlobalTextSelection(this.previousContainer.dockManager.config.dialogRootElement);
+        if (this.pointerMovedHandler) {
+            this.pointerMovedHandler.cancel();
+            delete this.pointerMovedHandler;
+        }
+        if (this.pointerUpHandler) {
+            this.pointerUpHandler.cancel();
+            delete this.pointerUpHandler;
+        }
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
+    }
+}

package/lib/SplitterDockContainer.d.ts

@@ -0,0 +1,36 @@
+import { DockManager } from "./DockManager.js";
+import { SplitterPanel } from "./SplitterPanel.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { ContainerType } from "./ContainerType.js";
+import { ISize } from "./interfaces/ISize.js";
+import { IDockContainerWithSize } from "./interfaces/IDockContainerWithSize.js";
+import { IState } from "./interfaces/IState.js";
+export declare abstract class SplitterDockContainer implements IDockContainerWithSize {
+    name: string;
+    dockManager: DockManager;
+    minimumAllowedChildNodes: number;
+    splitterPanel: SplitterPanel;
+    stackedVertical: boolean;
+    containerElement: HTMLDivElement;
+    _cachedWidth: number;
+    _cachedHeight: number;
+    state: ISize;
+    containerType: ContainerType;
+    constructor(name: string, dockManager: DockManager, childContainers: IDockContainer[], stackedVertical: boolean);
+    resize(width: number, height: number): void;
+    performLayout(childContainers: IDockContainer[], relayoutEvenIfEqual?: boolean): void;
+    setActiveChild(): void;
+    destroy(): void;
+    /**
+     * Sets the percentage of space the specified [container] takes in the split panel
+     * The percentage is specified in [ratio] and is between 0..1
+     */
+    setContainerRatio(container: IDockContainer, ratio: number): void;
+    getRatios(): number[];
+    setRatios(ratios: number[]): void;
+    saveState(state: IState): void;
+    loadState(state: IState): void;
+    get width(): number;
+    get height(): number;
+}
+//# sourceMappingURL=SplitterDockContainer.d.ts.map

package/lib/SplitterDockContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitterDockContainer.d.ts","sourceRoot":"","sources":["../src/SplitterDockContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,8BAAsB,qBAAsB,YAAW,sBAAsB;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,cAAc,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,aAAa,CAAC;gBAEjB,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,eAAe,EAAE,OAAO;IAc/G,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAUpC,aAAa,CAAC,eAAe,EAAE,cAAc,EAAE,EAAE,mBAAmB,GAAE,OAAe;IAIrF,cAAc;IAGd,OAAO;IAIP;;;OAGG;IACH,iBAAiB,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM;IAK1D,SAAS,IAAI,MAAM,EAAE;IAIrB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE;IAK1B,SAAS,CAAC,KAAK,EAAE,MAAM;IAKvB,SAAS,CAAC,KAAK,EAAE,MAAM;IAKvB,IAAI,KAAK,IAAI,MAAM,CAIlB;IAED,IAAI,MAAM,IAAI,MAAM,CAInB;CACJ"}

package/lib/SplitterDockContainer.js

@@ -0,0 +1,75 @@
+import { SplitterPanel } from "./SplitterPanel.js";
+export class SplitterDockContainer {
+    name;
+    dockManager;
+    minimumAllowedChildNodes;
+    splitterPanel;
+    stackedVertical;
+    containerElement;
+    _cachedWidth;
+    _cachedHeight;
+    state;
+    containerType;
+    constructor(name, dockManager, childContainers, stackedVertical) {
+        // for prototype inheritance purposes only
+        if (arguments.length === 0) {
+            return;
+        }
+        this.name = name;
+        this.dockManager = dockManager;
+        this.stackedVertical = stackedVertical;
+        this.splitterPanel = new SplitterPanel(childContainers, this.stackedVertical);
+        this.containerElement = this.splitterPanel.panelElement;
+        this.minimumAllowedChildNodes = 2;
+    }
+    resize(width, height) {
+        //    if (_cachedWidth === _cachedWidth && _cachedHeight === _height) {
+        //      // No need to resize
+        //      return;
+        //    }
+        this.splitterPanel.resize(width, height);
+        this._cachedWidth = width;
+        this._cachedHeight = height;
+    }
+    performLayout(childContainers, relayoutEvenIfEqual = false) {
+        this.splitterPanel.performLayout(childContainers, relayoutEvenIfEqual);
+    }
+    setActiveChild( /*child*/) {
+    }
+    destroy() {
+        this.splitterPanel.destroy();
+    }
+    /**
+     * Sets the percentage of space the specified [container] takes in the split panel
+     * The percentage is specified in [ratio] and is between 0..1
+     */
+    setContainerRatio(container, ratio) {
+        this.splitterPanel.setContainerRatio(container, ratio);
+        this.resize(this.width, this.height);
+    }
+    getRatios() {
+        return this.splitterPanel.getRatios();
+    }
+    setRatios(ratios) {
+        this.splitterPanel.setRatios(ratios);
+        this.resize(this.width, this.height);
+    }
+    saveState(state) {
+        state.width = this.width;
+        state.height = this.height;
+    }
+    loadState(state) {
+        this.state = { width: state.width, height: state.height };
+        // this.resize(state.width, state.height);
+    }
+    get width() {
+        if (this._cachedWidth === undefined)
+            this._cachedWidth = this.splitterPanel.panelElement.clientWidth;
+        return this._cachedWidth;
+    }
+    get height() {
+        if (this._cachedHeight === undefined)
+            this._cachedHeight = this.splitterPanel.panelElement.clientHeight;
+        return this._cachedHeight;
+    }
+}

package/lib/SplitterPanel.d.ts

@@ -0,0 +1,27 @@
+import { SplitterBar } from "./SplitterBar.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+/**
+ * A splitter panel manages the child containers inside it with splitter bars.
+ * It can be stacked horizontally or vertically
+ */
+export declare class SplitterPanel {
+    panelElement: HTMLDivElement;
+    spiltterBars: SplitterBar[];
+    stackedVertical: boolean;
+    childContainers: IDockContainer[];
+    constructor(childContainers: IDockContainer[], stackedVertical: boolean);
+    _buildSplitterDOMAndAddElements(): void;
+    performLayout(children: IDockContainer[], relayoutEvenIfEqual: boolean): void;
+    removeFromDOM(): void;
+    destroy(): void;
+    _insertContainerIntoPanel(container: IDockContainer, afterElement: HTMLElement): void;
+    /**
+     * Sets the percentage of space the specified [container] takes in the split panel
+     * The percentage is specified in [ratio] and is between 0..1
+     */
+    setContainerRatio(container: IDockContainer, ratio: number): void;
+    getRatios(): number[];
+    setRatios(ratios: number[]): void;
+    resize(width: number, height: number): void;
+}
+//# sourceMappingURL=SplitterPanel.d.ts.map

package/lib/SplitterPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitterPanel.d.ts","sourceRoot":"","sources":["../src/SplitterPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;;GAGG;AACH,qBAAa,aAAa;IACtB,YAAY,EAAE,cAAc,CAAC;IAC7B,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,cAAc,EAAE,CAAC;gBAEtB,eAAe,EAAE,cAAc,EAAE,EAAE,eAAe,EAAE,OAAO;IAQvE,+BAA+B;IAuB/B,aAAa,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,mBAAmB,EAAE,OAAO;IAqBtE,aAAa;IAWb,OAAO;IAKP,yBAAyB,CAAC,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW;IAsB9E;;;OAGG;IACH,iBAAiB,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM;IAwB1D,SAAS,IAAI,MAAM,EAAE;IAYrB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE;IAa1B,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAsEvC"}