dockview 1.5.1 → 1.6.0

package/dist/{cjs/dockview/dockviewGroupPanel.d.ts → esm/dockview/dockviewPanel.d.ts}

@@ -1,31 +1,42 @@
-import { DockviewApi } from '../api/component.api';
-import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { GroupPanelUpdateEvent, GroupviewPanelState, IDockviewPanel, IGroupPanelInitParameters } from '../groupview/groupPanel';
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { CompositeDisposable } from '../lifecycle';
-import { Parameters } from '../panel/types';
-import { IGroupPanelView } from './defaultGroupPanelView';
-import { DockviewComponent } from './dockviewComponent';
-export declare class DockviewGroupPanel extends CompositeDisposable implements IDockviewPanel {
-    readonly id: string;
-    private readonly containerApi;
-    private readonly mutableDisposable;
-    readonly api: DockviewPanelApiImpl;
-    private _group;
-    private _params?;
-    private _view?;
-    private _title;
-    get params(): Parameters | undefined;
-    get title(): string;
-    get group(): GroupPanel;
-    get view(): IGroupPanelView | undefined;
-    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi, group: GroupPanel);
-    init(params: IGroupPanelInitParameters): void;
-    focus(): void;
-    toJSON(): GroupviewPanelState;
-    setTitle(title: string): void;
-    update(event: GroupPanelUpdateEvent): void;
-    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
-    layout(width: number, height: number): void;
-    dispose(): void;
-}
+import { DockviewApi } from '../api/component.api';
+import { DockviewPanelApi, DockviewPanelApiImpl } from '../api/dockviewPanelApi';
+import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters } from '../groupview/types';
+import { GroupPanel } from '../groupview/groupviewPanel';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { IPanel, Parameters } from '../panel/types';
+import { IGroupPanelView } from './defaultGroupPanelView';
+import { DockviewComponent } from './dockviewComponent';
+export interface IDockviewPanel extends IDisposable, IPanel {
+    readonly view?: IGroupPanelView;
+    readonly group: GroupPanel;
+    readonly api: DockviewPanelApi;
+    readonly title: string;
+    readonly params: Record<string, any> | undefined;
+    updateParentGroup(group: GroupPanel, 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;
+    private readonly mutableDisposable;
+    readonly api: DockviewPanelApiImpl;
+    private _group;
+    private _params?;
+    private _view?;
+    private _title;
+    get params(): Parameters | undefined;
+    get title(): string;
+    get group(): GroupPanel;
+    get view(): IGroupPanelView | undefined;
+    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi, group: GroupPanel);
+    init(params: IGroupPanelInitParameters): void;
+    focus(): void;
+    toJSON(): GroupviewPanelState;
+    setTitle(title: string): void;
+    update(event: GroupPanelUpdateEvent): void;
+    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
+    layout(width: number, height: number): void;
+    dispose(): void;
+}

package/dist/esm/dockview/{dockviewGroupPanel.js → dockviewPanel.js}

@@ -1,107 +1,111 @@
-import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
-export class DockviewGroupPanel extends CompositeDisposable {
-    constructor(id, accessor, containerApi, group) {
-        super();
-        this.id = id;
-        this.containerApi = containerApi;
-        this.mutableDisposable = new MutableDisposable();
-        this._title = '';
-        this._group = group;
-        this.api = new DockviewPanelApiImpl(this, this._group);
-        this.addDisposables(this.api.onActiveChange(() => {
-            accessor.setActivePanel(this);
-        }));
-    }
-    get params() {
-        return this._params;
-    }
-    get title() {
-        return this._title;
-    }
-    get group() {
-        return this._group;
-    }
-    get view() {
-        return this._view;
-    }
-    init(params) {
-        var _a;
-        this._params = params.params;
-        this._view = params.view;
-        this.setTitle(params.title);
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
-    }
-    focus() {
-        this.api._onFocusEvent.fire();
-    }
-    toJSON() {
-        return {
-            id: this.id,
-            view: this.view.toJSON(),
-            params: Object.keys(this._params || {}).length > 0
-                ? this._params
-                : undefined,
-            title: this.title,
-        };
-    }
-    setTitle(title) {
-        var _a, _b;
-        const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
-        if (didTitleChange) {
-            this._title = title;
-            (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
-                params: {
-                    params: this._params,
-                    title: this.title,
-                },
-            });
-            this.api._onDidTitleChange.fire({ title });
-        }
-    }
-    update(event) {
-        var _a;
-        const params = event.params;
-        this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-        if (typeof params.title === 'string') {
-            if (params.title !== this.title) {
-                this._title = params.title;
-                this.api._onDidTitleChange.fire({ title: this.title });
-            }
-        }
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
-            params: {
-                params: this._params,
-                title: this.title,
-            },
-        });
-    }
-    updateParentGroup(group, isGroupActive) {
-        var _a;
-        this._group = group;
-        this.api.group = group;
-        const isPanelVisible = this._group.model.isPanelActive(this);
-        this.api._onDidActiveChange.fire({
-            isActive: isGroupActive && isPanelVisible,
-        });
-        this.api._onDidVisibilityChange.fire({
-            isVisible: isPanelVisible,
-        });
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.updateParentGroup(this._group, this._group.model.isPanelActive(this));
-    }
-    layout(width, height) {
-        var _a;
-        // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidDimensionChange.fire({
-            width,
-            height: height - (this.group.model.header.height || 0),
-        });
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-    }
-    dispose() {
-        var _a;
-        this.api.dispose();
-        this.mutableDisposable.dispose();
-        (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+import { DockviewPanelApiImpl, } from '../api/dockviewPanelApi';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+export class DockviewPanel extends CompositeDisposable {
+    get params() {
+        return this._params;
+    }
+    get title() {
+        return this._title;
+    }
+    get group() {
+        return this._group;
+    }
+    get view() {
+        return this._view;
+    }
+    constructor(id, accessor, containerApi, group) {
+        super();
+        this.id = id;
+        this.containerApi = containerApi;
+        this.mutableDisposable = new MutableDisposable();
+        this._title = '';
+        this._group = group;
+        this.api = new DockviewPanelApiImpl(this, this._group);
+        this.addDisposables(this.api.onActiveChange(() => {
+            accessor.setActivePanel(this);
+        }), this.api.onDidSizeChange((event) => {
+            // forward the resize event to the group since if you want to resize a panel
+            // you are actually just resizing the panels parent which is the group
+            this.group.api.setSize(event);
+        }));
+    }
+    init(params) {
+        var _a;
+        this._params = params.params;
+        this._view = params.view;
+        this.setTitle(params.title);
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
+    }
+    focus() {
+        this.api._onFocusEvent.fire();
+    }
+    toJSON() {
+        return {
+            id: this.id,
+            view: this.view.toJSON(),
+            params: Object.keys(this._params || {}).length > 0
+                ? this._params
+                : undefined,
+            title: this.title,
+        };
+    }
+    setTitle(title) {
+        var _a, _b;
+        const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
+        if (didTitleChange) {
+            this._title = title;
+            (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
+                params: {
+                    params: this._params,
+                    title: this.title,
+                },
+            });
+            this.api._onDidTitleChange.fire({ title });
+        }
+    }
+    update(event) {
+        var _a;
+        const params = event.params;
+        this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
+        if (typeof params.title === 'string') {
+            if (params.title !== this.title) {
+                this._title = params.title;
+                this.api._onDidTitleChange.fire({ title: this.title });
+            }
+        }
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
+            params: {
+                params: this._params,
+                title: this.title,
+            },
+        });
+    }
+    updateParentGroup(group, isGroupActive) {
+        var _a;
+        this._group = group;
+        this.api.group = group;
+        const isPanelVisible = this._group.model.isPanelActive(this);
+        this.api._onDidActiveChange.fire({
+            isActive: isGroupActive && isPanelVisible,
+        });
+        this.api._onDidVisibilityChange.fire({
+            isVisible: isPanelVisible,
+        });
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+    }
+    layout(width, height) {
+        var _a;
+        // the obtain the correct dimensions of the content panel we must deduct the tab height
+        this.api._onDidDimensionChange.fire({
+            width,
+            height: height - (this.group.model.header.height || 0),
+        });
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+    }
+    dispose() {
+        var _a;
+        this.api.dispose();
+        this.mutableDisposable.dispose();
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}

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

@@ -1,88 +1,110 @@
-import { DockviewApi } from '../api/component.api';
-import { Direction } from '../gridview/baseComponentGridview';
-import { IGridView } from '../gridview/gridview';
-import { IDockviewPanel } from '../groupview/groupPanel';
-import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from '../groupview/types';
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
-import { FrameworkFactory } from '../types';
-import { DockviewDropTargets } from '../groupview/dnd';
-import { PanelTransfer } from '../dnd/dataTransfer';
-import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
-export interface GroupPanelFrameworkComponentFactory {
-    content: FrameworkFactory<IContentRenderer>;
-    tab: FrameworkFactory<ITabRenderer>;
-    watermark: FrameworkFactory<IWatermarkRenderer>;
-}
-export interface TabContextMenuEvent {
-    event: MouseEvent;
-    api: DockviewApi;
-    panel: IDockviewPanel;
-}
-export interface DockviewRenderFunctions {
-    tabComponents?: {
-        [componentName: string]: {
-            new (id: string, component: string): ITabRenderer;
-        };
-    };
-    components?: {
-        [componentName: string]: {
-            new (id: string, component: string): IContentRenderer;
-        };
-    };
-    frameworkTabComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-}
-export interface ViewFactoryData {
-    content: string;
-    tab?: string;
-}
-export interface DockviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    target: DockviewDropTargets;
-    group: GroupPanel;
-    getData: () => PanelTransfer | undefined;
-}
-export interface DockviewComponentOptions extends DockviewRenderFunctions {
-    watermarkComponent?: WatermarkConstructor;
-    watermarkFrameworkComponent?: any;
-    frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
-    tabHeight?: number;
-    orientation?: Orientation;
-    styles?: ISplitviewStyles;
-    defaultTabComponent?: string;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
-}
-export interface PanelOptions {
-    component: string;
-    tabComponent?: string;
-    params?: {
-        [key: string]: any;
-    };
-    id: string;
-    title?: string;
-}
-export interface AddPanelOptions extends Omit<PanelOptions, 'component' | 'tabComponent'> {
-    component: string;
-    tabComponent?: string;
-    position?: {
-        direction?: Direction;
-        referencePanel?: string;
-    };
-}
-export interface AddGroupOptions {
-    direction?: 'left' | 'right' | 'above' | 'below';
-    referencePanel: string;
-}
-export interface MovementOptions2 {
-    group?: IGridView;
-}
-export interface MovementOptions extends MovementOptions2 {
-    includePanel?: boolean;
-    group?: GroupPanel;
-}
+import { DockviewApi } from '../api/component.api';
+import { Direction } from '../gridview/baseComponentGridview';
+import { IGridView } from '../gridview/gridview';
+import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from '../groupview/types';
+import { GroupPanel } from '../groupview/groupviewPanel';
+import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
+import { FrameworkFactory } from '../types';
+import { DockviewDropTargets } from '../groupview/dnd';
+import { PanelTransfer } from '../dnd/dataTransfer';
+import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
+import { Position } from '../dnd/droptarget';
+import { IDockviewPanel } from './dockviewPanel';
+export interface GroupPanelFrameworkComponentFactory {
+    content: FrameworkFactory<IContentRenderer>;
+    tab: FrameworkFactory<ITabRenderer>;
+    watermark: FrameworkFactory<IWatermarkRenderer>;
+}
+export interface TabContextMenuEvent {
+    event: MouseEvent;
+    api: DockviewApi;
+    panel: IDockviewPanel;
+}
+export interface DockviewRenderFunctions {
+    tabComponents?: {
+        [componentName: string]: {
+            new (id: string, component: string): ITabRenderer;
+        };
+    };
+    components?: {
+        [componentName: string]: {
+            new (id: string, component: string): IContentRenderer;
+        };
+    };
+    frameworkTabComponents?: {
+        [componentName: string]: any;
+    };
+    frameworkComponents?: {
+        [componentName: string]: any;
+    };
+}
+export interface ViewFactoryData {
+    content: string;
+    tab?: string;
+}
+export interface DockviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    target: DockviewDropTargets;
+    position: Position;
+    group?: GroupPanel;
+    getData: () => PanelTransfer | undefined;
+}
+export interface DockviewComponentOptions extends DockviewRenderFunctions {
+    watermarkComponent?: WatermarkConstructor;
+    watermarkFrameworkComponent?: any;
+    frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
+    tabHeight?: number;
+    orientation?: Orientation;
+    styles?: ISplitviewStyles;
+    defaultTabComponent?: string;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
+    createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
+    singleTabMode?: 'fullwidth' | 'default';
+}
+export interface PanelOptions {
+    component: string;
+    tabComponent?: string;
+    params?: {
+        [key: string]: any;
+    };
+    id: string;
+    title?: string;
+}
+type RelativePanel = {
+    direction?: Direction;
+    referencePanel: string | IDockviewPanel;
+};
+type RelativeGroup = {
+    direction?: Direction;
+    referenceGroup: string | GroupPanel;
+};
+type AbsolutePosition = {
+    direction: Omit<Direction, 'within'>;
+};
+export type AddPanelPositionOptions = RelativePanel | RelativeGroup | AbsolutePosition;
+export declare function isPanelOptionsWithPanel(data: AddPanelPositionOptions): data is RelativePanel;
+export declare function isPanelOptionsWithGroup(data: AddPanelPositionOptions): data is RelativeGroup;
+export interface AddPanelOptions extends Omit<PanelOptions, 'component' | 'tabComponent'> {
+    component: string;
+    tabComponent?: string;
+    position?: AddPanelPositionOptions;
+}
+type AddGroupOptionsWithPanel = {
+    referencePanel: string | IDockviewPanel;
+    direction?: Omit<Direction, 'within'>;
+};
+type AddGroupOptionsWithGroup = {
+    referenceGroup: string | GroupPanel;
+    direction?: Omit<Direction, 'within'>;
+};
+export type AddGroupOptions = AddGroupOptionsWithGroup | AddGroupOptionsWithPanel | AbsolutePosition;
+export declare function isGroupOptionsWithPanel(data: AddGroupOptions): data is AddGroupOptionsWithPanel;
+export declare function isGroupOptionsWithGroup(data: AddGroupOptions): data is AddGroupOptionsWithGroup;
+export interface MovementOptions2 {
+    group?: IGridView;
+}
+export interface MovementOptions extends MovementOptions2 {
+    includePanel?: boolean;
+    group?: GroupPanel;
+}
+export {};

package/dist/esm/dockview/options.js

@@ -1 +1,24 @@
-export {};
+export function isPanelOptionsWithPanel(data) {
+    if (data.referencePanel) {
+        return true;
+    }
+    return false;
+}
+export function isPanelOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
+    }
+    return false;
+}
+export function isGroupOptionsWithPanel(data) {
+    if (data.referencePanel) {
+        return true;
+    }
+    return false;
+}
+export function isGroupOptionsWithGroup(data) {
+    if (data.referenceGroup) {
+        return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,2 @@
+import { SerializedDockview } from './dockviewComponent';
+export declare function validateSerializedDockview(data: SerializedDockview): void;

package/dist/esm/dockview/validation.js

@@ -0,0 +1,86 @@
+import { Orientation } from '../splitview/core/splitview';
+function validateGroupViewPanelState(value) {
+    if (typeof value.id !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (typeof value.title !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (value.params !== undefined && typeof value.params !== 'object') {
+        throw new Error('invalid layout');
+    }
+}
+function validateGroupPanelViewState(value) {
+    if (typeof value.id !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (value.locked !== undefined && typeof value.locked !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+    if (value.hideHeader !== undefined && typeof value.locked !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+    if (value.activeView !== undefined &&
+        typeof value.activeView !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (!Array.isArray(value.views)) {
+        throw new Error('invalid layout');
+    }
+    for (const child of value.views) {
+        if (typeof child !== 'string') {
+            if (!Array.isArray(value.views)) {
+                throw new Error('invalid layout');
+            }
+        }
+    }
+}
+function validateSerializedGridObject(value) {
+    if (value.size !== undefined && typeof value.size !== 'number') {
+        throw new Error('invalid layout');
+    }
+    if (value.visible !== undefined && typeof value.size !== 'boolean') {
+        throw new Error('invalid layout');
+    }
+    if (value.type !== 'branch' && value.type !== 'leaf') {
+        throw new Error('invalid layout');
+    }
+    if (Array.isArray(value.data)) {
+        for (const child of value.data) {
+            validateSerializedGridObject(child);
+        }
+    }
+    else {
+        validateGroupPanelViewState(value.data);
+    }
+}
+export function validateSerializedDockview(data) {
+    if (typeof data !== 'object') {
+        throw new Error('invalid layout');
+    }
+    const { grid, panels, options, activeGroup } = data;
+    if (typeof grid !== 'object') {
+        throw new Error('invalid layout');
+    }
+    if (typeof grid.height !== 'number') {
+        throw new Error('invalid layout');
+    }
+    if (typeof grid.width !== 'number') {
+        throw new Error('invalid layout');
+    }
+    if (grid.orientation !== Orientation.HORIZONTAL &&
+        grid.orientation !== Orientation.VERTICAL) {
+        throw new Error('invalid layout');
+    }
+    validateSerializedGridObject(grid.root);
+    if (data.activeGroup !== undefined &&
+        typeof data.activeGroup !== 'string') {
+        throw new Error('invalid layout');
+    }
+    if (typeof data.panels !== 'object') {
+        throw new Error('invalid layout');
+    }
+    for (const value of Object.values(data.panels)) {
+        validateGroupViewPanelState(value);
+    }
+}

package/dist/esm/dom.d.ts

@@ -1,14 +1,14 @@
-import { Event } from './events';
-import { IDisposable } from './lifecycle';
-export declare function watchElementResize(element: HTMLElement, cb: (entry: ResizeObserverEntry) => void): IDisposable;
-export declare const removeClasses: (element: HTMLElement, ...classes: string[]) => void;
-export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;
-export declare const toggleClass: (element: HTMLElement, className: string, isToggled: boolean) => void;
-export declare function isAncestor(testChild: Node | null, testAncestor: Node | null): boolean;
-export declare function getElementsByTagName(tag: string): HTMLElement[];
-export interface IFocusTracker extends IDisposable {
-    onDidFocus: Event<void>;
-    onDidBlur: Event<void>;
-    refreshState?(): void;
-}
-export declare function trackFocus(element: HTMLElement | Window): IFocusTracker;
+import { Event } from './events';
+import { IDisposable } from './lifecycle';
+export declare function watchElementResize(element: HTMLElement, cb: (entry: ResizeObserverEntry) => void): IDisposable;
+export declare const removeClasses: (element: HTMLElement, ...classes: string[]) => void;
+export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;
+export declare const toggleClass: (element: HTMLElement, className: string, isToggled: boolean) => void;
+export declare function isAncestor(testChild: Node | null, testAncestor: Node | null): boolean;
+export declare function getElementsByTagName(tag: string): HTMLElement[];
+export interface IFocusTracker extends IDisposable {
+    onDidFocus: Event<void>;
+    onDidBlur: Event<void>;
+    refreshState?(): void;
+}
+export declare function trackFocus(element: HTMLElement | Window): IFocusTracker;