dockview 1.6.0 → 1.7.0

package/dist/esm/dnd/droptarget.js

@@ -1,249 +0,0 @@
-import { toggleClass } from '../dom';
-import { Emitter } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-import { DragAndDropObserver } from './dnd';
-import { clamp } from '../math';
-import { isBooleanValue } from '../types';
-function numberOrFallback(maybeNumber, fallback) {
-    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-}
-export function directionToPosition(direction) {
-    switch (direction) {
-        case 'above':
-            return 'top';
-        case 'below':
-            return 'bottom';
-        case 'left':
-            return 'left';
-        case 'right':
-            return 'right';
-        case 'within':
-            return 'center';
-        default:
-            throw new Error(`invalid direction '${direction}'`);
-    }
-}
-export function positionToDirection(position) {
-    switch (position) {
-        case 'top':
-            return 'above';
-        case 'bottom':
-            return 'below';
-        case 'left':
-            return 'left';
-        case 'right':
-            return 'right';
-        case 'center':
-            return 'within';
-        default:
-            throw new Error(`invalid position '${position}'`);
-    }
-}
-export class Droptarget extends CompositeDisposable {
-    get state() {
-        return this._state;
-    }
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this.options = options;
-        this._onDrop = new Emitter();
-        this.onDrop = this._onDrop.event;
-        // use a set to take advantage of #<set>.has
-        const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
-        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-            onDragEnter: () => undefined,
-            onDragOver: (e) => {
-                const width = this.element.clientWidth;
-                const height = this.element.clientHeight;
-                if (width === 0 || height === 0) {
-                    return; // avoid div!0
-                }
-                const rect = e.currentTarget.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
-                if (quadrant === null) {
-                    // no drop target should be displayed
-                    this.removeDropTarget();
-                    return;
-                }
-                if (isBooleanValue(this.options.canDisplayOverlay)) {
-                    if (!this.options.canDisplayOverlay) {
-                        return;
-                    }
-                }
-                else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                    return;
-                }
-                if (!this.target) {
-                    this.target = document.createElement('div');
-                    this.target.className = 'drop-target-dropzone';
-                    this.overlay = document.createElement('div');
-                    this.overlay.className = 'drop-target-selection';
-                    this._state = 'center';
-                    this.target.appendChild(this.overlay);
-                    this.element.classList.add('drop-target');
-                    this.element.append(this.target);
-                }
-                if (this.options.acceptedTargetZones.length === 0) {
-                    return;
-                }
-                if (!this.target || !this.overlay) {
-                    return;
-                }
-                this.toggleClasses(quadrant, width, height);
-                this.setState(quadrant);
-            },
-            onDragLeave: () => {
-                this.removeDropTarget();
-            },
-            onDragEnd: () => {
-                this.removeDropTarget();
-            },
-            onDrop: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const state = this._state;
-                this.removeDropTarget();
-                if (state) {
-                    this._onDrop.fire({ position: state, nativeEvent: e });
-                }
-            },
-        }));
-    }
-    dispose() {
-        this.removeDropTarget();
-    }
-    toggleClasses(quadrant, width, height) {
-        var _a, _b, _c, _d;
-        if (!this.overlay) {
-            return;
-        }
-        const isSmallX = width < 100;
-        const isSmallY = height < 100;
-        const isLeft = quadrant === 'left';
-        const isRight = quadrant === 'right';
-        const isTop = quadrant === 'top';
-        const isBottom = quadrant === 'bottom';
-        const rightClass = !isSmallX && isRight;
-        const leftClass = !isSmallX && isLeft;
-        const topClass = !isSmallY && isTop;
-        const bottomClass = !isSmallY && isBottom;
-        let size = 0.5;
-        if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
-            size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
-        }
-        if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
-            if (rightClass || leftClass) {
-                size =
-                    clamp(0, this.options.overlayModel.size.value, width) /
-                        width;
-            }
-            if (topClass || bottomClass) {
-                size =
-                    clamp(0, this.options.overlayModel.size.value, height) /
-                        height;
-            }
-        }
-        const translate = (1 - size) / 2;
-        const scale = size;
-        let transform;
-        if (rightClass) {
-            transform = `translateX(${100 * translate}%) scaleX(${scale})`;
-        }
-        else if (leftClass) {
-            transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
-        }
-        else if (topClass) {
-            transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
-        }
-        else if (bottomClass) {
-            transform = `translateY(${100 * translate}%) scaleY(${scale})`;
-        }
-        else {
-            transform = '';
-        }
-        this.overlay.style.transform = transform;
-        toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-        toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-        toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-        toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-    }
-    setState(quadrant) {
-        switch (quadrant) {
-            case 'top':
-                this._state = 'top';
-                break;
-            case 'left':
-                this._state = 'left';
-                break;
-            case 'bottom':
-                this._state = 'bottom';
-                break;
-            case 'right':
-                this._state = 'right';
-                break;
-            case 'center':
-                this._state = 'center';
-                break;
-        }
-    }
-    calculateQuadrant(overlayType, x, y, width, height) {
-        var _a, _b, _c, _d, _e, _f;
-        const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
-            ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
-        const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
-        if (isPercentage) {
-            return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
-        }
-        return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
-    }
-    removeDropTarget() {
-        if (this.target) {
-            this._state = undefined;
-            this.element.removeChild(this.target);
-            this.target = undefined;
-            this.overlay = undefined;
-            this.element.classList.remove('drop-target');
-        }
-    }
-}
-export function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
-    const xp = (100 * x) / width;
-    const yp = (100 * y) / height;
-    if (overlayType.has('left') && xp < threshold) {
-        return 'left';
-    }
-    if (overlayType.has('right') && xp > 100 - threshold) {
-        return 'right';
-    }
-    if (overlayType.has('top') && yp < threshold) {
-        return 'top';
-    }
-    if (overlayType.has('bottom') && yp > 100 - threshold) {
-        return 'bottom';
-    }
-    if (!overlayType.has('center')) {
-        return null;
-    }
-    return 'center';
-}
-export function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
-    if (overlayType.has('left') && x < threshold) {
-        return 'left';
-    }
-    if (overlayType.has('right') && x > width - threshold) {
-        return 'right';
-    }
-    if (overlayType.has('top') && y < threshold) {
-        return 'top';
-    }
-    if (overlayType.has('bottom') && y > height - threshold) {
-        return 'bottom';
-    }
-    if (!overlayType.has('center')) {
-        return null;
-    }
-    return 'center';
-}

package/dist/esm/dnd/ghost.d.ts

@@ -1 +0,0 @@
-export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;

package/dist/esm/dnd/ghost.js

@@ -1,10 +0,0 @@
-import { addClasses } from '../dom';
-export function addGhostImage(dataTransfer, ghostElement) {
-    // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-    addClasses(ghostElement, 'dv-dragged');
-    document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, 0, 0);
-    setTimeout(() => {
-        ghostElement.remove();
-    }, 0);
-}

package/dist/esm/dnd/groupDragHandler.d.ts

@@ -1,11 +0,0 @@
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { IDisposable } from '../lifecycle';
-import { DragHandler } from './abstractDragHandler';
-export declare class GroupDragHandler extends DragHandler {
-    private readonly accessorId;
-    private readonly group;
-    private readonly panelTransfer;
-    constructor(element: HTMLElement, accessorId: string, group: GroupPanel);
-    getData(dataTransfer: DataTransfer | null): IDisposable;
-    dispose(): void;
-}

package/dist/esm/dnd/groupDragHandler.js

@@ -1,38 +0,0 @@
-import { DragHandler } from './abstractDragHandler';
-import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
-import { addGhostImage } from './ghost';
-export class GroupDragHandler extends DragHandler {
-    constructor(element, accessorId, group) {
-        super(element);
-        this.accessorId = accessorId;
-        this.group = group;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-    }
-    getData(dataTransfer) {
-        this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
-        const style = window.getComputedStyle(this.el);
-        const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
-        const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
-        if (dataTransfer) {
-            const ghostElement = document.createElement('div');
-            ghostElement.style.backgroundColor = bgColor;
-            ghostElement.style.color = color;
-            ghostElement.style.padding = '2px 8px';
-            ghostElement.style.height = '24px';
-            ghostElement.style.fontSize = '11px';
-            ghostElement.style.lineHeight = '20px';
-            ghostElement.style.borderRadius = '12px';
-            ghostElement.style.position = 'absolute';
-            ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-            addGhostImage(dataTransfer, ghostElement);
-        }
-        return {
-            dispose: () => {
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            },
-        };
-    }
-    dispose() {
-        //
-    }
-}

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -1,27 +0,0 @@
-import { CompositeDisposable } from '../../../lifecycle';
-import { ITabRenderer, GroupPanelPartInitParameters } from '../../../groupview/types';
-import { PanelUpdateEvent } from '../../../panel/types';
-import { GroupPanel } from '../../../groupview/groupviewPanel';
-export declare const DEFAULT_TAB_IDENTIFIER = "__default__tab__";
-export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
-    private _element;
-    private _isPanelVisible;
-    private _isGroupActive;
-    private _content;
-    private _actionContainer;
-    private _list;
-    private action;
-    private params;
-    get element(): HTMLElement;
-    get id(): string;
-    constructor();
-    update(event: PanelUpdateEvent): void;
-    toJSON(): {
-        id: string;
-    };
-    focus(): void;
-    init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
-    layout(_width: number, _height: number): void;
-    private render;
-}

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -1,79 +0,0 @@
-import { CompositeDisposable } from '../../../lifecycle';
-import { addDisposableListener } from '../../../events';
-import { createCloseButton } from '../../../svg';
-export const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
-export class DefaultTab extends CompositeDisposable {
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return DEFAULT_TAB_IDENTIFIER;
-    }
-    constructor() {
-        super();
-        this._isPanelVisible = false;
-        this._isGroupActive = false;
-        //
-        this.params = {};
-        this._element = document.createElement('div');
-        this._element.className = 'default-tab';
-        //
-        this._content = document.createElement('div');
-        this._content.className = 'tab-content';
-        //
-        this._actionContainer = document.createElement('div');
-        this._actionContainer.className = 'action-container';
-        //
-        this._list = document.createElement('ul');
-        this._list.className = 'tab-list';
-        //
-        this.action = document.createElement('div');
-        this.action.className = 'tab-action';
-        this.action.appendChild(createCloseButton());
-        //
-        this._element.appendChild(this._content);
-        this._element.appendChild(this._actionContainer);
-        this._actionContainer.appendChild(this._list);
-        this._list.appendChild(this.action);
-        //
-        this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
-            ev.preventDefault();
-        }));
-        this.render();
-    }
-    update(event) {
-        this.params = Object.assign(Object.assign({}, this.params), event.params);
-        this.render();
-    }
-    toJSON() {
-        return { id: this.id };
-    }
-    focus() {
-        //noop
-    }
-    init(params) {
-        this.params = params;
-        this._content.textContent = params.title;
-        addDisposableListener(this.action, 'click', (ev) => {
-            ev.preventDefault(); //
-            this.params.api.close();
-        });
-    }
-    updateParentGroup(group, isPanelVisible) {
-        const changed = this._isPanelVisible !== isPanelVisible ||
-            this._isGroupActive !== group.isActive;
-        this._isPanelVisible = isPanelVisible;
-        this._isGroupActive = group.isActive;
-        if (changed) {
-            this.render();
-        }
-    }
-    layout(_width, _height) {
-        // noop
-    }
-    render() {
-        if (this._content.textContent !== this.params.title) {
-            this._content.textContent = this.params.title;
-        }
-    }
-}

package/dist/esm/dockview/components/watermark/watermark.d.ts

@@ -1,20 +0,0 @@
-import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../../groupview/types';
-import { CompositeDisposable } from '../../../lifecycle';
-import { GroupPanel } from '../../../groupview/groupviewPanel';
-import { PanelUpdateEvent } from '../../../panel/types';
-export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
-    private _element;
-    private group;
-    private params;
-    get id(): string;
-    constructor();
-    update(_event: PanelUpdateEvent): void;
-    focus(): void;
-    toJSON(): {};
-    layout(_width: number, _height: number): void;
-    init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupPanel, _visible: boolean): void;
-    get element(): HTMLElement;
-    private render;
-    dispose(): void;
-}

package/dist/esm/dockview/components/watermark/watermark.js

@@ -1,70 +0,0 @@
-import { ActionContainer } from '../../../actionbar/actionsContainer';
-import { addDisposableListener } from '../../../events';
-import { toggleClass } from '../../../dom';
-import { CompositeDisposable } from '../../../lifecycle';
-import { createCloseButton } from '../../../svg';
-export class Watermark extends CompositeDisposable {
-    get id() {
-        return 'watermark';
-    }
-    constructor() {
-        super();
-        this._element = document.createElement('div');
-        this._element.className = 'watermark';
-        const title = document.createElement('div');
-        title.className = 'watermark-title';
-        const emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        const content = document.createElement('div');
-        content.className = 'watermark-content';
-        this._element.appendChild(title);
-        this._element.appendChild(content);
-        const actions = new ActionContainer();
-        title.appendChild(emptySpace);
-        title.appendChild(actions.element);
-        const closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
-        closeAnchor.appendChild(createCloseButton());
-        actions.add(closeAnchor);
-        this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
-            var _a;
-            ev.preventDefault();
-            if (this.group) {
-                (_a = this.params) === null || _a === void 0 ? void 0 : _a.containerApi.removeGroup(this.group);
-            }
-        }));
-    }
-    update(_event) {
-        // noop
-    }
-    focus() {
-        // noop
-    }
-    toJSON() {
-        return {};
-    }
-    layout(_width, _height) {
-        // noop
-    }
-    init(params) {
-        this.params = params;
-        this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
-            this.render();
-        }));
-        this.render();
-    }
-    updateParentGroup(group, _visible) {
-        this.group = group;
-        this.render();
-    }
-    get element() {
-        return this._element;
-    }
-    render() {
-        const isOneGroup = !!(this.params && this.params.containerApi.size <= 1);
-        toggleClass(this.element, 'has-actions', isOneGroup);
-    }
-    dispose() {
-        super.dispose();
-    }
-}

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

@@ -1,29 +0,0 @@
-import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from '../groupview/types';
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { IDisposable } from '../lifecycle';
-import { GroupPanelUpdateEvent } from '../groupview/types';
-export interface IGroupPanelView extends IDisposable {
-    readonly content: IContentRenderer;
-    readonly tab?: ITabRenderer;
-    update(event: GroupPanelUpdateEvent): void;
-    layout(width: number, height: number): void;
-    init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
-    toJSON(): {};
-}
-export declare class DefaultGroupPanelView implements IGroupPanelView {
-    private readonly _content;
-    private readonly _tab;
-    get content(): IContentRenderer;
-    get tab(): ITabRenderer;
-    constructor(renderers: {
-        content: IContentRenderer;
-        tab?: ITabRenderer;
-    });
-    init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
-    update(event: GroupPanelUpdateEvent): void;
-    toJSON(): {};
-    dispose(): void;
-}

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -1,44 +0,0 @@
-import { DefaultTab } from './components/tab/defaultTab';
-export class DefaultGroupPanelView {
-    get content() {
-        return this._content;
-    }
-    get tab() {
-        return this._tab;
-    }
-    constructor(renderers) {
-        var _a;
-        this._content = renderers.content;
-        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-    }
-    init(params) {
-        this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
-        this.tab.init(params);
-    }
-    updateParentGroup(group, isPanelVisible) {
-        var _a;
-        this._content.updateParentGroup(group, isPanelVisible);
-        (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
-    }
-    layout(width, height) {
-        this.content.layout(width, height);
-    }
-    update(event) {
-        this.content.update(event);
-        this.tab.update(event);
-    }
-    toJSON() {
-        let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
-        if (tab && Object.keys(tab).length === 0) {
-            tab = undefined;
-        }
-        return {
-            content: this.content.toJSON(),
-            tab,
-        };
-    }
-    dispose() {
-        this.content.dispose();
-        this.tab.dispose();
-    }
-}

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

@@ -1,6 +0,0 @@
-import { GroupviewPanelState } from '../groupview/types';
-import { GroupPanel } from '../groupview/groupviewPanel';
-import { IDockviewPanel } from './dockviewPanel';
-export interface IPanelDeserializer {
-    fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
-}

package/dist/esm/dockview/deserializer.js

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