dockview 1.0.3 → 1.3.0

package/dist/esm/dnd/dataTransfer.js

@@ -1,4 +1,3 @@
-import { tryParseJSON } from '../json';
 class TransferObject {
     constructor() {
         //
@@ -19,45 +18,6 @@ export class PaneTransfer extends TransferObject {
         this.paneId = paneId;
     }
 }
-export const DATA_KEY = 'splitview/transfer';
-export const isPanelTransferEvent = (event) => {
-    if (!event.dataTransfer) {
-        return false;
-    }
-    return event.dataTransfer.types.includes(DATA_KEY);
-};
-export var DragType;
-(function (DragType) {
-    DragType["DOCKVIEW_TAB"] = "dockview_tab";
-    DragType["EXTERNAL"] = "external_group_drag";
-})(DragType || (DragType = {}));
-/**
- * Determine whether this data belong to that of an event that was started by
- * dragging a tab component
- */
-export const isTabDragEvent = (data) => {
-    return data.type === DragType.DOCKVIEW_TAB;
-};
-/**
- * Determine whether this data belong to that of an event that was started by
- * a custom drag-enable component
- */
-export const isCustomDragEvent = (data) => {
-    return data.type === DragType.EXTERNAL;
-};
-export const extractData = (event) => {
-    if (!event.dataTransfer) {
-        return null;
-    }
-    const data = tryParseJSON(event.dataTransfer.getData(DATA_KEY));
-    if (!data) {
-        console.warn(`[dragEvent] ${DATA_KEY} data is missing`);
-    }
-    if (typeof data.type !== 'string') {
-        console.warn(`[dragEvent] invalid type ${data.type}`);
-    }
-    return data;
-};
 /**
  * A singleton to store transfer data during drag & drop operations that are only valid within the application.
  */

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

@@ -1,4 +1,4 @@
-import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { CompositeDisposable } from '../lifecycle';
 export interface IDragAndDropObserverCallbacks {
     onDragEnter: (e: DragEvent) => void;
     onDragLeave: (e: DragEvent) => void;
@@ -25,16 +25,3 @@ export interface ICompositeDragAndDropObserverCallbacks {
     onDragStart?: (e: IDraggedCompositeData) => void;
     onDragEnd?: (e: IDraggedCompositeData) => void;
 }
-export declare class DragAndDrop extends CompositeDisposable {
-    private _onDragStart;
-    private _onDragEnd;
-    private static _instance;
-    static get INSTANCE(): DragAndDrop;
-    private transferData;
-    private constructor();
-    registerTarget(element: HTMLElement, callbacks: ICompositeDragAndDropObserverCallbacks): IDisposable;
-    registerDraggable(element: HTMLElement, draggedItemProvider: () => {
-        type: string;
-        id: string;
-    }, callbacks: ICompositeDragAndDropObserverCallbacks): IDisposable;
-}

package/dist/esm/dnd/dnd.js

@@ -1,6 +1,5 @@
-import { addDisposableListener, Emitter } from '../events';
+import { addDisposableListener } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-import { LocalSelectionTransfer } from './dataTransfer';
 export class DragAndDropObserver extends CompositeDisposable {
     constructor(element, callbacks) {
         super();
@@ -40,70 +39,3 @@ export class DragAndDropObserver extends CompositeDisposable {
         }));
     }
 }
-class DockviewIdentifier {
-    constructor(data) {
-        this.data = data;
-        //
-    }
-}
-export class DragAndDrop extends CompositeDisposable {
-    constructor() {
-        super();
-        this._onDragStart = new Emitter();
-        this._onDragEnd = new Emitter();
-        this.transferData = LocalSelectionTransfer.getInstance();
-        this.addDisposables(this._onDragStart, this._onDragEnd);
-    }
-    static get INSTANCE() {
-        if (!DragAndDrop._instance) {
-            DragAndDrop._instance = new DragAndDrop();
-        }
-        return DragAndDrop._instance;
-    }
-    registerTarget(element, callbacks) {
-        const disposables = new CompositeDisposable();
-        disposables.addDisposables(new DragAndDropObserver(element, {
-            onDragEnd: (e) => {
-                // no-op
-            },
-            onDragEnter: (e) => {
-                e.preventDefault();
-            },
-            onDragLeave: (e) => {
-                //
-            },
-            onDrop: (e) => {
-                //
-            },
-            onDragOver: (e) => {
-                //
-            },
-        }));
-        return disposables;
-    }
-    registerDraggable(element, draggedItemProvider, callbacks) {
-        element.draggable = true;
-        const disposables = new CompositeDisposable();
-        disposables.addDisposables(addDisposableListener(element, 'dragstart', (e) => {
-            this._onDragStart.fire({ event: e });
-        }));
-        disposables.addDisposables(new DragAndDropObserver(element, {
-            onDragEnd: (e) => {
-                // no-op
-            },
-            onDragEnter: (e) => {
-                //
-            },
-            onDragLeave: (e) => {
-                //
-            },
-            onDrop: (e) => {
-                //
-            },
-            onDragOver: (e) => {
-                //
-            },
-        }));
-        return disposables;
-    }
-}

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

@@ -29,5 +29,8 @@ export declare class Droptarget extends CompositeDisposable {
         validOverlays: DropTargetDirections;
     });
     dispose(): void;
+    private toggleClasses;
+    private setState;
+    private calculateQuadrant;
     private removeDropTarget;
 }

package/dist/esm/dnd/droptarget.js

@@ -20,8 +20,8 @@ export class Droptarget extends CompositeDisposable {
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this.addDisposables(new DragAndDropObserver(this.element, {
-            onDragEnter: (e) => undefined,
+        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+            onDragEnter: () => undefined,
             onDragOver: (e) => {
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
                     if (!this.options.canDisplayOverlay) {
@@ -56,56 +56,16 @@ export class Droptarget extends CompositeDisposable {
                 const y = e.offsetY;
                 const xp = (100 * x) / width;
                 const yp = (100 * y) / height;
-                let isRight = false;
-                let isLeft = false;
-                let isTop = false;
-                let isBottom = false;
-                switch (this.options.validOverlays) {
-                    case 'all':
-                        isRight = xp > 80;
-                        isLeft = xp < 20;
-                        isTop = !isRight && !isLeft && yp < 20;
-                        isBottom = !isRight && !isLeft && yp > 80;
-                        break;
-                    case 'vertical':
-                        isTop = yp < 50;
-                        isBottom = yp >= 50;
-                        break;
-                    case 'horizontal':
-                        isLeft = xp < 50;
-                        isRight = xp >= 50;
-                        break;
-                }
+                const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                 const isSmallX = width < 100;
                 const isSmallY = height < 100;
-                toggleClass(this.overlay, 'right', !isSmallX && isRight);
-                toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-                toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-                toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-                if (isRight) {
-                    this._state = Position.Right;
-                }
-                else if (isLeft) {
-                    this._state = Position.Left;
-                }
-                else if (isTop) {
-                    this._state = Position.Top;
-                }
-                else if (isBottom) {
-                    this._state = Position.Bottom;
-                }
-                else {
-                    this._state = Position.Center;
-                }
+                this.toggleClasses(quadrant, isSmallX, isSmallY);
+                this.setState(quadrant);
             },
-            onDragLeave: (e) => {
+            onDragLeave: () => {
                 this.removeDropTarget();
             },
-            onDragEnd: (e) => {
+            onDragEnd: () => {
                 this.removeDropTarget();
             },
             onDrop: (e) => {
@@ -129,9 +89,73 @@ export class Droptarget extends CompositeDisposable {
         this.options.canDisplayOverlay = value;
     }
     dispose() {
-        this._onDrop.dispose();
         this.removeDropTarget();
     }
+    toggleClasses(quadrant, isSmallX, isSmallY) {
+        if (!this.overlay) {
+            return;
+        }
+        const isLeft = quadrant === 'left';
+        const isRight = quadrant === 'right';
+        const isTop = quadrant === 'top';
+        const isBottom = quadrant === 'bottom';
+        toggleClass(this.overlay, 'right', !isSmallX && isRight);
+        toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+        toggleClass(this.overlay, 'top', !isSmallY && isTop);
+        toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+        toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+        toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+        toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+        toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+    }
+    setState(quadrant) {
+        switch (quadrant) {
+            case 'top':
+                this._state = Position.Top;
+                break;
+            case 'left':
+                this._state = Position.Left;
+                break;
+            case 'bottom':
+                this._state = Position.Bottom;
+                break;
+            case 'right':
+                this._state = Position.Right;
+                break;
+            default:
+                this._state = Position.Center;
+                break;
+        }
+    }
+    calculateQuadrant(overlayType, xp, yp) {
+        switch (overlayType) {
+            case 'all':
+                if (xp < 20) {
+                    return 'left';
+                }
+                if (xp > 80) {
+                    return 'right';
+                }
+                if (yp < 20) {
+                    return 'top';
+                }
+                if (yp > 80) {
+                    return 'bottom';
+                }
+                break;
+            case 'vertical':
+                if (yp < 50) {
+                    return 'top';
+                }
+                return 'bottom';
+            case 'horizontal':
+                if (xp < 50) {
+                    return 'left';
+                }
+                return 'right';
+        }
+        return null;
+    }
     removeDropTarget() {
         if (this.target) {
             this._state = undefined;

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

@@ -28,7 +28,6 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     private _list;
     private action;
     private params;
-    private isDirtyDisposable;
     get element(): HTMLElement;
     get id(): string;
     constructor();
@@ -39,6 +38,6 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     focus(): void;
     init(params: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
+    layout(_width: number, _height: number): void;
     private render;
 }

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -1,6 +1,5 @@
-import { CompositeDisposable, MutableDisposable } from '../../../lifecycle';
+import { CompositeDisposable } from '../../../lifecycle';
 import { addDisposableListener } from '../../../events';
-import { toggleClass } from '../../../dom';
 export class WrappedTab {
     constructor(renderer) {
         this.renderer = renderer;
@@ -55,9 +54,6 @@ export class DefaultTab extends CompositeDisposable {
         this._isGroupActive = false;
         //
         this.params = {};
-        //
-        this.isDirtyDisposable = new MutableDisposable();
-        this.addDisposables(this.isDirtyDisposable);
         this._element = document.createElement('div');
         this._element.className = 'default-tab';
         //
@@ -102,10 +98,6 @@ export class DefaultTab extends CompositeDisposable {
     init(params) {
         this.params = params;
         this._content.textContent = params.title;
-        this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
-            const isDirty = event;
-            toggleClass(this.action, 'dirty', isDirty);
-        });
         if (!this.params.suppressClosable) {
             addDisposableListener(this.action, 'click', (ev) => {
                 ev.preventDefault(); //
@@ -121,7 +113,7 @@ export class DefaultTab extends CompositeDisposable {
         this._isGroupActive = group.isActive;
         this.render();
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     render() {

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

@@ -8,12 +8,12 @@ export declare class Watermark extends CompositeDisposable implements IWatermark
     private params;
     get id(): string;
     constructor();
-    update(event: PanelUpdateEvent): void;
+    update(_event: PanelUpdateEvent): void;
     focus(): void;
     toJSON(): {};
-    layout(width: number, height: number): void;
+    layout(_width: number, _height: number): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, visible: boolean): void;
+    updateParentGroup(group: GroupviewPanel, _visible: boolean): void;
     get element(): HTMLElement;
     private render;
     dispose(): void;

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

@@ -32,7 +32,7 @@ export class Watermark extends CompositeDisposable {
     get id() {
         return 'watermark';
     }
-    update(event) {
+    update(_event) {
         // noop
     }
     focus() {
@@ -41,17 +41,17 @@ export class Watermark extends CompositeDisposable {
     toJSON() {
         return {};
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     init(params) {
         this.params = params;
-        this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+        this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
             this.render();
         }));
         this.render();
     }
-    updateParentGroup(group, visible) {
+    updateParentGroup(group, _visible) {
         this.group = group;
         this.render();
     }

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

@@ -6,9 +6,10 @@ import { IWatermarkRenderer } from '../groupview/types';
 import { IPanelDeserializer } from './deserializer';
 import { AddGroupOptions, AddPanelOptions, DockviewOptions as DockviewComponentOptions, MovementOptions, TabContextMenuEvent } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
+import { DockviewApi } from '../api/component.api';
 import { LayoutMouseEvent } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
-import { GroupOptions, GroupPanelViewState } from '../groupview/groupview';
+import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from '../groupview/groupview';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 export interface PanelReference {
     update: (event: {
@@ -29,15 +30,19 @@ export interface SerializedDockview {
         [key: string]: GroupviewPanelState;
     };
     activeGroup?: string;
-    options: {
+    options?: {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents'>;
+export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
+export interface DockviewDropEvent extends GroupviewDropEvent {
+    api: DockviewApi;
+}
 export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     readonly activePanel: IGroupPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IGroupPanel[];
+    readonly onDidDrop: Event<DockviewDropEvent>;
     tabHeight: number | undefined;
     deserializer: IPanelDeserializer | undefined;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -51,7 +56,7 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     fireMouseEvent(event: LayoutMouseEvent): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options?: AddGroupOptions): void;
-    closeAllGroups: () => Promise<boolean>;
+    closeAllGroups(): void;
     onTabInteractionEvent: Event<LayoutMouseEvent>;
     onTabContextMenu: Event<TabContextMenuEvent>;
     moveToNext(options?: MovementOptions): void;
@@ -60,19 +65,29 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     focus(): void;
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
+    readonly onDidRemovePanel: Event<IGroupPanel>;
+    readonly onDidAddPanel: Event<IGroupPanel>;
+    readonly onDidLayoutfromJSON: Event<void>;
+    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
 }
 export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implements IDockviewComponent {
-    private readonly _panels;
-    private readonly dirtyPanels;
-    private readonly debouncedDeque;
+    private _deserializer;
+    private _api;
+    private _options;
     private readonly _onTabInteractionEvent;
     readonly onTabInteractionEvent: Event<LayoutMouseEvent>;
     private readonly _onTabContextMenu;
     readonly onTabContextMenu: Event<TabContextMenuEvent>;
-    private _deserializer;
-    private panelState;
-    private _api;
-    private _options;
+    private readonly _onDidDrop;
+    readonly onDidDrop: Event<DockviewDropEvent>;
+    private readonly _onDidRemovePanel;
+    readonly onDidRemovePanel: Event<IGroupPanel>;
+    private readonly _onDidAddPanel;
+    readonly onDidAddPanel: Event<IGroupPanel>;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutfromJSON: Event<void>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
     get totalPanels(): number;
     get panels(): IGroupPanel[];
     get deserializer(): IPanelDeserializer | undefined;
@@ -88,8 +103,6 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     setActivePanel(panel: IGroupPanel): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
-    private registerPanel;
-    private unregisterPanel;
     /**
      * Serialize the current state of the layout
      *
@@ -97,25 +110,23 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
      */
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
-    closeAllGroups(): Promise<boolean>;
+    closeAllGroups(): void;
     fireMouseEvent(event: LayoutMouseEvent): void;
     addPanel(options: AddPanelOptions): IGroupPanel;
-    removePanel(panel: IGroupPanel): void;
+    removePanel(panel: IGroupPanel, options?: {
+        removeEmptyGroup: boolean;
+        skipDispose: boolean;
+    }): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options: AddGroupOptions): void;
-    removeGroup(group: GroupviewPanel): void;
+    removeGroup(group: GroupviewPanel, skipActive?: boolean): void;
     moveGroupOrPanel(referenceGroup: GroupviewPanel, groupId: string, itemId: string, target: Position, index?: number): void;
     doSetGroupActive(group: GroupviewPanel | undefined, skipFocus?: boolean): void;
     createGroup(options?: GroupOptions): GroupviewPanel;
-    dispose(): void;
-    /**
-     * Ensure the local copy of the layout state is up-to-date
-     */
-    private syncConfigs;
-    private _addPanel;
+    private createPanel;
     private createContentComponent;
     private createTabComponent;
     private addPanelToNewGroup;
     private findGroup;
-    private addDirtyPanel;
+    dispose(): void;
 }