dockview 1.5.2 → 1.6.0

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/gridview/baseComponentGridview.d.ts

@@ -5,7 +5,7 @@ import { CompositeDisposable, IValueDisposable } from '../lifecycle';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
-export declare type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
+export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
 export interface BaseGridOptions {
     readonly proportionalLayout: boolean;

package/dist/esm/gridview/baseComponentGridview.js

@@ -1,6 +1,5 @@
 import { Emitter, Event, TickDelayedEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
-import { Position } from '../dnd/droptarget';
 import { CompositeDisposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
 import { Sizing, } from '../splitview/core/splitview';
@@ -8,45 +7,19 @@ const nextLayoutId = sequentialNumberGenerator();
 export function toTarget(direction) {
     switch (direction) {
         case 'left':
-            return Position.Left;
+            return 'left';
         case 'right':
-            return Position.Right;
+            return 'right';
         case 'above':
-            return Position.Top;
+            return 'top';
         case 'below':
-            return Position.Bottom;
+            return 'bottom';
         case 'within':
         default:
-            return Position.Center;
+            return 'center';
     }
 }
 export class BaseGrid extends CompositeDisposable {
-    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);
-    }
     get id() {
         return this._id;
     }
@@ -80,6 +53,32 @@ export class BaseGrid extends CompositeDisposable {
     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();

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

@@ -1,12 +1,12 @@
 import { CompositeDisposable } from '../lifecycle';
 import { IFrameworkPart, PanelUpdateEvent, PanelInitParameters, IPanel } from '../panel/types';
-import { PanelApiImpl } from '../api/panelApi';
+import { PanelApi, PanelApiImpl } from '../api/panelApi';
 export interface BasePanelViewState {
     id: string;
     component: string;
     params?: Record<string, any>;
 }
-export interface BasePanelViewExported<T extends PanelApiImpl> {
+export interface BasePanelViewExported<T extends PanelApi> {
     readonly id: string;
     readonly api: T;
     readonly width: number;

package/dist/esm/gridview/basePanelView.js

@@ -1,6 +1,19 @@
 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;
@@ -21,19 +34,6 @@ export class BasePanelView extends CompositeDisposable {
             this.api._onDidChangeFocus.fire({ isFocused: false });
         }));
     }
-    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;
-    }
     focus() {
         this.api._onFocusEvent.fire();
     }

package/dist/esm/gridview/branchNode.js

@@ -7,53 +7,6 @@ import { Emitter, Event } from '../events';
 import { LeafNode } from './leafNode';
 import { CompositeDisposable, Disposable } from '../lifecycle';
 export class BranchNode extends CompositeDisposable {
-    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
-        super();
-        this.orientation = orientation;
-        this.proportionalLayout = proportionalLayout;
-        this.styles = styles;
-        this.children = [];
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._childrenDisposable = Disposable.NONE;
-        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();
-    }
     get width() {
         return this.orientation === Orientation.HORIZONTAL
             ? this.size
@@ -119,6 +72,53 @@ export class BranchNode extends CompositeDisposable {
         }
         return LayoutPriority.Normal;
     }
+    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+        super();
+        this.orientation = orientation;
+        this.proportionalLayout = proportionalLayout;
+        this.styles = styles;
+        this.children = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._childrenDisposable = Disposable.NONE;
+        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);

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

@@ -1,9 +1,9 @@
 import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview';
-import { Position } from '../dnd/droptarget';
 import { LeafNode } from './leafNode';
 import { Node } from './types';
 import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
+import { Position } from '../dnd/droptarget';
 export declare function indexInParent(element: HTMLElement): number;
 /**
  * Find the grid location of a specific DOM element by traversing the parent
@@ -49,7 +49,7 @@ export interface GridBranchNode<T extends IGridView> {
         height: number;
     };
 }
-export declare type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>;
+export type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>;
 export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>;
 export interface SerializedGridObject<T> {
     type: 'leaf' | 'branch';
@@ -68,7 +68,7 @@ export interface ISerializedBranchNode {
     data: ISerializedNode[];
     size: number;
 }
-export declare type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
+export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
 export interface INodeDescriptor {
     node: Node;
     visible?: boolean;
@@ -87,6 +87,7 @@ export declare class Gridview implements IDisposable {
         size?: number;
         orthogonalSize?: number;
     }>;
+    get length(): number;
     serialize(): {
         root: SerializedGridObject<any>;
         width: number;
@@ -102,6 +103,11 @@ export declare class Gridview implements IDisposable {
     set orientation(orientation: Orientation);
     private get root();
     private set root(value);
+    /**
+     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
+     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
+     */
+    insertOrthogonalSplitviewAtRoot(): void;
     next(location: number[]): LeafNode;
     previous(location: number[]): LeafNode;
     getView(): GridBranchNode<IGridView>;

package/dist/esm/gridview/gridview.js

@@ -3,7 +3,6 @@
  * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
  *--------------------------------------------------------------------------------------------*/
 import { Orientation, Sizing, } from '../splitview/core/splitview';
-import { Position } from '../dnd/droptarget';
 import { tail } from '../array';
 import { LeafNode } from './leafNode';
 import { BranchNode } from './branchNode';
@@ -78,20 +77,18 @@ export function getRelativeLocation(rootOrientation, location, direction) {
     if (orientation === directionOrientation) {
         const [rest, _index] = tail(location);
         let index = _index;
-        if (direction === Position.Right || direction === Position.Bottom) {
+        if (direction === 'right' || direction === 'bottom') {
             index += 1;
         }
         return [...rest, index];
     }
     else {
-        const index = direction === Position.Right || direction === Position.Bottom
-            ? 1
-            : 0;
+        const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
         return [...location, index];
     }
 }
 export function getDirectionOrientation(direction) {
-    return direction === Position.Top || direction === Position.Bottom
+    return direction === 'top' || direction === 'bottom'
         ? Orientation.VERTICAL
         : Orientation.HORIZONTAL;
 }
@@ -126,15 +123,8 @@ const serializeBranchNode = (node, orientation) => {
     };
 };
 export class Gridview {
-    constructor(proportionalLayout, styles, orientation) {
-        this.proportionalLayout = proportionalLayout;
-        this.styles = styles;
-        this.disposable = new MutableDisposable();
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.element = document.createElement('div');
-        this.element.className = 'grid-view';
-        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+    get length() {
+        return this._root ? this._root.children.length : 0;
     }
     serialize() {
         const root = serializeBranchNode(this.getView(), this.orientation);
@@ -208,6 +198,32 @@ export class Gridview {
             this._onDidChange.fire(e);
         });
     }
+    /**
+     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
+     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
+     */
+    insertOrthogonalSplitviewAtRoot() {
+        if (!this._root) {
+            return;
+        }
+        const oldRoot = this.root;
+        oldRoot.element.remove();
+        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+        if (oldRoot.children.length === 1) {
+            // can remove one level of redundant branching if there is only a single child
+            const childReference = oldRoot.children[0];
+            oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+            oldRoot.dispose();
+            this._root.addChild(childReference, Sizing.Distribute, 0);
+        }
+        else {
+            this._root.addChild(oldRoot, Sizing.Distribute, 0);
+        }
+        this.element.appendChild(this._root.element);
+        this.disposable.value = this._root.onDidChange((e) => {
+            this._onDidChange.fire(e);
+        });
+    }
     next(location) {
         return this.progmaticSelect(location);
     }
@@ -266,6 +282,16 @@ export class Gridview {
     get maximumHeight() {
         return this.root.maximumHeight;
     }
+    constructor(proportionalLayout, styles, orientation) {
+        this.proportionalLayout = proportionalLayout;
+        this.styles = styles;
+        this.disposable = new MutableDisposable();
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.element = document.createElement('div');
+        this.element.className = 'grid-view';
+        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+    }
     isViewVisible(location) {
         const [rest, index] = tail(location);
         const [, parent] = this.getNode(rest);

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

@@ -1,5 +1,4 @@
 import { SerializedGridObject } from './gridview';
-import { Position } from '../dnd/droptarget';
 import { IPanelDeserializer } from '../dockview/deserializer';
 import { GridviewComponentOptions } from './options';
 import { BaseGrid, Direction, IBaseGrid, IGridPanelView } from './baseComponentGridview';
@@ -7,6 +6,7 @@ import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPan
 import { BaseComponentOptions } from '../panel/types';
 import { Orientation, Sizing } from '../splitview/core/splitview';
 import { Event } from '../events';
+import { Position } from '../dnd/droptarget';
 export interface SerializedGridview {
     grid: {
         height: number;
@@ -30,7 +30,7 @@ export interface AddComponentOptions extends BaseComponentOptions {
 export interface IGridPanelComponentView extends IGridPanelView {
     init: (params: GridviewInitParameters) => void;
 }
-export declare type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
+export type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
     readonly onDidLayoutFromJSON: Event<void>;

package/dist/esm/gridview/gridviewComponent.js

@@ -1,11 +1,25 @@
 import { getRelativeLocation, getGridLocation, } from './gridview';
-import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
 import { CompositeDisposable } from '../lifecycle';
 import { BaseGrid, toTarget, } from './baseComponentGridview';
 import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
 export class GridviewComponent extends BaseGrid {
+    get orientation() {
+        return this.gridview.orientation;
+    }
+    set orientation(value) {
+        this.gridview.orientation = value;
+    }
+    get options() {
+        return this._options;
+    }
+    get deserializer() {
+        return this._deserializer;
+    }
+    set deserializer(value) {
+        this._deserializer = value;
+    }
     constructor(element, options) {
         super(element, {
             proportionalLayout: options.proportionalLayout,
@@ -22,21 +36,6 @@ export class GridviewComponent extends BaseGrid {
             this.options.frameworkComponents = {};
         }
     }
-    get orientation() {
-        return this.gridview.orientation;
-    }
-    set orientation(value) {
-        this.gridview.orientation = value;
-    }
-    get options() {
-        return this._options;
-    }
-    get deserializer() {
-        return this._deserializer;
-    }
-    set deserializer(value) {
-        this._deserializer = value;
-    }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
@@ -134,7 +133,7 @@ export class GridviewComponent extends BaseGrid {
             throw new Error(`reference group ${options.reference} does not exist`);
         }
         const target = toTarget(options.direction);
-        if (target === Position.Center) {
+        if (target === 'center') {
             throw new Error(`${target} not supported as an option`);
         }
         else {
@@ -152,7 +151,7 @@ export class GridviewComponent extends BaseGrid {
                 throw new Error(`reference group ${options.position.referencePanel} does not exist`);
             }
             const target = toTarget(options.position.direction);
-            if (target === Position.Center) {
+            if (target === 'center') {
                 throw new Error(`${target} not supported as an option`);
             }
             else {

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

@@ -1,7 +1,7 @@
 import { PanelInitParameters } from '../panel/types';
 import { GridviewComponent, IGridPanelComponentView } from './gridviewComponent';
 import { BasePanelView, BasePanelViewExported, BasePanelViewState } from './basePanelView';
-import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
+import { GridviewPanelApi, GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { LayoutPriority } from '../splitview/core/splitview';
 import { Event } from '../events';
 import { IViewSize } from './gridview';
@@ -15,7 +15,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
     accessor: GridviewComponent;
     isVisible?: boolean;
 }
-export interface IGridviewPanel extends BasePanelViewExported<GridviewPanelApiImpl> {
+export interface IGridviewPanel extends BasePanelViewExported<GridviewPanelApi> {
     readonly minimumWidth: number;
     readonly maximumWidth: number;
     readonly minimumHeight: number;
@@ -43,7 +43,7 @@ export declare abstract class GridviewPanel extends BasePanelView<GridviewPanelA
     get maximumHeight(): number;
     get maximumWidth(): number;
     get isActive(): boolean;
-    constructor(id: string, component: string, api?: GridviewPanelApiImpl);
+    constructor(id: string, component: string, api: GridviewPanelApiImpl);
     setVisible(isVisible: boolean): void;
     setActive(isActive: boolean): void;
     init(parameters: GridviewInitParameters): void;