dockview-core 7.0.3 → 8.0.0

package/dist/esm/overlay/overlayRenderContainer.js

@@ -1,249 +0,0 @@
-import { DragAndDropObserver } from '../dnd/dnd';
-import { getDomNodePagePosition, toggleClass } from '../dom';
-import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
-class PositionCache {
-    constructor() {
-        this.cache = new Map();
-        this.currentFrameId = 0;
-        this.rafId = null;
-    }
-    getPosition(element) {
-        const cached = this.cache.get(element);
-        if ((cached === null || cached === void 0 ? void 0 : cached.frameId) === this.currentFrameId) {
-            return cached.rect;
-        }
-        this.scheduleFrameUpdate();
-        const rect = getDomNodePagePosition(element);
-        this.cache.set(element, { rect, frameId: this.currentFrameId });
-        return rect;
-    }
-    invalidate() {
-        this.currentFrameId++;
-    }
-    scheduleFrameUpdate() {
-        if (this.rafId)
-            return;
-        this.rafId = requestAnimationFrame(() => {
-            this.currentFrameId++;
-            this.rafId = null;
-        });
-    }
-}
-function createFocusableElement() {
-    const element = document.createElement('div');
-    element.tabIndex = -1;
-    return element;
-}
-export class OverlayRenderContainer extends CompositeDisposable {
-    constructor(element, accessor) {
-        super();
-        this.element = element;
-        this.accessor = accessor;
-        this.map = {};
-        this._disposed = false;
-        this.positionCache = new PositionCache();
-        this.pendingUpdates = new Set();
-        this.addDisposables(Disposable.from(() => {
-            for (const value of Object.values(this.map)) {
-                value.disposable.dispose();
-                value.destroy.dispose();
-            }
-            this._disposed = true;
-        }));
-    }
-    updateAllPositions() {
-        if (this._disposed) {
-            return;
-        }
-        // Invalidate position cache to force recalculation
-        this.positionCache.invalidate();
-        // Call resize function directly for all visible panels
-        for (const entry of Object.values(this.map)) {
-            if (entry.panel.api.isVisible && entry.resize) {
-                entry.resize();
-            }
-        }
-    }
-    detatch(panel) {
-        if (this.map[panel.api.id]) {
-            const { disposable, destroy } = this.map[panel.api.id];
-            disposable.dispose();
-            destroy.dispose();
-            delete this.map[panel.api.id];
-            return true;
-        }
-        return false;
-    }
-    attach(options) {
-        const { panel, referenceContainer } = options;
-        if (!this.map[panel.api.id]) {
-            const element = createFocusableElement();
-            element.className = 'dv-render-overlay';
-            // Hide until the first RAF-based position is applied to prevent a
-            // one-frame flash at position 0,0 when the element is first attached.
-            element.style.visibility = 'hidden';
-            this.map[panel.api.id] = {
-                panel,
-                disposable: Disposable.NONE,
-                destroy: Disposable.NONE,
-                element,
-            };
-        }
-        const focusContainer = this.map[panel.api.id].element;
-        // Capture the content element now so the destroy disposable below
-        // does not re-query the renderer's `element` getter during teardown.
-        // Some framework adapters (e.g. dockview-angular) tear down their
-        // backing renderer before this disposable fires; reading through the
-        // getter at that point can throw.
-        const contentElement = panel.view.content.element;
-        if (contentElement.parentElement !== focusContainer) {
-            focusContainer.appendChild(contentElement);
-        }
-        if (focusContainer.parentElement !== this.element) {
-            this.element.appendChild(focusContainer);
-        }
-        const resize = () => {
-            const panelId = panel.api.id;
-            if (this.pendingUpdates.has(panelId)) {
-                return; // Update already scheduled
-            }
-            this.pendingUpdates.add(panelId);
-            requestAnimationFrame(() => {
-                this.pendingUpdates.delete(panelId);
-                if (this.isDisposed || !this.map[panelId]) {
-                    return;
-                }
-                const box = this.positionCache.getPosition(referenceContainer.element);
-                const box2 = this.positionCache.getPosition(this.element);
-                // Use traditional positioning for overlay containers
-                const left = box.left - box2.left;
-                const top = box.top - box2.top;
-                const width = box.width;
-                const height = box.height;
-                focusContainer.style.left = `${left}px`;
-                focusContainer.style.top = `${top}px`;
-                focusContainer.style.width = `${width}px`;
-                focusContainer.style.height = `${height}px`;
-                // Sync visibility/pointer-events with the panel's current
-                // visibility at paint time. visibilityChanged() may have
-                // flipped to hidden between scheduling this rAF and now;
-                // unconditionally clearing `visibility:hidden` here would
-                // leave a hidden panel visually visible at a stale position,
-                // because onDidDimensionsChange skips non-visible panels and
-                // never recomputes their box on subsequent resizes.
-                if (panel.api.isVisible) {
-                    focusContainer.style.visibility = '';
-                    focusContainer.style.pointerEvents = '';
-                }
-                else {
-                    focusContainer.style.visibility = 'hidden';
-                    focusContainer.style.pointerEvents = 'none';
-                }
-                toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
-            });
-        };
-        const visibilityChanged = () => {
-            if (panel.api.isVisible) {
-                this.positionCache.invalidate();
-                resize();
-                focusContainer.style.pointerEvents = '';
-            }
-            else {
-                focusContainer.style.visibility = 'hidden';
-                focusContainer.style.pointerEvents = 'none';
-            }
-        };
-        const observerDisposable = new MutableDisposable();
-        const correctLayerPosition = () => {
-            if (panel.api.location.type === 'floating') {
-                queueMicrotask(() => {
-                    const floatingGroup = this.accessor.floatingGroups.find((group) => group.group === panel.api.group);
-                    if (!floatingGroup) {
-                        return;
-                    }
-                    const element = floatingGroup.overlay.element;
-                    const update = () => {
-                        const level = Number(element.getAttribute('aria-level'));
-                        focusContainer.style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${level * 2 + 1})`;
-                    };
-                    const observer = new MutationObserver(() => {
-                        update();
-                    });
-                    observerDisposable.value = Disposable.from(() => observer.disconnect());
-                    observer.observe(element, {
-                        attributeFilter: ['aria-level'],
-                        attributes: true,
-                    });
-                    update();
-                });
-            }
-            else {
-                focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here
-            }
-        };
-        const disposable = new CompositeDisposable(observerDisposable, 
-        /**
-         * since container is positioned absoutely we must explicitly forward
-         * the dnd events for the expect behaviours to continue to occur in terms of dnd
-         *
-         * the dnd observer does not need to be conditional on whether the panel is visible since
-         * non-visible panels have 'pointer-events: none' and in such case the dnd observer will not fire.
-         */
-        new DragAndDropObserver(focusContainer, {
-            onDragEnd: (e) => {
-                referenceContainer.dropTarget.dnd.onDragEnd(e);
-            },
-            onDragEnter: (e) => {
-                referenceContainer.dropTarget.dnd.onDragEnter(e);
-            },
-            onDragLeave: (e) => {
-                referenceContainer.dropTarget.dnd.onDragLeave(e);
-            },
-            onDrop: (e) => {
-                referenceContainer.dropTarget.dnd.onDrop(e);
-            },
-            onDragOver: (e) => {
-                referenceContainer.dropTarget.dnd.onDragOver(e);
-            },
-        }), panel.api.onDidVisibilityChange(() => {
-            /**
-             * Control the visibility of the content, however even when not visible (display: none)
-             * the content is still maintained within the DOM hence DOM specific attributes
-             * such as scroll position are maintained when next made visible.
-             */
-            visibilityChanged();
-        }), panel.api.onDidDimensionsChange(() => {
-            if (!panel.api.isVisible) {
-                return;
-            }
-            resize();
-        }), panel.api.onDidLocationChange(() => {
-            correctLayerPosition();
-        }));
-        this.map[panel.api.id].destroy = Disposable.from(() => {
-            if (contentElement.parentElement === focusContainer) {
-                contentElement.remove();
-            }
-            focusContainer.remove();
-        });
-        correctLayerPosition();
-        queueMicrotask(() => {
-            if (this.isDisposed) {
-                return;
-            }
-            /**
-             * wait until everything has finished in the current stack-frame call before
-             * calling the first resize as other size-altering events may still occur before
-             * the end of the stack-frame.
-             */
-            visibilityChanged();
-        });
-        // dispose of logic asoccciated with previous reference-container
-        this.map[panel.api.id].disposable.dispose();
-        // and reset the disposable to the active reference-container
-        this.map[panel.api.id].disposable = disposable;
-        // store the resize function for direct access
-        this.map[panel.api.id].resize = resize;
-        return focusContainer;
-    }
-}

package/dist/esm/panel/types.d.ts

@@ -1,33 +0,0 @@
-import { IDisposable } from '../lifecycle';
-import { LayoutPriority } from '../splitview/splitview';
-/**
- * A key-value object of anything that is a valid JavaScript Object.
- */
-export interface Parameters {
-    [key: string]: any;
-}
-export interface PanelInitParameters {
-    params: Parameters;
-}
-export interface PanelUpdateEvent<T extends Parameters = Parameters> {
-    params: Partial<T>;
-}
-export interface IPanel extends IDisposable {
-    readonly id: string;
-    init(params: PanelInitParameters): void;
-    layout(width: number, height: number): void;
-    update(event: PanelUpdateEvent<Parameters>): void;
-    toJSON(): object;
-    focus(): void;
-}
-export interface IFrameworkPart extends IDisposable {
-    update(params: Parameters): void;
-}
-export interface BaseComponentOptions<T extends object = Parameters> {
-    id: string;
-    component: string;
-    params?: T;
-    snap?: boolean;
-    priority?: LayoutPriority;
-    size?: number;
-}

package/dist/esm/panel/types.js

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

package/dist/esm/paneview/defaultPaneviewHeader.d.ts

@@ -1,21 +0,0 @@
-import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
-import { CompositeDisposable } from '../lifecycle';
-import { PanelUpdateEvent } from '../panel/types';
-import { IPanePart, PanePanelInitParameter } from './paneviewPanel';
-export declare class DefaultHeader extends CompositeDisposable implements IPanePart {
-    private readonly _expandedIcon;
-    private readonly _collapsedIcon;
-    private readonly disposable;
-    private readonly _element;
-    private readonly _content;
-    private readonly _expander;
-    private readonly apiRef;
-    get element(): HTMLElement;
-    constructor();
-    init(params: PanePanelInitParameter & {
-        api: PaneviewPanelApiImpl;
-    }): void;
-    private updateIcon;
-    update(_params: PanelUpdateEvent): void;
-    dispose(): void;
-}

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -1,65 +0,0 @@
-import { addDisposableListener } from '../events';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
-import { toggleClass } from '../dom';
-import { createChevronRightButton, createExpandMoreButton } from '../svg';
-export class DefaultHeader extends CompositeDisposable {
-    get element() {
-        return this._element;
-    }
-    constructor() {
-        super();
-        this._expandedIcon = createExpandMoreButton();
-        this._collapsedIcon = createChevronRightButton();
-        this.disposable = new MutableDisposable();
-        this.apiRef = {
-            api: null,
-        };
-        this._element = document.createElement('div');
-        this.element.className = 'dv-default-header';
-        this._content = document.createElement('span');
-        this._expander = document.createElement('div');
-        this._expander.className = 'dv-pane-header-icon';
-        this.element.appendChild(this._expander);
-        this.element.appendChild(this._content);
-        this.addDisposables(addDisposableListener(this._element, 'click', () => {
-            var _a;
-            (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
-        }));
-    }
-    init(params) {
-        this.apiRef.api = params.api;
-        this._content.textContent = params.title;
-        this.updateIcon();
-        this.disposable.value = params.api.onDidExpansionChange(() => {
-            this.updateIcon();
-        });
-    }
-    updateIcon() {
-        var _a;
-        const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
-        toggleClass(this._expander, 'collapsed', !isExpanded);
-        if (isExpanded) {
-            if (this._expander.contains(this._collapsedIcon)) {
-                this._collapsedIcon.remove();
-            }
-            if (!this._expander.contains(this._expandedIcon)) {
-                this._expander.appendChild(this._expandedIcon);
-            }
-        }
-        else {
-            if (this._expander.contains(this._expandedIcon)) {
-                this._expandedIcon.remove();
-            }
-            if (!this._expander.contains(this._collapsedIcon)) {
-                this._expander.appendChild(this._collapsedIcon);
-            }
-        }
-    }
-    update(_params) {
-        //
-    }
-    dispose() {
-        this.disposable.dispose();
-        super.dispose();
-    }
-}

package/dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -1,38 +0,0 @@
-import { PaneviewApi } from '../api/component.api';
-import { PaneTransfer } from '../dnd/dataTransfer';
-import { DroptargetEvent } from '../dnd/droptarget';
-import { Event } from '../events';
-import { Orientation } from '../splitview/splitview';
-import { PaneviewDndOverlayEvent } from './options';
-import { IPaneviewComponent } from './paneviewComponent';
-import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
-export interface PaneviewDidDropEvent extends DroptargetEvent {
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-    api: PaneviewApi;
-}
-export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
-    private html5DragSource;
-    private pointerDragSource;
-    private target;
-    private pointerTarget;
-    private readonly _onDidDrop;
-    readonly onDidDrop: Event<PaneviewDidDropEvent>;
-    private readonly _onUnhandledDragOver;
-    readonly onUnhandledDragOver: Event<PaneviewDndOverlayEvent>;
-    readonly accessor: IPaneviewComponent;
-    constructor(options: {
-        accessor: IPaneviewComponent;
-        id: string;
-        component: string;
-        headerComponent: string | undefined;
-        orientation: Orientation;
-        isExpanded: boolean;
-        disableDnd: boolean;
-        headerSize: number;
-        minimumBodySize: number;
-        maximumBodySize: number;
-    });
-    private initDragFeatures;
-    private onDrop;
-}

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -1,107 +0,0 @@
-import { PaneviewApi } from '../api/component.api';
-import { html5Backend, pointerBackend, } from '../dnd/backend';
-import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
-import { Emitter } from '../events';
-import { PaneviewUnhandledDragOverEvent, } from './options';
-import { PaneviewPanel, } from './paneviewPanel';
-export class DraggablePaneviewPanel extends PaneviewPanel {
-    constructor(options) {
-        super({
-            id: options.id,
-            component: options.component,
-            headerComponent: options.headerComponent,
-            orientation: options.orientation,
-            isExpanded: options.isExpanded,
-            isHeaderVisible: true,
-            headerSize: options.headerSize,
-            minimumBodySize: options.minimumBodySize,
-            maximumBodySize: options.maximumBodySize,
-        });
-        this._onDidDrop = new Emitter();
-        this.onDidDrop = this._onDidDrop.event;
-        this._onUnhandledDragOver = new Emitter();
-        this.onUnhandledDragOver = this._onUnhandledDragOver.event;
-        this.accessor = options.accessor;
-        this.addDisposables(this._onDidDrop, this._onUnhandledDragOver);
-        if (!options.disableDnd) {
-            this.initDragFeatures();
-        }
-    }
-    initDragFeatures() {
-        if (!this.header) {
-            return;
-        }
-        const id = this.id;
-        const accessorId = this.accessor.id;
-        this.header.draggable = true;
-        const sharedDragOptions = {
-            getData: () => {
-                LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
-                return {
-                    dispose: () => {
-                        LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                    },
-                };
-            },
-        };
-        this.html5DragSource = html5Backend.createDragSource(this.header, sharedDragOptions);
-        this.pointerDragSource = pointerBackend.createDragSource(this.header, sharedDragOptions);
-        const canDisplayOverlay = (event, position) => {
-            const data = getPaneData();
-            if (data) {
-                if (data.paneId !== this.id &&
-                    data.viewId === this.accessor.id) {
-                    return true;
-                }
-            }
-            const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
-            this._onUnhandledDragOver.fire(firedEvent);
-            return firedEvent.isAccepted;
-        };
-        const dropTargetOptions = {
-            acceptedTargetZones: ['top', 'bottom'],
-            overlayModel: {
-                activationSize: { type: 'percentage', value: 50 },
-            },
-            canDisplayOverlay,
-        };
-        this.target = html5Backend.createDropTarget(this.element, dropTargetOptions);
-        this.pointerTarget = pointerBackend.createDropTarget(this.element, dropTargetOptions);
-        this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop((event) => {
-            this.onDrop(event);
-        }), this.pointerTarget.onDrop((event) => {
-            this.onDrop(event);
-        }));
-    }
-    onDrop(event) {
-        const data = getPaneData();
-        if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id) {
-            // if there is no local drag event for this panel
-            // or if the drag event was creating by another Paneview instance
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
-            return;
-        }
-        const containerApi = this._params
-            .containerApi;
-        const panelId = data.paneId;
-        const existingPanel = containerApi.getPanel(panelId);
-        if (!existingPanel) {
-            // if the panel doesn't exist
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData, api: new PaneviewApi(this.accessor) }));
-            return;
-        }
-        const allPanels = containerApi.panels;
-        const fromIndex = allPanels.indexOf(existingPanel);
-        let toIndex = containerApi.panels.indexOf(this);
-        if (event.position === 'left' || event.position === 'top') {
-            toIndex = Math.max(0, toIndex - 1);
-        }
-        if (event.position === 'right' || event.position === 'bottom') {
-            if (fromIndex > toIndex) {
-                toIndex++;
-            }
-            toIndex = Math.min(allPanels.length - 1, toIndex);
-        }
-        containerApi.movePanel(fromIndex, toIndex);
-    }
-}

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

@@ -1,30 +0,0 @@
-import { PaneTransfer } from '../dnd/dataTransfer';
-import { Position } from '../dnd/droptarget';
-import { CreateComponentOptions } from '../dockview/options';
-import { AcceptableEvent, IAcceptableEvent } from '../events';
-import { IPanePart, IPaneviewPanel } from './paneviewPanel';
-export interface PaneviewOptions {
-    disableAutoResizing?: boolean;
-    disableDnd?: boolean;
-    className?: string;
-}
-export interface PaneviewFrameworkOptions {
-    createComponent: (options: CreateComponentOptions) => IPanePart;
-    createHeaderComponent?: (options: CreateComponentOptions) => IPanePart | undefined;
-}
-export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
-export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
-export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
-    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
-    nativeEvent: DragEvent | PointerEvent;
-    position: Position;
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-}
-export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
-    readonly nativeEvent: DragEvent | PointerEvent;
-    readonly position: Position;
-    readonly getData: () => PaneTransfer | undefined;
-    readonly panel: IPaneviewPanel;
-    constructor(nativeEvent: DragEvent | PointerEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
-}

package/dist/esm/paneview/options.js

@@ -1,22 +0,0 @@
-import { AcceptableEvent } from '../events';
-export const PROPERTY_KEYS_PANEVIEW = (() => {
-    /**
-     * by readong the keys from an empty value object TypeScript will error
-     * when we add or remove new properties to `DockviewOptions`
-     */
-    const properties = {
-        disableAutoResizing: undefined,
-        disableDnd: undefined,
-        className: undefined,
-    };
-    return Object.keys(properties);
-})();
-export class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
-    constructor(nativeEvent, position, getData, panel) {
-        super();
-        this.nativeEvent = nativeEvent;
-        this.position = position;
-        this.getData = getData;
-        this.panel = panel;
-    }
-}

package/dist/esm/paneview/paneview.d.ts

@@ -1,41 +0,0 @@
-import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/splitview';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { Event } from '../events';
-import { PaneviewPanel } from './paneviewPanel';
-interface PaneItem {
-    pane: PaneviewPanel;
-    disposable: IDisposable;
-}
-export declare class Paneview extends CompositeDisposable implements IDisposable {
-    private readonly element;
-    private readonly splitview;
-    private paneItems;
-    private readonly _orientation;
-    private animationTimer;
-    private skipAnimation;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<void>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
-    get minimumSize(): number;
-    get maximumSize(): number;
-    get orientation(): Orientation;
-    get size(): number;
-    get orthogonalSize(): number;
-    constructor(container: HTMLElement, options: {
-        orientation: Orientation;
-        descriptor?: ISplitViewDescriptor;
-    });
-    setViewVisible(index: number, visible: boolean): void;
-    addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
-    getViewSize(index: number): number;
-    getPanes(): PaneviewPanel[];
-    removePane(index: number, options?: {
-        skipDispose: boolean;
-    }): PaneItem;
-    moveView(from: number, to: number): void;
-    layout(size: number, orthogonalSize: number): void;
-    private setupAnimation;
-    dispose(): void;
-}
-export {};