dockview-core 6.2.2 → 6.4.0

package/dist/styles/dockview.css

@@ -2344,6 +2344,16 @@
   /* Enhanced GPU acceleration during drag */
   will-change: transform, opacity;
 }
+.dv-resize-container .dv-resize-handle-top,
+.dv-resize-container .dv-resize-handle-bottom,
+.dv-resize-container .dv-resize-handle-left,
+.dv-resize-container .dv-resize-handle-right,
+.dv-resize-container .dv-resize-handle-topleft,
+.dv-resize-container .dv-resize-handle-topright,
+.dv-resize-container .dv-resize-handle-bottomleft,
+.dv-resize-container .dv-resize-handle-bottomright {
+  touch-action: none;
+}
 .dv-resize-container .dv-resize-handle-top {
   height: 4px;
   width: calc(100% - 8px);
@@ -2416,6 +2426,55 @@
   position: absolute;
   cursor: se-resize;
 }
+@media (pointer: coarse) {
+  .dv-resize-container .dv-resize-handle-top,
+  .dv-resize-container .dv-resize-handle-bottom {
+    height: 16px;
+    width: calc(100% - 48px);
+    left: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-top {
+    top: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-bottom {
+    bottom: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-left,
+  .dv-resize-container .dv-resize-handle-right {
+    width: 16px;
+    height: calc(100% - 48px);
+    top: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-left {
+    left: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-right {
+    right: -10px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft,
+  .dv-resize-container .dv-resize-handle-topright,
+  .dv-resize-container .dv-resize-handle-bottomleft,
+  .dv-resize-container .dv-resize-handle-bottomright {
+    height: 24px;
+    width: 24px;
+  }
+  .dv-resize-container .dv-resize-handle-topleft {
+    top: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-topright {
+    top: -12px;
+    right: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomleft {
+    bottom: -12px;
+    left: -12px;
+  }
+  .dv-resize-container .dv-resize-handle-bottomright {
+    bottom: -12px;
+    right: -12px;
+  }
+}
 .dv-render-overlay {
   --dv-overlay-z-index: var(--dv-overlay-z-index, 999);
   position: absolute;
@@ -2633,6 +2692,25 @@
   transition-duration: var(--dv-active-sash-transition-duration, 0.1s);
   transition-delay: var(--dv-active-sash-transition-delay, 0.5s);
 }
+@media (pointer: coarse) {
+  .dv-split-view-container .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    content: "";
+    position: absolute;
+    background: transparent;
+  }
+  .dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    right: -10px;
+  }
+  .dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash:not(.dv-disabled)::before {
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: -10px;
+  }
+}
 .dv-split-view-container .dv-view-container {
   position: relative;
   height: 100%;
@@ -2704,6 +2782,11 @@
 .dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
   visibility: visible;
 }
+@media (hover: none) {
+  .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
+    visibility: visible;
+  }
+}
 .dv-tab .dv-default-tab {
   position: relative;
   height: 100%;
@@ -2728,6 +2811,11 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@media (pointer: coarse) {
+  .dv-tab .dv-default-tab .dv-default-tab-action {
+    padding: 8px;
+  }
+}
 .dv-tabs-overflow-dropdown-default {
   height: 100%;
   color: var(--dv-activegroup-hiddenpanel-tab-color);
@@ -2748,6 +2836,7 @@
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }
+@charset "UTF-8";
 .dv-tabs-container {
   display: flex;
   position: relative;
@@ -2757,12 +2846,29 @@
   /* GPU optimizations for smooth scrolling */
   will-change: scroll-position;
   transform: translate3d(0, 0, 0);
+  /**
+   * Stop scroll-chaining at the tab strip so that wheel / trackpad
+   * overscroll past the strip's edges doesn't trigger the browser's
+   * swipe-to-go-back-or-forward gesture (and doesn't scroll the page
+   * either). `contain` keeps the native bounce visuals; `none` would
+   * also disable them.
+   */
+  overscroll-behavior: contain;
+  /**
+   * Empty space between tabs (and the scrollbar lane) keeps pan-x so a
+   * flick on those areas produces native momentum scroll. The tab and
+   * chip elements themselves opt out (`touch-action: none`) so the
+   * pointer drag source owns the gesture from pointerdown — a flick on
+   * a tab or chip always becomes a drag, regardless of direction.
+   */
+  touch-action: pan-x;
 }
 .dv-tabs-container.dv-tabs-container-vertical {
   width: 100%;
   height: fit-content;
   max-height: 100%;
   writing-mode: vertical-rl;
+  touch-action: pan-y;
 }
 .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before, .dv-tabs-container.dv-vertical .dv-tab:not(:first-child)::before {
   content: " ";
@@ -2802,7 +2908,10 @@
 }
 
 .dv-tab {
-  -webkit-user-drag: element;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   outline: none;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
@@ -2810,6 +2919,7 @@
   box-sizing: border-box;
   font-size: var(--dv-tab-font-size);
   margin: var(--dv-tab-margin);
+  touch-action: none;
 }
 .dv-tab.dv-tab--shifting {
   will-change: transform, margin-left, margin-right, margin-top, margin-bottom;
@@ -2860,6 +2970,7 @@
   white-space: nowrap;
   box-sizing: border-box;
   line-height: 1;
+  touch-action: none;
   background-color: var(--dv-tab-group-color);
   color: white;
 }
@@ -3037,6 +3148,11 @@
 .dv-tabs-and-actions-container .dv-void-container {
   display: flex;
   flex-grow: 1;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  touch-action: none;
 }
 .dv-tabs-and-actions-container .dv-void-container.dv-draggable {
   cursor: grab;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-core",
-    "version": "6.2.2",
+    "version": "6.4.0",
     "description": "Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript",
     "keywords": [
         "splitview",
@@ -20,6 +20,8 @@
         "drag-and-drop",
         "drag",
         "drop",
+        "touch",
+        "mobile",
         "typescript",
         "zero-dependency",
         "ide-layout",

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

@@ -1,14 +0,0 @@
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-export declare abstract class DragHandler extends CompositeDisposable {
-    protected readonly el: HTMLElement;
-    private disabled?;
-    private readonly dataDisposable;
-    private readonly pointerEventsDisposable;
-    private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<DragEvent>;
-    constructor(el: HTMLElement, disabled?: boolean | undefined);
-    setDisabled(disabled: boolean): void;
-    abstract getData(event: DragEvent): IDisposable;
-    protected isCancelled(_event: DragEvent): boolean;
-    private configure;
-}

package/dist/cjs/dnd/abstractDragHandler.js

@@ -1,86 +0,0 @@
-"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.DragHandler = void 0;
-var dom_1 = require("../dom");
-var events_1 = require("../events");
-var lifecycle_1 = require("../lifecycle");
-var DragHandler = /** @class */ (function (_super) {
-    __extends(DragHandler, _super);
-    function DragHandler(el, disabled) {
-        var _this = _super.call(this) || this;
-        _this.el = el;
-        _this.disabled = disabled;
-        _this.dataDisposable = new lifecycle_1.MutableDisposable();
-        _this.pointerEventsDisposable = new lifecycle_1.MutableDisposable();
-        _this._onDragStart = new events_1.Emitter();
-        _this.onDragStart = _this._onDragStart.event;
-        _this.addDisposables(_this._onDragStart, _this.dataDisposable, _this.pointerEventsDisposable);
-        _this.configure();
-        return _this;
-    }
-    DragHandler.prototype.setDisabled = function (disabled) {
-        this.disabled = disabled;
-    };
-    DragHandler.prototype.isCancelled = function (_event) {
-        return false;
-    };
-    DragHandler.prototype.configure = function () {
-        var _this = this;
-        this.addDisposables(this._onDragStart, (0, events_1.addDisposableListener)(this.el, 'dragstart', function (event) {
-            if (event.defaultPrevented ||
-                _this.isCancelled(event) ||
-                _this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            var iframes = (0, dom_1.disableIframePointEvents)();
-            _this.pointerEventsDisposable.value = {
-                dispose: function () {
-                    iframes.release();
-                },
-            };
-            _this.el.classList.add('dv-dragged');
-            setTimeout(function () { return _this.el.classList.remove('dv-dragged'); }, 0);
-            _this.dataDisposable.value = _this.getData(event);
-            _this._onDragStart.fire(event);
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
-                var hasData = event.dataTransfer.items.length > 0;
-                if (!hasData) {
-                    /**
-                     * Although this is not used by dockview many third party dnd libraries will check
-                     * dataTransfer.types to determine valid drag events.
-                     *
-                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                     * dnd logic. You can see the code at
-                 P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                     */
-                    event.dataTransfer.setData('text/plain', '');
-                }
-            }
-        }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {
-            _this.pointerEventsDisposable.dispose();
-            setTimeout(function () {
-                _this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
-            }, 0);
-        }));
-    };
-    return DragHandler;
-}(lifecycle_1.CompositeDisposable));
-exports.DragHandler = DragHandler;

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

@@ -1,12 +0,0 @@
-import { DockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { IDisposable } from '../lifecycle';
-import { DragHandler } from './abstractDragHandler';
-export declare class GroupDragHandler extends DragHandler {
-    private readonly accessor;
-    private readonly group;
-    private readonly panelTransfer;
-    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel, disabled?: boolean);
-    isCancelled(_event: DragEvent): boolean;
-    getData(dragEvent: DragEvent): IDisposable;
-}

package/dist/cjs/dnd/groupDragHandler.js

@@ -1,82 +0,0 @@
-"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.GroupDragHandler = void 0;
-var dom_1 = require("../dom");
-var events_1 = require("../events");
-var abstractDragHandler_1 = require("./abstractDragHandler");
-var dataTransfer_1 = require("./dataTransfer");
-var ghost_1 = require("./ghost");
-var GroupDragHandler = /** @class */ (function (_super) {
-    __extends(GroupDragHandler, _super);
-    function GroupDragHandler(element, accessor, group, disabled) {
-        var _this = _super.call(this, element, disabled) || this;
-        _this.accessor = accessor;
-        _this.group = group;
-        _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-        _this.addDisposables((0, events_1.addDisposableListener)(element, 'pointerdown', function (e) {
-            if (e.shiftKey) {
-                /**
-                 * You cannot call e.preventDefault() because that will prevent drag events from firing
-                 * but we also need to stop any group overlay drag events from occuring
-                 * Use a custom event marker that can be checked by the overlay drag events
-                 */
-                (0, dom_1.quasiPreventDefault)(e);
-            }
-        }, true));
-        return _this;
-    }
-    GroupDragHandler.prototype.isCancelled = function (_event) {
-        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
-            return true;
-        }
-        if (this.group.api.location.type === 'edge' && this.group.size === 0) {
-            return true;
-        }
-        return false;
-    };
-    GroupDragHandler.prototype.getData = function (dragEvent) {
-        var _this = this;
-        var dataTransfer = dragEvent.dataTransfer;
-        this.panelTransfer.setData([new dataTransfer_1.PanelTransfer(this.accessor.id, this.group.id, null)], dataTransfer_1.PanelTransfer.prototype);
-        var style = window.getComputedStyle(this.el);
-        var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
-        var color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
-        if (dataTransfer) {
-            var 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.style.pointerEvents = 'none';
-            ghostElement.style.top = '-9999px';
-            ghostElement.textContent = "Multiple Panels (".concat(this.group.size, ")");
-            (0, ghost_1.addGhostImage)(dataTransfer, ghostElement, { y: -10, x: 30 });
-        }
-        return {
-            dispose: function () {
-                _this.panelTransfer.clearData(dataTransfer_1.PanelTransfer.prototype);
-            },
-        };
-    };
-    return GroupDragHandler;
-}(abstractDragHandler_1.DragHandler));
-exports.GroupDragHandler = GroupDragHandler;

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

@@ -1,14 +0,0 @@
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-export declare abstract class DragHandler extends CompositeDisposable {
-    protected readonly el: HTMLElement;
-    private disabled?;
-    private readonly dataDisposable;
-    private readonly pointerEventsDisposable;
-    private readonly _onDragStart;
-    readonly onDragStart: import("../events").Event<DragEvent>;
-    constructor(el: HTMLElement, disabled?: boolean | undefined);
-    setDisabled(disabled: boolean): void;
-    abstract getData(event: DragEvent): IDisposable;
-    protected isCancelled(_event: DragEvent): boolean;
-    private configure;
-}

package/dist/esm/dnd/abstractDragHandler.js

@@ -1,63 +0,0 @@
-import { disableIframePointEvents } from '../dom';
-import { addDisposableListener, Emitter } from '../events';
-import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
-export class DragHandler extends CompositeDisposable {
-    constructor(el, disabled) {
-        super();
-        this.el = el;
-        this.disabled = disabled;
-        this.dataDisposable = new MutableDisposable();
-        this.pointerEventsDisposable = new MutableDisposable();
-        this._onDragStart = new Emitter();
-        this.onDragStart = this._onDragStart.event;
-        this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
-        this.configure();
-    }
-    setDisabled(disabled) {
-        this.disabled = disabled;
-    }
-    isCancelled(_event) {
-        return false;
-    }
-    configure() {
-        this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (event.defaultPrevented ||
-                this.isCancelled(event) ||
-                this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const iframes = disableIframePointEvents();
-            this.pointerEventsDisposable.value = {
-                dispose: () => {
-                    iframes.release();
-                },
-            };
-            this.el.classList.add('dv-dragged');
-            setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-            this.dataDisposable.value = this.getData(event);
-            this._onDragStart.fire(event);
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
-                const hasData = event.dataTransfer.items.length > 0;
-                if (!hasData) {
-                    /**
-                     * Although this is not used by dockview many third party dnd libraries will check
-                     * dataTransfer.types to determine valid drag events.
-                     *
-                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                     * dnd logic. You can see the code at
-                 P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                     */
-                    event.dataTransfer.setData('text/plain', '');
-                }
-            }
-        }), addDisposableListener(this.el, 'dragend', () => {
-            this.pointerEventsDisposable.dispose();
-            setTimeout(() => {
-                this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
-            }, 0);
-        }));
-    }
-}

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

@@ -1,12 +0,0 @@
-import { DockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { IDisposable } from '../lifecycle';
-import { DragHandler } from './abstractDragHandler';
-export declare class GroupDragHandler extends DragHandler {
-    private readonly accessor;
-    private readonly group;
-    private readonly panelTransfer;
-    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel, disabled?: boolean);
-    isCancelled(_event: DragEvent): boolean;
-    getData(dragEvent: DragEvent): IDisposable;
-}

package/dist/esm/dnd/groupDragHandler.js

@@ -1,59 +0,0 @@
-import { quasiPreventDefault } from '../dom';
-import { addDisposableListener } from '../events';
-import { DragHandler } from './abstractDragHandler';
-import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
-import { addGhostImage } from './ghost';
-export class GroupDragHandler extends DragHandler {
-    constructor(element, accessor, group, disabled) {
-        super(element, disabled);
-        this.accessor = accessor;
-        this.group = group;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-        this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
-            if (e.shiftKey) {
-                /**
-                 * You cannot call e.preventDefault() because that will prevent drag events from firing
-                 * but we also need to stop any group overlay drag events from occuring
-                 * Use a custom event marker that can be checked by the overlay drag events
-                 */
-                quasiPreventDefault(e);
-            }
-        }, true));
-    }
-    isCancelled(_event) {
-        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
-            return true;
-        }
-        if (this.group.api.location.type === 'edge' && this.group.size === 0) {
-            return true;
-        }
-        return false;
-    }
-    getData(dragEvent) {
-        const dataTransfer = dragEvent.dataTransfer;
-        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, 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.style.pointerEvents = 'none';
-            ghostElement.style.top = '-9999px';
-            ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-            addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
-        }
-        return {
-            dispose: () => {
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            },
-        };
-    }
-}