dockview-core 1.6.0

package/dist/esm/dnd/droptarget.js

@@ -0,0 +1,250 @@
+import { toggleClass } from '../dom';
+import { Emitter } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+import { DragAndDropObserver } from './dnd';
+import { clamp } from '../math';
+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 (typeof this.options.canDisplayOverlay === 'boolean') {
+                    if (!this.options.canDisplayOverlay) {
+                        return;
+                    }
+                }
+                else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    return;
+                }
+                if (!this.targetElement) {
+                    this.targetElement = document.createElement('div');
+                    this.targetElement.className = 'drop-target-dropzone';
+                    this.overlayElement = document.createElement('div');
+                    this.overlayElement.className = 'drop-target-selection';
+                    this._state = 'center';
+                    this.targetElement.appendChild(this.overlayElement);
+                    this.element.classList.add('drop-target');
+                    this.element.append(this.targetElement);
+                }
+                if (this.options.acceptedTargetZones.length === 0) {
+                    return;
+                }
+                if (!this.targetElement || !this.overlayElement) {
+                    return;
+                }
+                this.toggleClasses(quadrant, width, height);
+                this.setState(quadrant);
+            },
+            onDragLeave: () => {
+                this.removeDropTarget();
+            },
+            onDragEnd: () => {
+                this.removeDropTarget();
+            },
+            onDrop: (e) => {
+                e.preventDefault();
+                const state = this._state;
+                this.removeDropTarget();
+                if (state) {
+                    // only stop the propagation of the event if we are dealing with it
+                    // which is only when the target has state
+                    e.stopPropagation();
+                    this._onDrop.fire({ position: state, nativeEvent: e });
+                }
+            },
+        }));
+    }
+    dispose() {
+        this.removeDropTarget();
+    }
+    toggleClasses(quadrant, width, height) {
+        var _a, _b, _c, _d;
+        if (!this.overlayElement) {
+            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.overlayElement.style.transform = transform;
+        toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
+        toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
+        toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
+        toggleClass(this.overlayElement, '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.targetElement) {
+            this._state = undefined;
+            this.element.removeChild(this.targetElement);
+            this.targetElement = undefined;
+            this.overlayElement = 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

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

package/dist/esm/dnd/ghost.js

@@ -0,0 +1,11 @@
+import { addClasses, removeClasses } 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(() => {
+        removeClasses(ghostElement, 'dv-dragged');
+        ghostElement.remove();
+    }, 0);
+}

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

@@ -0,0 +1,11 @@
+import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+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: DockviewGroupPanel);
+    getData(dataTransfer: DataTransfer | null): IDisposable;
+    dispose(): void;
+}

package/dist/esm/dnd/groupDragHandler.js

@@ -0,0 +1,38 @@
+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/panel/content.d.ts

@@ -0,0 +1,30 @@
+import { CompositeDisposable, IDisposable } from '../../../lifecycle';
+import { Event } from '../../../events';
+import { IDockviewPanel } from '../../dockviewPanel';
+export interface IContentContainer extends IDisposable {
+    onDidFocus: Event<void>;
+    onDidBlur: Event<void>;
+    element: HTMLElement;
+    layout(width: number, height: number): void;
+    openPanel: (panel: IDockviewPanel) => void;
+    closePanel: () => void;
+    show(): void;
+    hide(): void;
+}
+export declare class ContentContainer extends CompositeDisposable implements IContentContainer {
+    private _element;
+    private panel;
+    private disposable;
+    private readonly _onDidFocus;
+    readonly onDidFocus: Event<void>;
+    private readonly _onDidBlur;
+    readonly onDidBlur: Event<void>;
+    get element(): HTMLElement;
+    constructor();
+    show(): void;
+    hide(): void;
+    openPanel(panel: IDockviewPanel): void;
+    layout(_width: number, _height: number): void;
+    closePanel(): void;
+    dispose(): void;
+}

package/dist/esm/dockview/components/panel/content.js

@@ -0,0 +1,73 @@
+import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
+import { Emitter } from '../../../events';
+import { trackFocus } from '../../../dom';
+export class ContentContainer extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor() {
+        super();
+        this.disposable = new MutableDisposable();
+        this._onDidFocus = new Emitter();
+        this.onDidFocus = this._onDidFocus.event;
+        this._onDidBlur = new Emitter();
+        this.onDidBlur = this._onDidBlur.event;
+        this._element = document.createElement('div');
+        this._element.className = 'content-container';
+        this._element.tabIndex = -1;
+        this.addDisposables(this._onDidFocus, this._onDidBlur);
+        // for hosted containers
+        // 1) register a drop target on the host
+        // 2) register window dragStart events to disable pointer events
+        // 3) register dragEnd events
+        // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
+    }
+    show() {
+        this.element.style.display = '';
+    }
+    hide() {
+        this.element.style.display = 'none';
+    }
+    openPanel(panel) {
+        var _a;
+        if (this.panel === panel) {
+            return;
+        }
+        if (this.panel) {
+            if ((_a = this.panel.view) === null || _a === void 0 ? void 0 : _a.content) {
+                this._element.removeChild(this.panel.view.content.element);
+            }
+            this.panel = undefined;
+        }
+        this.panel = panel;
+        const disposable = new CompositeDisposable();
+        if (this.panel.view) {
+            const _onDidFocus = this.panel.view.content.onDidFocus;
+            const _onDidBlur = this.panel.view.content.onDidBlur;
+            const { onDidFocus, onDidBlur } = trackFocus(this._element);
+            disposable.addDisposables(onDidFocus(() => this._onDidFocus.fire()), onDidBlur(() => this._onDidBlur.fire()));
+            if (_onDidFocus) {
+                disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
+            }
+            if (_onDidBlur) {
+                disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
+            }
+            this._element.appendChild(this.panel.view.content.element);
+        }
+        this.disposable.value = disposable;
+    }
+    layout(_width, _height) {
+        // noop
+    }
+    closePanel() {
+        var _a, _b, _c;
+        if ((_c = (_b = (_a = this.panel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.element) {
+            this._element.removeChild(this.panel.view.content.element);
+            this.panel = undefined;
+        }
+    }
+    dispose() {
+        this.disposable.dispose();
+        super.dispose();
+    }
+}

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

@@ -0,0 +1,21 @@
+import { CompositeDisposable } from '../../../lifecycle';
+import { ITabRenderer, GroupPanelPartInitParameters } from '../../types';
+import { PanelUpdateEvent } from '../../../panel/types';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
+    private _element;
+    private _content;
+    private _actionContainer;
+    private _list;
+    private action;
+    private params;
+    get element(): HTMLElement;
+    constructor();
+    update(event: PanelUpdateEvent): void;
+    focus(): void;
+    init(params: GroupPanelPartInitParameters): void;
+    onGroupChange(_group: DockviewGroupPanel): void;
+    onPanelVisibleChange(_isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
+    private render;
+}

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

@@ -0,0 +1,67 @@
+import { CompositeDisposable } from '../../../lifecycle';
+import { addDisposableListener } from '../../../events';
+import { createCloseButton } from '../../../svg';
+export class DefaultTab extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor() {
+        super();
+        //
+        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();
+    }
+    focus() {
+        //noop
+    }
+    init(params) {
+        this.params = params;
+        this._content.textContent = params.title;
+        addDisposableListener(this.action, 'click', (ev) => {
+            ev.preventDefault(); //
+            this.params.api.close();
+        });
+    }
+    onGroupChange(_group) {
+        this.render();
+    }
+    onPanelVisibleChange(_isPanelVisible) {
+        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/tab/tab.d.ts

@@ -0,0 +1,31 @@
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { IDockviewComponent } from '../../dockviewComponent';
+import { ITabRenderer } from '../../types';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+import { DroptargetEvent } from '../../../dnd/droptarget';
+export interface ITab {
+    readonly panelId: string;
+    readonly element: HTMLElement;
+    setContent: (element: ITabRenderer) => void;
+    onChanged: Event<MouseEvent>;
+    onDrop: Event<DroptargetEvent>;
+    setActive(isActive: boolean): void;
+}
+export declare class Tab extends CompositeDisposable implements ITab {
+    readonly panelId: string;
+    private readonly accessor;
+    private readonly group;
+    private readonly _element;
+    private readonly droptarget;
+    private content?;
+    private readonly _onChanged;
+    readonly onChanged: Event<MouseEvent>;
+    private readonly _onDropped;
+    readonly onDrop: Event<DroptargetEvent>;
+    get element(): HTMLElement;
+    constructor(panelId: string, accessor: IDockviewComponent, group: DockviewGroupPanel);
+    setActive(isActive: boolean): void;
+    setContent(part: ITabRenderer): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,94 @@
+import { addDisposableListener, Emitter } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
+import { toggleClass } from '../../../dom';
+import { DockviewDropTargets } from '../../types';
+import { Droptarget } from '../../../dnd/droptarget';
+import { DragHandler } from '../../../dnd/abstractDragHandler';
+export class Tab extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor(panelId, accessor, group) {
+        super();
+        this.panelId = panelId;
+        this.accessor = accessor;
+        this.group = group;
+        this._onChanged = new Emitter();
+        this.onChanged = this._onChanged.event;
+        this._onDropped = new Emitter();
+        this.onDrop = this._onDropped.event;
+        this.addDisposables(this._onChanged, this._onDropped);
+        this._element = document.createElement('div');
+        this._element.className = 'tab';
+        this._element.tabIndex = 0;
+        this._element.draggable = true;
+        toggleClass(this.element, 'inactive-tab', true);
+        this.addDisposables(new (class Handler extends DragHandler {
+            constructor() {
+                super(...arguments);
+                this.panelTransfer = LocalSelectionTransfer.getInstance();
+            }
+            getData() {
+                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
+            }
+            dispose() {
+                //
+            }
+        })(this._element));
+        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            /**
+             * TODO: alternative to stopPropagation
+             *
+             * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
+             * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
+             */
+            event.stopPropagation();
+            this._onChanged.fire(event);
+        }));
+        this.droptarget = new Droptarget(this._element, {
+            acceptedTargetZones: ['center'],
+            canDisplayOverlay: (event, position) => {
+                if (this.group.locked) {
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && this.accessor.id === data.viewId) {
+                    if (data.panelId === null &&
+                        data.groupId === this.group.id) {
+                        // don't allow group move to drop on self
+                        return false;
+                    }
+                    return this.panelId !== data.panelId;
+                }
+                return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
+            },
+        });
+        this.addDisposables(this.droptarget.onDrop((event) => {
+            this._onDropped.fire(event);
+        }));
+    }
+    setActive(isActive) {
+        toggleClass(this.element, 'active-tab', isActive);
+        toggleClass(this.element, 'inactive-tab', !isActive);
+    }
+    setContent(part) {
+        if (this.content) {
+            this._element.removeChild(this.content.element);
+        }
+        this.content = part;
+        this._element.appendChild(this.content.element);
+    }
+    dispose() {
+        super.dispose();
+        this.droptarget.dispose();
+    }
+}