dockview-core 7.0.4 → 8.1.0

package/dist/esm/dnd/dnd.js

@@ -1,51 +0,0 @@
-import { addDisposableListener } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-export class DragAndDropObserver extends CompositeDisposable {
-    constructor(element, callbacks) {
-        super();
-        this.element = element;
-        this.callbacks = callbacks;
-        this.target = null;
-        this.registerListeners();
-    }
-    onDragEnter(e) {
-        this.target = e.target;
-        this.callbacks.onDragEnter(e);
-    }
-    onDragOver(e) {
-        e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-        if (this.callbacks.onDragOver) {
-            this.callbacks.onDragOver(e);
-        }
-    }
-    onDragLeave(e) {
-        if (this.target === e.target) {
-            this.target = null;
-            this.callbacks.onDragLeave(e);
-        }
-    }
-    onDragEnd(e) {
-        this.target = null;
-        this.callbacks.onDragEnd(e);
-    }
-    onDrop(e) {
-        this.callbacks.onDrop(e);
-    }
-    registerListeners() {
-        this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-            this.onDragEnter(e);
-        }, true));
-        this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-            this.onDragOver(e);
-        }, true));
-        this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-            this.onDragLeave(e);
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-            this.onDragEnd(e);
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-            this.onDrop(e);
-        }));
-    }
-}

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

@@ -1,20 +0,0 @@
-import { DropTargetTargetModel, DroptargetOverlayModel, Position } from './droptarget';
-export interface OverlayElements {
-    dropzone: HTMLElement;
-    selection: HTMLElement;
-}
-export declare function createOverlayElements(): OverlayElements;
-export declare function renderInPlaceOverlay(overlay: HTMLElement, quadrant: Position, width: number, height: number, overlayModel?: DroptargetOverlayModel): void;
-/** `boundsChanged: false` lets callers skip redundant work on tight drag loops. */
-export declare function renderAnchoredOverlay(args: {
-    outlineElement: HTMLElement;
-    targetModel: DropTargetTargetModel;
-    quadrant: Position;
-    width: number;
-    height: number;
-    overlayModel?: DroptargetOverlayModel;
-    className?: string;
-}): {
-    boundsChanged: boolean;
-    targetChanged: boolean;
-};

package/dist/esm/dnd/dropOverlay.js

@@ -1,192 +0,0 @@
-// Two render paths: in-place (dropzone appended to drop element) and
-// anchored (overlay rendered into an external anchor container).
-import { toggleClass } from '../dom';
-import { clamp } from '../math';
-const DEFAULT_SIZE = { value: 50, type: 'percentage' };
-const SMALL_WIDTH_BOUNDARY = 100;
-const SMALL_HEIGHT_BOUNDARY = 100;
-export function createOverlayElements() {
-    const dropzone = document.createElement('div');
-    dropzone.className = 'dv-drop-target-dropzone';
-    const selection = document.createElement('div');
-    selection.className = 'dv-drop-target-selection';
-    dropzone.appendChild(selection);
-    return { dropzone, selection };
-}
-function computeOverlayShape(quadrant, width, height, overlayModel) {
-    var _a, _b, _c;
-    const smallWidthBoundary = (_a = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallWidthBoundary) !== null && _a !== void 0 ? _a : SMALL_WIDTH_BOUNDARY;
-    const smallHeightBoundary = (_b = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.smallHeightBoundary) !== null && _b !== void 0 ? _b : SMALL_HEIGHT_BOUNDARY;
-    const isSmallX = width < smallWidthBoundary;
-    const isSmallY = height < smallHeightBoundary;
-    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 = 1;
-    const sizeOptions = (_c = overlayModel === null || overlayModel === void 0 ? void 0 : overlayModel.size) !== null && _c !== void 0 ? _c : DEFAULT_SIZE;
-    if (sizeOptions.type === 'percentage') {
-        size = clamp(sizeOptions.value, 0, 100) / 100;
-    }
-    else {
-        if (rightClass || leftClass) {
-            size = clamp(0, sizeOptions.value, width) / width;
-        }
-        if (topClass || bottomClass) {
-            size = clamp(0, sizeOptions.value, height) / height;
-        }
-    }
-    return {
-        isSmallX,
-        isSmallY,
-        isLeft,
-        isRight,
-        isTop,
-        isBottom,
-        rightClass,
-        leftClass,
-        topClass,
-        bottomClass,
-        size,
-    };
-}
-export function renderInPlaceOverlay(overlay, quadrant, width, height, overlayModel) {
-    const shape = computeOverlayShape(quadrant, width, height, overlayModel);
-    const { rightClass, leftClass, topClass, bottomClass, size } = shape;
-    const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
-    if (rightClass) {
-        box.left = `${100 * (1 - size)}%`;
-        box.width = `${100 * size}%`;
-    }
-    else if (leftClass) {
-        box.width = `${100 * size}%`;
-    }
-    else if (topClass) {
-        box.height = `${100 * size}%`;
-    }
-    else if (bottomClass) {
-        box.top = `${100 * (1 - size)}%`;
-        box.height = `${100 * size}%`;
-    }
-    if (shape.isSmallX && shape.isLeft) {
-        box.width = '4px';
-    }
-    if (shape.isSmallX && shape.isRight) {
-        box.left = `${width - 4}px`;
-        box.width = '4px';
-    }
-    if (shape.isSmallY && shape.isTop) {
-        box.height = '4px';
-    }
-    if (shape.isSmallY && shape.isBottom) {
-        box.top = `${height - 4}px`;
-        box.height = '4px';
-    }
-    overlay.style.top = box.top;
-    overlay.style.left = box.left;
-    overlay.style.width = box.width;
-    overlay.style.height = box.height;
-    overlay.style.visibility = 'visible';
-    if (!overlay.style.transform || overlay.style.transform === '') {
-        overlay.style.transform = 'translate3d(0, 0, 0)';
-    }
-    const isLine = (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
-        (shape.isSmallY && (shape.isTop || shape.isBottom));
-    toggleClass(overlay, 'dv-drop-target-small-vertical', shape.isSmallY);
-    toggleClass(overlay, 'dv-drop-target-small-horizontal', shape.isSmallX);
-    toggleClass(overlay, 'dv-drop-target-selection-line', isLine);
-    toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
-    toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
-    toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
-    toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
-    toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
-}
-function checkAnchoredBoundsChanged(overlay, bounds) {
-    const topPx = `${Math.round(bounds.top)}px`;
-    const leftPx = `${Math.round(bounds.left)}px`;
-    const widthPx = `${Math.round(bounds.width)}px`;
-    const heightPx = `${Math.round(bounds.height)}px`;
-    return (overlay.style.top !== topPx ||
-        overlay.style.left !== leftPx ||
-        overlay.style.width !== widthPx ||
-        overlay.style.height !== heightPx);
-}
-function applyAnchoredBounds(overlay, bounds) {
-    overlay.style.top = `${Math.round(bounds.top)}px`;
-    overlay.style.left = `${Math.round(bounds.left)}px`;
-    overlay.style.width = `${Math.round(bounds.width)}px`;
-    overlay.style.height = `${Math.round(bounds.height)}px`;
-    overlay.style.visibility = 'visible';
-    if (!overlay.style.transform || overlay.style.transform === '') {
-        overlay.style.transform = 'translate3d(0, 0, 0)';
-    }
-}
-/** `boundsChanged: false` lets callers skip redundant work on tight drag loops. */
-export function renderAnchoredOverlay(args) {
-    const shape = computeOverlayShape(args.quadrant, args.width, args.height, args.overlayModel);
-    const { rightClass, leftClass, topClass, bottomClass, size } = shape;
-    const elBox = args.outlineElement.getBoundingClientRect();
-    const ta = args.targetModel.getElements(undefined, args.outlineElement);
-    const el = ta.root;
-    const overlay = ta.overlay;
-    const bigbox = el.getBoundingClientRect();
-    const rootTop = elBox.top - bigbox.top;
-    const rootLeft = elBox.left - bigbox.left;
-    const box = {
-        top: rootTop,
-        left: rootLeft,
-        width: args.width,
-        height: args.height,
-    };
-    if (rightClass) {
-        box.left = rootLeft + args.width * (1 - size);
-        box.width = args.width * size;
-    }
-    else if (leftClass) {
-        box.width = args.width * size;
-    }
-    else if (topClass) {
-        box.height = args.height * size;
-    }
-    else if (bottomClass) {
-        box.top = rootTop + args.height * (1 - size);
-        box.height = args.height * size;
-    }
-    if (shape.isSmallX && shape.isLeft) {
-        box.width = 4;
-    }
-    if (shape.isSmallX && shape.isRight) {
-        box.left = rootLeft + args.width - 4;
-        box.width = 4;
-    }
-    if (shape.isSmallY && shape.isTop) {
-        box.height = 4;
-    }
-    if (shape.isSmallY && shape.isBottom) {
-        box.top = rootTop + args.height - 4;
-        box.height = 4;
-    }
-    if (!checkAnchoredBoundsChanged(overlay, box)) {
-        return { boundsChanged: false, targetChanged: ta.changed };
-    }
-    applyAnchoredBounds(overlay, box);
-    overlay.className = `dv-drop-target-anchor${args.className ? ` ${args.className}` : ''}`;
-    toggleClass(overlay, 'dv-drop-target-left', shape.isLeft);
-    toggleClass(overlay, 'dv-drop-target-right', shape.isRight);
-    toggleClass(overlay, 'dv-drop-target-top', shape.isTop);
-    toggleClass(overlay, 'dv-drop-target-bottom', shape.isBottom);
-    toggleClass(overlay, 'dv-drop-target-anchor-line', (shape.isSmallX && (shape.isLeft || shape.isRight)) ||
-        (shape.isSmallY && (shape.isTop || shape.isBottom)));
-    toggleClass(overlay, 'dv-drop-target-center', args.quadrant === 'center');
-    if (ta.changed) {
-        toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
-        setTimeout(() => {
-            toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
-        }, 10);
-    }
-    return { boundsChanged: true, targetChanged: ta.changed };
-}

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

@@ -1,16 +0,0 @@
-import { CompositeDisposable } from '../lifecycle';
-import { DropTargetTargetModel } from './droptarget';
-export declare class DropTargetAnchorContainer extends CompositeDisposable {
-    readonly element: HTMLElement;
-    private _model;
-    private _outline;
-    private _disabled;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    get model(): DropTargetTargetModel | undefined;
-    constructor(element: HTMLElement, options: {
-        disabled: boolean;
-    });
-    private createContainer;
-    private createAnchor;
-}

package/dist/esm/dnd/dropTargetAnchorContainer.js

@@ -1,73 +0,0 @@
-import { CompositeDisposable, Disposable } from '../lifecycle';
-export class DropTargetAnchorContainer extends CompositeDisposable {
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        var _a;
-        if (this.disabled === value) {
-            return;
-        }
-        this._disabled = value;
-        if (value) {
-            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
-        }
-    }
-    get model() {
-        if (this.disabled) {
-            return undefined;
-        }
-        return {
-            clear: () => {
-                if (this._model) {
-                    this._model.root.remove();
-                }
-                this._model = undefined;
-            },
-            exists: () => {
-                return !!this._model;
-            },
-            getElements: (event, outline) => {
-                const changed = this._outline !== outline;
-                this._outline = outline;
-                if (this._model) {
-                    this._model.changed = changed;
-                    return this._model;
-                }
-                const container = this.createContainer();
-                const anchor = this.createAnchor();
-                this._model = { root: container, overlay: anchor, changed };
-                container.appendChild(anchor);
-                this.element.appendChild(container);
-                if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
-                    const targetBox = event.target.getBoundingClientRect();
-                    const box = this.element.getBoundingClientRect();
-                    anchor.style.left = `${targetBox.left - box.left}px`;
-                    anchor.style.top = `${targetBox.top - box.top}px`;
-                }
-                return this._model;
-            },
-        };
-    }
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this._disabled = false;
-        this._disabled = options.disabled;
-        this.addDisposables(Disposable.from(() => {
-            var _a;
-            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
-        }));
-    }
-    createContainer() {
-        const el = document.createElement('div');
-        el.className = 'dv-drop-target-container';
-        return el;
-    }
-    createAnchor() {
-        const el = document.createElement('div');
-        el.className = 'dv-drop-target-anchor';
-        el.style.visibility = 'hidden';
-        return el;
-    }
-}

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

@@ -1,116 +0,0 @@
-import { DockviewEvent, Event } from '../events';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { DragAndDropObserver } from './dnd';
-import { Direction } from '../gridview/baseComponentGridview';
-export interface DroptargetEvent {
-    readonly position: Position;
-    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
-    readonly nativeEvent: DragEvent | PointerEvent;
-}
-export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent {
-    private readonly options;
-    get nativeEvent(): DragEvent | PointerEvent;
-    get position(): Position;
-    constructor(options: {
-        nativeEvent: DragEvent | PointerEvent;
-        position: Position;
-    });
-}
-export declare function directionToPosition(direction: Direction): Position;
-export declare function positionToDirection(position: Position): Direction;
-export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
-export type CanDisplayOverlay = (dragEvent: DragEvent | PointerEvent, state: Position) => boolean;
-export type MeasuredValue = {
-    value: number;
-    type: 'pixels' | 'percentage';
-};
-export type DroptargetOverlayModel = {
-    size?: MeasuredValue;
-    activationSize?: MeasuredValue;
-    /**
-     * Override the width threshold (in pixels) below which the overlay switches
-     * to a thin-border indicator instead of a half-width highlight. Set to 0 to
-     * always show the half-width overlay regardless of element size.
-     */
-    smallWidthBoundary?: number;
-    /**
-     * Override the height threshold (in pixels) below which the overlay switches
-     * to a thin-border indicator instead of a half-height highlight. Set to 0 to
-     * always show the half-height overlay regardless of element size.
-     */
-    smallHeightBoundary?: number;
-};
-export interface DropTargetTargetModel {
-    getElements(event?: DragEvent, outline?: HTMLElement): {
-        root: HTMLElement;
-        overlay: HTMLElement;
-        changed: boolean;
-    };
-    exists(): boolean;
-    clear(): void;
-}
-export interface DroptargetOptions {
-    canDisplayOverlay: CanDisplayOverlay;
-    acceptedTargetZones: Position[];
-    overlayModel?: DroptargetOverlayModel;
-    getOverrideTarget?: () => DropTargetTargetModel | undefined;
-    className?: string;
-    getOverlayOutline?: () => HTMLElement | null;
-}
-/**
- * Backend-agnostic drop target. Both the HTML5 `Droptarget` and the pointer
- * `PointerDropTarget` implement this shape so consumers can hold one field
- * regardless of which DnD backend produced it.
- */
-export interface IDropTarget extends IDisposable {
-    readonly onDrop: Event<DroptargetEvent>;
-    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
-    readonly state: Position | undefined;
-    disabled: boolean;
-    setTargetZones(zones: Position[]): void;
-    setOverlayModel(model: DroptargetOverlayModel): void;
-}
-export declare class Droptarget extends CompositeDisposable implements IDropTarget {
-    private readonly element;
-    private readonly options;
-    private targetElement;
-    private overlayElement;
-    private _state;
-    private _acceptedTargetZonesSet;
-    private readonly _onDrop;
-    readonly onDrop: Event<DroptargetEvent>;
-    private readonly _onWillShowOverlay;
-    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
-    readonly dnd: DragAndDropObserver;
-    private static USED_EVENT_ID;
-    private static ACTUAL_TARGET;
-    private _disabled;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    get state(): Position | undefined;
-    constructor(element: HTMLElement, options: DroptargetOptions);
-    setTargetZones(acceptedTargetZones: Position[]): void;
-    setOverlayModel(model: DroptargetOverlayModel): void;
-    dispose(): void;
-    /**
-     * Add a property to the event object for other potential listeners to check
-     */
-    private markAsUsed;
-    /**
-     * Check is the event has already been used by another instance of DropTarget
-     */
-    private isAlreadyUsed;
-    private toggleClasses;
-    private calculateQuadrant;
-    private removeDropTarget;
-    /**
-     * Render the drop overlay at `position` without a live drag, so keyboard
-     * docking shows the exact same preview as a mouse drag. Mirrors the
-     * `onDragOver` render path (in-place or anchored). Pair with `clearOverlay`.
-     */
-    showOverlay(position: Position): void;
-    /** Clear an overlay shown via {@link showOverlay} (in-place or anchored). */
-    clearOverlay(): void;
-}
-export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
-export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;