dockview-core 3.1.1 → 4.0.0

package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -13,6 +13,7 @@ import { DockviewDndOverlayEvent } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 import { Contraints } from '../gridview/gridviewPanel';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -160,6 +161,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _location;
     private mostRecentlyUsed;
     private _overwriteRenderContainer;
+    private _overwriteDropTargetContainer;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
     private _width;
@@ -208,6 +210,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     focusContent(): void;
     set renderContainer(value: OverlayRenderContainer | null);
     get renderContainer(): OverlayRenderContainer;
+    set dropTargetContainer(value: DropTargetAnchorContainer | null);
+    get dropTargetContainer(): DropTargetAnchorContainer | null;
     initialize(): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -203,6 +203,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this._location = { type: 'grid' };
         _this.mostRecentlyUsed = [];
         _this._overwriteRenderContainer = null;
+        _this._overwriteDropTargetContainer = null;
         _this._onDidChange = new events_1.Emitter();
         _this.onDidChange = _this._onDidChange.event;
         _this._width = 0;
@@ -400,6 +401,17 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "dropTargetContainer", {
+        get: function () {
+            var _a;
+            return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
+        },
+        set: function (value) {
+            this._overwriteDropTargetContainer = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DockviewGroupPanelModel.prototype.initialize = function () {
         var _this = this;
         if (this.options.panels) {
@@ -771,6 +783,25 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         }
         var data = (0, dataTransfer_1.getPanelData)();
         if (data && data.viewId === this.accessor.id) {
+            if (type === 'content') {
+                if (data.groupId === this.id) {
+                    // don't allow to drop on self for center position
+                    if (position === 'center') {
+                        return;
+                    }
+                    if (data.panelId === null) {
+                        // don't allow group move to drop anywhere on self
+                        return;
+                    }
+                }
+            }
+            if (type === 'header') {
+                if (data.groupId === this.id) {
+                    if (data.panelId === null) {
+                        return;
+                    }
+                }
+            }
             if (data.panelId === null) {
                 // this is a group move dnd event
                 var groupId_1 = data.groupId;

package/dist/cjs/dockview/dockviewPanelModel.d.ts

@@ -1,8 +1,8 @@
 import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';
-import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDisposable } from '../lifecycle';
 import { IDockviewComponent } from './dockviewComponent';
 import { PanelUpdateEvent } from '../panel/types';
+import { TabLocation } from './framework';
 export interface IDockviewPanelModel extends IDisposable {
     readonly contentComponent: string;
     readonly tabComponent?: string;
@@ -11,7 +11,7 @@ export interface IDockviewPanelModel extends IDisposable {
     update(event: PanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void;
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer;
 }
 export declare class DockviewPanelModel implements IDockviewPanelModel {
     private readonly accessor;
@@ -20,11 +20,13 @@ export declare class DockviewPanelModel implements IDockviewPanelModel {
     readonly tabComponent?: string | undefined;
     private readonly _content;
     private readonly _tab;
+    private _params;
+    private _updateEvent;
     get content(): IContentRenderer;
     get tab(): ITabRenderer;
     constructor(accessor: IDockviewComponent, id: string, contentComponent: string, tabComponent?: string | undefined);
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(_group: DockviewGroupPanel, _isPanelVisible: boolean): void;
     layout(width: number, height: number): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/cjs/dockview/dockviewPanelModel.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewPanelModel = void 0;
 var defaultTab_1 = require("./components/tab/defaultTab");
@@ -25,12 +36,21 @@ var DockviewPanelModel = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    DockviewPanelModel.prototype.createTabRenderer = function (tabLocation) {
+        var _a;
+        var cmp = this.createTabComponent(this.id, this.tabComponent);
+        if (this._params) {
+            cmp.init(__assign(__assign({}, this._params), { tabLocation: tabLocation }));
+        }
+        if (this._updateEvent) {
+            (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
+        }
+        return cmp;
+    };
     DockviewPanelModel.prototype.init = function (params) {
+        this._params = params;
         this.content.init(params);
-        this.tab.init(params);
-    };
-    DockviewPanelModel.prototype.updateParentGroup = function (_group, _isPanelVisible) {
-        // noop
+        this.tab.init(__assign(__assign({}, params), { tabLocation: 'header' }));
     };
     DockviewPanelModel.prototype.layout = function (width, height) {
         var _a, _b;
@@ -38,6 +58,7 @@ var DockviewPanelModel = /** @class */ (function () {
     };
     DockviewPanelModel.prototype.update = function (event) {
         var _a, _b, _c, _d;
+        this._updateEvent = event;
         (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
     };

package/dist/cjs/dockview/framework.d.ts

@@ -10,9 +10,12 @@ export interface IGroupPanelBaseProps<T extends {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
+export type TabLocation = 'header' | 'headerOverflow';
 export type IDockviewPanelHeaderProps<T extends {
     [index: string]: any;
-} = any> = IGroupPanelBaseProps<T>;
+} = any> = IGroupPanelBaseProps<T> & {
+    tabLocation: TabLocation;
+};
 export type IDockviewPanelProps<T extends {
     [index: string]: any;
 } = any> = IGroupPanelBaseProps<T>;

package/dist/cjs/dockview/options.d.ts

@@ -14,6 +14,7 @@ import { IGroupHeaderProps } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
+import { DockviewTheme } from './theme';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
@@ -43,18 +44,20 @@ export interface DockviewOptions {
     popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
     debug?: boolean;
+    dndEdges?: false | DroptargetOverlayModel;
+    /**
+     * @deprecated use `dndEdges` instead. To be removed in a future version.
+     * */
     rootOverlayModel?: DroptargetOverlayModel;
-    locked?: boolean;
     disableDnd?: boolean;
+    locked?: boolean;
     className?: string;
-    /**
-     * Pixel gap between groups
-     */
-    gap?: number;
     /**
      * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
      */
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
+    theme?: DockviewTheme;
+    disableTabsOverflowList?: boolean;
 }
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;

package/dist/cjs/dockview/options.js

@@ -48,9 +48,11 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
-        gap: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
+        dndEdges: undefined,
+        theme: undefined,
+        disableTabsOverflowList: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/cjs/dockview/theme.d.ts

@@ -0,0 +1,31 @@
+export interface DockviewTheme {
+    /**
+     *  The name of the theme
+     */
+    name: string;
+    /**
+     * The class name to apply to the theme containing the CSS variables settings.
+     */
+    className: string;
+    /**
+     * The gap between the groups
+     */
+    gap?: number;
+    /**
+     * The mouting position of the overlay shown when dragging a panel. `absolute`
+     * will mount the overlay to root of the dockview component whereas `relative` will mount the overlay to the group container.
+     */
+    dndOverlayMounting?: 'absolute' | 'relative';
+    /**
+     * When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.
+     */
+    dndPanelOverlay?: 'content' | 'group';
+}
+export declare const themeDark: DockviewTheme;
+export declare const themeLight: DockviewTheme;
+export declare const themeVisualStudio: DockviewTheme;
+export declare const themeAbyss: DockviewTheme;
+export declare const themeDracula: DockviewTheme;
+export declare const themeReplit: DockviewTheme;
+export declare const themeAbyssSpaced: DockviewTheme;
+export declare const themeLightSpaced: DockviewTheme;

package/dist/cjs/dockview/theme.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeLightSpaced = exports.themeAbyssSpaced = exports.themeReplit = exports.themeDracula = exports.themeAbyss = exports.themeVisualStudio = exports.themeLight = exports.themeDark = void 0;
+exports.themeDark = {
+    name: 'dark',
+    className: 'dockview-theme-dark',
+};
+exports.themeLight = {
+    name: 'light',
+    className: 'dockview-theme-light',
+};
+exports.themeVisualStudio = {
+    name: 'visualStudio',
+    className: 'dockview-theme-vs',
+};
+exports.themeAbyss = {
+    name: 'abyss',
+    className: 'dockview-theme-abyss',
+};
+exports.themeDracula = {
+    name: 'dracula',
+    className: 'dockview-theme-dracula',
+};
+exports.themeReplit = {
+    name: 'replit',
+    className: 'dockview-theme-replit',
+    gap: 10,
+};
+exports.themeAbyssSpaced = {
+    name: 'abyssSpaced',
+    className: 'dockview-theme-abyss-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+exports.themeLightSpaced = {
+    name: 'lightSpaced',
+    className: 'dockview-theme-light-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};

package/dist/cjs/dockview/types.d.ts

@@ -4,6 +4,7 @@ import { DockviewApi } from '../api/component.api';
 import { Optional } from '../types';
 import { IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
+import { TabLocation } from './framework';
 export interface HeaderPartInitParameters {
     title: string;
 }
@@ -20,9 +21,12 @@ export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>
     readonly element: HTMLElement;
     init: (params: WatermarkRendererInitParameters) => void;
 }
+export interface TabPartInitParameters extends GroupPanelPartInitParameters {
+    tabLocation: TabLocation;
+}
 export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;
-    init(parameters: GroupPanelPartInitParameters): void;
+    init(parameters: TabPartInitParameters): void;
 }
 export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;

package/dist/cjs/dom.d.ts

@@ -47,3 +47,4 @@ export declare class Classnames {
     constructor(element: HTMLElement);
     setClassNames(classNames: string): void;
 }
+export declare function isChildEntirelyVisibleWithinParent(child: HTMLElement, parent: HTMLElement): boolean;

package/dist/cjs/dom.js

@@ -51,7 +51,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
+exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 var OverflowObserver = /** @class */ (function (_super) {
@@ -423,3 +423,17 @@ var Classnames = /** @class */ (function () {
     return Classnames;
 }());
 exports.Classnames = Classnames;
+function isChildEntirelyVisibleWithinParent(child, parent) {
+    //
+    var childPosition = getDomNodePagePosition(child);
+    var parentPosition = getDomNodePagePosition(parent);
+    if (childPosition.left < parentPosition.left) {
+        return false;
+    }
+    if (childPosition.left + childPosition.width >
+        parentPosition.left + parentPosition.width) {
+        return false;
+    }
+    return true;
+}
+exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;

package/dist/cjs/gridview/baseComponentGridview.d.ts

@@ -6,6 +6,9 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
 import { Resizable } from '../resizable';
+/**
+ * A direction in which a panel can be moved or placed relative to another panel.
+ */
 export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
 export interface MaximizedChanged<T extends IGridPanelView> {

package/dist/cjs/index.d.ts

@@ -22,6 +22,7 @@ export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, } from './dockview/framework';
 export * from './dockview/options';
+export * from './dockview/theme';
 export * from './dockview/dockviewPanel';
 export { DefaultTab } from './dockview/components/tab/defaultTab';
 export { DefaultDockviewDeserialzier, IPanelDeserializer, } from './dockview/deserializer';

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./dockview/dockviewGroupPanelModel"), exports);
 __exportStar(require("./dockview/types"), exports);
 __exportStar(require("./dockview/dockviewGroupPanel"), exports);
 __exportStar(require("./dockview/options"), exports);
+__exportStar(require("./dockview/theme"), exports);
 __exportStar(require("./dockview/dockviewPanel"), exports);
 var defaultTab_1 = require("./dockview/components/tab/defaultTab");
 Object.defineProperty(exports, "DefaultTab", { enumerable: true, get: function () { return defaultTab_1.DefaultTab; } });

package/dist/cjs/paneview/paneviewComponent.js

@@ -404,6 +404,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
             finally { if (e_2) throw e_2.error; }
         }
         this._viewDisposables.clear();
+        this.element.remove();
         this.paneview.dispose();
     };
     return PaneviewComponent;

package/dist/cjs/scrollbar.d.ts

@@ -0,0 +1,12 @@
+import { CompositeDisposable } from './lifecycle';
+export declare class Scrollbar extends CompositeDisposable {
+    private readonly scrollableElement;
+    private readonly _element;
+    private readonly _horizontalScrollbar;
+    private _scrollLeft;
+    private _animationTimer;
+    static MouseWheelSpeed: number;
+    get element(): HTMLElement;
+    constructor(scrollableElement: HTMLElement);
+    private calculateScrollbarStyles;
+}

package/dist/cjs/scrollbar.js

@@ -0,0 +1,106 @@
+"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.Scrollbar = void 0;
+var dom_1 = require("./dom");
+var events_1 = require("./events");
+var lifecycle_1 = require("./lifecycle");
+var math_1 = require("./math");
+var Scrollbar = /** @class */ (function (_super) {
+    __extends(Scrollbar, _super);
+    function Scrollbar(scrollableElement) {
+        var _this = _super.call(this) || this;
+        _this.scrollableElement = scrollableElement;
+        _this._scrollLeft = 0;
+        _this._element = document.createElement('div');
+        _this._element.className = 'dv-scrollable';
+        _this._horizontalScrollbar = document.createElement('div');
+        _this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
+        _this.element.appendChild(scrollableElement);
+        _this.element.appendChild(_this._horizontalScrollbar);
+        _this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'wheel', function (event) {
+            _this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
+            _this.calculateScrollbarStyles();
+        }), (0, events_1.addDisposableListener)(_this._horizontalScrollbar, 'pointerdown', function (event) {
+            event.preventDefault();
+            (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', true);
+            var originalClientX = event.clientX;
+            var originalScrollLeft = _this._scrollLeft;
+            var onPointerMove = function (event) {
+                var deltaX = event.clientX - originalClientX;
+                var clientWidth = _this.element.clientWidth;
+                var scrollWidth = _this.scrollableElement.scrollWidth;
+                var p = clientWidth / scrollWidth;
+                _this._scrollLeft = originalScrollLeft + deltaX / p;
+                _this.calculateScrollbarStyles();
+            };
+            var onEnd = function () {
+                (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', false);
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onEnd);
+                document.removeEventListener('pointercancel', onEnd);
+            };
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onEnd);
+            document.addEventListener('pointercancel', onEnd);
+        }), (0, events_1.addDisposableListener)(_this.element, 'scroll', function () {
+            _this.calculateScrollbarStyles();
+        }), (0, events_1.addDisposableListener)(_this.scrollableElement, 'scroll', function () {
+            _this._scrollLeft = _this.scrollableElement.scrollLeft;
+            _this.calculateScrollbarStyles();
+        }), (0, dom_1.watchElementResize)(_this.element, function () {
+            (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', true);
+            if (_this._animationTimer) {
+                clearTimeout(_this._animationTimer);
+            }
+            _this._animationTimer = setTimeout(function () {
+                clearTimeout(_this._animationTimer);
+                (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', false);
+            }, 500);
+            _this.calculateScrollbarStyles();
+        }));
+        return _this;
+    }
+    Object.defineProperty(Scrollbar.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Scrollbar.prototype.calculateScrollbarStyles = function () {
+        var clientWidth = this.element.clientWidth;
+        var scrollWidth = this.scrollableElement.scrollWidth;
+        var hasScrollbar = scrollWidth > clientWidth;
+        if (hasScrollbar) {
+            var px = clientWidth * (clientWidth / scrollWidth);
+            this._horizontalScrollbar.style.width = "".concat(px, "px");
+            this._scrollLeft = (0, math_1.clamp)(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
+            this.scrollableElement.scrollLeft = this._scrollLeft;
+            var percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
+            this._horizontalScrollbar.style.left = "".concat((clientWidth - px) * percentageComplete, "px");
+        }
+        else {
+            this._horizontalScrollbar.style.width = "0px";
+            this._horizontalScrollbar.style.left = "0px";
+            this._scrollLeft = 0;
+        }
+    };
+    Scrollbar.MouseWheelSpeed = 1;
+    return Scrollbar;
+}(lifecycle_1.CompositeDisposable));
+exports.Scrollbar = Scrollbar;

package/dist/cjs/splitview/splitview.js

@@ -354,6 +354,7 @@ var Splitview = /** @class */ (function () {
         },
         set: function (value) {
             this._margin = value;
+            (0, dom_1.toggleClass)(this.element, 'dv-splitview-has-margin', value !== 0);
         },
         enumerable: false,
         configurable: true

package/dist/cjs/splitview/splitviewComponent.js

@@ -390,6 +390,7 @@ var SplitviewComponent = /** @class */ (function (_super) {
             }
             finally { if (e_3) throw e_3.error; }
         }
+        this.element.remove();
         _super.prototype.dispose.call(this);
     };
     return SplitviewComponent;