dockview 1.5.2 → 1.6.0

package/dist/esm/actionbar/actionsContainer.js

@@ -1,4 +1,7 @@
 export class ActionContainer {
+    get element() {
+        return this._element;
+    }
     constructor() {
         this._element = document.createElement('div');
         this._element.className = 'actions-bar';
@@ -6,9 +9,6 @@ export class ActionContainer {
         this._list.className = 'actions-container';
         this._element.appendChild(this._list);
     }
-    get element() {
-        return this._element;
-    }
     add(element) {
         const listItem = document.createElement('li');
         listItem.className = 'action-item';

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

@@ -3,7 +3,6 @@ import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/o
 import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
-import { IDockviewPanel } from '../groupview/groupPanel';
 import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
 import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
@@ -12,6 +11,7 @@ import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Event } from '../events';
 import { PaneviewDropEvent } from '../react';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
@@ -104,6 +104,7 @@ export declare class GridviewApi implements CommonApi<SerializedGridview> {
 }
 export declare class DockviewApi implements CommonApi<SerializedDockview> {
     private readonly component;
+    get id(): string;
     get width(): number;
     get height(): number;
     get minimumHeight(): number;
@@ -132,7 +133,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     getPanel(id: string): IDockviewPanel | undefined;
     layout(width: number, height: number, force?: boolean): void;
     addPanel(options: AddPanelOptions): IDockviewPanel;
-    addEmptyGroup(options?: AddGroupOptions): void;
+    addGroup(options?: AddGroupOptions): IGroupviewPanel;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
     closeAllGroups(): void;

package/dist/esm/api/component.api.js

@@ -1,8 +1,5 @@
 import { Emitter } from '../events';
 export class SplitviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -36,6 +33,9 @@ export class SplitviewApi {
     get onDidRemoveView() {
         return this.component.onDidRemoveView;
     }
+    constructor(component) {
+        this.component = component;
+    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }
@@ -68,9 +68,6 @@ export class SplitviewApi {
     }
 }
 export class PaneviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -109,6 +106,9 @@ export class PaneviewApi {
         };
         return emitter.event;
     }
+    constructor(component) {
+        this.component = component;
+    }
     removePanel(panel) {
         this.component.removePanel(panel);
     }
@@ -138,9 +138,6 @@ export class PaneviewApi {
     }
 }
 export class GridviewApi {
-    constructor(component) {
-        this.component = component;
-    }
     get minimumHeight() {
         return this.component.minimumHeight;
     }
@@ -183,6 +180,9 @@ export class GridviewApi {
     set orientation(value) {
         this.component.updateOptions({ orientation: value });
     }
+    constructor(component) {
+        this.component = component;
+    }
     focus() {
         this.component.focus();
     }
@@ -212,8 +212,8 @@ export class GridviewApi {
     }
 }
 export class DockviewApi {
-    constructor(component) {
-        this.component = component;
+    get id() {
+        return this.component.id;
     }
     get width() {
         return this.component.width;
@@ -278,6 +278,9 @@ export class DockviewApi {
     get activeGroup() {
         return this.component.activeGroup;
     }
+    constructor(component) {
+        this.component = component;
+    }
     getTabHeight() {
         return this.component.tabHeight;
     }
@@ -296,8 +299,8 @@ export class DockviewApi {
     addPanel(options) {
         return this.component.addPanel(options);
     }
-    addEmptyGroup(options) {
-        this.component.addEmptyGroup(options);
+    addGroup(options) {
+        return this.component.addGroup(options);
     }
     moveToNext(options) {
         this.component.moveToNext(options);

package/dist/esm/api/{groupPanelApi.d.ts → dockviewPanelApi.d.ts}

@@ -1,7 +1,7 @@
 import { Emitter, Event } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
-import { IDockviewPanel } from '../groupview/groupPanel';
 import { GroupPanel } from '../groupview/groupviewPanel';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 export interface TitleEvent {
     readonly title: string;
 }
@@ -23,7 +23,7 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     readonly onDidActiveGroupChange: Event<void>;
     private readonly _onDidGroupChange;
     readonly onDidGroupChange: Event<void>;
-    private disposable;
+    private readonly disposable;
     get title(): string;
     get isGroupActive(): boolean;
     set group(value: GroupPanel);

package/dist/esm/api/{groupPanelApi.js → dockviewPanelApi.js}

@@ -2,19 +2,6 @@ import { Emitter } from '../events';
 import { GridviewPanelApiImpl } from './gridviewPanelApi';
 import { MutableDisposable } from '../lifecycle';
 export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
-    constructor(panel, group) {
-        super(panel.id);
-        this.panel = panel;
-        this._onDidTitleChange = new Emitter();
-        this.onDidTitleChange = this._onDidTitleChange.event;
-        this._onDidActiveGroupChange = new Emitter();
-        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
-        this._onDidGroupChange = new Emitter();
-        this.onDidGroupChange = this._onDidGroupChange.event;
-        this.disposable = new MutableDisposable();
-        this._group = group;
-        this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
-    }
     get title() {
         return this.panel.title;
     }
@@ -38,13 +25,24 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get group() {
         return this._group;
     }
+    constructor(panel, group) {
+        super(panel.id);
+        this.panel = panel;
+        this._onDidTitleChange = new Emitter();
+        this.onDidTitleChange = this._onDidTitleChange.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._onDidGroupChange = new Emitter();
+        this.onDidGroupChange = this._onDidGroupChange.event;
+        this.disposable = new MutableDisposable();
+        this.initialize(panel);
+        this._group = group;
+        this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+    }
     setTitle(title) {
-        this._onDidTitleChange.fire({ title });
+        this.panel.update({ params: { title } });
     }
     close() {
-        if (!this.group) {
-            throw new Error(`panel ${this.id} has no group`);
-        }
-        return this.group.model.closePanel(this.panel);
+        this.group.model.closePanel(this.panel);
     }
 }

package/dist/esm/api/gridviewPanelApi.d.ts

@@ -1,4 +1,5 @@
 import { Emitter, Event } from '../events';
+import { IPanel } from '../panel/types';
 import { FunctionOrValue } from '../types';
 import { PanelApiImpl, PanelApi } from './panelApi';
 export interface GridConstraintChangeEvent {
@@ -23,13 +24,13 @@ export interface GridviewPanelApi extends PanelApi {
     setSize(event: SizeEvent): void;
 }
 export declare class GridviewPanelApiImpl extends PanelApiImpl implements GridviewPanelApi {
-    readonly _onDidConstraintsChangeInternal: Emitter<GridConstraintChangeEvent2>;
+    private readonly _onDidConstraintsChangeInternal;
     readonly onDidConstraintsChangeInternal: Event<GridConstraintChangeEvent2>;
     readonly _onDidConstraintsChange: Emitter<GridConstraintChangeEvent>;
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent>;
-    readonly _onDidSizeChange: Emitter<SizeEvent>;
+    private readonly _onDidSizeChange;
     readonly onDidSizeChange: Event<SizeEvent>;
-    constructor(id: string);
+    constructor(id: string, panel?: IPanel);
     setConstraints(value: GridConstraintChangeEvent): void;
     setSize(event: SizeEvent): void;
 }

package/dist/esm/api/gridviewPanelApi.js

@@ -1,20 +1,20 @@
 import { Emitter } from '../events';
 import { PanelApiImpl } from './panelApi';
 export class GridviewPanelApiImpl extends PanelApiImpl {
-    //
-    constructor(id) {
+    constructor(id, panel) {
         super(id);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-        //
         this._onDidConstraintsChange = new Emitter({
             replay: true,
         });
         this.onDidConstraintsChange = this._onDidConstraintsChange.event;
-        //
         this._onDidSizeChange = new Emitter();
         this.onDidSizeChange = this._onDidSizeChange.event;
         this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
+        if (panel) {
+            this.initialize(panel);
+        }
     }
     setConstraints(value) {
         this._onDidConstraintsChangeInternal.fire(value);

package/dist/esm/api/panelApi.d.ts

@@ -1,5 +1,6 @@
 import { Emitter, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
+import { IPanel, Parameters } from '../panel/types';
 export interface FocusEvent {
     readonly isFocused: boolean;
 }
@@ -20,6 +21,7 @@ export interface PanelApi {
     readonly onDidActiveChange: Event<ActiveEvent>;
     setVisible(isVisible: boolean): void;
     setActive(): void;
+    updateParameters(parameters: Parameters): void;
     /**
      * The id of the panel that would have been assigned when the panel was created
      */
@@ -55,6 +57,7 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     private _isVisible;
     private _width;
     private _height;
+    private readonly panelUpdatesDisposable;
     readonly _onDidDimensionChange: Emitter<PanelDimensionChangeEvent>;
     readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>;
     readonly _onDidChangeFocus: Emitter<FocusEvent>;
@@ -69,13 +72,17 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     readonly onDidActiveChange: Event<ActiveEvent>;
     readonly _onActiveChange: Emitter<void>;
     readonly onActiveChange: Event<void>;
+    readonly _onUpdateParameters: Emitter<Parameters>;
+    readonly onUpdateParameters: Event<Parameters>;
     get isFocused(): boolean;
     get isActive(): boolean;
     get isVisible(): boolean;
     get width(): number;
     get height(): number;
     constructor(id: string);
+    initialize(panel: IPanel): void;
     setVisible(isVisible: boolean): void;
     setActive(): void;
+    updateParameters(parameters: Parameters): void;
     dispose(): void;
 }

package/dist/esm/api/panelApi.js

@@ -1,9 +1,25 @@
 import { Emitter } from '../events';
-import { CompositeDisposable } from '../lifecycle';
+import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 /**
  * A core api implementation that should be used across all panel-like objects
  */
 export class PanelApiImpl extends CompositeDisposable {
+    //
+    get isFocused() {
+        return this._isFocused;
+    }
+    get isActive() {
+        return this._isActive;
+    }
+    get isVisible() {
+        return this._isVisible;
+    }
+    get width() {
+        return this._width;
+    }
+    get height() {
+        return this._height;
+    }
     constructor(id) {
         super();
         this.id = id;
@@ -12,6 +28,7 @@ export class PanelApiImpl extends CompositeDisposable {
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
+        this.panelUpdatesDisposable = new MutableDisposable();
         this._onDidDimensionChange = new Emitter({
             replay: true,
         });
@@ -40,7 +57,10 @@ export class PanelApiImpl extends CompositeDisposable {
         //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+        //
+        this._onUpdateParameters = new Emitter();
+        this.onUpdateParameters = this._onUpdateParameters.event;
+        this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
@@ -51,21 +71,14 @@ export class PanelApiImpl extends CompositeDisposable {
             this._height = event.height;
         }));
     }
-    //
-    get isFocused() {
-        return this._isFocused;
-    }
-    get isActive() {
-        return this._isActive;
-    }
-    get isVisible() {
-        return this._isVisible;
-    }
-    get width() {
-        return this._width;
-    }
-    get height() {
-        return this._height;
+    initialize(panel) {
+        this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+            panel.update({
+                params: {
+                    params: parameters,
+                },
+            });
+        });
     }
     setVisible(isVisible) {
         this._onVisibilityChange.fire({ isVisible });
@@ -73,6 +86,9 @@ export class PanelApiImpl extends CompositeDisposable {
     setActive() {
         this._onActiveChange.fire();
     }
+    updateParameters(parameters) {
+        this._onUpdateParameters.fire(parameters);
+    }
     dispose() {
         super.dispose();
     }

package/dist/esm/api/paneviewPanelApi.js

@@ -1,6 +1,9 @@
 import { Emitter } from '../events';
 import { SplitviewPanelApiImpl } from './splitviewPanelApi';
 export class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
+    set pane(pane) {
+        this._pane = pane;
+    }
     constructor(id) {
         super(id);
         this._onDidExpansionChange = new Emitter({
@@ -13,9 +16,6 @@ export class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
         this.onMouseLeave = this._onMouseLeave.event;
         this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
     }
-    set pane(pane) {
-        this._pane = pane;
-    }
     setExpanded(isExpanded) {
         var _a;
         (_a = this._pane) === null || _a === void 0 ? void 0 : _a.setExpanded(isExpanded);

package/dist/esm/array.d.ts

@@ -9,5 +9,5 @@ export declare function pushToStart<T>(arr: T[], value: T): void;
  * Pushes an element to the end of the array, if found.
  */
 export declare function pushToEnd<T>(arr: T[], value: T): void;
-export declare const range: (from: number, to?: number | undefined) => number[];
+export declare const range: (from: number, to?: number) => number[];
 export declare function firstIndex<T>(array: T[] | ReadonlyArray<T>, fn: (item: T) => boolean): number;

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

@@ -1,11 +1,11 @@
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 export declare abstract class DragHandler extends CompositeDisposable {
-    private readonly el;
+    protected readonly el: HTMLElement;
     private readonly disposable;
     private readonly _onDragStart;
     readonly onDragStart: import("../events").Event<void>;
     private iframes;
     constructor(el: HTMLElement);
-    abstract getData(): IDisposable;
+    abstract getData(dataTransfer?: DataTransfer | null): IDisposable;
     private configure;
 }

package/dist/esm/dnd/abstractDragHandler.js

@@ -20,9 +20,9 @@ export class DragHandler extends CompositeDisposable {
             for (const iframe of this.iframes) {
                 iframe.style.pointerEvents = 'none';
             }
-            this.el.classList.add('dragged');
-            setTimeout(() => this.el.classList.remove('dragged'), 0);
-            this.disposable.value = this.getData();
+            this.el.classList.add('dv-dragged');
+            setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
+            this.disposable.value = this.getData(event.dataTransfer);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
             }

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

@@ -4,8 +4,8 @@ declare class TransferObject {
 export declare class PanelTransfer extends TransferObject {
     readonly viewId: string;
     readonly groupId: string;
-    readonly panelId: string;
-    constructor(viewId: string, groupId: string, panelId: string);
+    readonly panelId: string | null;
+    constructor(viewId: string, groupId: string, panelId: string | null);
 }
 export declare class PaneTransfer extends TransferObject {
     readonly viewId: string;

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

@@ -9,7 +9,7 @@ export interface IDragAndDropObserverCallbacks {
 export declare class DragAndDropObserver extends CompositeDisposable {
     private element;
     private callbacks;
-    private counter;
+    private target;
     constructor(element: HTMLElement, callbacks: IDragAndDropObserverCallbacks);
     private registerListeners;
 }

package/dist/esm/dnd/dnd.js

@@ -5,36 +5,31 @@ export class DragAndDropObserver extends CompositeDisposable {
         super();
         this.element = element;
         this.callbacks = callbacks;
-        // A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
-        // calls see https://github.com/microsoft/vscode/issues/14470
-        // when the element has child elements where the events are fired
-        // repeadedly.
-        this.counter = 0;
+        this.target = null;
         this.registerListeners();
     }
     registerListeners() {
         this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-            this.counter++;
+            this.target = e.target;
             this.callbacks.onDragEnter(e);
-        }));
+        }, true));
         this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
             e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
             if (this.callbacks.onDragOver) {
                 this.callbacks.onDragOver(e);
             }
-        }));
+        }, true));
         this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-            this.counter--;
-            if (this.counter === 0) {
+            if (this.target === e.target) {
+                this.target = null;
                 this.callbacks.onDragLeave(e);
             }
         }));
         this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-            this.counter = 0;
+            this.target = null;
             this.callbacks.onDragEnd(e);
         }));
         this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-            this.counter = 0;
             this.callbacks.onDrop(e);
         }));
     }

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

@@ -1,19 +1,14 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-export declare enum Position {
-    Top = "Top",
-    Left = "Left",
-    Bottom = "Bottom",
-    Right = "Right",
-    Center = "Center"
-}
-export declare type Quadrant = 'top' | 'bottom' | 'left' | 'right';
+import { Direction } from '../gridview/baseComponentGridview';
+export declare function directionToPosition(direction: Direction): Position;
+export declare function positionToDirection(position: Position): Direction;
 export interface DroptargetEvent {
-    position: Position;
-    nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly nativeEvent: DragEvent;
 }
-export declare type DropTargetDirections = 'vertical' | 'horizontal' | 'all' | 'none';
-export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Quadrant | null) => boolean);
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
     private readonly options;
@@ -23,11 +18,19 @@ export declare class Droptarget extends CompositeDisposable {
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     get state(): Position | undefined;
-    set validOverlays(value: DropTargetDirections);
-    set canDisplayOverlay(value: CanDisplayOverlay);
     constructor(element: HTMLElement, options: {
         canDisplayOverlay: CanDisplayOverlay;
-        validOverlays: DropTargetDirections;
+        acceptedTargetZones: Position[];
+        overlayModel?: {
+            size?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+            activationSize?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+        };
     });
     dispose(): void;
     private toggleClasses;
@@ -35,3 +38,5 @@ export declare class Droptarget extends CompositeDisposable {
     private calculateQuadrant;
     private removeDropTarget;
 }
+export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
+export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;