dockview-core 7.0.4 → 8.1.0

package/dist/esm/dnd/droptarget.js

@@ -1,316 +0,0 @@
-import { DockviewEvent, Emitter } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-import { DragAndDropObserver } from './dnd';
-import { createOverlayElements, renderAnchoredOverlay, renderInPlaceOverlay, } from './dropOverlay';
-export class WillShowOverlayEvent extends DockviewEvent {
-    get nativeEvent() {
-        return this.options.nativeEvent;
-    }
-    get position() {
-        return this.options.position;
-    }
-    constructor(options) {
-        super();
-        this.options = options;
-    }
-}
-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}'`);
-    }
-}
-const DEFAULT_ACTIVATION_SIZE = {
-    value: 20,
-    type: 'percentage',
-};
-export class Droptarget extends CompositeDisposable {
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
-    get state() {
-        return this._state;
-    }
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this.options = options;
-        this._onDrop = new Emitter();
-        this.onDrop = this._onDrop.event;
-        this._onWillShowOverlay = new Emitter();
-        this.onWillShowOverlay = this._onWillShowOverlay.event;
-        this._disabled = false;
-        // use a set to take advantage of #<set>.has
-        this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
-        this.dnd = new DragAndDropObserver(this.element, {
-            onDragEnter: () => {
-                var _a, _b, _c;
-                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
-            },
-            onDragOver: (e) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                Droptarget.ACTUAL_TARGET = this;
-                const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if (this._acceptedTargetZonesSet.size === 0) {
-                    if (overrideTarget) {
-                        return;
-                    }
-                    this.removeDropTarget();
-                    return;
-                }
-                const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
-                const width = target.offsetWidth;
-                const height = target.offsetHeight;
-                if (width === 0 || height === 0) {
-                    return; // avoid div!0
-                }
-                const rect = e.currentTarget.getBoundingClientRect();
-                const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
-                const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
-                const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
-                /**
-                 * If the event has already been used by another DropTarget instance
-                 * then don't show a second drop target, only one target should be
-                 * active at any one time
-                 */
-                if (this.isAlreadyUsed(e) || quadrant === null) {
-                    // no drop target should be displayed
-                    this.removeDropTarget();
-                    return;
-                }
-                if (!this.options.canDisplayOverlay(e, quadrant)) {
-                    if (overrideTarget) {
-                        return;
-                    }
-                    this.removeDropTarget();
-                    return;
-                }
-                const willShowOverlayEvent = new WillShowOverlayEvent({
-                    nativeEvent: e,
-                    position: quadrant,
-                });
-                /**
-                 * Provide an opportunity to prevent the overlay appearing and in turn
-                 * any dnd behaviours
-                 */
-                this._onWillShowOverlay.fire(willShowOverlayEvent);
-                if (willShowOverlayEvent.defaultPrevented) {
-                    this.removeDropTarget();
-                    return;
-                }
-                this.markAsUsed(e);
-                if (overrideTarget) {
-                    //
-                }
-                else if (!this.targetElement) {
-                    const els = createOverlayElements();
-                    this.targetElement = els.dropzone;
-                    this.overlayElement = els.selection;
-                    this._state = 'center';
-                    target.classList.add('dv-drop-target');
-                    target.append(this.targetElement);
-                }
-                this.toggleClasses(quadrant, width, height);
-                this._state = quadrant;
-            },
-            onDragLeave: () => {
-                var _a, _b;
-                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if (target) {
-                    return;
-                }
-                this.removeDropTarget();
-            },
-            onDragEnd: (e) => {
-                var _a, _b;
-                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if (target && Droptarget.ACTUAL_TARGET === this) {
-                    if (this._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: this._state,
-                            nativeEvent: e,
-                        });
-                    }
-                }
-                this.removeDropTarget();
-                target === null || target === void 0 ? void 0 : target.clear();
-            },
-            onDrop: (e) => {
-                var _a, _b, _c;
-                e.preventDefault();
-                const state = this._state;
-                this.removeDropTarget();
-                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
-                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 });
-                }
-            },
-        });
-        this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
-    }
-    setTargetZones(acceptedTargetZones) {
-        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
-    }
-    setOverlayModel(model) {
-        this.options.overlayModel = model;
-    }
-    dispose() {
-        this.removeDropTarget();
-        super.dispose();
-    }
-    /**
-     * Add a property to the event object for other potential listeners to check
-     */
-    markAsUsed(event) {
-        event[Droptarget.USED_EVENT_ID] = true;
-    }
-    /**
-     * Check is the event has already been used by another instance of DropTarget
-     */
-    isAlreadyUsed(event) {
-        const value = event[Droptarget.USED_EVENT_ID];
-        return typeof value === 'boolean' && value;
-    }
-    toggleClasses(quadrant, width, height) {
-        var _a, _b, _c, _d, _e;
-        const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (target) {
-            const outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
-            renderAnchoredOverlay({
-                outlineElement: outlineEl,
-                targetModel: target,
-                quadrant,
-                width,
-                height,
-                overlayModel: this.options.overlayModel,
-                className: this.options.className,
-            });
-            return;
-        }
-        if (!this.overlayElement) {
-            return;
-        }
-        renderInPlaceOverlay(this.overlayElement, quadrant, width, height, this.options.overlayModel);
-    }
-    calculateQuadrant(overlayType, x, y, width, height) {
-        var _a, _b;
-        const activationSizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
-        const isPercentage = activationSizeOptions.type === 'percentage';
-        if (isPercentage) {
-            return calculateQuadrantAsPercentage(overlayType, x, y, width, height, activationSizeOptions.value);
-        }
-        return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
-    }
-    removeDropTarget() {
-        var _a;
-        if (this.targetElement) {
-            this._state = undefined;
-            (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
-            this.targetElement.remove();
-            this.targetElement = undefined;
-            this.overlayElement = undefined;
-        }
-    }
-    /**
-     * 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) {
-        var _a, _b, _c, _d, _e;
-        const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
-        const width = target.offsetWidth;
-        const height = target.offsetHeight;
-        if (!overrideTarget && !this.targetElement) {
-            const els = createOverlayElements();
-            this.targetElement = els.dropzone;
-            this.overlayElement = els.selection;
-            target.classList.add('dv-drop-target');
-            target.append(this.targetElement);
-        }
-        this.toggleClasses(position, width, height);
-        this._state = position;
-    }
-    /** Clear an overlay shown via {@link showOverlay} (in-place or anchored). */
-    clearOverlay() {
-        var _a, _b, _c;
-        this.removeDropTarget();
-        (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
-        this._state = undefined;
-    }
-}
-Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
-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,4 +0,0 @@
-export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement, options?: {
-    x?: number;
-    y?: number;
-}): void;

package/dist/esm/dnd/ghost.js

@@ -1,14 +0,0 @@
-import { addClasses, removeClasses } from '../dom';
-export function addGhostImage(dataTransfer, ghostElement, options) {
-    var _a, _b;
-    // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-    addClasses(ghostElement, 'dv-dragged');
-    // move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
-    ghostElement.style.top = '-9999px';
-    document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
-    setTimeout(() => {
-        removeClasses(ghostElement, 'dv-dragged');
-        ghostElement.remove();
-    }, 0);
-}

package/dist/esm/dnd/pointer/index.d.ts

@@ -1,11 +0,0 @@
-export { PointerDragController } from './pointerDragController';
-export type { ActiveDrag } from './pointerDragController';
-export { PointerDragSource } from './pointerDragSource';
-export type { PointerDragSourceOptions } from './pointerDragSource';
-export { PointerDropTarget } from './pointerDropTarget';
-export type { PointerDropTargetOptions } from './pointerDropTarget';
-export type { PointerDragEvent, PointerDroptargetEvent, IPointerDropTargetHandle, } from './types';
-export { LongPressDetector } from './longPress';
-export type { LongPressOptions } from './longPress';
-export { PointerGhost } from './pointerGhost';
-export type { PointerGhostOptions } from './pointerGhost';

package/dist/esm/dnd/pointer/index.js

@@ -1,5 +0,0 @@
-export { PointerDragController } from './pointerDragController';
-export { PointerDragSource } from './pointerDragSource';
-export { PointerDropTarget } from './pointerDropTarget';
-export { LongPressDetector } from './longPress';
-export { PointerGhost } from './pointerGhost';

package/dist/esm/dnd/pointer/longPress.d.ts

@@ -1,32 +0,0 @@
-import { CompositeDisposable } from '../../lifecycle';
-export interface LongPressOptions {
-    /** Default 500ms. */
-    delay?: number;
-    /** Default 8px. */
-    tolerance?: number;
-    /** Default true: mouse users have right-click and don't need this. */
-    touchOnly?: boolean;
-    /** Receives the `pointerdown` event so consumers can read `clientX/Y`. */
-    onLongPress: (event: PointerEvent) => void;
-}
-/**
- * Passive — does not consume the pointer; movement past `tolerance`
- * cancels silently so a sibling `PointerDragSource` can take over.
- */
-export declare class LongPressDetector extends CompositeDisposable {
-    private readonly element;
-    private readonly options;
-    private _pointerId;
-    private _startX;
-    private _startY;
-    private _timer;
-    private _moveListener;
-    private _upListener;
-    private _cancelListener;
-    constructor(element: HTMLElement, options: LongPressOptions);
-    private _onPointerDown;
-    private _installContextMenuGuard;
-    private _installClickGuard;
-    private _cancelPending;
-    dispose(): void;
-}

package/dist/esm/dnd/pointer/longPress.js

@@ -1,127 +0,0 @@
-import { addDisposableListener } from '../../events';
-import { CompositeDisposable } from '../../lifecycle';
-const DEFAULT_DELAY = 500;
-const DEFAULT_TOLERANCE = 8;
-/**
- * Passive — does not consume the pointer; movement past `tolerance`
- * cancels silently so a sibling `PointerDragSource` can take over.
- */
-export class LongPressDetector extends CompositeDisposable {
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this.options = options;
-        this._startX = 0;
-        this._startY = 0;
-        this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
-            this._onPointerDown(e);
-        }));
-    }
-    _onPointerDown(event) {
-        var _a, _b, _c, _d, _e;
-        const touchOnly = (_a = this.options.touchOnly) !== null && _a !== void 0 ? _a : true;
-        if (touchOnly &&
-            event.pointerType !== 'touch' &&
-            event.pointerType !== 'pen') {
-            return;
-        }
-        // Defensive — supersede any in-flight press.
-        this._cancelPending();
-        this._pointerId = event.pointerId;
-        this._startX = event.clientX;
-        this._startY = event.clientY;
-        const delay = (_b = this.options.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY;
-        const tolerance = (_c = this.options.tolerance) !== null && _c !== void 0 ? _c : DEFAULT_TOLERANCE;
-        // Source's owning window — popout drags fire on their own window.
-        const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : globalThis.window;
-        this._timer = setTimeout(() => {
-            this._timer = undefined;
-            this._cancelPending();
-            // Touch browsers synthesize a compatibility `contextmenu` event
-            // for long-press. preventDefault on the original pointerdown is
-            // too late (already dispatched), so install a one-shot
-            // capture-phase guard for the next contextmenu. Without this,
-            // consumers that don't preventDefault inside their onLongPress
-            // (or that early-return before doing so) leak the browser's
-            // native menu on top of theirs.
-            this._installContextMenuGuard(targetWindow);
-            // Same idea for `click`: when the user releases their finger
-            // after the long-press, touch browsers dispatch a `click` to
-            // the element the touch ended on (the source). Consumers
-            // typically wire click to a primary action (e.g. tab activate,
-            // tab-group chip collapse-toggle). Without this guard, the
-            // long-press immediately fires both the context menu AND the
-            // primary action — and the action's side effects (e.g. a chip
-            // collapse animation) read as a screen wobble while the menu
-            // is supposed to be open. Scoped to the source element so
-            // clicks on menu items elsewhere remain effective.
-            this._installClickGuard(targetWindow);
-            this.options.onLongPress(event);
-        }, delay);
-        this._moveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
-            if (moveEvent.pointerId !== this._pointerId) {
-                return;
-            }
-            const dx = moveEvent.clientX - this._startX;
-            const dy = moveEvent.clientY - this._startY;
-            if (Math.hypot(dx, dy) > tolerance) {
-                this._cancelPending();
-            }
-        });
-        this._upListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
-            if (upEvent.pointerId !== this._pointerId) {
-                return;
-            }
-            this._cancelPending();
-        });
-        this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
-            if (cancelEvent.pointerId !== this._pointerId) {
-                return;
-            }
-            this._cancelPending();
-        });
-    }
-    _installContextMenuGuard(targetWindow) {
-        let guard;
-        const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
-        guard = addDisposableListener(targetWindow, 'contextmenu', (event) => {
-            event.preventDefault();
-            clearTimeout(timeout);
-            guard === null || guard === void 0 ? void 0 : guard.dispose();
-        }, { capture: true });
-    }
-    _installClickGuard(targetWindow) {
-        let guard;
-        const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
-        guard = addDisposableListener(targetWindow, 'click', (event) => {
-            // Only suppress clicks targeted at the long-pressed element
-            // or its descendants. A user tap on a context menu item (or
-            // anywhere else) still gets through unchanged.
-            const target = event.target;
-            if (target && this.element.contains(target)) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            clearTimeout(timeout);
-            guard === null || guard === void 0 ? void 0 : guard.dispose();
-        }, { capture: true });
-    }
-    _cancelPending() {
-        var _a, _b, _c;
-        if (this._timer !== undefined) {
-            clearTimeout(this._timer);
-            this._timer = undefined;
-        }
-        this._pointerId = undefined;
-        (_a = this._moveListener) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this._upListener) === null || _b === void 0 ? void 0 : _b.dispose();
-        (_c = this._cancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
-        this._moveListener = undefined;
-        this._upListener = undefined;
-        this._cancelListener = undefined;
-    }
-    dispose() {
-        this._cancelPending();
-        super.dispose();
-    }
-}

package/dist/esm/dnd/pointer/pointerDragController.d.ts

@@ -1,60 +0,0 @@
-import { Event } from '../../events';
-import { CompositeDisposable, IDisposable } from '../../lifecycle';
-import { PointerGhost } from './pointerGhost';
-import { IPointerDropTargetHandle, PointerDragEvent } from './types';
-export interface ActiveDrag {
-    readonly pointerId: number;
-    readonly startX: number;
-    readonly startY: number;
-    readonly source: HTMLElement;
-}
-/**
- * Singleton — only one pointer-driven drag active at a time.
- *
- * State is shared across every Dockview instance on the page. Targets
- * from instance B receive hit-tests from drags originating in instance A;
- * that's intentional for cross-instance drops since `LocalSelectionTransfer`
- * is also process-wide. The corollary is that every Tabs subscriber to
- * `onDragMove` fires for every pointer drag globally — each subscriber
- * hit-tests against its own DOM, so this is O(N) per pointermove where N
- * is the number of registered listeners across all instances.
- */
-export declare class PointerDragController extends CompositeDisposable {
-    private static _instance;
-    static getInstance(): PointerDragController;
-    private readonly _targets;
-    /** Kept in sync with `_targets` so hit-testing is allocation-free. */
-    private readonly _targetByElement;
-    private _active;
-    private _currentTarget;
-    private _dataDisposable;
-    private _ghost;
-    private _moveListener;
-    private _upListener;
-    private _cancelListener;
-    private _iframeShield;
-    private _onDragMoveCallback?;
-    private _onDragEndCallback?;
-    private readonly _onDragStart;
-    readonly onDragStart: Event<PointerDragEvent>;
-    private readonly _onDragMove;
-    readonly onDragMove: Event<PointerDragEvent>;
-    private readonly _onDragEnd;
-    readonly onDragEnd: Event<PointerDragEvent>;
-    private constructor();
-    get active(): ActiveDrag | undefined;
-    registerTarget(target: IPointerDropTargetHandle): IDisposable;
-    beginDrag(args: {
-        pointerEvent: PointerEvent;
-        source: HTMLElement;
-        getData: () => IDisposable;
-        ghost?: PointerGhost;
-        onDragMove?: (e: PointerDragEvent) => void;
-        onDragEnd?: (e: PointerDragEvent, dropped: boolean) => void;
-    }): void;
-    cancel(): void;
-    private _findTargetUnder;
-    private _handleMove;
-    private _handleEnd;
-    private _teardown;
-}