dockview-core 1.17.2 → 2.1.0

package/dist/esm/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/esm/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/esm/api/dockviewGroupPanelApi.js

@@ -47,6 +47,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
                 position: options.group
                     ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                     : 'center',
+                index: options.index,
             },
         });
     }

package/dist/esm/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/esm/api/dockviewPanelApi.js

@@ -56,12 +56,14 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.group.api.getWindow();
     }
     moveTo(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/esm/dnd/abstractDragHandler.js

@@ -44,7 +44,7 @@ export class DragHandler extends CompositeDisposable {
                      * 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', '');
                 }
             }
         }), addDisposableListener(this.el, 'dragend', () => {

package/dist/esm/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/esm/dnd/droptarget.js

@@ -117,12 +117,12 @@ export class Droptarget extends CompositeDisposable {
                 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);
@@ -260,7 +260,7 @@ export class Droptarget extends CompositeDisposable {
             this.element.removeChild(this.targetElement);
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
+            this.element.classList.remove('dv-drop-target');
         }
     }
 }

package/dist/esm/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/esm/dockview/components/panel/content.js

@@ -1,5 +1,5 @@
 import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
-import { Emitter, } from '../../../events';
+import { Emitter } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { Droptarget } from '../../../dnd/droptarget';
 import { getPanelData } from '../../../dnd/dataTransfer';
@@ -17,7 +17,7 @@ export class ContentContainer extends CompositeDisposable {
         this._onDidBlur = new 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(this.element, {
@@ -90,6 +90,8 @@ export class ContentContainer extends CompositeDisposable {
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
         }
         if (doRender) {
             const focusTracker = trackFocus(container);

package/dist/esm/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/esm/dockview/components/tab/tab.js

@@ -38,10 +38,10 @@ export class Tab extends CompositeDisposable {
         this._onDragStart = new 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;
-        toggleClass(this.element, 'inactive-tab', true);
+        toggleClass(this.element, 'dv-inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
@@ -74,8 +74,8 @@ export class Tab extends CompositeDisposable {
         }), this.dropTarget);
     }
     setActive(isActive) {
-        toggleClass(this.element, 'active-tab', isActive);
-        toggleClass(this.element, 'inactive-tab', !isActive);
+        toggleClass(this.element, 'dv-active-tab', isActive);
+        toggleClass(this.element, 'dv-inactive-tab', !isActive);
     }
     setContent(part) {
         if (this.content) {

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

@@ -92,16 +92,16 @@ export class TabsContainer extends CompositeDisposable {
         this._onWillShowOverlay = new 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';
         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(this.accessor, this.group);
         this._element.appendChild(this.preActionsContainer);
         this._element.appendChild(this.tabContainer);
@@ -190,14 +190,10 @@ export class TabsContainer extends CompositeDisposable {
         });
     }
     openPanel(panel, index = this.tabs.length) {
-        var _a;
         if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
         const tab = new 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);
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });

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

@@ -17,8 +17,7 @@ export class VoidContainer extends CompositeDisposable {
         this._onDragStart = new 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, addDisposableListener(this._element, 'pointerdown', () => {
             this.accessor.doSetGroupActive(this.group);

package/dist/esm/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/esm/dockview/components/watermark/watermark.js

@@ -1,7 +1,4 @@
-import { addDisposableListener } from '../../../events';
-import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
-import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
     get element() {
         return this._element;
@@ -9,38 +6,9 @@ export class Watermark extends CompositeDisposable {
     constructor() {
         super();
         this._element = document.createElement('div');
-        this._element.className = 'watermark';
-        const title = document.createElement('div');
-        title.className = 'watermark-title';
-        const emptySpace = document.createElement('span');
-        emptySpace.style.flexGrow = '1';
-        const content = document.createElement('div');
-        content.className = 'watermark-content';
-        this._element.appendChild(title);
-        this._element.appendChild(content);
-        const actionsContainer = document.createElement('div');
-        actionsContainer.className = 'actions-container';
-        const closeAnchor = document.createElement('div');
-        closeAnchor.className = 'close-action';
-        closeAnchor.appendChild(createCloseButton());
-        actionsContainer.appendChild(closeAnchor);
-        title.appendChild(emptySpace);
-        title.appendChild(actionsContainer);
-        this.addDisposables(addDisposableListener(closeAnchor, 'click', (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';
     }
     init(_params) {
-        this._api = _params.containerApi;
-        this._group = _params.group;
-        this.render();
-    }
-    render() {
-        const isOneGroup = !!(this._api && this._api.size <= 1);
-        toggleClass(this.element, 'has-actions', isOneGroup);
+        // noop
     }
 }

package/dist/esm/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;