dockview-core 1.17.2 → 2.1.0

package/dist/cjs/api/component.api.d.ts

@@ -1,4 +1,4 @@
-import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
+import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -497,7 +497,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     maximizeGroup(panel: IDockviewPanel): void;
     hasMaximizedGroup(): boolean;
     exitMaximizedGroup(): void;
-    get onDidMaximizedGroupChange(): Event<void>;
+    get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged>;
     /**
      * Add a popout group in a new Window
      */
@@ -512,7 +512,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             id: string;
             window: Window;
         }) => void;
-    }): Promise<void>;
+    }): Promise<boolean>;
     setGap(gap: number | undefined): void;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     /**

package/dist/cjs/api/dockviewGroupPanelApi.d.ts

@@ -4,6 +4,14 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
+export interface DockviewGroupMoveParams {
+    group?: DockviewGroupPanel;
+    position?: Position;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
+}
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
@@ -12,10 +20,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      * If you require the Window object
      */
     getWindow(): Window;
-    moveTo(options: {
-        group?: DockviewGroupPanel;
-        position?: Position;
-    }): void;
+    moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -36,10 +41,7 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     constructor(id: string, accessor: DockviewComponent);
     close(): void;
     getWindow(): Window;
-    moveTo(options: {
-        group?: DockviewGroupPanel;
-        position?: Position;
-    }): void;
+    moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -71,6 +71,7 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
                 position: options.group
                     ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                     : 'center',
+                index: options.index,
             },
         });
     };

package/dist/cjs/api/dockviewPanelApi.d.ts

@@ -3,9 +3,8 @@ import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewPanel } from '../dockview/dockviewPanel';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { Position } from '../dnd/droptarget';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
+import { DockviewGroupMoveParams, DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
 import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 export interface TitleEvent {
     readonly title: string;
@@ -18,6 +17,7 @@ export interface ActiveGroupEvent {
 }
 export interface GroupChangedEvent {
 }
+export type DockviewPanelMoveParams = DockviewGroupMoveParams;
 export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> {
     /**
      * The id of the tab component renderer
@@ -38,11 +38,7 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     close(): void;
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
-    moveTo(options: {
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void;
+    moveTo(options: DockviewPanelMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -52,10 +48,10 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     getWindow(): Window;
 }
 export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi {
-    private panel;
+    private readonly panel;
     private readonly accessor;
     private _group;
-    private _tabComponent;
+    private readonly _tabComponent;
     readonly _onDidTitleChange: Emitter<TitleEvent>;
     readonly onDidTitleChange: Event<TitleEvent>;
     private readonly _onDidActiveGroupChange;
@@ -76,11 +72,7 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     get tabComponent(): string | undefined;
     constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent, component: string, tabComponent?: string);
     getWindow(): Window;
-    moveTo(options: {
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void;
+    moveTo(options: DockviewPanelMoveParams): void;
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
     close(): void;

package/dist/cjs/api/dockviewPanelApi.js

@@ -100,12 +100,14 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         return this.group.api.getWindow();
     };
     DockviewPanelApiImpl.prototype.moveTo = function (options) {
-        var _a;
+        var _a, _b;
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id, panelId: this.panel.id },
             to: {
-                group: options.group,
-                position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
+                position: options.group
+                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    : 'center',
                 index: options.index,
             },
         });

package/dist/cjs/dnd/abstractDragHandler.js

@@ -65,7 +65,7 @@ var DragHandler = /** @class */ (function (_super) {
                      * dnd logic. You can see the code at
                      * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
-                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), (0, events_1.addDisposableListener)(this.el, 'dragend', function () {

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

@@ -7,8 +7,8 @@ export interface IDragAndDropObserverCallbacks {
     onDragOver?: (e: DragEvent) => void;
 }
 export declare class DragAndDropObserver extends CompositeDisposable {
-    private element;
-    private callbacks;
+    private readonly element;
+    private readonly callbacks;
     private target;
     constructor(element: HTMLElement, callbacks: IDragAndDropObserverCallbacks);
     onDragEnter(e: DragEvent): void;

package/dist/cjs/dnd/droptarget.js

@@ -147,12 +147,12 @@ var Droptarget = /** @class */ (function (_super) {
                 _this.markAsUsed(e);
                 if (!_this.targetElement) {
                     _this.targetElement = document.createElement('div');
-                    _this.targetElement.className = 'drop-target-dropzone';
+                    _this.targetElement.className = 'dv-drop-target-dropzone';
                     _this.overlayElement = document.createElement('div');
-                    _this.overlayElement.className = 'drop-target-selection';
+                    _this.overlayElement.className = 'dv-drop-target-selection';
                     _this._state = 'center';
                     _this.targetElement.appendChild(_this.overlayElement);
-                    _this.element.classList.add('drop-target');
+                    _this.element.classList.add('dv-drop-target');
                     _this.element.append(_this.targetElement);
                 }
                 _this.toggleClasses(quadrant, width, height);
@@ -298,7 +298,7 @@ var Droptarget = /** @class */ (function (_super) {
             this.element.removeChild(this.targetElement);
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
+            this.element.classList.remove('dv-drop-target');
         }
     };
     Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';

package/dist/cjs/dockview/components/panel/content.d.ts

@@ -21,9 +21,9 @@ export interface IContentContainer extends IDisposable {
 export declare class ContentContainer extends CompositeDisposable implements IContentContainer {
     private readonly accessor;
     private readonly group;
-    private _element;
+    private readonly _element;
     private panel;
-    private disposable;
+    private readonly disposable;
     private readonly _onDidFocus;
     readonly onDidFocus: Event<void>;
     private readonly _onDidBlur;

package/dist/cjs/dockview/components/panel/content.js

@@ -33,7 +33,7 @@ var ContentContainer = /** @class */ (function (_super) {
         _this._onDidBlur = new events_1.Emitter();
         _this.onDidBlur = _this._onDidBlur.event;
         _this._element = document.createElement('div');
-        _this._element.className = 'content-container';
+        _this._element.className = 'dv-content-container';
         _this._element.tabIndex = -1;
         _this.addDisposables(_this._onDidFocus, _this._onDidBlur);
         _this.dropTarget = new droptarget_1.Droptarget(_this.element, {
@@ -116,6 +116,8 @@ var ContentContainer = /** @class */ (function (_super) {
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error("dockview: invalid renderer type '".concat(panel.api.renderer, "'"));
         }
         if (doRender) {
             var focusTracker = (0, dom_1.trackFocus)(container);

package/dist/cjs/dockview/components/tab/defaultTab.d.ts

@@ -1,9 +1,9 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../types';
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
-    private _element;
-    private _content;
-    private action;
+    private readonly _element;
+    private readonly _content;
+    private readonly action;
     private _title;
     get element(): HTMLElement;
     constructor();

package/dist/cjs/dockview/components/tab/tab.js

@@ -58,10 +58,10 @@ var Tab = /** @class */ (function (_super) {
         _this._onDragStart = new events_1.Emitter();
         _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
-        _this._element.className = 'tab';
+        _this._element.className = 'dv-tab';
         _this._element.tabIndex = 0;
         _this._element.draggable = true;
-        (0, dom_1.toggleClass)(_this.element, 'inactive-tab', true);
+        (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
         var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
@@ -102,8 +102,8 @@ var Tab = /** @class */ (function (_super) {
         configurable: true
     });
     Tab.prototype.setActive = function (isActive) {
-        (0, dom_1.toggleClass)(this.element, 'active-tab', isActive);
-        (0, dom_1.toggleClass)(this.element, 'inactive-tab', !isActive);
+        (0, dom_1.toggleClass)(this.element, 'dv-active-tab', isActive);
+        (0, dom_1.toggleClass)(this.element, 'dv-inactive-tab', !isActive);
     };
     Tab.prototype.setContent = function (part) {
         if (this.content) {

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -77,16 +77,16 @@ var TabsContainer = /** @class */ (function (_super) {
         _this._onWillShowOverlay = new events_1.Emitter();
         _this.onWillShowOverlay = _this._onWillShowOverlay.event;
         _this._element = document.createElement('div');
-        _this._element.className = 'tabs-and-actions-container';
+        _this._element.className = 'dv-tabs-and-actions-container';
         (0, dom_1.toggleClass)(_this._element, 'dv-full-width-single-tab', _this.accessor.options.singleTabMode === 'fullwidth');
         _this.rightActionsContainer = document.createElement('div');
-        _this.rightActionsContainer.className = 'right-actions-container';
+        _this.rightActionsContainer.className = 'dv-right-actions-container';
         _this.leftActionsContainer = document.createElement('div');
-        _this.leftActionsContainer.className = 'left-actions-container';
+        _this.leftActionsContainer.className = 'dv-left-actions-container';
         _this.preActionsContainer = document.createElement('div');
-        _this.preActionsContainer.className = 'pre-actions-container';
+        _this.preActionsContainer.className = 'dv-pre-actions-container';
         _this.tabContainer = document.createElement('div');
-        _this.tabContainer.className = 'tabs-container';
+        _this.tabContainer.className = 'dv-tabs-container';
         _this.voidContainer = new voidContainer_1.VoidContainer(_this.accessor, _this.group);
         _this._element.appendChild(_this.preActionsContainer);
         _this._element.appendChild(_this.tabContainer);
@@ -262,15 +262,11 @@ var TabsContainer = /** @class */ (function (_super) {
     };
     TabsContainer.prototype.openPanel = function (panel, index) {
         var _this = this;
-        var _a;
         if (index === void 0) { index = this.tabs.length; }
         if (this.tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
             return;
         }
         var tab = new tab_1.Tab(panel, this.accessor, this.group);
-        if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-            throw new Error('invalid header component');
-        }
         tab.setContent(panel.view.tab);
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
             _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });

package/dist/cjs/dockview/components/titlebar/voidContainer.js

@@ -33,8 +33,7 @@ var VoidContainer = /** @class */ (function (_super) {
         _this._onDragStart = new events_1.Emitter();
         _this.onDragStart = _this._onDragStart.event;
         _this._element = document.createElement('div');
-        _this._element.className = 'void-container';
-        _this._element.tabIndex = 0;
+        _this._element.className = 'dv-void-container';
         _this._element.draggable = true;
         _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
             _this.accessor.doSetGroupActive(_this.group);

package/dist/cjs/dockview/components/watermark/watermark.d.ts

@@ -1,11 +1,8 @@
 import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';
 import { CompositeDisposable } from '../../../lifecycle';
 export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
-    private _element;
-    private _group;
-    private _api;
+    private readonly _element;
     get element(): HTMLElement;
     constructor();
     init(_params: WatermarkRendererInitParameters): void;
-    private render;
 }

package/dist/cjs/dockview/components/watermark/watermark.js

@@ -16,39 +16,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Watermark = void 0;
-var events_1 = require("../../../events");
-var dom_1 = require("../../../dom");
 var lifecycle_1 = require("../../../lifecycle");
-var svg_1 = require("../../../svg");
 var Watermark = /** @class */ (function (_super) {
     __extends(Watermark, _super);
     function Watermark() {
         var _this = _super.call(this) || this;
         _this._element = document.createElement('div');
-        _this._element.className = 'watermark';
-        var title = document.createElement('div');
-        title.className = 'watermark-title';
-        var emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        var content = document.createElement('div');
-        content.className = 'watermark-content';
-        _this._element.appendChild(title);
-        _this._element.appendChild(content);
-        var actionsContainer = document.createElement('div');
-        actionsContainer.className = 'actions-container';
-        var closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
-        closeAnchor.appendChild((0, svg_1.createCloseButton)());
-        actionsContainer.appendChild(closeAnchor);
-        title.appendChild(emptySpace);
-        title.appendChild(actionsContainer);
-        _this.addDisposables((0, events_1.addDisposableListener)(closeAnchor, 'click', function (event) {
-            var _a;
-            event.preventDefault();
-            if (_this._group) {
-                (_a = _this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(_this._group);
-            }
-        }));
+        _this._element.className = 'dv-watermark';
         return _this;
     }
     Object.defineProperty(Watermark.prototype, "element", {
@@ -59,13 +33,7 @@ var Watermark = /** @class */ (function (_super) {
         configurable: true
     });
     Watermark.prototype.init = function (_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
-    };
-    Watermark.prototype.render = function () {
-        var isOneGroup = !!(this._api && this._api.size <= 1);
-        (0, dom_1.toggleClass)(this.element, 'has-actions', isOneGroup);
+        // noop
     };
     return Watermark;
 }(lifecycle_1.CompositeDisposable));

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

@@ -14,6 +14,27 @@ import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+export interface DockviewPopoutGroupOptions {
+    /**
+     * The position of the popout group
+     */
+    position?: Box;
+    /**
+     * The same-origin path at which the popout window will be created
+     *
+     * Defaults to `/popout.html` if not provided
+     */
+    popoutUrl?: string;
+    onDidOpen?: (event: {
+        id: string;
+        window: Window;
+    }) => void;
+    onWillClose?: (event: {
+        id: string;
+        window: Window;
+    }) => void;
+    overridePopoutGroup?: DockviewGroupPanel;
+}
 export interface PanelReference {
     update: (event: {
         params: {
@@ -28,6 +49,7 @@ export interface SerializedFloatingGroup {
 }
 export interface SerializedPopoutGroup {
     data: GroupPanelViewState;
+    url?: string;
     gridReferenceGroup?: string;
     position: Box | null;
 }
@@ -79,6 +101,10 @@ export interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
     inDragMode?: boolean;
     skipActiveGroup?: boolean;
 }
+export interface DockviewMaximizedGroupChanged {
+    group: DockviewGroupPanel;
+    isMaximized: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
@@ -99,6 +125,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
     readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -129,7 +156,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
             id: string;
             window: Window;
         }) => void;
-    }): Promise<void>;
+    }): Promise<boolean>;
 }
 export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private readonly nextGroupId;
@@ -160,6 +187,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     private readonly _onDidMovePanel;
     readonly onDidMovePanel: Event<MovePanelEvent>;
+    private readonly _onDidMaximizedGroupChange;
+    readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
@@ -179,20 +208,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
-    addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
-        skipRemoveGroup?: boolean;
-        position?: Box;
-        popoutUrl?: string;
-        onDidOpen?: (event: {
-            id: string;
-            window: Window;
-        }) => void;
-        onWillClose?: (event: {
-            id: string;
-            window: Window;
-        }) => void;
-        overridePopoutGroup?: DockviewGroupPanel;
-    }): Promise<void>;
+    setVisible(panel: DockviewGroupPanel, visible: boolean): void;
+    addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
@@ -214,7 +231,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): DockviewPanel;
     removePanel(panel: IDockviewPanel, options?: {
         removeEmptyGroup: boolean;
-        skipDispose: boolean;
+        skipDispose?: boolean;
         skipSetActiveGroup?: boolean;
     }): void;
     createWatermarkComponent(): IWatermarkRenderer;