dockview-core 1.6.0

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

@@ -0,0 +1,133 @@
+import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
+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
+ * chain and finding each child index on the way.
+ *
+ * This will break as soon as DOM structures of the Splitview or Gridview change.
+ */
+export declare function getGridLocation(element: HTMLElement): number[];
+export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[];
+export declare function getDirectionOrientation(direction: Position): Orientation;
+export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation;
+export interface IViewSize {
+    width?: number;
+    height?: number;
+}
+export interface IGridView {
+    readonly onDidChange: Event<IViewSize | undefined>;
+    readonly element: HTMLElement;
+    readonly minimumWidth: number;
+    readonly maximumWidth: number;
+    readonly minimumHeight: number;
+    readonly maximumHeight: number;
+    priority?: LayoutPriority;
+    layout(width: number, height: number): void;
+    toJSON(): object;
+    fromJSON?(json: object): void;
+    snap?: boolean;
+    setVisible?(visible: boolean): void;
+}
+export declare const orthogonal: (orientation: Orientation) => Orientation;
+export interface GridLeafNode<T extends IGridView> {
+    readonly view: T;
+    readonly cachedVisibleSize: number | undefined;
+    readonly box: {
+        width: number;
+        height: number;
+    };
+}
+export interface GridBranchNode<T extends IGridView> {
+    readonly children: GridNode<T>[];
+    readonly box: {
+        width: number;
+        height: number;
+    };
+}
+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';
+    data: T | SerializedGridObject<T>[];
+    size?: number;
+    visible?: boolean;
+}
+export interface ISerializedLeafNode<T = any> {
+    type: 'leaf';
+    data: T;
+    size: number;
+    visible?: boolean;
+}
+export interface ISerializedBranchNode {
+    type: 'branch';
+    data: ISerializedNode[];
+    size: number;
+}
+export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
+export interface INodeDescriptor {
+    node: Node;
+    visible?: boolean;
+}
+export interface IViewDeserializer {
+    fromJSON: (data: ISerializedLeafNode) => IGridView;
+}
+export interface SerializedGridview<T> {
+    root: SerializedGridObject<T>;
+    width: number;
+    height: number;
+    orientation: Orientation;
+}
+export declare class Gridview implements IDisposable {
+    readonly proportionalLayout: boolean;
+    readonly styles: ISplitviewStyles | undefined;
+    private _root;
+    readonly element: HTMLElement;
+    private disposable;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<{
+        size?: number;
+        orthogonalSize?: number;
+    }>;
+    get length(): number;
+    get orientation(): Orientation;
+    set orientation(orientation: Orientation);
+    get width(): number;
+    get height(): number;
+    get minimumWidth(): number;
+    get minimumHeight(): number;
+    get maximumWidth(): number;
+    get maximumHeight(): number;
+    serialize(): SerializedGridview<any>;
+    dispose(): void;
+    clear(): void;
+    deserialize(json: any, deserializer: IViewDeserializer): void;
+    private _deserialize;
+    private _deserializeNode;
+    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>;
+    getView(location?: number[]): GridNode<IGridView>;
+    private _getViews;
+    private progmaticSelect;
+    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation);
+    isViewVisible(location: number[]): boolean;
+    setViewVisible(location: number[], visible: boolean): void;
+    moveView(parentLocation: number[], from: number, to: number): void;
+    addView(view: IGridView, size: number | Sizing, location: number[]): void;
+    remove(view: IGridView, sizing?: Sizing): IGridView;
+    removeView(location: number[], sizing?: Sizing): IGridView;
+    layout(width: number, height: number): void;
+    private getNode;
+}

package/dist/esm/gridview/gridview.js

@@ -0,0 +1,423 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Orientation, Sizing, } from '../splitview/splitview';
+import { tail } from '../array';
+import { LeafNode } from './leafNode';
+import { BranchNode } from './branchNode';
+import { Emitter } from '../events';
+import { MutableDisposable } from '../lifecycle';
+function findLeaf(candiateNode, last) {
+    if (candiateNode instanceof LeafNode) {
+        return candiateNode;
+    }
+    if (candiateNode instanceof BranchNode) {
+        return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+    }
+    throw new Error('invalid node');
+}
+function flipNode(node, size, orthogonalSize) {
+    if (node instanceof BranchNode) {
+        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
+        let totalSize = 0;
+        for (let i = node.children.length - 1; i >= 0; i--) {
+            const child = node.children[i];
+            const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
+            let newSize = node.size === 0
+                ? 0
+                : Math.round((size * childSize) / node.size);
+            totalSize += newSize;
+            // The last view to add should adjust to rounding errors
+            if (i === 0) {
+                newSize += size - totalSize;
+            }
+            result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+        }
+        return result;
+    }
+    else {
+        return new LeafNode(node.view, orthogonal(node.orientation), orthogonalSize);
+    }
+}
+export function indexInParent(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+        throw new Error('Invalid grid element');
+    }
+    let el = parentElement.firstElementChild;
+    let index = 0;
+    while (el !== element && el !== parentElement.lastElementChild && el) {
+        el = el.nextElementSibling;
+        index++;
+    }
+    return index;
+}
+/**
+ * Find the grid location of a specific DOM element by traversing the parent
+ * chain and finding each child index on the way.
+ *
+ * This will break as soon as DOM structures of the Splitview or Gridview change.
+ */
+export function getGridLocation(element) {
+    const parentElement = element.parentElement;
+    if (!parentElement) {
+        throw new Error('Invalid grid element');
+    }
+    if (/\bgrid-view\b/.test(parentElement.className)) {
+        return [];
+    }
+    const index = indexInParent(parentElement);
+    const ancestor = parentElement.parentElement.parentElement.parentElement;
+    return [...getGridLocation(ancestor), index];
+}
+export function getRelativeLocation(rootOrientation, location, direction) {
+    const orientation = getLocationOrientation(rootOrientation, location);
+    const directionOrientation = getDirectionOrientation(direction);
+    if (orientation === directionOrientation) {
+        const [rest, _index] = tail(location);
+        let index = _index;
+        if (direction === 'right' || direction === 'bottom') {
+            index += 1;
+        }
+        return [...rest, index];
+    }
+    else {
+        const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
+        return [...location, index];
+    }
+}
+export function getDirectionOrientation(direction) {
+    return direction === 'top' || direction === 'bottom'
+        ? Orientation.VERTICAL
+        : Orientation.HORIZONTAL;
+}
+export function getLocationOrientation(rootOrientation, location) {
+    return location.length % 2 === 0
+        ? orthogonal(rootOrientation)
+        : rootOrientation;
+}
+export const orthogonal = (orientation) => orientation === Orientation.HORIZONTAL
+    ? Orientation.VERTICAL
+    : Orientation.HORIZONTAL;
+export function isGridBranchNode(node) {
+    return !!node.children;
+}
+const serializeBranchNode = (node, orientation) => {
+    const size = orientation === Orientation.VERTICAL ? node.box.width : node.box.height;
+    if (!isGridBranchNode(node)) {
+        if (typeof node.cachedVisibleSize === 'number') {
+            return {
+                type: 'leaf',
+                data: node.view.toJSON(),
+                size: node.cachedVisibleSize,
+                visible: false,
+            };
+        }
+        return { type: 'leaf', data: node.view.toJSON(), size };
+    }
+    return {
+        type: 'branch',
+        data: node.children.map((c) => serializeBranchNode(c, orthogonal(orientation))),
+        size,
+    };
+};
+export class Gridview {
+    get length() {
+        return this._root ? this._root.children.length : 0;
+    }
+    get orientation() {
+        return this.root.orientation;
+    }
+    set orientation(orientation) {
+        if (this.root.orientation === orientation) {
+            return;
+        }
+        const { size, orthogonalSize } = this.root;
+        this.root = flipNode(this.root, orthogonalSize, size);
+        this.root.layout(size, orthogonalSize);
+    }
+    get width() {
+        return this.root.width;
+    }
+    get height() {
+        return this.root.height;
+    }
+    get minimumWidth() {
+        return this.root.minimumWidth;
+    }
+    get minimumHeight() {
+        return this.root.minimumHeight;
+    }
+    get maximumWidth() {
+        return this.root.maximumHeight;
+    }
+    get maximumHeight() {
+        return this.root.maximumHeight;
+    }
+    serialize() {
+        const root = serializeBranchNode(this.getView(), this.orientation);
+        return {
+            root,
+            width: this.width,
+            height: this.height,
+            orientation: this.orientation,
+        };
+    }
+    dispose() {
+        this.disposable.dispose();
+        this._onDidChange.dispose();
+        this.root.dispose();
+        this.element.remove();
+    }
+    clear() {
+        const orientation = this.root.orientation;
+        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
+    }
+    deserialize(json, deserializer) {
+        const orientation = json.orientation;
+        const height = orientation === Orientation.VERTICAL ? json.height : json.width;
+        this._deserialize(json.root, orientation, deserializer, height);
+    }
+    _deserialize(root, orientation, deserializer, orthogonalSize) {
+        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
+    }
+    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
+        let result;
+        if (node.type === 'branch') {
+            const serializedChildren = node.data;
+            const children = serializedChildren.map((serializedChild) => {
+                return {
+                    node: this._deserializeNode(serializedChild, orthogonal(orientation), deserializer, node.size),
+                    visible: serializedChild.visible,
+                };
+            });
+            // HORIZONTAL => height=orthogonalsize width=size
+            // VERTICAL => height=size width=orthogonalsize
+            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
+        }
+        else {
+            result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+        }
+        return result;
+    }
+    get root() {
+        return this._root;
+    }
+    set root(root) {
+        const oldRoot = this._root;
+        if (oldRoot) {
+            oldRoot.dispose();
+            this.element.removeChild(oldRoot.element);
+        }
+        this._root = root;
+        this.element.appendChild(this._root.element);
+        this.disposable.value = this._root.onDidChange((e) => {
+            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);
+    }
+    previous(location) {
+        return this.progmaticSelect(location, true);
+    }
+    getView(location) {
+        const node = location ? this.getNode(location)[1] : this.root;
+        return this._getViews(node, this.orientation);
+    }
+    _getViews(node, orientation, cachedVisibleSize) {
+        const box = { height: node.height, width: node.width };
+        if (node instanceof LeafNode) {
+            return { box, view: node.view, cachedVisibleSize };
+        }
+        const children = [];
+        for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            const nodeCachedVisibleSize = node.getChildCachedVisibleSize(i);
+            children.push(this._getViews(child, orthogonal(orientation), nodeCachedVisibleSize));
+        }
+        return { box, children };
+    }
+    progmaticSelect(location, reverse = false) {
+        const [path, node] = this.getNode(location);
+        if (!(node instanceof LeafNode)) {
+            throw new Error('invalid location');
+        }
+        for (let i = path.length - 1; i > -1; i--) {
+            const n = path[i];
+            const l = location[i] || 0;
+            const canProgressInCurrentLevel = reverse
+                ? l - 1 > -1
+                : l + 1 < n.children.length;
+            if (canProgressInCurrentLevel) {
+                return findLeaf(n.children[reverse ? l - 1 : l + 1], reverse);
+            }
+        }
+        return findLeaf(this.root, reverse);
+    }
+    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);
+        if (!(parent instanceof BranchNode)) {
+            throw new Error('Invalid from location');
+        }
+        return parent.isChildVisible(index);
+    }
+    setViewVisible(location, visible) {
+        const [rest, index] = tail(location);
+        const [, parent] = this.getNode(rest);
+        if (!(parent instanceof BranchNode)) {
+            throw new Error('Invalid from location');
+        }
+        parent.setChildVisible(index, visible);
+    }
+    moveView(parentLocation, from, to) {
+        const [, parent] = this.getNode(parentLocation);
+        if (!(parent instanceof BranchNode)) {
+            throw new Error('Invalid location');
+        }
+        parent.moveChild(from, to);
+    }
+    addView(view, size, location) {
+        const [rest, index] = tail(location);
+        const [pathToParent, parent] = this.getNode(rest);
+        if (parent instanceof BranchNode) {
+            const node = new LeafNode(view, orthogonal(parent.orientation), parent.orthogonalSize);
+            parent.addChild(node, size, index);
+        }
+        else {
+            const [grandParent, ..._] = [...pathToParent].reverse();
+            const [parentIndex, ...__] = [...rest].reverse();
+            let newSiblingSize = 0;
+            const newSiblingCachedVisibleSize = grandParent.getChildCachedVisibleSize(parentIndex);
+            if (typeof newSiblingCachedVisibleSize === 'number') {
+                newSiblingSize = Sizing.Invisible(newSiblingCachedVisibleSize);
+            }
+            grandParent.removeChild(parentIndex);
+            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
+            grandParent.addChild(newParent, parent.size, parentIndex);
+            const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
+            newParent.addChild(newSibling, newSiblingSize, 0);
+            if (typeof size !== 'number' && size.type === 'split') {
+                size = { type: 'split', index: 0 };
+            }
+            const node = new LeafNode(view, grandParent.orientation, parent.size);
+            newParent.addChild(node, size, index);
+        }
+    }
+    remove(view, sizing) {
+        const location = getGridLocation(view.element);
+        return this.removeView(location, sizing);
+    }
+    removeView(location, sizing) {
+        const [rest, index] = tail(location);
+        const [pathToParent, parent] = this.getNode(rest);
+        if (!(parent instanceof BranchNode)) {
+            throw new Error('Invalid location');
+        }
+        const node = parent.children[index];
+        if (!(node instanceof LeafNode)) {
+            throw new Error('Invalid location');
+        }
+        parent.removeChild(index, sizing);
+        if (parent.children.length === 0) {
+            return node.view;
+        }
+        if (parent.children.length > 1) {
+            return node.view;
+        }
+        const sibling = parent.children[0];
+        if (pathToParent.length === 0) {
+            // parent is root
+            if (sibling instanceof LeafNode) {
+                return node.view;
+            }
+            // we must promote sibling to be the new root
+            parent.removeChild(0, sizing);
+            this.root = sibling;
+            return node.view;
+        }
+        const [grandParent, ..._] = [...pathToParent].reverse();
+        const [parentIndex, ...__] = [...rest].reverse();
+        const isSiblingVisible = parent.isChildVisible(0);
+        parent.removeChild(0, sizing);
+        const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
+        grandParent.removeChild(parentIndex, sizing);
+        if (sibling instanceof BranchNode) {
+            sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+            for (let i = 0; i < sibling.children.length; i++) {
+                const child = sibling.children[i];
+                grandParent.addChild(child, child.size, parentIndex + i);
+            }
+        }
+        else {
+            const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
+            const siblingSizing = isSiblingVisible
+                ? sibling.orthogonalSize
+                : Sizing.Invisible(sibling.orthogonalSize);
+            grandParent.addChild(newSibling, siblingSizing, parentIndex);
+        }
+        for (let i = 0; i < sizes.length; i++) {
+            grandParent.resizeChild(i, sizes[i]);
+        }
+        return node.view;
+    }
+    layout(width, height) {
+        const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL
+            ? [height, width]
+            : [width, height];
+        this.root.layout(size, orthogonalSize);
+    }
+    getNode(location, node = this.root, path = []) {
+        if (location.length === 0) {
+            return [path, node];
+        }
+        if (!(node instanceof BranchNode)) {
+            throw new Error('Invalid location');
+        }
+        const [index, ...rest] = location;
+        if (index < 0 || index >= node.children.length) {
+            throw new Error('Invalid location');
+        }
+        const child = node.children[index];
+        path.push(node);
+        return this.getNode(rest, child, path);
+    }
+}

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

@@ -0,0 +1,80 @@
+import { SerializedGridview } from './gridview';
+import { IPanelDeserializer } from '../dockview/deserializer';
+import { GridviewComponentOptions } from './options';
+import { BaseGrid, Direction, IBaseGrid, IGridPanelView } from './baseComponentGridview';
+import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPanel } from './gridviewPanel';
+import { BaseComponentOptions } from '../panel/types';
+import { Orientation, Sizing } from '../splitview/splitview';
+import { Event } from '../events';
+import { Position } from '../dnd/droptarget';
+export interface SerializedGridviewComponent {
+    grid: SerializedGridview<GridPanelViewState>;
+    activePanel?: string;
+}
+export interface AddComponentOptions extends BaseComponentOptions {
+    minimumWidth?: number;
+    maximumWidth?: number;
+    minimumHeight?: number;
+    maximumHeight?: number;
+    position?: {
+        direction: Direction;
+        referencePanel: string;
+    };
+    location?: number[];
+}
+export interface IGridPanelComponentView extends IGridPanelView {
+    init: (params: GridviewInitParameters) => void;
+}
+export type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
+export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
+    readonly orientation: Orientation;
+    readonly onDidLayoutFromJSON: Event<void>;
+    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    addPanel(options: AddComponentOptions): IGridviewPanel;
+    removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
+    focus(): void;
+    fromJSON(serializedGridview: SerializedGridviewComponent): void;
+    toJSON(): SerializedGridviewComponent;
+    movePanel(panel: IGridviewPanel, options: {
+        direction: Direction;
+        reference: string;
+        size?: number;
+    }): void;
+    setVisible(panel: IGridviewPanel, visible: boolean): void;
+    setActive(panel: IGridviewPanel): void;
+}
+export declare class GridviewComponent extends BaseGrid<GridviewPanel> implements IGridviewComponent {
+    private _options;
+    private _deserializer;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutFromJSON: Event<void>;
+    get orientation(): Orientation;
+    set orientation(value: Orientation);
+    get options(): GridviewComponentOptions;
+    get deserializer(): IPanelDeserializer | undefined;
+    set deserializer(value: IPanelDeserializer | undefined);
+    constructor(element: HTMLElement, options: GridviewComponentOptions);
+    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    removePanel(panel: GridviewPanel): void;
+    /**
+     * Serialize the current state of the layout
+     *
+     * @returns A JSON respresentation of the layout
+     */
+    toJSON(): SerializedGridviewComponent;
+    setVisible(panel: GridviewPanel, visible: boolean): void;
+    setActive(panel: GridviewPanel): void;
+    focus(): void;
+    fromJSON(serializedGridview: SerializedGridviewComponent): void;
+    clear(): void;
+    movePanel(panel: GridviewPanel, options: {
+        direction: Direction;
+        reference: string;
+        size?: number;
+    }): void;
+    addPanel(options: AddComponentOptions): IGridviewPanel;
+    private registerPanel;
+    moveGroup(referenceGroup: IGridPanelComponentView, groupId: string, target: Position): void;
+    removeGroup(group: GridviewPanel): void;
+    dispose(): void;
+}