dockview/dist/esm/gridview/basePanelView.js

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

import { trackFocus } from '../dom';
import { CompositeDisposable } from '../lifecycle';
export class BasePanelView extends CompositeDisposable {
    constructor(id, component, api) {
        super();
        this.id = id;
        this.component = component;
        this.api = api;
        this._height = 0;
        this._width = 0;
        this._element = document.createElement('div');
        this._element.tabIndex = -1;
        this._element.style.outline = 'none';
        this._element.style.height = '100%';
        this._element.style.width = '100%';
        this._element.style.overflow = 'hidden';
        const { onDidFocus, onDidBlur } = trackFocus(this._element);
        this.addDisposables(this.api, onDidFocus(() => {
            this.api._onDidChangeFocus.fire({ isFocused: true });
        }), onDidBlur(() => {
            this.api._onDidChangeFocus.fire({ isFocused: false });
        }));
    }
    get element() {
        return this._element;
    }
    get width() {
        return this._width;
    }
    get height() {
        return this._height;
    }
    focus() {
        this.api._onFocusEvent.fire();
    }
    layout(width, height) {
        this._width = width;
        this._height = height;
        this.api._onDidPanelDimensionChange.fire({ width, height });
        if (this.part) {
            if (this.params) {
                this.part.update(this.params.params);
            }
        }
    }
    init(parameters) {
        this.params = parameters;
        this.part = this.getComponent();
    }
    update(event) {
        var _a, _b;
        this.params = Object.assign(Object.assign({}, this.params), { params: Object.assign(Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
        (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this.params.params });
    }
    toJSON() {
        var _a, _b;
        const state = this.api.getState();
        const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
        return {
            id: this.id,
            component: this.component,
            params: Object.keys(params).length > 0 ? params : undefined,
            state: Object.keys(state).length === 0 ? undefined : state,
        };
    }
    dispose() {
        super.dispose();
        this.api.dispose();
    }
}