dockview 1.5.2 → 1.6.0

package/dist/esm/gridview/gridviewPanel.js

@@ -1,51 +1,6 @@
 import { BasePanelView, } from './basePanelView';
-import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { Emitter } from '../events';
 export class GridviewPanel extends BasePanelView {
-    constructor(id, component, api = new GridviewPanelApiImpl(id)) {
-        super(id, component, api);
-        this._evaluatedMinimumWidth = 0;
-        this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
-        this._evaluatedMinimumHeight = 0;
-        this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
-        this._minimumWidth = 0;
-        this._minimumHeight = 0;
-        this._maximumWidth = Number.MAX_SAFE_INTEGER;
-        this._maximumHeight = Number.MAX_SAFE_INTEGER;
-        this._snap = false;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
-            const { isVisible } = event;
-            const { accessor } = this._params;
-            accessor.setVisible(this, isVisible);
-        }), this.api.onActiveChange(() => {
-            const { accessor } = this._params;
-            accessor.setActive(this);
-        }), this.api.onDidConstraintsChangeInternal((event) => {
-            if (typeof event.minimumWidth === 'number' ||
-                typeof event.minimumWidth === 'function') {
-                this._minimumWidth = event.minimumWidth;
-            }
-            if (typeof event.minimumHeight === 'number' ||
-                typeof event.minimumHeight === 'function') {
-                this._minimumHeight = event.minimumHeight;
-            }
-            if (typeof event.maximumWidth === 'number' ||
-                typeof event.maximumWidth === 'function') {
-                this._maximumWidth = event.maximumWidth;
-            }
-            if (typeof event.maximumHeight === 'number' ||
-                typeof event.maximumHeight === 'function') {
-                this._maximumHeight = event.maximumHeight;
-            }
-        }), this.api.onDidSizeChange((event) => {
-            this._onDidChange.fire({
-                height: event.height,
-                width: event.width,
-            });
-        }));
-    }
     get priority() {
         return this._priority;
     }
@@ -95,6 +50,51 @@ export class GridviewPanel extends BasePanelView {
     get isActive() {
         return this.api.isActive;
     }
+    constructor(id, component, api) {
+        super(id, component, api);
+        this._evaluatedMinimumWidth = 0;
+        this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
+        this._evaluatedMinimumHeight = 0;
+        this._evaluatedMaximumHeight = Number.MAX_SAFE_INTEGER;
+        this._minimumWidth = 0;
+        this._minimumHeight = 0;
+        this._maximumWidth = Number.MAX_SAFE_INTEGER;
+        this._maximumHeight = Number.MAX_SAFE_INTEGER;
+        this._snap = false;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onActiveChange(() => {
+            const { accessor } = this._params;
+            accessor.setActive(this);
+        }), this.api.onDidConstraintsChangeInternal((event) => {
+            if (typeof event.minimumWidth === 'number' ||
+                typeof event.minimumWidth === 'function') {
+                this._minimumWidth = event.minimumWidth;
+            }
+            if (typeof event.minimumHeight === 'number' ||
+                typeof event.minimumHeight === 'function') {
+                this._minimumHeight = event.minimumHeight;
+            }
+            if (typeof event.maximumWidth === 'number' ||
+                typeof event.maximumWidth === 'function') {
+                this._maximumWidth = event.maximumWidth;
+            }
+            if (typeof event.maximumHeight === 'number' ||
+                typeof event.maximumHeight === 'function') {
+                this._maximumHeight = event.maximumHeight;
+            }
+        }), this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({
+                height: event.height,
+                width: event.width,
+            });
+        }));
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }

package/dist/esm/gridview/leafNode.js

@@ -5,29 +5,6 @@
 import { Orientation, } from '../splitview/core/splitview';
 import { Emitter } from '../events';
 export class LeafNode {
-    constructor(view, orientation, orthogonalSize, size = 0) {
-        this.view = view;
-        this.orientation = orientation;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._orthogonalSize = orthogonalSize;
-        this._size = size;
-        this._disposable = this.view.onDidChange((event) => {
-            if (event) {
-                this._onDidChange.fire({
-                    size: this.orientation === Orientation.VERTICAL
-                        ? event.width
-                        : event.height,
-                    orthogonalSize: this.orientation === Orientation.VERTICAL
-                        ? event.height
-                        : event.width,
-                });
-            }
-            else {
-                this._onDidChange.fire({});
-            }
-        });
-    }
     get minimumWidth() {
         return this.view.minimumWidth;
     }
@@ -85,6 +62,29 @@ export class LeafNode {
             ? this.size
             : this.orthogonalSize;
     }
+    constructor(view, orientation, orthogonalSize, size = 0) {
+        this.view = view;
+        this.orientation = orientation;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._orthogonalSize = orthogonalSize;
+        this._size = size;
+        this._disposable = this.view.onDidChange((event) => {
+            if (event) {
+                this._onDidChange.fire({
+                    size: this.orientation === Orientation.VERTICAL
+                        ? event.width
+                        : event.height,
+                    orthogonalSize: this.orientation === Orientation.VERTICAL
+                        ? event.height
+                        : event.width,
+                });
+            }
+            else {
+                this._onDidChange.fire({});
+            }
+        });
+    }
     setVisible(visible) {
         if (this.view.setVisible) {
             this.view.setVisible(visible);

package/dist/esm/gridview/types.d.ts

@@ -1,3 +1,3 @@
 import { BranchNode } from './branchNode';
 import { LeafNode } from './leafNode';
-export declare type Node = BranchNode | LeafNode;
+export type Node = BranchNode | LeafNode;

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

@@ -1,5 +1,6 @@
 export declare enum DockviewDropTargets {
     Tab = 0,
     Panel = 1,
-    TabContainer = 2
+    TabContainer = 2,
+    Edge = 3
 }

package/dist/esm/groupview/dnd.js

@@ -3,4 +3,5 @@ export var DockviewDropTargets;
     DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
     DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
     DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
+    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
 })(DockviewDropTargets || (DockviewDropTargets = {}));

package/dist/esm/groupview/groupview.d.ts

@@ -6,9 +6,9 @@ import { IGridPanelView } from '../gridview/baseComponentGridview';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
-import { IDockviewPanel } from './groupPanel';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 export interface DndService {
     canDisplayOverlay(group: IGroupview, event: DragEvent, target: DockviewDropTargets): boolean;
     onDrop(group: IGroupview, event: DragEvent, position: Position, index?: number): void;
@@ -24,7 +24,7 @@ export interface IGroupItem {
 }
 interface GroupMoveEvent {
     groupId: string;
-    itemId: string;
+    itemId?: string;
     target: Position;
     index?: number;
 }
@@ -87,14 +87,14 @@ export interface IGroupview extends IDisposable, IGridPanelView {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
 }
 export declare class Groupview extends CompositeDisposable implements IGroupview {
     private readonly container;
     private accessor;
     id: string;
     private readonly options;
-    private readonly parent;
+    private readonly groupPanel;
     private readonly tabsContainer;
     private readonly contentContainer;
     private readonly dropTarget;
@@ -134,7 +134,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     get hasWatermark(): boolean;
     get header(): IHeader;
     get isContentFocused(): boolean;
-    constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, parent: GroupPanel);
+    constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: GroupPanel);
     initialize(): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;
@@ -170,7 +170,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
     private handleDropEvent;
     dispose(): void;
 }

package/dist/esm/groupview/groupview.js

@@ -1,6 +1,6 @@
 import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
-import { Droptarget, Position } from '../dnd/droptarget';
+import { Droptarget } from '../dnd/droptarget';
 import { isAncestor, toggleClass } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
@@ -8,63 +8,6 @@ import { ContentContainer } from './panel/content';
 import { TabsContainer } from './titlebar/tabsContainer';
 import { DockviewDropTargets } from './dnd';
 export class Groupview extends CompositeDisposable {
-    constructor(container, accessor, id, options, parent) {
-        super();
-        this.container = container;
-        this.accessor = accessor;
-        this.id = id;
-        this.options = options;
-        this.parent = parent;
-        this._isGroupActive = false;
-        this._locked = false;
-        this.mostRecentlyUsed = [];
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._width = 0;
-        this._height = 0;
-        this._panels = [];
-        this._onMove = new Emitter();
-        this.onMove = this._onMove.event;
-        this._onDidDrop = new Emitter();
-        this.onDidDrop = this._onDidDrop.event;
-        this._onDidAddPanel = new Emitter();
-        this.onDidAddPanel = this._onDidAddPanel.event;
-        this._onDidRemovePanel = new Emitter();
-        this.onDidRemovePanel = this._onDidRemovePanel.event;
-        this._onDidActivePanelChange = new Emitter();
-        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.container.classList.add('groupview');
-        this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
-            tabHeight: options.tabHeight,
-        });
-        this.contentContainer = new ContentContainer();
-        this.dropTarget = new Droptarget(this.contentContainer.element, {
-            validOverlays: 'all',
-            canDisplayOverlay: (event, quadrant) => {
-                if (this.locked && !quadrant) {
-                    return false;
-                }
-                const data = getPanelData();
-                if (data && data.viewId === this.accessor.id) {
-                    const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
-                    return !groupHasOnePanelAndIsActiveDragElement;
-                }
-                return this.canDisplayOverlay(event, DockviewDropTargets.Panel);
-            },
-        });
-        container.append(this.tabsContainer.element, this.contentContainer.element);
-        this.header.hidden = !!options.hideHeader;
-        this.locked = !!options.locked;
-        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
-            this.handleDropEvent(event.event, Position.Center, event.index);
-        }), this.contentContainer.onDidFocus(() => {
-            this.accessor.doSetGroupActive(this.parent, true);
-        }), this.contentContainer.onDidBlur(() => {
-            // noop
-        }), this.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.nativeEvent, event.position);
-        }));
-    }
     get element() {
         throw new Error('not supported');
     }
@@ -76,6 +19,7 @@ export class Groupview extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
+        toggleClass(this.container, 'locked-groupview', value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -113,6 +57,71 @@ export class Groupview extends CompositeDisposable {
         }
         return isAncestor(document.activeElement, this.contentContainer.element);
     }
+    constructor(container, accessor, id, options, groupPanel) {
+        super();
+        this.container = container;
+        this.accessor = accessor;
+        this.id = id;
+        this.options = options;
+        this.groupPanel = groupPanel;
+        this._isGroupActive = false;
+        this._locked = false;
+        this.mostRecentlyUsed = [];
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._width = 0;
+        this._height = 0;
+        this._panels = [];
+        this._onMove = new Emitter();
+        this.onMove = this._onMove.event;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.container.classList.add('groupview');
+        this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
+        this.contentContainer = new ContentContainer();
+        this.dropTarget = new Droptarget(this.contentContainer.element, {
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
+            canDisplayOverlay: (event, position) => {
+                if (this.locked && position === 'center') {
+                    return false;
+                }
+                const data = getPanelData();
+                if (data && data.viewId === this.accessor.id) {
+                    if (data.groupId === this.id) {
+                        if (position === 'center') {
+                            // don't allow to drop on self for center position
+                            return false;
+                        }
+                        if (data.panelId === null) {
+                            // don't allow group move to drop anywhere on self
+                            return false;
+                        }
+                    }
+                    const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
+                    return !groupHasOnePanelAndIsActiveDragElement;
+                }
+                return this.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+            },
+        });
+        container.append(this.tabsContainer.element, this.contentContainer.element);
+        this.header.hidden = !!options.hideHeader;
+        this.locked = !!options.locked;
+        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+            this.handleDropEvent(event.event, 'center', event.index);
+        }), this.contentContainer.onDidFocus(() => {
+            this.accessor.doSetGroupActive(this.groupPanel, true);
+        }), this.contentContainer.onDidBlur(() => {
+            // noop
+        }), this.dropTarget.onDrop((event) => {
+            this.handleDropEvent(event.nativeEvent, event.position);
+        }));
+    }
     initialize() {
         var _a, _b;
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -128,11 +137,11 @@ export class Groupview extends CompositeDisposable {
         this.setActive(this.isActive, true, true);
         this.updateContainer();
         if (this.accessor.options.createGroupControlElement) {
-            this._control = this.accessor.options.createGroupControlElement(this.parent);
+            this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
             this.addDisposables(this._control);
             this._control.init({
                 containerApi: new DockviewApi(this.accessor),
-                api: this.parent.api,
+                api: this.groupPanel.api,
             });
             this.tabsContainer.setActionElement(this._control.element);
         }
@@ -219,10 +228,10 @@ export class Groupview extends CompositeDisposable {
         const skipSetPanelActive = !!options.skipSetPanelActive;
         const skipSetGroupActive = !!options.skipSetGroupActive;
         // ensure the group is updated before we fire any events
-        panel.updateParentGroup(this.parent, true);
+        panel.updateParentGroup(this.groupPanel, true);
         if (this._activePanel === panel) {
             if (!skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.parent);
+                this.accessor.doSetGroupActive(this.groupPanel);
             }
             return;
         }
@@ -231,7 +240,7 @@ export class Groupview extends CompositeDisposable {
             this.doSetActivePanel(panel);
         }
         if (!skipSetGroupActive) {
-            this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
+            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
         }
         this.updateContainer();
     }
@@ -254,7 +263,7 @@ export class Groupview extends CompositeDisposable {
             }
         }
         else {
-            this.accessor.removeGroup(this.parent);
+            this.accessor.removeGroup(this.groupPanel);
         }
     }
     closePanel(panel) {
@@ -359,7 +368,7 @@ export class Groupview extends CompositeDisposable {
     }
     updateContainer() {
         toggleClass(this.container, 'empty', this.isEmpty);
-        this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
+        this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
             watermark.init({
@@ -371,29 +380,28 @@ export class Groupview extends CompositeDisposable {
             this.watermark = watermark;
             addDisposableListener(this.watermark.element, 'click', () => {
                 if (!this.isActive) {
-                    this.accessor.doSetGroupActive(this.parent);
+                    this.accessor.doSetGroupActive(this.groupPanel);
                 }
             });
-            this.contentContainer.hide();
             this.tabsContainer.hide();
-            this.container.appendChild(this.watermark.element);
-            this.watermark.updateParentGroup(this.parent, true);
+            this.contentContainer.element.appendChild(this.watermark.element);
+            this.watermark.updateParentGroup(this.groupPanel, true);
         }
         if (!this.isEmpty && this.watermark) {
             this.watermark.element.remove();
             this.watermark.dispose();
             this.watermark = undefined;
-            this.contentContainer.show();
             this.tabsContainer.show();
         }
     }
-    canDisplayOverlay(event, target) {
+    canDisplayOverlay(event, position, target) {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {
             return this.accessor.options.showDndOverlay({
                 nativeEvent: event,
                 target,
                 group: this.accessor.getPanel(this.id),
+                position,
                 getData: getPanelData,
             });
         }
@@ -401,7 +409,17 @@ export class Groupview extends CompositeDisposable {
     }
     handleDropEvent(event, position, index) {
         const data = getPanelData();
-        if (data) {
+        if (data && data.viewId === this.accessor.id) {
+            if (data.panelId === null) {
+                // this is a group move dnd event
+                const { groupId } = data;
+                this._onMove.fire({
+                    target: position,
+                    groupId: groupId,
+                    index,
+                });
+                return;
+            }
             const fromSameGroup = this.tabsContainer.indexOf(data.panelId) !== -1;
             if (fromSameGroup && this.tabsContainer.size === 1) {
                 return;

package/dist/esm/groupview/groupviewPanel.d.ts

@@ -3,7 +3,7 @@ import { DockviewComponent } from '../dockview/dockviewComponent';
 import { GridviewPanelApi } from '../api/gridviewPanelApi';
 import { Groupview, GroupOptions, IHeader } from './groupview';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
-import { IDockviewPanel } from './groupPanel';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 export interface IGroupviewPanel extends IGridviewPanel {
     model: Groupview;
     locked: boolean;
@@ -11,8 +11,8 @@ export interface IGroupviewPanel extends IGridviewPanel {
     readonly panels: IDockviewPanel[];
     readonly activePanel: IDockviewPanel | undefined;
 }
-export declare type IGroupviewPanelPublic = IGroupviewPanel;
-export declare type GroupviewPanelApi = GridviewPanelApi;
+export type IGroupviewPanelPublic = IGroupviewPanel;
+export type GroupviewPanelApi = GridviewPanelApi;
 export declare class GroupPanel extends GridviewPanel implements IGroupviewPanel {
     private readonly _model;
     get panels(): IDockviewPanel[];

package/dist/esm/groupview/groupviewPanel.js

@@ -4,10 +4,6 @@ import { GridviewPanel } from '../gridview/gridviewPanel';
 class GroupviewApi extends GridviewPanelApiImpl {
 }
 export class GroupPanel extends GridviewPanel {
-    constructor(accessor, id, options) {
-        super(id, 'groupview_default', new GroupviewApi(id));
-        this._model = new Groupview(this.element, accessor, id, options, this);
-    }
     get panels() {
         return this._model.panels;
     }
@@ -41,6 +37,10 @@ export class GroupPanel extends GridviewPanel {
     get header() {
         return this._model.header;
     }
+    constructor(accessor, id, options) {
+        super(id, 'groupview_default', new GroupviewApi(id));
+        this._model = new Groupview(this.element, accessor, id, options, this);
+    }
     initialize() {
         this._model.initialize();
     }

package/dist/esm/groupview/panel/content.d.ts

@@ -1,6 +1,6 @@
 import { CompositeDisposable, IDisposable } from '../../lifecycle';
 import { Event } from '../../events';
-import { IDockviewPanel } from '../groupPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 export interface IContentContainer extends IDisposable {
     onDidFocus: Event<void>;
     onDidBlur: Event<void>;

package/dist/esm/groupview/panel/content.js

@@ -2,6 +2,9 @@ import { CompositeDisposable, MutableDisposable, } from '../../lifecycle';
 import { Emitter } from '../../events';
 import { trackFocus } from '../../dom';
 export class ContentContainer extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor() {
         super();
         this.disposable = new MutableDisposable();
@@ -19,9 +22,6 @@ export class ContentContainer extends CompositeDisposable {
         // 3) register dragEnd events
         // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
     }
-    get element() {
-        return this._element;
-    }
     show() {
         this.element.style.display = '';
     }

package/dist/esm/groupview/tab.d.ts

@@ -2,23 +2,13 @@ import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { ITabRenderer } from './types';
-import { IDockviewPanel } from './groupPanel';
 import { GroupPanel } from './groupviewPanel';
 import { DroptargetEvent } from '../dnd/droptarget';
-export declare enum MouseEventKind {
-    CLICK = "CLICK"
-}
-export interface LayoutMouseEvent {
-    readonly kind: MouseEventKind;
-    readonly event: MouseEvent;
-    readonly panel?: IDockviewPanel;
-    readonly tab?: boolean;
-}
 export interface ITab {
     readonly panelId: string;
     readonly element: HTMLElement;
     setContent: (element: ITabRenderer) => void;
-    onChanged: Event<LayoutMouseEvent>;
+    onChanged: Event<MouseEvent>;
     onDrop: Event<DroptargetEvent>;
     setActive(isActive: boolean): void;
 }
@@ -30,7 +20,7 @@ export declare class Tab extends CompositeDisposable implements ITab {
     private readonly droptarget;
     private content?;
     private readonly _onChanged;
-    readonly onChanged: Event<LayoutMouseEvent>;
+    readonly onChanged: Event<MouseEvent>;
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
     get element(): HTMLElement;

package/dist/esm/groupview/tab.js

@@ -5,11 +5,10 @@ import { toggleClass } from '../dom';
 import { Droptarget } from '../dnd/droptarget';
 import { DockviewDropTargets } from './dnd';
 import { DragHandler } from '../dnd/abstractDragHandler';
-export var MouseEventKind;
-(function (MouseEventKind) {
-    MouseEventKind["CLICK"] = "CLICK";
-})(MouseEventKind || (MouseEventKind = {}));
 export class Tab extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
@@ -53,25 +52,30 @@ export class Tab extends CompositeDisposable {
              * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
              */
             event.stopPropagation();
-            this._onChanged.fire({ kind: MouseEventKind.CLICK, event });
+            this._onChanged.fire(event);
         }));
         this.droptarget = new Droptarget(this._element, {
-            validOverlays: 'none',
-            canDisplayOverlay: (event) => {
+            acceptedTargetZones: ['center'],
+            canDisplayOverlay: (event, position) => {
+                if (this.group.locked) {
+                    return false;
+                }
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
+                    if (data.panelId === null &&
+                        data.groupId === this.group.id) {
+                        // don't allow group move to drop on self
+                        return false;
+                    }
                     return this.panelId !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
             },
         });
         this.addDisposables(this.droptarget.onDrop((event) => {
             this._onDropped.fire(event);
         }));
     }
-    get element() {
-        return this._element;
-    }
     setActive(isActive) {
         toggleClass(this.element, 'active-tab', isActive);
         toggleClass(this.element, 'inactive-tab', !isActive);