dockview-core 1.6.0

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -0,0 +1,87 @@
+import { Emitter, Event, TickDelayedEvent } from '../events';
+import { Gridview, IGridView } from './gridview';
+import { Position } from '../dnd/droptarget';
+import { CompositeDisposable, IValueDisposable } from '../lifecycle';
+import { ISplitviewStyles, Orientation } from '../splitview/splitview';
+import { IPanel } from '../panel/types';
+import { MovementOptions2 } from '../dockview/options';
+export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
+export declare function toTarget(direction: Direction): Position;
+export interface BaseGridOptions {
+    readonly proportionalLayout: boolean;
+    readonly orientation: Orientation;
+    readonly styles?: ISplitviewStyles;
+}
+export interface IGridPanelView extends IGridView, IPanel {
+    setActive(isActive: boolean): void;
+    readonly isActive: boolean;
+}
+export interface IBaseGrid<T extends IGridPanelView> {
+    readonly element: HTMLElement;
+    readonly id: string;
+    readonly width: number;
+    readonly height: number;
+    readonly minimumHeight: number;
+    readonly maximumHeight: number;
+    readonly minimumWidth: number;
+    readonly maximumWidth: number;
+    readonly activeGroup: T | undefined;
+    readonly size: number;
+    readonly groups: T[];
+    readonly onDidLayoutChange: Event<void>;
+    readonly onDidRemoveGroup: Event<T>;
+    readonly onDidAddGroup: Event<T>;
+    readonly onDidActiveGroupChange: Event<T | undefined>;
+    getPanel(id: string): T | undefined;
+    toJSON(): object;
+    fromJSON(data: any): void;
+    clear(): void;
+    layout(width: number, height: number, force?: boolean): void;
+    setVisible(panel: T, visible: boolean): void;
+    isVisible(panel: T): boolean;
+}
+export declare abstract class BaseGrid<T extends IGridPanelView> extends CompositeDisposable implements IBaseGrid<T> {
+    private readonly _element;
+    private readonly _id;
+    protected readonly _groups: Map<string, IValueDisposable<T>>;
+    protected readonly gridview: Gridview;
+    protected _activeGroup: T | undefined;
+    private _onDidLayoutChange;
+    readonly onDidLayoutChange: Event<void>;
+    private readonly _onDidRemoveGroup;
+    readonly onDidRemoveGroup: Event<T>;
+    protected readonly _onDidAddGroup: Emitter<T>;
+    readonly onDidAddGroup: Event<T>;
+    private readonly _onDidActiveGroupChange;
+    readonly onDidActiveGroupChange: Event<T | undefined>;
+    protected readonly _bufferOnDidLayoutChange: TickDelayedEvent;
+    get id(): string;
+    get element(): HTMLElement;
+    get size(): number;
+    get groups(): T[];
+    get width(): number;
+    get height(): number;
+    get minimumHeight(): number;
+    get maximumHeight(): number;
+    get minimumWidth(): number;
+    get maximumWidth(): number;
+    get activeGroup(): T | undefined;
+    constructor(_element: HTMLElement, options: BaseGridOptions);
+    abstract toJSON(): object;
+    abstract fromJSON(data: any): void;
+    abstract clear(): void;
+    setVisible(panel: T, visible: boolean): void;
+    isVisible(panel: T): boolean;
+    protected doAddGroup(group: T, location?: number[], size?: number): void;
+    protected doRemoveGroup(group: T, options?: {
+        skipActive?: boolean;
+        skipDispose?: boolean;
+    }): T;
+    getPanel(id: string): T | undefined;
+    doSetGroupActive(group: T | undefined, skipFocus?: boolean): void;
+    removeGroup(group: T): void;
+    moveToNext(options?: MovementOptions2): void;
+    moveToPrevious(options?: MovementOptions2): void;
+    layout(width: number, height: number, forceResize?: boolean): void;
+    dispose(): void;
+}

package/dist/esm/gridview/baseComponentGridview.js

@@ -0,0 +1,189 @@
+import { Emitter, Event, TickDelayedEvent } from '../events';
+import { getGridLocation, Gridview } from './gridview';
+import { CompositeDisposable } from '../lifecycle';
+import { sequentialNumberGenerator } from '../math';
+import { Sizing } from '../splitview/splitview';
+const nextLayoutId = sequentialNumberGenerator();
+export function toTarget(direction) {
+    switch (direction) {
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'above':
+            return 'top';
+        case 'below':
+            return 'bottom';
+        case 'within':
+        default:
+            return 'center';
+    }
+}
+export class BaseGrid extends CompositeDisposable {
+    get id() {
+        return this._id;
+    }
+    get element() {
+        return this._element;
+    }
+    get size() {
+        return this._groups.size;
+    }
+    get groups() {
+        return Array.from(this._groups.values()).map((_) => _.value);
+    }
+    get width() {
+        return this.gridview.width;
+    }
+    get height() {
+        return this.gridview.height;
+    }
+    get minimumHeight() {
+        return this.gridview.minimumHeight;
+    }
+    get maximumHeight() {
+        return this.gridview.maximumHeight;
+    }
+    get minimumWidth() {
+        return this.gridview.minimumWidth;
+    }
+    get maximumWidth() {
+        return this.gridview.maximumWidth;
+    }
+    get activeGroup() {
+        return this._activeGroup;
+    }
+    constructor(_element, options) {
+        super();
+        this._element = _element;
+        this._id = nextLayoutId.next();
+        this._groups = new Map();
+        this._onDidLayoutChange = new Emitter();
+        this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._bufferOnDidLayoutChange = new TickDelayedEvent();
+        this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+        this.element.appendChild(this.gridview.element);
+        this.layout(0, 0, true); // set some elements height/widths
+        this.addDisposables(this.gridview.onDidChange(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }));
+        this.addDisposables(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange.onEvent(() => {
+            this._onDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange);
+    }
+    setVisible(panel, visible) {
+        this.gridview.setViewVisible(getGridLocation(panel.element), visible);
+        this._onDidLayoutChange.fire();
+    }
+    isVisible(panel) {
+        return this.gridview.isViewVisible(getGridLocation(panel.element));
+    }
+    doAddGroup(group, location = [0], size) {
+        this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
+        this._onDidAddGroup.fire(group);
+        this.doSetGroupActive(group);
+    }
+    doRemoveGroup(group, options) {
+        if (!this._groups.has(group.id)) {
+            throw new Error('invalid operation');
+        }
+        const item = this._groups.get(group.id);
+        const view = this.gridview.remove(group, Sizing.Distribute);
+        if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+            item.disposable.dispose();
+            item.value.dispose();
+            this._groups.delete(group.id);
+        }
+        this._onDidRemoveGroup.fire(group);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+            const groups = Array.from(this._groups.values());
+            this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+        }
+        return view;
+    }
+    getPanel(id) {
+        var _a;
+        return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    doSetGroupActive(group, skipFocus) {
+        var _a, _b, _c;
+        if (this._activeGroup === group) {
+            return;
+        }
+        if (this._activeGroup) {
+            this._activeGroup.setActive(false);
+            if (!skipFocus) {
+                (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        }
+        if (group) {
+            group.setActive(true);
+            if (!skipFocus) {
+                (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
+            }
+        }
+        this._activeGroup = group;
+        this._onDidActiveGroupChange.fire(group);
+    }
+    removeGroup(group) {
+        this.doRemoveGroup(group);
+    }
+    moveToNext(options) {
+        var _a;
+        if (!options) {
+            options = {};
+        }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.next(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupActive(next);
+    }
+    moveToPrevious(options) {
+        var _a;
+        if (!options) {
+            options = {};
+        }
+        if (!options.group) {
+            if (!this.activeGroup) {
+                return;
+            }
+            options.group = this.activeGroup;
+        }
+        const location = getGridLocation(options.group.element);
+        const next = (_a = this.gridview.previous(location)) === null || _a === void 0 ? void 0 : _a.view;
+        this.doSetGroupActive(next);
+    }
+    layout(width, height, forceResize) {
+        const different = forceResize || width !== this.width || height !== this.height;
+        if (!different) {
+            return;
+        }
+        this.element.style.height = `${height}px`;
+        this.element.style.width = `${width}px`;
+        this.gridview.layout(width, height);
+    }
+    dispose() {
+        super.dispose();
+        this._onDidActiveGroupChange.dispose();
+        this._onDidAddGroup.dispose();
+        this._onDidRemoveGroup.dispose();
+        this._onDidLayoutChange.dispose();
+        for (const group of this.groups) {
+            group.dispose();
+        }
+        this.gridview.dispose();
+    }
+}

package/dist/esm/gridview/basePanelView.d.ts

@@ -0,0 +1,40 @@
+import { CompositeDisposable } from '../lifecycle';
+import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel } from '../panel/types';
+import { PanelApi, PanelApiImpl } from '../api/panelApi';
+export interface BasePanelViewState {
+    readonly id: string;
+    readonly component: string;
+    readonly params?: Record<string, any>;
+}
+export interface BasePanelViewExported<T extends PanelApi> {
+    readonly id: string;
+    readonly api: T;
+    readonly width: number;
+    readonly height: number;
+    readonly params: Record<string, any> | undefined;
+    focus(): void;
+    toJSON(): object;
+    update(event: PanelUpdateEvent): void;
+}
+export declare abstract class BasePanelView<T extends PanelApiImpl> extends CompositeDisposable implements IPanel, BasePanelViewExported<T> {
+    readonly id: string;
+    protected readonly component: string;
+    readonly api: T;
+    private _height;
+    private _width;
+    private _element;
+    protected part?: IFrameworkPart;
+    protected _params?: PanelInitParameters;
+    protected abstract getComponent(): IFrameworkPart;
+    get element(): HTMLElement;
+    get width(): number;
+    get height(): number;
+    get params(): Record<string, any> | undefined;
+    constructor(id: string, component: string, api: T);
+    focus(): void;
+    layout(width: number, height: number): void;
+    init(parameters: PanelInitParameters): void;
+    update(event: PanelUpdateEvent): void;
+    toJSON(): BasePanelViewState;
+    dispose(): void;
+}

package/dist/esm/gridview/basePanelView.js

@@ -0,0 +1,74 @@
+import { trackFocus } from '../dom';
+import { CompositeDisposable } from '../lifecycle';
+export class BasePanelView extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    get width() {
+        return this._width;
+    }
+    get height() {
+        return this._height;
+    }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
+    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 });
+        }));
+    }
+    focus() {
+        this.api._onFocusEvent.fire();
+    }
+    layout(width, height) {
+        this._width = width;
+        this._height = height;
+        this.api._onDidDimensionChange.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 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,
+        };
+    }
+    dispose() {
+        var _a;
+        super.dispose();
+        this.api.dispose();
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}

package/dist/esm/gridview/branchNode.d.ts

@@ -0,0 +1,49 @@
+import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';
+import { Event } from '../events';
+import { INodeDescriptor } from './gridview';
+import { Node } from './types';
+import { CompositeDisposable } from '../lifecycle';
+export declare class BranchNode extends CompositeDisposable implements IView {
+    readonly orientation: Orientation;
+    readonly proportionalLayout: boolean;
+    readonly styles: ISplitviewStyles | undefined;
+    readonly element: HTMLElement;
+    private splitview;
+    private _orthogonalSize;
+    private _size;
+    private _childrenDisposable;
+    readonly children: Node[];
+    private readonly _onDidChange;
+    readonly onDidChange: Event<{
+        size?: number;
+        orthogonalSize?: number;
+    }>;
+    get width(): number;
+    get height(): number;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get minimumOrthogonalSize(): number;
+    get maximumOrthogonalSize(): number;
+    get orthogonalSize(): number;
+    get size(): number;
+    get minimumWidth(): number;
+    get minimumHeight(): number;
+    get maximumWidth(): number;
+    get maximumHeight(): number;
+    get priority(): LayoutPriority;
+    constructor(orientation: Orientation, proportionalLayout: boolean, styles: ISplitviewStyles | undefined, size: number, orthogonalSize: number, childDescriptors?: INodeDescriptor[]);
+    setVisible(visible: boolean): void;
+    isChildVisible(index: number): boolean;
+    setChildVisible(index: number, visible: boolean): void;
+    moveChild(from: number, to: number): void;
+    getChildSize(index: number): number;
+    resizeChild(index: number, size: number): void;
+    layout(size: number, orthogonalSize: number): void;
+    addChild(node: Node, size: number | Sizing, index: number, skipLayout?: boolean): void;
+    getChildCachedVisibleSize(index: number): number | undefined;
+    removeChild(index: number, sizing?: Sizing): void;
+    private _addChild;
+    private _removeChild;
+    private setupChildrenEvents;
+    dispose(): void;
+}

package/dist/esm/gridview/branchNode.js

@@ -0,0 +1,218 @@
+/*---------------------------------------------------------------------------------------------
+ * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
+ * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
+ *--------------------------------------------------------------------------------------------*/
+import { Splitview, Orientation, LayoutPriority, } from '../splitview/splitview';
+import { Emitter, Event } from '../events';
+import { LeafNode } from './leafNode';
+import { CompositeDisposable, Disposable } from '../lifecycle';
+export class BranchNode extends CompositeDisposable {
+    get width() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.size
+            : this.orthogonalSize;
+    }
+    get height() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.orthogonalSize
+            : this.size;
+    }
+    get minimumSize() {
+        return this.children.length === 0
+            ? 0
+            : Math.max(...this.children.map((c) => c.minimumOrthogonalSize));
+    }
+    get maximumSize() {
+        return Math.min(...this.children.map((c) => c.maximumOrthogonalSize));
+    }
+    get minimumOrthogonalSize() {
+        return this.splitview.minimumSize;
+    }
+    get maximumOrthogonalSize() {
+        return this.splitview.maximumSize;
+    }
+    get orthogonalSize() {
+        return this._orthogonalSize;
+    }
+    get size() {
+        return this._size;
+    }
+    get minimumWidth() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.minimumOrthogonalSize
+            : this.minimumSize;
+    }
+    get minimumHeight() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.minimumSize
+            : this.minimumOrthogonalSize;
+    }
+    get maximumWidth() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.maximumOrthogonalSize
+            : this.maximumSize;
+    }
+    get maximumHeight() {
+        return this.orientation === Orientation.HORIZONTAL
+            ? this.maximumSize
+            : this.maximumOrthogonalSize;
+    }
+    get priority() {
+        if (this.children.length === 0) {
+            return LayoutPriority.Normal;
+        }
+        const priorities = this.children.map((c) => typeof c.priority === 'undefined'
+            ? LayoutPriority.Normal
+            : c.priority);
+        if (priorities.some((p) => p === LayoutPriority.High)) {
+            return LayoutPriority.High;
+        }
+        else if (priorities.some((p) => p === LayoutPriority.Low)) {
+            return LayoutPriority.Low;
+        }
+        return LayoutPriority.Normal;
+    }
+    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+        super();
+        this.orientation = orientation;
+        this.proportionalLayout = proportionalLayout;
+        this.styles = styles;
+        this._childrenDisposable = Disposable.NONE;
+        this.children = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._orthogonalSize = orthogonalSize;
+        this._size = size;
+        this.element = document.createElement('div');
+        this.element.className = 'branch-node';
+        if (!childDescriptors) {
+            this.splitview = new Splitview(this.element, {
+                orientation: this.orientation,
+                proportionalLayout,
+                styles,
+            });
+            this.splitview.layout(this.size, this.orthogonalSize);
+        }
+        else {
+            const descriptor = {
+                views: childDescriptors.map((childDescriptor) => {
+                    return {
+                        view: childDescriptor.node,
+                        size: childDescriptor.node.size,
+                        visible: childDescriptor.node instanceof LeafNode &&
+                            childDescriptor.visible !== undefined
+                            ? childDescriptor.visible
+                            : true,
+                    };
+                }),
+                size: this.size,
+            };
+            this.children = childDescriptors.map((c) => c.node);
+            this.splitview = new Splitview(this.element, {
+                orientation: this.orientation,
+                descriptor,
+                proportionalLayout,
+            });
+        }
+        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+            this._onDidChange.fire({});
+        }));
+        this.setupChildrenEvents();
+    }
+    setVisible(visible) {
+        for (const child of this.children) {
+            child.setVisible(visible);
+        }
+    }
+    isChildVisible(index) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        return this.splitview.isViewVisible(index);
+    }
+    setChildVisible(index, visible) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        if (this.splitview.isViewVisible(index) === visible) {
+            return;
+        }
+        this.splitview.setViewVisible(index, visible);
+    }
+    moveChild(from, to) {
+        if (from === to) {
+            return;
+        }
+        if (from < 0 || from >= this.children.length) {
+            throw new Error('Invalid from index');
+        }
+        if (from < to) {
+            to--;
+        }
+        this.splitview.moveView(from, to);
+        const child = this._removeChild(from);
+        this._addChild(child, to);
+    }
+    getChildSize(index) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        return this.splitview.getViewSize(index);
+    }
+    resizeChild(index, size) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        this.splitview.resizeView(index, size);
+    }
+    layout(size, orthogonalSize) {
+        this._size = orthogonalSize;
+        this._orthogonalSize = size;
+        this.splitview.layout(this.size, this.orthogonalSize);
+    }
+    addChild(node, size, index, skipLayout) {
+        if (index < 0 || index > this.children.length) {
+            throw new Error('Invalid index');
+        }
+        this.splitview.addView(node, size, index, skipLayout);
+        this._addChild(node, index);
+    }
+    getChildCachedVisibleSize(index) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        return this.splitview.getViewCachedVisibleSize(index);
+    }
+    removeChild(index, sizing) {
+        if (index < 0 || index >= this.children.length) {
+            throw new Error('Invalid index');
+        }
+        this.splitview.removeView(index, sizing);
+        this._removeChild(index);
+    }
+    _addChild(node, index) {
+        this.children.splice(index, 0, node);
+        this.setupChildrenEvents();
+    }
+    _removeChild(index) {
+        const [child] = this.children.splice(index, 1);
+        this.setupChildrenEvents();
+        return child;
+    }
+    setupChildrenEvents() {
+        this._childrenDisposable.dispose();
+        this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+            /**
+             * indicate a change has occured to allows any re-rendering but don't bubble
+             * event because that was specific to this branch
+             */
+            this._onDidChange.fire({ size: e.orthogonalSize });
+        });
+    }
+    dispose() {
+        super.dispose();
+        this._childrenDisposable.dispose();
+        this.children.forEach((child) => child.dispose());
+        this.splitview.dispose();
+    }
+}