dockview/dist/esm/hostedContainer.js

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support

import { trackFocus } from './dom';
import { Emitter } from './events';
export class HostedContainer {
    constructor(options) {
        this.options = options;
        this._onDidFocus = new Emitter();
        this.onDidFocus = this._onDidFocus.event;
        this._onDidBlur = new Emitter();
        this.onDidBlur = this._onDidBlur.event;
        if (!options.parent) {
            options.parent = document.getElementById('app');
            options.parent.style.position = 'relative';
        }
        this._element = document.createElement('div');
        this._element.style.visibility = 'hidden';
        this._element.style.overflow = 'hidden';
        // this._element.style.pointerEvents = 'none';
        this._element.id = `webview-${options.id}`;
        this._element.tabIndex = -1;
        const { onDidFocus, onDidBlur } = trackFocus(this._element);
        onDidFocus(() => this._onDidFocus.fire());
        onDidBlur(() => this._onDidBlur.fire());
        /**
         * When dragging somebody
         */
        window.addEventListener('dragstart', (ev) => {
            this.element.style.pointerEvents = 'none';
        });
        window.addEventListener('dragend', (ev) => {
            this.element.style.pointerEvents = '';
        });
        window.addEventListener('mousemove', (ev) => {
            if (ev.buttons === 0) {
                this.element.style.pointerEvents = '';
            }
        });
        options.parent.appendChild(this._element);
    }
    get element() {
        return this._element;
    }
    hide() {
        this._element.style.visibility = 'hidden';
    }
    show() {
        this._element.style.visibility = 'visible';
    }
    layout(element, dimension) {
        if (!this.element || !this.element.parentElement) {
            return;
        }
        const frameRect = element.getBoundingClientRect();
        const containerRect = this.element.parentElement.getBoundingClientRect();
        this.element.style.position = 'absolute';
        this.element.style.top = `${frameRect.top - containerRect.top}px`;
        this.element.style.left = `${frameRect.left - containerRect.left}px`;
        this.element.style.width = `${dimension ? dimension.width : frameRect.width}px`;
        this.element.style.height = `${dimension ? dimension.height : frameRect.height}px`;
    }
    dispose() {
        this._element.remove();
    }
}