dockview-core 1.6.0

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -0,0 +1,176 @@
+import { PanelTransfer } from '../dnd/dataTransfer';
+import { Position } from '../dnd/droptarget';
+import { DockviewComponent } from './dockviewComponent';
+import { Event } from '../events';
+import { IViewSize } from '../gridview/gridview';
+import { CompositeDisposable } from '../lifecycle';
+import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { DockviewDropTargets } from './types';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewPanel } from './dockviewPanel';
+export interface DndService {
+    canDisplayOverlay(group: IDockviewGroupPanelModel, event: DragEvent, target: DockviewDropTargets): boolean;
+    onDrop(group: IDockviewGroupPanelModel, event: DragEvent, position: Position, index?: number): void;
+}
+export interface IGroupItem {
+    id: string;
+    header: {
+        element: HTMLElement;
+    };
+    body: {
+        element: HTMLElement;
+    };
+}
+interface GroupMoveEvent {
+    groupId: string;
+    itemId?: string;
+    target: Position;
+    index?: number;
+}
+interface CoreGroupOptions {
+    locked?: boolean;
+    hideHeader?: boolean;
+}
+export interface GroupOptions extends CoreGroupOptions {
+    readonly panels?: IDockviewPanel[];
+    readonly activePanel?: IDockviewPanel;
+    readonly id?: string;
+    tabHeight?: number;
+}
+export interface GroupPanelViewState extends CoreGroupOptions {
+    views: string[];
+    activeView?: string;
+    id: string;
+}
+export interface GroupviewChangeEvent {
+    readonly panel: IDockviewPanel;
+}
+export interface GroupviewDropEvent {
+    readonly nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly index?: number;
+    getData(): PanelTransfer | undefined;
+}
+export interface IHeader {
+    hidden: boolean;
+    height: number | undefined;
+}
+export interface IDockviewGroupPanelModel extends IPanel {
+    readonly isActive: boolean;
+    readonly size: number;
+    readonly panels: IDockviewPanel[];
+    readonly activePanel: IDockviewPanel | undefined;
+    readonly header: IHeader;
+    readonly isContentFocused: boolean;
+    readonly onDidDrop: Event<GroupviewDropEvent>;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
+    readonly onMove: Event<GroupMoveEvent>;
+    locked: boolean;
+    setActive(isActive: boolean): void;
+    initialize(): void;
+    isPanelActive: (panel: IDockviewPanel) => boolean;
+    indexOf(panel: IDockviewPanel): number;
+    openPanel(panel: IDockviewPanel, options?: {
+        index?: number;
+        skipFocus?: boolean;
+        skipSetPanelActive?: boolean;
+        skipSetGroupActive?: boolean;
+    }): void;
+    closePanel(panel: IDockviewPanel): void;
+    closeAllPanels(): void;
+    containsPanel(panel: IDockviewPanel): boolean;
+    removePanel: (panelOrId: IDockviewPanel | string) => IDockviewPanel;
+    moveToNext(options?: {
+        panel?: IDockviewPanel;
+        suppressRoll?: boolean;
+    }): void;
+    moveToPrevious(options?: {
+        panel?: IDockviewPanel;
+        suppressRoll?: boolean;
+    }): void;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+}
+export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
+    private readonly container;
+    private accessor;
+    id: string;
+    private readonly options;
+    private readonly groupPanel;
+    private readonly tabsContainer;
+    private readonly contentContainer;
+    private readonly dropTarget;
+    private _activePanel;
+    private watermark?;
+    private _isGroupActive;
+    private _locked;
+    private _control;
+    private mostRecentlyUsed;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<IViewSize | undefined>;
+    private _width;
+    private _height;
+    private _panels;
+    private readonly _onMove;
+    readonly onMove: Event<GroupMoveEvent>;
+    private readonly _onDidDrop;
+    readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onDidAddPanel;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidRemovePanel;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
+    get element(): HTMLElement;
+    get activePanel(): IDockviewPanel | undefined;
+    get locked(): boolean;
+    set locked(value: boolean);
+    get isActive(): boolean;
+    get panels(): IDockviewPanel[];
+    get size(): number;
+    get isEmpty(): boolean;
+    get hasWatermark(): boolean;
+    get header(): IHeader;
+    get isContentFocused(): boolean;
+    constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
+    initialize(): void;
+    indexOf(panel: IDockviewPanel): number;
+    toJSON(): GroupPanelViewState;
+    moveToNext(options?: {
+        panel?: IDockviewPanel;
+        suppressRoll?: boolean;
+    }): void;
+    moveToPrevious(options?: {
+        panel?: IDockviewPanel;
+        suppressRoll?: boolean;
+    }): void;
+    containsPanel(panel: IDockviewPanel): boolean;
+    init(_params: PanelInitParameters): void;
+    update(_params: PanelUpdateEvent): void;
+    focus(): void;
+    openPanel(panel: IDockviewPanel, options?: {
+        index?: number;
+        skipFocus?: boolean;
+        skipSetPanelActive?: boolean;
+        skipSetGroupActive?: boolean;
+    }): void;
+    removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel;
+    closeAllPanels(): void;
+    closePanel(panel: IDockviewPanel): void;
+    private doClose;
+    isPanelActive(panel: IDockviewPanel): boolean;
+    updateActions(element: HTMLElement | undefined): void;
+    setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void;
+    layout(width: number, height: number): void;
+    private _removePanel;
+    private doRemovePanel;
+    private doAddPanel;
+    private doSetActivePanel;
+    private updateMru;
+    private updateContainer;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    private handleDropEvent;
+    dispose(): void;
+}
+export {};

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -0,0 +1,449 @@
+import { DockviewApi } from '../api/component.api';
+import { getPanelData } from '../dnd/dataTransfer';
+import { Droptarget } from '../dnd/droptarget';
+import { isAncestor, toggleClass } from '../dom';
+import { addDisposableListener, Emitter } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+import { ContentContainer, } from './components/panel/content';
+import { TabsContainer, } from './components/titlebar/tabsContainer';
+import { DockviewDropTargets } from './types';
+export class DockviewGroupPanelModel extends CompositeDisposable {
+    get element() {
+        throw new Error('not supported');
+    }
+    get activePanel() {
+        return this._activePanel;
+    }
+    get locked() {
+        return this._locked;
+    }
+    set locked(value) {
+        this._locked = value;
+        toggleClass(this.container, 'locked-groupview', value);
+    }
+    get isActive() {
+        return this._isGroupActive;
+    }
+    get panels() {
+        return this._panels;
+    }
+    get size() {
+        return this._panels.length;
+    }
+    get isEmpty() {
+        return this._panels.length === 0;
+    }
+    get hasWatermark() {
+        return !!(this.watermark && this.container.contains(this.watermark.element));
+    }
+    get header() {
+        return this.tabsContainer;
+    }
+    get isContentFocused() {
+        if (!document.activeElement) {
+            return false;
+        }
+        return isAncestor(document.activeElement, this.contentContainer.element);
+    }
+    constructor(container, accessor, id, options, groupPanel) {
+        super();
+        this.container = container;
+        this.accessor = accessor;
+        this.id = id;
+        this.options = options;
+        this.groupPanel = groupPanel;
+        this._isGroupActive = false;
+        this._locked = false;
+        this.mostRecentlyUsed = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._width = 0;
+        this._height = 0;
+        this._panels = [];
+        this._onMove = new Emitter();
+        this.onMove = this._onMove.event;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.container.classList.add('groupview');
+        this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+        this.contentContainer = new ContentContainer();
+        this.dropTarget = new Droptarget(this.contentContainer.element, {
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            canDisplayOverlay: (event, position) => {
+                if (this.locked && position === 'center') {
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && data.viewId === this.accessor.id) {
+                    if (data.groupId === this.id) {
+                        if (position === 'center') {
+                            // don't allow to drop on self for center position
+                            return false;
+                        }
+                        if (data.panelId === null) {
+                            // don't allow group move to drop anywhere on self
+                            return false;
+                        }
+                    }
+                    const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
+                    return !groupHasOnePanelAndIsActiveDragElement;
+                }
+                return this.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+            },
+        });
+        container.append(this.tabsContainer.element, this.contentContainer.element);
+        this.header.hidden = !!options.hideHeader;
+        this.locked = !!options.locked;
+        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+            this.handleDropEvent(event.event, 'center', event.index);
+        }), this.contentContainer.onDidFocus(() => {
+            this.accessor.doSetGroupActive(this.groupPanel, true);
+        }), this.contentContainer.onDidBlur(() => {
+            // noop
+        }), this.dropTarget.onDrop((event) => {
+            this.handleDropEvent(event.nativeEvent, event.position);
+        }));
+    }
+    initialize() {
+        var _a, _b;
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
+            this.options.panels.forEach((panel) => {
+                this.doAddPanel(panel);
+            });
+        }
+        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
+            this.openPanel(this.options.activePanel);
+        }
+        // must be run after the constructor otherwise this.parent may not be
+        // correctly initialized
+        this.setActive(this.isActive, true, true);
+        this.updateContainer();
+        if (this.accessor.options.createGroupControlElement) {
+            this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
+            this.addDisposables(this._control);
+            this._control.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.groupPanel.api,
+            });
+            this.tabsContainer.setActionElement(this._control.element);
+        }
+    }
+    indexOf(panel) {
+        return this.tabsContainer.indexOf(panel.id);
+    }
+    toJSON() {
+        var _a;
+        const result = {
+            views: this.tabsContainer.panels,
+            activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
+            id: this.id,
+        };
+        if (this.locked) {
+            result.locked = true;
+        }
+        if (this.header.hidden) {
+            result.hideHeader = true;
+        }
+        return result;
+    }
+    moveToNext(options) {
+        if (!options) {
+            options = {};
+        }
+        if (!options.panel) {
+            options.panel = this.activePanel;
+        }
+        const index = options.panel ? this.panels.indexOf(options.panel) : -1;
+        let normalizedIndex;
+        if (index < this.panels.length - 1) {
+            normalizedIndex = index + 1;
+        }
+        else if (!options.suppressRoll) {
+            normalizedIndex = 0;
+        }
+        else {
+            return;
+        }
+        this.openPanel(this.panels[normalizedIndex]);
+    }
+    moveToPrevious(options) {
+        if (!options) {
+            options = {};
+        }
+        if (!options.panel) {
+            options.panel = this.activePanel;
+        }
+        if (!options.panel) {
+            return;
+        }
+        const index = this.panels.indexOf(options.panel);
+        let normalizedIndex;
+        if (index > 0) {
+            normalizedIndex = index - 1;
+        }
+        else if (!options.suppressRoll) {
+            normalizedIndex = this.panels.length - 1;
+        }
+        else {
+            return;
+        }
+        this.openPanel(this.panels[normalizedIndex]);
+    }
+    containsPanel(panel) {
+        return this.panels.includes(panel);
+    }
+    init(_params) {
+        //noop
+    }
+    update(_params) {
+        //noop
+    }
+    focus() {
+        var _a, _b;
+        (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    openPanel(panel, options = {}) {
+        if (typeof options.index !== 'number' ||
+            options.index > this.panels.length) {
+            options.index = this.panels.length;
+        }
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
+        // ensure the group is updated before we fire any events
+        panel.updateParentGroup(this.groupPanel, true);
+        if (this._activePanel === panel) {
+            if (!skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.groupPanel);
+            }
+            return;
+        }
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
+        if (!skipSetPanelActive) {
+            this.doSetActivePanel(panel);
+        }
+        if (!skipSetGroupActive) {
+            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
+        }
+        this.updateContainer();
+    }
+    removePanel(groupItemOrId) {
+        const id = typeof groupItemOrId === 'string'
+            ? groupItemOrId
+            : groupItemOrId.id;
+        const panelToRemove = this._panels.find((panel) => panel.id === id);
+        if (!panelToRemove) {
+            throw new Error('invalid operation');
+        }
+        return this._removePanel(panelToRemove);
+    }
+    closeAllPanels() {
+        if (this.panels.length > 0) {
+            // take a copy since we will be edting the array as we iterate through
+            const arrPanelCpy = [...this.panels];
+            for (const panel of arrPanelCpy) {
+                this.doClose(panel);
+            }
+        }
+        else {
+            this.accessor.removeGroup(this.groupPanel);
+        }
+    }
+    closePanel(panel) {
+        this.doClose(panel);
+    }
+    doClose(panel) {
+        this.accessor.removePanel(panel);
+    }
+    isPanelActive(panel) {
+        return this._activePanel === panel;
+    }
+    updateActions(element) {
+        this.tabsContainer.setActionElement(element);
+    }
+    setActive(isGroupActive, skipFocus = false, force = false) {
+        var _a, _b, _c, _d;
+        if (!force && this.isActive === isGroupActive) {
+            if (!skipFocus) {
+                (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            return;
+        }
+        this._isGroupActive = isGroupActive;
+        toggleClass(this.container, 'active-group', isGroupActive);
+        toggleClass(this.container, 'inactive-group', !isGroupActive);
+        this.tabsContainer.setActive(this.isActive);
+        if (!this._activePanel && this.panels.length > 0) {
+            this.doSetActivePanel(this.panels[0]);
+        }
+        this.updateContainer();
+        if (isGroupActive) {
+            if (!skipFocus) {
+                (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
+            }
+        }
+    }
+    layout(width, height) {
+        var _a;
+        this._width = width;
+        this._height = height;
+        this.contentContainer.layout(this._width, this._height);
+        if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+            this._activePanel.layout(this._width, this._height);
+        }
+    }
+    _removePanel(panel) {
+        const isActivePanel = this._activePanel === panel;
+        this.doRemovePanel(panel);
+        if (isActivePanel && this.panels.length > 0) {
+            const nextPanel = this.mostRecentlyUsed[0];
+            this.openPanel(nextPanel);
+        }
+        if (this._activePanel && this.panels.length === 0) {
+            this.doSetActivePanel(undefined);
+        }
+        this.updateContainer();
+        return panel;
+    }
+    doRemovePanel(panel) {
+        const index = this.panels.indexOf(panel);
+        if (this._activePanel === panel) {
+            this.contentContainer.closePanel();
+        }
+        this.tabsContainer.delete(panel.id);
+        this._panels.splice(index, 1);
+        if (this.mostRecentlyUsed.includes(panel)) {
+            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+        }
+        this._onDidRemovePanel.fire({ panel });
+    }
+    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
+        const existingPanel = this._panels.indexOf(panel);
+        const hasExistingPanel = existingPanel > -1;
+        this.tabsContainer.openPanel(panel, index);
+        if (!skipSetActive) {
+            this.contentContainer.openPanel(panel);
+        }
+        this.tabsContainer.show();
+        this.contentContainer.show();
+        if (hasExistingPanel) {
+            // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
+            return;
+        }
+        this.updateMru(panel);
+        this.panels.splice(index, 0, panel);
+        this._onDidAddPanel.fire({ panel });
+    }
+    doSetActivePanel(panel) {
+        this._activePanel = panel;
+        if (panel) {
+            this.tabsContainer.setActivePanel(panel);
+            panel.layout(this._width, this._height);
+            this.updateMru(panel);
+            this._onDidActivePanelChange.fire({ panel });
+        }
+    }
+    updateMru(panel) {
+        if (this.mostRecentlyUsed.includes(panel)) {
+            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+        }
+        this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
+    }
+    updateContainer() {
+        var _a, _b;
+        toggleClass(this.container, 'empty', this.isEmpty);
+        this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
+        if (this.isEmpty && !this.watermark) {
+            const watermark = this.accessor.createWatermarkComponent();
+            watermark.init({
+                containerApi: new DockviewApi(this.accessor),
+                group: this.groupPanel,
+            });
+            this.watermark = watermark;
+            addDisposableListener(this.watermark.element, 'click', () => {
+                if (!this.isActive) {
+                    this.accessor.doSetGroupActive(this.groupPanel);
+                }
+            });
+            this.tabsContainer.hide();
+            this.contentContainer.element.appendChild(this.watermark.element);
+            this.watermark.updateParentGroup(this.groupPanel, true);
+        }
+        if (!this.isEmpty && this.watermark) {
+            this.watermark.element.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = undefined;
+            this.tabsContainer.show();
+        }
+    }
+    canDisplayOverlay(event, position, target) {
+        // custom overlay handler
+        if (this.accessor.options.showDndOverlay) {
+            return this.accessor.options.showDndOverlay({
+                nativeEvent: event,
+                target,
+                group: this.accessor.getPanel(this.id),
+                position,
+                getData: getPanelData,
+            });
+        }
+        return false;
+    }
+    handleDropEvent(event, position, index) {
+        const data = getPanelData();
+        if (data && data.viewId === this.accessor.id) {
+            if (data.panelId === null) {
+                // this is a group move dnd event
+                const { groupId } = data;
+                this._onMove.fire({
+                    target: position,
+                    groupId: groupId,
+                    index,
+                });
+                return;
+            }
+            const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
+            if (fromSameGroup && this.tabsContainer.size === 1) {
+                return;
+            }
+            const { groupId, panelId } = data;
+            const isSameGroup = this.id === groupId;
+            if (isSameGroup && !position) {
+                const oldIndex = this.tabsContainer.indexOf(panelId);
+                if (oldIndex === index) {
+                    return;
+                }
+            }
+            this._onMove.fire({
+                target: position,
+                groupId: data.groupId,
+                itemId: data.panelId,
+                index,
+            });
+        }
+        else {
+            this._onDidDrop.fire({
+                nativeEvent: event,
+                position,
+                index,
+                getData: () => getPanelData(),
+            });
+        }
+    }
+    dispose() {
+        var _a, _b;
+        super.dispose();
+        (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        for (const panel of this.panels) {
+            panel.dispose();
+        }
+        this.dropTarget.dispose();
+        this.tabsContainer.dispose();
+        this.contentContainer.dispose();
+    }
+}

package/dist/esm/dockview/dockviewPanel.d.ts

@@ -0,0 +1,40 @@
+import { DockviewApi } from '../api/component.api';
+import { DockviewPanelApi, DockviewPanelApiImpl } from '../api/dockviewPanelApi';
+import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters } from './types';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { IPanel, Parameters } from '../panel/types';
+import { IDockviewPanelModel } from './dockviewPanelModel';
+import { IDockviewComponent } from './dockviewComponent';
+export interface IDockviewPanel extends IDisposable, IPanel {
+    readonly view: IDockviewPanelModel;
+    readonly group: DockviewGroupPanel;
+    readonly api: DockviewPanelApi;
+    readonly title: string;
+    readonly params: Record<string, any> | undefined;
+    updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
+    init(params: IGroupPanelInitParameters): void;
+    toJSON(): GroupviewPanelState;
+    update(event: GroupPanelUpdateEvent): void;
+}
+export declare class DockviewPanel extends CompositeDisposable implements IDockviewPanel {
+    readonly id: string;
+    private readonly containerApi;
+    readonly view: IDockviewPanelModel;
+    readonly api: DockviewPanelApiImpl;
+    private _group;
+    private _params?;
+    private _title;
+    get params(): Parameters | undefined;
+    get title(): string;
+    get group(): DockviewGroupPanel;
+    constructor(id: string, accessor: IDockviewComponent, containerApi: DockviewApi, group: DockviewGroupPanel, view: IDockviewPanelModel);
+    init(params: IGroupPanelInitParameters): void;
+    focus(): void;
+    toJSON(): GroupviewPanelState;
+    setTitle(title: string): void;
+    update(event: GroupPanelUpdateEvent): void;
+    updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
+    layout(width: number, height: number): void;
+    dispose(): void;
+}