dockview 1.0.1 → 1.1.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

@@ -1,9 +1,5 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-export interface DroptargetEvent {
-    position: Position;
-    event: DragEvent;
-}
 export declare enum Position {
     Top = "Top",
     Left = "Left",
@@ -13,7 +9,7 @@ export declare enum Position {
 }
 export interface DroptargetEvent {
     position: Position;
-    event: DragEvent;
+    nativeEvent: DragEvent;
 }
 export declare type DropTargetDirections = 'vertical' | 'horizontal' | 'all' | 'none';
 export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent) => boolean);
@@ -33,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,7 +20,7 @@ export class Droptarget extends CompositeDisposable {
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this.addDisposables(new DragAndDropObserver(this.element, {
+        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
             onDragEnter: (e) => undefined,
             onDragOver: (e) => {
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
@@ -56,51 +56,11 @@ 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) => {
                 this.removeDropTarget();
@@ -114,7 +74,7 @@ export class Droptarget extends CompositeDisposable {
                 const state = this._state;
                 this.removeDropTarget();
                 if (state) {
-                    this._onDrop.fire({ position: state, event: e });
+                    this._onDrop.fire({ position: state, nativeEvent: 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();

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(); //

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -29,7 +29,9 @@ export class DefaultGroupPanelView {
         this.tab.init(params);
     }
     updateParentGroup(group, isPanelVisible) {
-        // TODO
+        var _a;
+        this._content.updateParentGroup(group, isPanelVisible);
+        (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
     }
     layout(width, height) {
         this.content.layout(width, height);

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: {
@@ -33,11 +34,15 @@ export interface SerializedDockview {
         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'>;
+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,7 +110,7 @@ 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;
@@ -107,15 +120,10 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     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 createContentComponent;
     private createTabComponent;
     private addPanelToNewGroup;
     private findGroup;
-    private addDirtyPanel;
+    dispose(): void;
 }