dockview-core 6.2.2 → 6.4.0

package/dist/esm/dnd/droptarget.js

@@ -1,50 +1,7 @@
-import { toggleClass } from '../dom';
 import { DockviewEvent, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
-import { clamp } from '../math';
-function setGPUOptimizedBounds(element, bounds) {
-    const { top, left, width, height } = bounds;
-    const topPx = `${Math.round(top)}px`;
-    const leftPx = `${Math.round(left)}px`;
-    const widthPx = `${Math.round(width)}px`;
-    const heightPx = `${Math.round(height)}px`;
-    // Use traditional positioning but maintain GPU layer
-    element.style.top = topPx;
-    element.style.left = leftPx;
-    element.style.width = widthPx;
-    element.style.height = heightPx;
-    element.style.visibility = 'visible';
-    // Ensure GPU layer is maintained
-    if (!element.style.transform || element.style.transform === '') {
-        element.style.transform = 'translate3d(0, 0, 0)';
-    }
-}
-function setGPUOptimizedBoundsFromStrings(element, bounds) {
-    const { top, left, width, height } = bounds;
-    // Use traditional positioning but maintain GPU layer
-    element.style.top = top;
-    element.style.left = left;
-    element.style.width = width;
-    element.style.height = height;
-    element.style.visibility = 'visible';
-    // Ensure GPU layer is maintained
-    if (!element.style.transform || element.style.transform === '') {
-        element.style.transform = 'translate3d(0, 0, 0)';
-    }
-}
-function checkBoundsChanged(element, bounds) {
-    const { top, left, width, height } = bounds;
-    const topPx = `${Math.round(top)}px`;
-    const leftPx = `${Math.round(left)}px`;
-    const widthPx = `${Math.round(width)}px`;
-    const heightPx = `${Math.round(height)}px`;
-    // Check if position or size changed (back to traditional method)
-    return (element.style.top !== topPx ||
-        element.style.left !== leftPx ||
-        element.style.width !== widthPx ||
-        element.style.height !== heightPx);
-}
+import { createOverlayElements, renderAnchoredOverlay, renderInPlaceOverlay, } from './dropOverlay';
 export class WillShowOverlayEvent extends DockviewEvent {
     get nativeEvent() {
         return this.options.nativeEvent;
@@ -93,12 +50,6 @@ const DEFAULT_ACTIVATION_SIZE = {
     value: 20,
     type: 'percentage',
 };
-const DEFAULT_SIZE = {
-    value: 50,
-    type: 'percentage',
-};
-const SMALL_WIDTH_BOUNDARY = 100;
-const SMALL_HEIGHT_BOUNDARY = 100;
 export class Droptarget extends CompositeDisposable {
     get disabled() {
         return this._disabled;
@@ -181,20 +132,12 @@ export class Droptarget extends CompositeDisposable {
                     //
                 }
                 else if (!this.targetElement) {
-                    this.targetElement = document.createElement('div');
-                    this.targetElement.className = 'dv-drop-target-dropzone';
-                    this.overlayElement = document.createElement('div');
-                    this.overlayElement.className = 'dv-drop-target-selection';
+                    const els = createOverlayElements();
+                    this.targetElement = els.dropzone;
+                    this.overlayElement = els.selection;
                     this._state = 'center';
-                    this.targetElement.appendChild(this.overlayElement);
                     target.classList.add('dv-drop-target');
                     target.append(this.targetElement);
-                    // this.overlayElement.style.opacity = '0';
-                    // requestAnimationFrame(() => {
-                    //     if (this.overlayElement) {
-                    //         this.overlayElement.style.opacity = '';
-                    //     }
-                    // });
                 }
                 this.toggleClasses(quadrant, width, height);
                 this._state = quadrant;
@@ -264,162 +207,25 @@ export class Droptarget extends CompositeDisposable {
         return typeof value === 'boolean' && value;
     }
     toggleClasses(quadrant, width, height) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e;
         const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (!target && !this.overlayElement) {
-            return;
-        }
-        const smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
-        const smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : 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 = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : 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;
-            }
-        }
         if (target) {
-            const outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
-            const elBox = outlineEl.getBoundingClientRect();
-            const ta = target.getElements(undefined, outlineEl);
-            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: width,
-                height: height,
-            };
-            if (rightClass) {
-                box.left = rootLeft + width * (1 - size);
-                box.width = width * size;
-            }
-            else if (leftClass) {
-                box.width = width * size;
-            }
-            else if (topClass) {
-                box.height = height * size;
-            }
-            else if (bottomClass) {
-                box.top = rootTop + height * (1 - size);
-                box.height = height * size;
-            }
-            if (isSmallX && isLeft) {
-                box.width = 4;
-            }
-            if (isSmallX && isRight) {
-                box.left = rootLeft + width - 4;
-                box.width = 4;
-            }
-            if (isSmallY && isTop) {
-                box.height = 4;
-            }
-            if (isSmallY && isBottom) {
-                box.top = rootTop + height - 4;
-                box.height = 4;
-            }
-            // Use GPU-optimized bounds checking and setting
-            if (!checkBoundsChanged(overlay, box)) {
-                return;
-            }
-            setGPUOptimizedBounds(overlay, box);
-            overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
-            toggleClass(overlay, 'dv-drop-target-left', isLeft);
-            toggleClass(overlay, 'dv-drop-target-right', isRight);
-            toggleClass(overlay, 'dv-drop-target-top', isTop);
-            toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
-            toggleClass(overlay, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
-                (isSmallY && (isTop || isBottom)));
-            toggleClass(overlay, 'dv-drop-target-center', 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);
-            }
+            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;
         }
-        const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
-        /**
-         * You can also achieve the overlay placement using the transform CSS property
-         * to translate and scale the element however this has the undesired effect of
-         * 'skewing' the element. Comment left here for anybody that ever revisits this.
-         *
-         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
-         *
-         * right
-         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
-         *
-         * left
-         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
-         *
-         * top
-         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
-         *
-         * bottom
-         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
-         */
-        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 (isSmallX && isLeft) {
-            box.width = '4px';
-        }
-        if (isSmallX && isRight) {
-            box.left = `${width - 4}px`;
-            box.width = '4px';
-        }
-        if (isSmallY && isTop) {
-            box.height = '4px';
-        }
-        if (isSmallY && isBottom) {
-            box.top = `${height - 4}px`;
-            box.height = '4px';
-        }
-        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
-        const isLine = (isSmallX && (isLeft || isRight)) ||
-            (isSmallY && (isTop || isBottom));
-        toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
-        toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
-        toggleClass(this.overlayElement, 'dv-drop-target-selection-line', isLine);
-        toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
-        toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
-        toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);
-        toggleClass(this.overlayElement, 'dv-drop-target-bottom', isBottom);
-        toggleClass(this.overlayElement, 'dv-drop-target-center', quadrant === 'center');
+        renderInPlaceOverlay(this.overlayElement, quadrant, width, height, this.options.overlayModel);
     }
     calculateQuadrant(overlayType, x, y, width, height) {
         var _a, _b;

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,127 @@
+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 : 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

@@ -0,0 +1,60 @@
+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;
+}