dockview-core 1.6.0

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -0,0 +1,101 @@
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
+import { SplitviewComponentOptions } from './options';
+import { BaseComponentOptions } from '../panel/types';
+import { Event } from '../events';
+import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
+export interface SerializedSplitviewPanelData {
+    id: string;
+    component: string;
+    minimumSize?: number;
+    maximumSize?: number;
+    params?: {
+        [index: string]: any;
+    };
+}
+export interface SerializedSplitviewPanel {
+    snap?: boolean;
+    priority?: LayoutPriority;
+    data: SerializedSplitviewPanelData;
+    size: number;
+}
+export interface SerializedSplitview {
+    orientation: Orientation;
+    size: number;
+    activeView?: string;
+    views: SerializedSplitviewPanel[];
+}
+export interface AddSplitviewComponentOptions extends BaseComponentOptions {
+    index?: number;
+    minimumSize?: number;
+    maximumSize?: number;
+}
+export type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
+export interface ISplitviewComponent extends IDisposable {
+    readonly minimumSize: number;
+    readonly maximumSize: number;
+    readonly height: number;
+    readonly width: number;
+    readonly length: number;
+    readonly orientation: Orientation;
+    readonly onDidAddView: Event<IView>;
+    readonly onDidRemoveView: Event<IView>;
+    readonly onDidLayoutFromJSON: Event<void>;
+    readonly panels: SplitviewPanel[];
+    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    layout(width: number, height: number): void;
+    onDidLayoutChange: Event<void>;
+    toJSON(): SerializedSplitview;
+    fromJSON(serializedSplitview: SerializedSplitview): void;
+    focus(): void;
+    getPanel(id: string): ISplitviewPanel | undefined;
+    removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
+    setVisible(panel: ISplitviewPanel, visible: boolean): void;
+    movePanel(from: number, to: number): void;
+    clear(): void;
+}
+/**
+ * A high-level implementation of splitview that works using 'panels'
+ */
+export declare class SplitviewComponent extends CompositeDisposable implements ISplitviewComponent {
+    private readonly element;
+    private _disposable;
+    private _splitview;
+    private _activePanel;
+    private _panels;
+    private _options;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutFromJSON: Event<void>;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<IView>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<IView>;
+    private readonly _onDidLayoutChange;
+    readonly onDidLayoutChange: Event<void>;
+    get panels(): SplitviewPanel[];
+    get options(): SplitviewComponentOptions;
+    get length(): number;
+    get orientation(): Orientation;
+    get splitview(): Splitview;
+    set splitview(value: Splitview);
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get height(): number;
+    get width(): number;
+    constructor(element: HTMLElement, options: SplitviewComponentOptions);
+    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    focus(): void;
+    movePanel(from: number, to: number): void;
+    setVisible(panel: SplitviewPanel, visible: boolean): void;
+    setActive(view: SplitviewPanel, skipFocus?: boolean): void;
+    removePanel(panel: SplitviewPanel, sizing?: Sizing): void;
+    getPanel(id: string): SplitviewPanel | undefined;
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    layout(width: number, height: number): void;
+    private doAddView;
+    toJSON(): SerializedSplitview;
+    fromJSON(serializedSplitview: SerializedSplitview): void;
+    clear(): void;
+    dispose(): void;
+}

package/dist/esm/splitview/splitviewComponent.js

@@ -0,0 +1,249 @@
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
+import { Orientation, Sizing, Splitview, } from './splitview';
+import { Emitter } from '../events';
+import { createComponent } from '../panel/componentFactory';
+/**
+ * A high-level implementation of splitview that works using 'panels'
+ */
+export class SplitviewComponent extends CompositeDisposable {
+    get panels() {
+        return this.splitview.getViews();
+    }
+    get options() {
+        return this._options;
+    }
+    get length() {
+        return this._panels.size;
+    }
+    get orientation() {
+        return this.splitview.orientation;
+    }
+    get splitview() {
+        return this._splitview;
+    }
+    set splitview(value) {
+        this._splitview = value;
+        this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+            this._onDidLayoutChange.fire(undefined);
+        }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
+    }
+    get minimumSize() {
+        return this.splitview.minimumSize;
+    }
+    get maximumSize() {
+        return this.splitview.maximumSize;
+    }
+    get height() {
+        return this.splitview.orientation === Orientation.HORIZONTAL
+            ? this.splitview.orthogonalSize
+            : this.splitview.size;
+    }
+    get width() {
+        return this.splitview.orientation === Orientation.HORIZONTAL
+            ? this.splitview.size
+            : this.splitview.orthogonalSize;
+    }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._disposable = new MutableDisposable();
+        this._panels = new Map();
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
+        this._onDidLayoutChange = new Emitter();
+        this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._options = options;
+        if (!options.components) {
+            options.components = {};
+        }
+        if (!options.frameworkComponents) {
+            options.frameworkComponents = {};
+        }
+        this.splitview = new Splitview(this.element, options);
+        this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+    }
+    updateOptions(options) {
+        const hasOrientationChanged = typeof options.orientation === 'string' &&
+            this.options.orientation !== options.orientation;
+        this._options = Object.assign(Object.assign({}, this.options), options);
+        if (hasOrientationChanged) {
+            this.splitview.orientation = options.orientation;
+        }
+        this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
+    }
+    focus() {
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    movePanel(from, to) {
+        this.splitview.moveView(from, to);
+    }
+    setVisible(panel, visible) {
+        const index = this.panels.indexOf(panel);
+        this.splitview.setViewVisible(index, visible);
+    }
+    setActive(view, skipFocus) {
+        this._activePanel = view;
+        this.panels
+            .filter((v) => v !== view)
+            .forEach((v) => {
+            v.api._onDidActiveChange.fire({ isActive: false });
+            if (!skipFocus) {
+                v.focus();
+            }
+        });
+        view.api._onDidActiveChange.fire({ isActive: true });
+        if (!skipFocus) {
+            view.focus();
+        }
+    }
+    removePanel(panel, sizing) {
+        const disposable = this._panels.get(panel.id);
+        if (!disposable) {
+            throw new Error(`unknown splitview panel ${panel.id}`);
+        }
+        disposable.disposable.dispose();
+        disposable.value.dispose();
+        this._panels.delete(panel.id);
+        const index = this.panels.findIndex((_) => _ === panel);
+        this.splitview.removeView(index, sizing);
+        const panels = this.panels;
+        if (panels.length > 0) {
+            this.setActive(panels[panels.length - 1]);
+        }
+    }
+    getPanel(id) {
+        return this.panels.find((view) => view.id === id);
+    }
+    addPanel(options) {
+        if (this._panels.has(options.id)) {
+            throw new Error(`panel ${options.id} already exists`);
+        }
+        const view = createComponent(options.id, options.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+            ? {
+                createComponent: this.options.frameworkWrapper.createComponent,
+            }
+            : undefined);
+        view.orientation = this.splitview.orientation;
+        view.init({
+            params: options.params || {},
+            minimumSize: options.minimumSize,
+            maximumSize: options.maximumSize,
+            snap: options.snap,
+            priority: options.priority,
+            accessor: this,
+        });
+        const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
+        const index = typeof options.index === 'number' ? options.index : undefined;
+        this.splitview.addView(view, size, index);
+        this.doAddView(view);
+        this.setActive(view);
+        return view;
+    }
+    layout(width, height) {
+        const [size, orthogonalSize] = this.splitview.orientation === Orientation.HORIZONTAL
+            ? [width, height]
+            : [height, width];
+        this.splitview.layout(size, orthogonalSize);
+    }
+    doAddView(view) {
+        const disposable = view.api.onDidFocusChange((event) => {
+            if (!event.isFocused) {
+                return;
+            }
+            this.setActive(view, true);
+        });
+        this._panels.set(view.id, { disposable, value: view });
+    }
+    toJSON() {
+        var _a;
+        const views = this.splitview
+            .getViews()
+            .map((view, i) => {
+            const size = this.splitview.getViewSize(i);
+            return {
+                size,
+                data: view.toJSON(),
+                snap: !!view.snap,
+                priority: view.priority,
+            };
+        });
+        return {
+            views,
+            activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
+            size: this.splitview.size,
+            orientation: this.splitview.orientation,
+        };
+    }
+    fromJSON(serializedSplitview) {
+        this.clear();
+        const { views, orientation, size, activeView } = serializedSplitview;
+        const queue = [];
+        this.splitview = new Splitview(this.element, {
+            orientation,
+            proportionalLayout: this.options.proportionalLayout,
+            descriptor: {
+                size,
+                views: views.map((view) => {
+                    const data = view.data;
+                    if (this._panels.has(data.id)) {
+                        throw new Error(`panel ${data.id} already exists`);
+                    }
+                    const panel = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkWrapper
+                        ? {
+                            createComponent: this.options.frameworkWrapper
+                                .createComponent,
+                        }
+                        : undefined);
+                    queue.push(() => {
+                        panel.init({
+                            params: data.params || {},
+                            minimumSize: data.minimumSize,
+                            maximumSize: data.maximumSize,
+                            snap: view.snap,
+                            priority: view.priority,
+                            accessor: this,
+                        });
+                    });
+                    panel.orientation = orientation;
+                    this.doAddView(panel);
+                    setTimeout(() => {
+                        // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                        this._onDidAddView.fire(panel);
+                    }, 0);
+                    return { size: view.size, view: panel };
+                }),
+            },
+        });
+        this.layout(this.width, this.height);
+        queue.forEach((f) => f());
+        if (typeof activeView === 'string') {
+            const panel = this.getPanel(activeView);
+            if (panel) {
+                this.setActive(panel);
+            }
+        }
+        this._onDidLayoutfromJSON.fire();
+    }
+    clear() {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+    }
+    dispose() {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+        super.dispose();
+    }
+}

package/dist/esm/splitview/splitviewPanel.d.ts

@@ -0,0 +1,45 @@
+import { ISerializableView, PanelViewInitParameters } from './options';
+import { BasePanelView, BasePanelViewExported } from '../gridview/basePanelView';
+import { SplitviewPanelApiImpl } from '../api/splitviewPanelApi';
+import { LayoutPriority, Orientation } from './splitview';
+import { Event } from '../events';
+export interface ISplitviewPanel extends BasePanelViewExported<SplitviewPanelApiImpl> {
+    readonly priority: LayoutPriority | undefined;
+    readonly minimumSize: number;
+    readonly maximumSize: number;
+    readonly snap: boolean;
+    readonly orientation: Orientation;
+}
+export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPanelApiImpl> implements ISerializableView, ISplitviewPanel {
+    private _evaluatedMinimumSize;
+    private _evaluatedMaximumSize;
+    private _minimumSize;
+    private _maximumSize;
+    private _priority?;
+    private _snap;
+    private _orientation?;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<{
+        size?: number;
+        orthogonalSize?: number;
+    }>;
+    get priority(): LayoutPriority | undefined;
+    set orientation(value: Orientation);
+    get orientation(): Orientation;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get snap(): boolean;
+    constructor(id: string, componentName: string);
+    setVisible(isVisible: boolean): void;
+    setActive(isActive: boolean): void;
+    layout(size: number, orthogonalSize: number): void;
+    init(parameters: PanelViewInitParameters): void;
+    toJSON(): {
+        minimumSize: number | undefined;
+        maximumSize: number | undefined;
+        id: string;
+        component: string;
+        params?: Record<string, any> | undefined;
+    };
+    private updateConstraints;
+}

package/dist/esm/splitview/splitviewPanel.js

@@ -0,0 +1,108 @@
+import { BasePanelView, } from '../gridview/basePanelView';
+import { SplitviewPanelApiImpl } from '../api/splitviewPanelApi';
+import { Orientation } from './splitview';
+import { Emitter } from '../events';
+export class SplitviewPanel extends BasePanelView {
+    get priority() {
+        return this._priority;
+    }
+    set orientation(value) {
+        this._orientation = value;
+    }
+    get orientation() {
+        return this._orientation;
+    }
+    get minimumSize() {
+        const size = typeof this._minimumSize === 'function'
+            ? this._minimumSize()
+            : this._minimumSize;
+        if (size !== this._evaluatedMinimumSize) {
+            this._evaluatedMinimumSize = size;
+            this.updateConstraints();
+        }
+        return size;
+    }
+    get maximumSize() {
+        const size = typeof this._maximumSize === 'function'
+            ? this._maximumSize()
+            : this._maximumSize;
+        if (size !== this._evaluatedMaximumSize) {
+            this._evaluatedMaximumSize = size;
+            this.updateConstraints();
+        }
+        return size;
+    }
+    get snap() {
+        return this._snap;
+    }
+    constructor(id, componentName) {
+        super(id, componentName, new SplitviewPanelApiImpl(id));
+        this._evaluatedMinimumSize = 0;
+        this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
+        this._minimumSize = 0;
+        this._maximumSize = Number.POSITIVE_INFINITY;
+        this._snap = false;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.api.initialize(this);
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onActiveChange(() => {
+            const { accessor } = this._params;
+            accessor.setActive(this);
+        }), this.api.onDidConstraintsChangeInternal((event) => {
+            if (typeof event.minimumSize === 'number' ||
+                typeof event.minimumSize === 'function') {
+                this._minimumSize = event.minimumSize;
+            }
+            if (typeof event.maximumSize === 'number' ||
+                typeof event.maximumSize === 'function') {
+                this._maximumSize = event.maximumSize;
+            }
+            this.updateConstraints();
+        }), this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({ size: event.size });
+        }));
+    }
+    setVisible(isVisible) {
+        this.api._onDidVisibilityChange.fire({ isVisible });
+    }
+    setActive(isActive) {
+        this.api._onDidActiveChange.fire({ isActive });
+    }
+    layout(size, orthogonalSize) {
+        const [width, height] = this.orientation === Orientation.HORIZONTAL
+            ? [size, orthogonalSize]
+            : [orthogonalSize, size];
+        super.layout(width, height);
+    }
+    init(parameters) {
+        super.init(parameters);
+        this._priority = parameters.priority;
+        if (parameters.minimumSize) {
+            this._minimumSize = parameters.minimumSize;
+        }
+        if (parameters.maximumSize) {
+            this._maximumSize = parameters.maximumSize;
+        }
+        if (parameters.snap) {
+            this._snap = parameters.snap;
+        }
+    }
+    toJSON() {
+        const maximum = (value) => value === Number.MAX_SAFE_INTEGER ||
+            value === Number.POSITIVE_INFINITY
+            ? undefined
+            : value;
+        const minimum = (value) => (value <= 0 ? undefined : value);
+        return Object.assign(Object.assign({}, super.toJSON()), { minimumSize: minimum(this.minimumSize), maximumSize: maximum(this.maximumSize) });
+    }
+    updateConstraints() {
+        this.api._onDidConstraintsChange.fire({
+            maximumSize: this._evaluatedMaximumSize,
+            minimumSize: this._evaluatedMinimumSize,
+        });
+    }
+}

package/dist/esm/splitview/viewItem.d.ts

@@ -0,0 +1,25 @@
+import { IDisposable } from '../lifecycle';
+import { IView, LayoutPriority } from './splitview';
+export declare class ViewItem {
+    container: HTMLElement;
+    view: IView;
+    private disposable;
+    private _size;
+    private _cachedVisibleSize;
+    set size(size: number);
+    get size(): number;
+    get cachedVisibleSize(): number | undefined;
+    get visible(): boolean;
+    get minimumSize(): number;
+    get viewMinimumSize(): number;
+    get maximumSize(): number;
+    get viewMaximumSize(): number;
+    get priority(): LayoutPriority | undefined;
+    get snap(): boolean;
+    set enabled(enabled: boolean);
+    constructor(container: HTMLElement, view: IView, size: number | {
+        cachedVisibleSize: number;
+    }, disposable: IDisposable);
+    setVisible(visible: boolean, size?: number): void;
+    dispose(): IView;
+}

package/dist/esm/splitview/viewItem.js

@@ -0,0 +1,74 @@
+import { clamp } from '../math';
+export class ViewItem {
+    set size(size) {
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    get cachedVisibleSize() {
+        return this._cachedVisibleSize;
+    }
+    get visible() {
+        return typeof this._cachedVisibleSize === 'undefined';
+    }
+    get minimumSize() {
+        return this.visible ? this.view.minimumSize : 0;
+    }
+    get viewMinimumSize() {
+        return this.view.minimumSize;
+    }
+    get maximumSize() {
+        return this.visible ? this.view.maximumSize : 0;
+    }
+    get viewMaximumSize() {
+        return this.view.maximumSize;
+    }
+    get priority() {
+        return this.view.priority;
+    }
+    get snap() {
+        return !!this.view.snap;
+    }
+    set enabled(enabled) {
+        this.container.style.pointerEvents = enabled ? '' : 'none';
+    }
+    constructor(container, view, size, disposable) {
+        this.container = container;
+        this.view = view;
+        this.disposable = disposable;
+        this._cachedVisibleSize = undefined;
+        if (typeof size === 'number') {
+            this._size = size;
+            this._cachedVisibleSize = undefined;
+            container.classList.add('visible');
+        }
+        else {
+            this._size = 0;
+            this._cachedVisibleSize = size.cachedVisibleSize;
+        }
+    }
+    setVisible(visible, size) {
+        var _a;
+        if (visible === this.visible) {
+            return;
+        }
+        if (visible) {
+            this.size = clamp((_a = this._cachedVisibleSize) !== null && _a !== void 0 ? _a : 0, this.viewMinimumSize, this.viewMaximumSize);
+            this._cachedVisibleSize = undefined;
+        }
+        else {
+            this._cachedVisibleSize =
+                typeof size === 'number' ? size : this.size;
+            this.size = 0;
+        }
+        this.container.classList.toggle('visible', visible);
+        if (this.view.setVisible) {
+            this.view.setVisible(visible);
+        }
+    }
+    dispose() {
+        this.disposable.dispose();
+        return this.view;
+    }
+}

package/dist/esm/svg.d.ts

@@ -0,0 +1,3 @@
+export declare const createCloseButton: () => SVGSVGElement;
+export declare const createExpandMoreButton: () => SVGSVGElement;
+export declare const createChevronRightButton: () => SVGSVGElement;

package/dist/esm/svg.js

@@ -0,0 +1,31 @@
+const createSvgElementFromPath = (params) => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttributeNS(null, 'height', params.height);
+    svg.setAttributeNS(null, 'width', params.width);
+    svg.setAttributeNS(null, 'viewBox', params.viewbox);
+    svg.setAttributeNS(null, 'aria-hidden', 'false');
+    svg.setAttributeNS(null, 'focusable', 'false');
+    svg.classList.add('dockview-svg');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttributeNS(null, 'd', params.path);
+    svg.appendChild(path);
+    return svg;
+};
+export const createCloseButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 28 28',
+    path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+});
+export const createExpandMoreButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 24 15',
+    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+});
+export const createChevronRightButton = () => createSvgElementFromPath({
+    width: '11',
+    height: '11',
+    viewbox: '0 0 15 25',
+    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+});

package/dist/esm/types.d.ts

@@ -0,0 +1,2 @@
+export type FunctionOrValue<T> = (() => T) | T;
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};