dockview/dist/cjs/gridview/baseComponentGridview.js

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

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseGrid = exports.toTarget = exports.GroupChangeKind = void 0;
var events_1 = require("../events");
var gridview_1 = require("./gridview");
var droptarget_1 = require("../dnd/droptarget");
var lifecycle_1 = require("../lifecycle");
var math_1 = require("../math");
var splitview_1 = require("../splitview/core/splitview");
var GroupChangeKind;
(function (GroupChangeKind) {
    GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
    GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
    GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
    //
    GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
    GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
    GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
    //
    GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
    GroupChangeKind["LAYOUT"] = "LAYOUT";
})(GroupChangeKind = exports.GroupChangeKind || (exports.GroupChangeKind = {}));
var nextLayoutId = (0, math_1.sequentialNumberGenerator)();
function toTarget(direction) {
    switch (direction) {
        case 'left':
            return droptarget_1.Position.Left;
        case 'right':
            return droptarget_1.Position.Right;
        case 'above':
            return droptarget_1.Position.Top;
        case 'below':
            return droptarget_1.Position.Bottom;
        case 'within':
        default:
            return droptarget_1.Position.Center;
    }
}
exports.toTarget = toTarget;
var BaseGrid = /** @class */ (function (_super) {
    __extends(BaseGrid, _super);
    function BaseGrid(_element, options) {
        var _this = _super.call(this) || this;
        _this._element = _element;
        _this._id = nextLayoutId.next();
        _this._groups = new Map();
        //
        _this._onGridEvent = new events_1.Emitter();
        _this.onGridEvent = _this._onGridEvent.event;
        _this._onDidLayoutChange = new events_1.Emitter();
        _this.onDidLayoutChange = _this._onDidLayoutChange.event;
        _this.gridview = new gridview_1.Gridview(!!options.proportionalLayout, options.styles, options.orientation);
        _this.element.appendChild(_this.gridview.element);
        // TODO for some reason this is required before anything will layout correctly
        _this.layout(0, 0, true);
        _this.addDisposables(_this.gridview.onDidChange(function () {
            _this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
        }));
        _this.addDisposables((function () {
            /**
             * TODO Fix this relatively ugly 'merge and delay'
             */
            var timer;
            return _this.onGridEvent(function (event) {
                if ([
                    GroupChangeKind.ADD_GROUP,
                    GroupChangeKind.REMOVE_GROUP,
                    GroupChangeKind.ADD_PANEL,
                    GroupChangeKind.REMOVE_PANEL,
                    GroupChangeKind.GROUP_ACTIVE,
                    GroupChangeKind.PANEL_ACTIVE,
                    GroupChangeKind.LAYOUT,
                ].includes(event.kind)) {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () {
                        _this._onDidLayoutChange.fire();
                        clearTimeout(timer);
                    });
                }
            });
        })());
        return _this;
    }
    Object.defineProperty(BaseGrid.prototype, "id", {
        get: function () {
            return this._id;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "element", {
        get: function () {
            return this._element;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "size", {
        get: function () {
            return this._groups.size;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "groups", {
        get: function () {
            return Array.from(this._groups.values()).map(function (_) { return _.value; });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "width", {
        get: function () {
            return this.gridview.width;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "height", {
        get: function () {
            return this.gridview.height;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "minimumHeight", {
        get: function () {
            return this.gridview.minimumHeight;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "maximumHeight", {
        get: function () {
            return this.gridview.maximumHeight;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "minimumWidth", {
        get: function () {
            return this.gridview.minimumWidth;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "maximumWidth", {
        get: function () {
            return this.gridview.maximumWidth;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseGrid.prototype, "activeGroup", {
        get: function () {
            return this._activeGroup;
        },
        enumerable: false,
        configurable: true
    });
    BaseGrid.prototype.setVisible = function (panel, visible) {
        this.gridview.setViewVisible((0, gridview_1.getGridLocation)(panel.element), visible);
        this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
    };
    BaseGrid.prototype.isVisible = function (panel) {
        return this.gridview.isViewVisible((0, gridview_1.getGridLocation)(panel.element));
    };
    BaseGrid.prototype.doAddGroup = function (group, location, size) {
        if (location === void 0) { location = [0]; }
        this.gridview.addView(group, size !== null && size !== void 0 ? size : splitview_1.Sizing.Distribute, location);
        this._onGridEvent.fire({ kind: GroupChangeKind.ADD_GROUP });
        this.doSetGroupActive(group);
    };
    BaseGrid.prototype.doRemoveGroup = function (group, options) {
        if (!this._groups.has(group.id)) {
            throw new Error('invalid operation');
        }
        var item = this._groups.get(group.id);
        var view = this.gridview.remove(group, splitview_1.Sizing.Distribute);
        if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
            item.disposable.dispose();
            this._groups.delete(group.id);
        }
        this._onGridEvent.fire({ kind: GroupChangeKind.REMOVE_GROUP });
        if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
            var groups = Array.from(this._groups.values());
            this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
        }
        return view;
    };
    BaseGrid.prototype.getPanel = function (id) {
        var _a;
        return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
    };
    BaseGrid.prototype.doSetGroupActive = function (group, skipFocus) {
        if (this._activeGroup === group) {
            return;
        }
        if (this._activeGroup) {
            this._activeGroup.setActive(false);
            if (!skipFocus) {
                this._activeGroup.focus();
            }
        }
        if (group) {
            group.setActive(true);
            if (!skipFocus) {
                group.focus();
            }
        }
        this._activeGroup = group;
        this._onGridEvent.fire({
            kind: GroupChangeKind.GROUP_ACTIVE,
        });
    };
    BaseGrid.prototype.removeGroup = function (group) {
        this.doRemoveGroup(group);
    };
    BaseGrid.prototype.moveToNext = function (options) {
        var _a;
        if (!options) {
            options = {};
        }
        if (!options.group) {
            if (!this.activeGroup) {
                return;
            }
            options.group = this.activeGroup;
        }
        var location = (0, gridview_1.getGridLocation)(options.group.element);
        var next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
        this.doSetGroupActive(next);
    };
    BaseGrid.prototype.moveToPrevious = function (options) {
        var _a;
        if (!options) {
            options = {};
        }
        if (!options.group) {
            if (!this.activeGroup) {
                return;
            }
            options.group = this.activeGroup;
        }
        var location = (0, gridview_1.getGridLocation)(options.group.element);
        var next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
        this.doSetGroupActive(next);
    };
    BaseGrid.prototype.layout = function (width, height, forceResize) {
        var different = forceResize || width !== this.width || height !== this.height;
        if (!different) {
            return;
        }
        this.element.style.height = "".concat(height, "px");
        this.element.style.width = "".concat(width, "px");
        this.gridview.layout(width, height);
    };
    /**
     * Resize the layout to fit the parent container
     */
    BaseGrid.prototype.resizeToFit = function () {
        if (!this.element.parentElement) {
            return;
        }
        var _a = this.element.parentElement.getBoundingClientRect(), width = _a.width, height = _a.height;
        this.layout(width, height);
    };
    BaseGrid.prototype.dispose = function () {
        _super.prototype.dispose.call(this);
        this._onGridEvent.dispose();
        this.gridview.dispose();
    };
    return BaseGrid;
}(lifecycle_1.CompositeDisposable));
exports.BaseGrid = BaseGrid;
//# sourceMappingURL=baseComponentGridview.js.map