dockview-core 6.3.0 → 6.4.0

package/README.md

@@ -26,6 +26,7 @@ Please see the website: https://dockview.dev
 -   Support for split-views, grid-views and 'dockable' views
 -   Themeable and customizable
 -   Tab and Group docking / Drag n' Drop
+-   Touch & mobile support
 -   Popout Windows
 -   Floating Groups
 -   Edge Groups

package/dist/cjs/dnd/backend.d.ts

@@ -0,0 +1,70 @@
+import { IDisposable } from '../lifecycle';
+import { DroptargetOptions, IDropTarget } from './droptarget';
+/**
+ * Backend factory surface. Each implementation hides one concrete DnD
+ * mechanism (HTML5 native events, pointer events) behind a uniform set of
+ * `createX` methods.
+ *
+ * The backends are stateless — `html5Backend` and `pointerBackend` below
+ * are exported as module-level singletons so they need no construction
+ * or wiring through the component tree.
+ */
+export interface IDragBackend {
+    /** Stable identifier, mostly for debugging / tests. */
+    readonly kind: 'html5' | 'pointer';
+    createDropTarget(element: HTMLElement, options: DroptargetOptions): IDropTarget;
+    createDragSource(element: HTMLElement, options: DragSourceOptions): IDragSource;
+}
+/**
+ * Visual specification handed to the backend. HTML5 calls `setDragImage`
+ * with `(element, offsetX, offsetY)` and discards the element after a
+ * microtask. Pointer wraps the element in a `PointerGhost` that follows
+ * the cursor for the duration of the drag.
+ */
+export interface IDragGhostSpec {
+    element: HTMLElement;
+    /** Pixels from cursor to ghost's top-left. Default 0. */
+    offsetX?: number;
+    offsetY?: number;
+    /**
+     * Called when the backend is done with the ghost. HTML5 fires it after
+     * the drag-image snapshot is captured (next tick); pointer fires it
+     * when the follow-cursor ghost is removed at drag end. Use for custom
+     * framework renderers that need teardown.
+     */
+    dispose?: () => void;
+}
+export interface DragSourceOptions {
+    /** Populate transfer; returned disposer clears it on drag end. */
+    getData: (event: DragEvent | PointerEvent) => IDisposable;
+    /** Veto a drag at start time. */
+    isCancelled?: (event: DragEvent | PointerEvent) => boolean;
+    createGhost?: (event: DragEvent | PointerEvent) => IDragGhostSpec | undefined;
+    onDragStart?: (event: DragEvent | PointerEvent) => void;
+    onDragEnd?: (event: DragEvent | PointerEvent) => void;
+    /** Initial disabled state; toggle later via `setDisabled`. */
+    disabled?: boolean;
+    /**
+     * Pointer-only. When true (default), the pointer backend ignores mouse
+     * pointers and lets the HTML5 path handle them. HTML5 backend ignores.
+     */
+    touchOnly?: boolean;
+    /**
+     * Pointer-only long-press delay in ms. May be a function so the value
+     * can vary per gesture (e.g. floating-group redock vs docked rearrange).
+     */
+    touchInitiationDelay?: number | (() => number);
+    /** Pointer-only pre-arm movement tolerance in px. May also be a function. */
+    pressTolerance?: number | (() => number);
+    /** Pointer-only movement threshold to promote pointerdown → drag. */
+    threshold?: number;
+}
+export interface IDragSource extends IDisposable {
+    setDisabled(value: boolean): void;
+    /** Pointer-only knob; no-op on HTML5 backend. */
+    setTouchOnly(value: boolean): void;
+    /** Pointer-only; no-op on HTML5 backend. */
+    cancelPending(): void;
+}
+export declare const html5Backend: IDragBackend;
+export declare const pointerBackend: IDragBackend;

package/dist/cjs/dnd/backend.js

@@ -0,0 +1,171 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pointerBackend = exports.html5Backend = void 0;
+var events_1 = require("../events");
+var lifecycle_1 = require("../lifecycle");
+var droptarget_1 = require("./droptarget");
+var ghost_1 = require("./ghost");
+var pointerDropTarget_1 = require("./pointer/pointerDropTarget");
+var pointerDragSource_1 = require("./pointer/pointerDragSource");
+var pointerGhost_1 = require("./pointer/pointerGhost");
+var dom_1 = require("../dom");
+/**
+ * HTML5 drag source. Listens for the native `dragstart` event, calls
+ * `getData` to populate transfer, optionally renders the ghost via
+ * `setDragImage`, fires `onDragStart` / `onDragEnd`, and tears down the
+ * transfer disposer after `dragend`.
+ */
+var Html5DragSource = /** @class */ (function (_super) {
+    __extends(Html5DragSource, _super);
+    function Html5DragSource(el, opts) {
+        var _this = _super.call(this) || this;
+        _this.el = el;
+        _this.opts = opts;
+        _this._dataDisposable = new lifecycle_1.MutableDisposable();
+        _this._pointerEventsDisposable = new lifecycle_1.MutableDisposable();
+        _this._disabled = !!opts.disabled;
+        _this.addDisposables(_this._dataDisposable, _this._pointerEventsDisposable, (0, events_1.addDisposableListener)(_this.el, 'dragstart', function (event) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (event.defaultPrevented ||
+                _this._disabled ||
+                ((_b = (_a = _this.opts).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event))) {
+                event.preventDefault();
+                return;
+            }
+            // Iframes capture pointermove once the cursor enters them,
+            // which freezes drag tracking from the parent window's
+            // POV. Shield the source's owning document so popout-window
+            // drags shield the popout, not the main window.
+            var iframes = (0, dom_1.disableIframePointEvents)((_c = _this.el.ownerDocument) !== null && _c !== void 0 ? _c : document);
+            _this._pointerEventsDisposable.value = {
+                dispose: function () { return iframes.release(); },
+            };
+            _this.el.classList.add('dv-dragged');
+            setTimeout(function () { return _this.el.classList.remove('dv-dragged'); }, 0);
+            _this._dataDisposable.value = _this.opts.getData(event);
+            var ghost = (_e = (_d = _this.opts).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, event);
+            if (ghost && event.dataTransfer) {
+                (0, ghost_1.addGhostImage)(event.dataTransfer, ghost.element, {
+                    x: (_f = ghost.offsetX) !== null && _f !== void 0 ? _f : 0,
+                    y: (_g = ghost.offsetY) !== null && _g !== void 0 ? _g : 0,
+                });
+                if (ghost.dispose) {
+                    // addGhostImage removes the element from the DOM on
+                    // the next tick; dispose the framework renderer on
+                    // the same schedule.
+                    var disposeGhost_1 = ghost.dispose;
+                    setTimeout(function () { return disposeGhost_1(); }, 0);
+                }
+            }
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+                // Some third-party DnD libs (e.g. react-dnd) cancel the
+                // dragstart when `dataTransfer.types` is empty.
+                if (event.dataTransfer.items.length === 0) {
+                    event.dataTransfer.setData('text/plain', '');
+                }
+            }
+            (_j = (_h = _this.opts).onDragStart) === null || _j === void 0 ? void 0 : _j.call(_h, event);
+        }), (0, events_1.addDisposableListener)(_this.el, 'dragend', function (event) {
+            var _a, _b;
+            _this._pointerEventsDisposable.dispose();
+            // Defer disposal so drop handlers can still read the
+            // transfer payload before it clears.
+            setTimeout(function () { return _this._dataDisposable.dispose(); }, 0);
+            (_b = (_a = _this.opts).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        }));
+        return _this;
+    }
+    Html5DragSource.prototype.setDisabled = function (value) {
+        this._disabled = value;
+    };
+    Html5DragSource.prototype.setTouchOnly = function (_) {
+        // No-op — HTML5 path can't filter by pointer type.
+    };
+    Html5DragSource.prototype.cancelPending = function () {
+        // No-op — HTML5 has no pre-arm phase to cancel.
+    };
+    return Html5DragSource;
+}(lifecycle_1.CompositeDisposable));
+var Html5DragBackend = /** @class */ (function () {
+    function Html5DragBackend() {
+        this.kind = 'html5';
+    }
+    Html5DragBackend.prototype.createDropTarget = function (element, options) {
+        return new droptarget_1.Droptarget(element, options);
+    };
+    Html5DragBackend.prototype.createDragSource = function (element, options) {
+        return new Html5DragSource(element, options);
+    };
+    return Html5DragBackend;
+}());
+var PointerDragBackend = /** @class */ (function () {
+    function PointerDragBackend() {
+        this.kind = 'pointer';
+    }
+    PointerDragBackend.prototype.createDropTarget = function (element, options) {
+        return new pointerDropTarget_1.PointerDropTarget(element, options);
+    };
+    PointerDragBackend.prototype.createDragSource = function (element, options) {
+        var pointerCreateGhost = options.createGhost
+            ? function (event) {
+                var spec = options.createGhost(event);
+                if (!spec) {
+                    return undefined;
+                }
+                var ghost = new pointerGhost_1.PointerGhost({
+                    element: spec.element,
+                    initialX: event.clientX,
+                    initialY: event.clientY,
+                    offsetX: spec.offsetX,
+                    offsetY: spec.offsetY,
+                    owner: element,
+                });
+                if (spec.dispose) {
+                    var baseDispose_1 = ghost.dispose.bind(ghost);
+                    var disposeSpec_1 = spec.dispose;
+                    ghost.dispose = function () {
+                        baseDispose_1();
+                        disposeSpec_1();
+                    };
+                }
+                return ghost;
+            }
+            : undefined;
+        var source = new pointerDragSource_1.PointerDragSource(element, {
+            getData: options.getData,
+            isCancelled: options.isCancelled,
+            onDragStart: options.onDragStart,
+            onDragEnd: options.onDragEnd
+                ? function (event) { return options.onDragEnd(event.pointerEvent); }
+                : undefined,
+            createGhost: pointerCreateGhost,
+            touchOnly: options.touchOnly,
+            touchInitiationDelay: options.touchInitiationDelay,
+            pressTolerance: options.pressTolerance,
+            threshold: options.threshold,
+        });
+        if (options.disabled) {
+            source.setDisabled(true);
+        }
+        return source;
+    };
+    return PointerDragBackend;
+}());
+exports.html5Backend = new Html5DragBackend();
+exports.pointerBackend = new PointerDragBackend();

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

@@ -0,0 +1,20 @@
+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/cjs/dnd/dropOverlay.js

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

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

@@ -1,24 +1,25 @@
 import { DockviewEvent, Event } from '../events';
-import { CompositeDisposable } from '../lifecycle';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { Direction } from '../gridview/baseComponentGridview';
 export interface DroptargetEvent {
     readonly position: Position;
-    readonly nativeEvent: DragEvent;
+    /** 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;
+    get nativeEvent(): DragEvent | PointerEvent;
     get position(): Position;
     constructor(options: {
-        nativeEvent: DragEvent;
+        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, state: Position) => boolean;
+export type CanDisplayOverlay = (dragEvent: DragEvent | PointerEvent, state: Position) => boolean;
 export type MeasuredValue = {
     value: number;
     type: 'pixels' | 'percentage';
@@ -56,7 +57,20 @@ export interface DroptargetOptions {
     className?: string;
     getOverlayOutline?: () => HTMLElement | null;
 }
-export declare class Droptarget extends CompositeDisposable {
+/**
+ * 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;