dockview 1.4.1 → 1.5.0

package/dist/esm/gridview/gridviewComponent.js

@@ -39,7 +39,7 @@ export class GridviewComponent extends BaseGrid {
     }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
+            this.gridview.orientation !== options.orientation;
         this._options = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
@@ -75,13 +75,8 @@ export class GridviewComponent extends BaseGrid {
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
     }
     fromJSON(serializedGridview) {
+        this.clear();
         const { grid, activePanel } = serializedGridview;
-        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-        for (const group of groups) {
-            group.disposable.dispose();
-            this.doRemoveGroup(group.value, { skipActive: true });
-        }
-        this.gridview.clear();
         const queue = [];
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
@@ -103,6 +98,7 @@ export class GridviewComponent extends BaseGrid {
                     accessor: this,
                     isVisible: node.visible,
                 }));
+                this._onDidAddGroup.fire(view);
                 this.registerPanel(view);
                 return view;
             },
@@ -117,6 +113,18 @@ export class GridviewComponent extends BaseGrid {
         }
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        const hasActiveGroup = this.activeGroup;
+        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+        for (const group of groups) {
+            group.disposable.dispose();
+            this.doRemoveGroup(group.value, { skipActive: true });
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+        this.gridview.clear();
+    }
     movePanel(panel, options) {
         var _a;
         let relativeLocation;

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

@@ -1,6 +1,6 @@
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { Position } from '../dnd/droptarget';
-import { IDockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { Event } from '../events';
 import { IGridPanelView } from '../gridview/baseComponentGridview';
 import { IViewSize } from '../gridview/gridview';
@@ -9,11 +9,6 @@ import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { IDockviewPanel } from './groupPanel';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
-export declare enum GroupChangeKind2 {
-    ADD_PANEL = "ADD_PANEL",
-    REMOVE_PANEL = "REMOVE_PANEL",
-    PANEL_ACTIVE = "PANEL_ACTIVE"
-}
 export interface DndService {
     canDisplayOverlay(group: IGroupview, event: DragEvent, target: DockviewDropTargets): boolean;
     onDrop(group: IGroupview, event: DragEvent, position: Position, index?: number): void;
@@ -49,14 +44,13 @@ export interface GroupPanelViewState extends CoreGroupOptions {
     id: string;
 }
 export interface GroupviewChangeEvent {
-    readonly kind: GroupChangeKind2;
-    readonly panel?: IDockviewPanel;
+    readonly panel: IDockviewPanel;
 }
 export interface GroupviewDropEvent {
-    nativeEvent: DragEvent;
-    position: Position;
+    readonly nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly index?: number;
     getData(): PanelTransfer | undefined;
-    index?: number;
 }
 export interface IHeader {
     hidden: boolean;
@@ -70,7 +64,9 @@ export interface IGroupview extends IDisposable, IGridPanelView {
     readonly header: IHeader;
     readonly isContentFocused: boolean;
     readonly onDidDrop: Event<GroupviewDropEvent>;
-    readonly onDidGroupChange: Event<GroupviewChangeEvent>;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: boolean;
     isPanelActive: (panel: IDockviewPanel) => boolean;
@@ -102,10 +98,11 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private readonly tabsContainer;
     private readonly contentContainer;
     private readonly dropTarget;
-    private _activePanel?;
+    private _activePanel;
     private watermark?;
     private _isGroupActive;
     private _locked;
+    private _control;
     private mostRecentlyUsed;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
@@ -114,10 +111,14 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private _panels;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
-    private readonly _onDidGroupChange;
-    readonly onDidGroupChange: Event<GroupviewChangeEvent>;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onDidAddPanel;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidRemovePanel;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;
     get locked(): boolean;
@@ -133,7 +134,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     get hasWatermark(): boolean;
     get header(): IHeader;
     get isContentFocused(): boolean;
-    constructor(container: HTMLElement, accessor: IDockviewComponent, id: string, options: GroupOptions, parent: GroupPanel);
+    constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, parent: GroupPanel);
     initialize(): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;
@@ -152,14 +153,15 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     openPanel(panel: IDockviewPanel, options?: {
         index?: number;
         skipFocus?: boolean;
-        skipSetActive?: boolean;
+        skipSetPanelActive?: boolean;
+        skipSetGroupActive?: boolean;
     }): void;
     removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel;
     closeAllPanels(): void;
     closePanel(panel: IDockviewPanel): void;
     private doClose;
     isPanelActive(panel: IDockviewPanel): boolean;
-    updateActions(): void;
+    updateActions(element: HTMLElement | undefined): void;
     setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void;
     layout(width: number, height: number): void;
     private _removePanel;

package/dist/esm/groupview/groupview.js

@@ -7,12 +7,6 @@ import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer } from './panel/content';
 import { TabsContainer } from './titlebar/tabsContainer';
 import { DockviewDropTargets } from './dnd';
-export var GroupChangeKind2;
-(function (GroupChangeKind2) {
-    GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
-    GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
-    GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-})(GroupChangeKind2 || (GroupChangeKind2 = {}));
 export class Groupview extends CompositeDisposable {
     constructor(container, accessor, id, options, parent) {
         super();
@@ -31,12 +25,15 @@ export class Groupview extends CompositeDisposable {
         this._panels = [];
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
-        this._onDidGroupChange = new Emitter();
-        this.onDidGroupChange = this._onDidGroupChange.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.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
         this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
             tabHeight: options.tabHeight,
         });
@@ -48,7 +45,7 @@ export class Groupview extends CompositeDisposable {
                     return false;
                 }
                 const data = getPanelData();
-                if (data) {
+                if (data && data.viewId === this.accessor.id) {
                     const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
@@ -58,7 +55,7 @@ export class Groupview extends CompositeDisposable {
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = !!options.locked;
-        this.addDisposables(this._onMove, this._onDidGroupChange, this.tabsContainer.onDrop((event) => {
+        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);
@@ -130,6 +127,15 @@ export class Groupview extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true, true);
         this.updateContainer();
+        if (this.accessor.options.createGroupControlElement) {
+            this._control = this.accessor.options.createGroupControlElement(this.parent);
+            this.addDisposables(this._control);
+            this._control.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.parent.api,
+            });
+            this.tabsContainer.setActionElement(this._control.element);
+        }
     }
     indexOf(panel) {
         return this.tabsContainer.indexOf(panel.id);
@@ -210,16 +216,21 @@ export class Groupview extends CompositeDisposable {
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetActive = !!options.skipSetActive;
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
         // ensure the group is updated before we fire any events
         panel.updateParentGroup(this.parent, true);
-        if (!skipSetActive && this._activePanel === panel) {
-            this.accessor.doSetGroupActive(this.parent);
+        if (this._activePanel === panel) {
+            if (!skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.parent);
+            }
             return;
         }
-        this.doAddPanel(panel, options.index);
-        if (!skipSetActive) {
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
+        if (!skipSetPanelActive) {
             this.doSetActivePanel(panel);
+        }
+        if (!skipSetGroupActive) {
             this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
         }
         this.updateContainer();
@@ -255,14 +266,8 @@ export class Groupview extends CompositeDisposable {
     isPanelActive(panel) {
         return this._activePanel === panel;
     }
-    updateActions() {
-        var _a, _b;
-        if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
-            this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
-        }
-        else {
-            this.tabsContainer.setActionElement(undefined);
-        }
+    updateActions(element) {
+        this.tabsContainer.setActionElement(element);
     }
     setActive(isGroupActive, skipFocus = false, force = false) {
         var _a, _b;
@@ -318,16 +323,15 @@ export class Groupview extends CompositeDisposable {
         if (this.mostRecentlyUsed.includes(panel)) {
             this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.REMOVE_PANEL,
-            panel,
-        });
+        this._onDidRemovePanel.fire({ panel });
     }
-    doAddPanel(panel, index = this.panels.length) {
+    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.openPanel(panel, index);
-        this.contentContainer.openPanel(panel);
+        if (!skipSetActive) {
+            this.contentContainer.openPanel(panel);
+        }
         this.tabsContainer.show();
         this.contentContainer.show();
         if (hasExistingPanel) {
@@ -336,10 +340,7 @@ export class Groupview extends CompositeDisposable {
         }
         this.updateMru(panel);
         this.panels.splice(index, 0, panel);
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.ADD_PANEL,
-            panel,
-        });
+        this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
         this._activePanel = panel;
@@ -347,10 +348,7 @@ export class Groupview extends CompositeDisposable {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidGroupChange.fire({
-                kind: GroupChangeKind2.PANEL_ACTIVE,
-                panel,
-            });
+            this._onDidActivePanelChange.fire({ panel });
         }
     }
     updateMru(panel) {
@@ -360,7 +358,6 @@ export class Groupview extends CompositeDisposable {
         this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
     }
     updateContainer() {
-        this.updateActions();
         toggleClass(this.container, 'empty', this.isEmpty);
         this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
         if (this.isEmpty && !this.watermark) {
@@ -393,7 +390,12 @@ export class Groupview extends CompositeDisposable {
     canDisplayOverlay(event, target) {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay(event, target);
+            return this.accessor.options.showDndOverlay({
+                nativeEvent: event,
+                target,
+                group: this.accessor.getPanel(this.id),
+                getData: getPanelData,
+            });
         }
         return false;
     }

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

@@ -1,5 +1,5 @@
 import { IFrameworkPart } from '../panel/types';
-import { IDockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { GridviewPanelApi } from '../api/gridviewPanelApi';
 import { Groupview, GroupOptions, IHeader } from './groupview';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
@@ -26,7 +26,7 @@ export declare class GroupPanel extends GridviewPanel implements IGroupviewPanel
     get locked(): boolean;
     set locked(value: boolean);
     get header(): IHeader;
-    constructor(accessor: IDockviewComponent, id: string, options: GroupOptions);
+    constructor(accessor: DockviewComponent, id: string, options: GroupOptions);
     initialize(): void;
     setActive(isActive: boolean): void;
     layout(width: number, height: number): void;

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

@@ -25,6 +25,7 @@ export interface ITab {
 }
 export declare class Tab extends CompositeDisposable implements ITab {
     readonly panelId: string;
+    private readonly accessor;
     private readonly group;
     private readonly _element;
     private readonly droptarget;

package/dist/esm/groupview/tab.js

@@ -14,6 +14,7 @@ export class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
+        this.accessor = accessor;
         this.group = group;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
@@ -24,6 +25,7 @@ export class Tab extends CompositeDisposable {
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
+        toggleClass(this.element, 'inactive-tab', true);
         this.addDisposables(new (class Handler extends DragHandler {
             constructor() {
                 super(...arguments);
@@ -63,7 +65,7 @@ export class Tab extends CompositeDisposable {
             validOverlays: 'none',
             canDisplayOverlay: (event) => {
                 const data = getPanelData();
-                if (data) {
+                if (data && this.accessor.id === data.viewId) {
                     return this.panelId !== data.panelId;
                 }
                 return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);

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

@@ -2,7 +2,7 @@ import { IDisposable, CompositeDisposable } from '../../lifecycle';
 import { Event } from '../../events';
 import { ITab } from '../tab';
 import { IDockviewPanel } from '../groupPanel';
-import { IDockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { GroupPanel } from '../groupviewPanel';
 export interface TabDropIndexEvent {
     event: DragEvent;
@@ -37,8 +37,6 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private readonly voidDropTarget;
     private tabs;
     private selectedIndex;
-    private active;
-    private activePanel;
     private actions;
     private _height;
     private _hidden;
@@ -57,10 +55,10 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     isActive(tab: ITab): boolean;
     at(index: number): ITab;
     indexOf(id: string): number;
-    constructor(accessor: IDockviewComponent, group: GroupPanel, options: {
+    constructor(accessor: DockviewComponent, group: GroupPanel, options: {
         tabHeight?: number;
     });
-    setActive(isGroupActive: boolean): void;
+    setActive(_isGroupActive: boolean): void;
     private addTab;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;

package/dist/esm/groupview/titlebar/tabsContainer.js

@@ -12,7 +12,6 @@ export class TabsContainer extends CompositeDisposable {
         this.group = group;
         this.tabs = [];
         this.selectedIndex = -1;
-        this.active = false;
         this._hidden = false;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
@@ -34,7 +33,7 @@ export class TabsContainer extends CompositeDisposable {
             canDisplayOverlay: (event) => {
                 var _a;
                 const data = getPanelData();
-                if (data) {
+                if (data && this.accessor.id === data.viewId) {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
                 }
@@ -116,8 +115,8 @@ export class TabsContainer extends CompositeDisposable {
     indexOf(id) {
         return this.tabs.findIndex((tab) => tab.value.panelId === id);
     }
-    setActive(isGroupActive) {
-        this.active = isGroupActive;
+    setActive(_isGroupActive) {
+        // noop
     }
     addTab(tab, index = this.tabs.length) {
         if (index < 0 || index > this.tabs.length) {
@@ -178,7 +177,6 @@ export class TabsContainer extends CompositeDisposable {
         }));
         const value = { value: tabToAdd, disposable };
         this.addTab(value, index);
-        this.activePanel = panel;
     }
     closePanel(panel) {
         this.delete(panel.id);

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

@@ -1,4 +1,3 @@
-import { IDisposable } from '../lifecycle';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewPanelApi } from '../api/groupPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
@@ -32,9 +31,6 @@ export interface ITabRenderer extends IPanel {
     init(parameters: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
 }
-export interface IActionsRenderer extends IDisposable {
-    readonly element: HTMLElement;
-}
 export interface IContentRenderer extends IPanel {
     readonly element: HTMLElement;
     readonly actions?: HTMLElement;

package/dist/esm/index.d.ts

@@ -6,12 +6,14 @@ export * from './groupview/groupview';
 export * from './gridview/baseComponentGridview';
 export * from './groupview/panel/content';
 export * from './groupview/tab';
+export * from './groupview/dnd';
 export * from './groupview/types';
 export * from './dockview/options';
 export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
+export { PaneviewComponentOptions } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export * from './groupview/groupview';
 export * from './gridview/baseComponentGridview';
 export * from './groupview/panel/content';
 export * from './groupview/tab';
+export * from './groupview/dnd';
 export * from './groupview/types';
 export * from './dockview/options';
 export * from './dockview/dockviewComponent';

package/dist/esm/paneview/defaultPaneviewHeader.d.ts

@@ -3,6 +3,8 @@ import { CompositeDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
 import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
 export declare class DefaultHeader extends CompositeDisposable implements IPaneHeaderPart {
+    private readonly _expandedIcon;
+    private readonly _collapsedIcon;
     private readonly disposable;
     private readonly _element;
     private readonly _content;
@@ -13,6 +15,7 @@ export declare class DefaultHeader extends CompositeDisposable implements IPaneH
     init(params: PanePanelInitParameter & {
         api: PaneviewPanelApiImpl;
     }): void;
+    private updateIcon;
     update(_params: PanelUpdateEvent): void;
     dispose(): void;
 }

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -1,17 +1,22 @@
 import { addDisposableListener } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { toggleClass } from '../dom';
+import { createChevronRightButton, createExpandMoreButton } from '../svg';
 export class DefaultHeader extends CompositeDisposable {
     constructor() {
         super();
+        this._expandedIcon = createExpandMoreButton();
+        this._collapsedIcon = createChevronRightButton();
         this.disposable = new MutableDisposable();
         this.apiRef = { api: null };
         this._element = document.createElement('div');
         this.element.className = 'default-header';
         this._content = document.createElement('span');
-        this._expander = document.createElement('a');
-        this.element.appendChild(this._content);
+        this._expander = document.createElement('div');
+        this._expander.className = 'dockview-pane-header-icon';
         this.element.appendChild(this._expander);
-        this.addDisposables(addDisposableListener(this._expander, 'click', () => {
+        this.element.appendChild(this._content);
+        this.addDisposables(addDisposableListener(this._element, 'click', () => {
             var _a;
             (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
         }));
@@ -22,11 +27,32 @@ export class DefaultHeader extends CompositeDisposable {
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '<' : '>';
-        this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '<' : '>';
+        this.updateIcon();
+        this.disposable.value = params.api.onDidExpansionChange(() => {
+            this.updateIcon();
         });
     }
+    updateIcon() {
+        var _a;
+        const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
+        toggleClass(this._expander, 'collapsed', !isExpanded);
+        if (isExpanded) {
+            if (this._expander.contains(this._collapsedIcon)) {
+                this._collapsedIcon.remove();
+            }
+            if (!this._expander.contains(this._expandedIcon)) {
+                this._expander.appendChild(this._expandedIcon);
+            }
+        }
+        else {
+            if (this._expander.contains(this._expandedIcon)) {
+                this._expandedIcon.remove();
+            }
+            if (!this._expander.contains(this._collapsedIcon)) {
+                this._expander.appendChild(this._collapsedIcon);
+            }
+        }
+    }
     update(_params) {
         //
     }

package/dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -1,17 +1,19 @@
 import { PaneTransfer } from '../dnd/dataTransfer';
 import { DroptargetEvent } from '../dnd/droptarget';
 import { Orientation } from '../splitview/core/splitview';
+import { IPaneviewComponent } from './paneviewComponent';
 import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
 export interface PaneviewDropEvent2 extends DroptargetEvent {
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
+    private readonly accessor;
     private handler;
     private target;
     private readonly _onDidDrop;
     readonly onDidDrop: import("../events").Event<PaneviewDropEvent2>;
-    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
+    constructor(accessor: IPaneviewComponent, id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
     private initDragFeatures;
     private onDrop;
 }

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -4,8 +4,9 @@ import { Droptarget, Position } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { PaneviewPanel, } from './paneviewPanel';
 export class DraggablePaneviewPanel extends PaneviewPanel {
-    constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
+    constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
         super(id, component, headerComponent, orientation, isExpanded, true);
+        this.accessor = accessor;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         if (!disableDnd) {
@@ -17,10 +18,11 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
             return;
         }
         const id = this.id;
+        const accessorId = this.accessor.id;
         this.header.draggable = true;
         this.handler = new (class PaneDragHandler extends DragHandler {
             getData() {
-                LocalSelectionTransfer.getInstance().setData([new PaneTransfer('paneview', id)], PaneTransfer.prototype);
+                LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                 return {
                     dispose: () => {
                         LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
@@ -30,12 +32,22 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         })(this.header);
         this.target = new Droptarget(this.element, {
             validOverlays: 'vertical',
-            canDisplayOverlay: () => {
+            canDisplayOverlay: (event) => {
                 const data = getPaneData();
-                if (!data) {
-                    return true;
+                if (data) {
+                    if (data.paneId !== this.id &&
+                        data.viewId === this.accessor.id) {
+                        return true;
+                    }
                 }
-                return data.paneId !== this.id;
+                if (this.accessor.options.showDndOverlay) {
+                    return this.accessor.options.showDndOverlay({
+                        nativeEvent: event,
+                        getData: getPaneData,
+                        panel: this,
+                    });
+                }
+                return false;
             },
         });
         this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -44,8 +56,10 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
     }
     onDrop(event) {
         const data = getPaneData();
-        if (!data) {
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+        if (!data || data.viewId !== this.accessor.id) {
+            // if there is no local drag event for this panel
+            // or if the drag event was creating by another Paneview instance
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
             return;
         }
         const containerApi = this._params
@@ -53,7 +67,8 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         const panelId = data.paneId;
         const existingPanel = containerApi.getPanel(panelId);
         if (!existingPanel) {
-            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            // if the panel doesn't exist
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
             return;
         }
         const allPanels = containerApi.panels;