dockview 1.0.1 → 1.1.0

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

@@ -4,21 +4,17 @@ import { PanelApiImpl } from '../api/panelApi';
 export interface BasePanelViewState {
     id: string;
     component: string;
-    params?: {
-        [key: string]: any;
-    };
-    state?: {
-        [key: string]: any;
-    };
+    params?: Record<string, any>;
 }
 export interface BasePanelViewExported<T extends PanelApiImpl> {
     readonly id: string;
     readonly api: T;
     readonly width: number;
     readonly height: number;
+    readonly params: Record<string, any> | undefined;
     focus(): void;
     toJSON(): object;
-    update(params: PanelUpdateEvent): void;
+    update(event: PanelUpdateEvent): void;
 }
 export declare abstract class BasePanelView<T extends PanelApiImpl> extends CompositeDisposable implements IPanel, BasePanelViewExported<T> {
     readonly id: string;
@@ -28,7 +24,7 @@ export declare abstract class BasePanelView<T extends PanelApiImpl> extends Comp
     private _width;
     private _element;
     protected part?: IFrameworkPart;
-    protected params?: PanelInitParameters;
+    protected _params?: PanelInitParameters;
     /**
      * Provide an IFrameworkPart that will determine the rendered UI of this view piece.
      */
@@ -36,6 +32,7 @@ export declare abstract class BasePanelView<T extends PanelApiImpl> extends Comp
     get element(): HTMLElement;
     get width(): number;
     get height(): number;
+    get params(): Record<string, any> | undefined;
     constructor(id: string, component: string, api: T);
     focus(): void;
     layout(width: number, height: number): void;

package/dist/esm/gridview/basePanelView.js

@@ -30,6 +30,10 @@ export class BasePanelView extends CompositeDisposable {
     get height() {
         return this._height;
     }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
     focus() {
         this.api._onFocusEvent.fire();
     }
@@ -38,29 +42,27 @@ export class BasePanelView extends CompositeDisposable {
         this._height = height;
         this.api._onDidPanelDimensionChange.fire({ width, height });
         if (this.part) {
-            if (this.params) {
-                this.part.update(this.params.params);
+            if (this._params) {
+                this.part.update(this._params.params);
             }
         }
     }
     init(parameters) {
-        this.params = parameters;
+        this._params = parameters;
         this.part = this.getComponent();
     }
     update(event) {
         var _a, _b;
-        this.params = Object.assign(Object.assign({}, this.params), { params: Object.assign(Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-        (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this.params.params });
+        this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+        (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
     }
     toJSON() {
         var _a, _b;
-        const state = this.api.getState();
-        const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+        const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
         return {
             id: this.id,
             component: this.component,
             params: Object.keys(params).length > 0 ? params : undefined,
-            state: Object.keys(state).length === 0 ? undefined : state,
         };
     }
     dispose() {

package/dist/esm/gridview/branchNode.js

@@ -49,7 +49,7 @@ export class BranchNode extends CompositeDisposable {
                 proportionalLayout,
             });
         }
-        this.addDisposables(this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire(undefined);
         }));
         this.setupChildrenEvents();

package/dist/esm/gridview/gridview.js

@@ -9,6 +9,15 @@ import { LeafNode } from './leafNode';
 import { BranchNode } from './branchNode';
 import { Emitter } from '../events';
 import { MutableDisposable } from '../lifecycle';
+function findLeaf(candiateNode, last) {
+    if (candiateNode instanceof LeafNode) {
+        return candiateNode;
+    }
+    if (candiateNode instanceof BranchNode) {
+        return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+    }
+    throw new Error('invalid node');
+}
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
         const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
@@ -147,13 +156,13 @@ export class Gridview {
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
-        const height = json.height;
+        const height = orientation === Orientation.VERTICAL ? json.height : json.width;
         this._deserialize(json.root, orientation, deserializer, height);
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
+        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
     }
-    _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -163,7 +172,9 @@ export class Gridview {
                     visible: serializedChild.visible,
                 };
             });
-            result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, orthogonalSize, children);
+            // HORIZONTAL => height=orthogonalsize width=size
+            // VERTICAL => height=size width=orthogonalsize
+            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -224,15 +235,6 @@ export class Gridview {
         if (!(node instanceof LeafNode)) {
             throw new Error('invalid location');
         }
-        const findLeaf = (candiateNode, last) => {
-            if (candiateNode instanceof LeafNode) {
-                return candiateNode;
-            }
-            if (candiateNode instanceof BranchNode) {
-                return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-            }
-            throw new Error('invalid node');
-        };
         for (let i = path.length - 1; i > -1; i--) {
             const n = path[i];
             const l = location[i] || 0;
@@ -329,15 +331,14 @@ export class Gridview {
         }
         parent.removeChild(index, sizing);
         if (parent.children.length === 0) {
-            // throw new Error('Invalid grid state');
             return node.view;
         }
         if (parent.children.length > 1) {
             return node.view;
         }
+        const sibling = parent.children[0];
         if (pathToParent.length === 0) {
             // parent is root
-            const sibling = parent.children[0];
             if (sibling instanceof LeafNode) {
                 return node.view;
             }
@@ -348,7 +349,6 @@ export class Gridview {
         }
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
-        const sibling = parent.children[0];
         const isSiblingVisible = parent.isChildVisible(0);
         parent.removeChild(0, sizing);
         const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));

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

@@ -7,6 +7,7 @@ import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPan
 import { BaseComponentOptions } from '../panel/types';
 import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { Orientation, Sizing } from '../splitview/core/splitview';
+import { Event } from '../events';
 interface PanelReference {
     api: GridviewPanelApiImpl;
 }
@@ -37,6 +38,7 @@ export interface IGridPanelComponentView extends IGridPanelView {
 export declare type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
+    readonly onDidLayoutFromJSON: Event<void>;
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
     addPanel(options: AddComponentOptions): void;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
@@ -55,6 +57,8 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
 export declare class GridviewComponent extends BaseGrid<GridviewPanel> implements IGridviewComponent {
     private _options;
     private _deserializer;
+    private readonly _onDidLayoutfromJSON;
+    readonly onDidLayoutFromJSON: Event<void>;
     get orientation(): Orientation;
     set orientation(value: Orientation);
     get options(): GridviewComponentOptions;

package/dist/esm/gridview/gridviewComponent.js

@@ -5,6 +5,7 @@ import { CompositeDisposable } from '../lifecycle';
 import { BaseGrid, GroupChangeKind, toTarget, } from './baseComponentGridview';
 import { GridviewApi } from '../api/component.api';
 import { createComponent } from '../panel/componentFactory';
+import { Emitter } from '../events';
 export class GridviewComponent extends BaseGrid {
     constructor(element, options) {
         super(element, {
@@ -12,6 +13,8 @@ export class GridviewComponent extends BaseGrid {
             orientation: options.orientation,
             styles: options.styles,
         });
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
         this._options = options;
         if (!this.options.components) {
             this.options.components = {};
@@ -120,6 +123,7 @@ export class GridviewComponent extends BaseGrid {
             }
         }
         this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
+        this._onDidLayoutfromJSON.fire();
     }
     movePanel(panel, options) {
         var _a;
@@ -234,5 +238,6 @@ export class GridviewComponent extends BaseGrid {
     }
     dispose() {
         super.dispose();
+        this._onDidLayoutfromJSON.dispose();
     }
 }

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

@@ -50,7 +50,6 @@ export declare abstract class GridviewPanel extends BasePanelView<GridviewPanelA
     init(parameters: GridviewInitParameters): void;
     private updateConstraints;
     toJSON(): GridPanelViewState;
-    dispose(): void;
 }
 export interface GridPanelViewState extends BasePanelViewState {
     minimumHeight?: number;

package/dist/esm/gridview/gridviewPanel.js

@@ -15,12 +15,12 @@ export class GridviewPanel extends BasePanelView {
         this._snap = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this.api.onVisibilityChange((event) => {
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this.params;
+            const { containerApi } = this._params;
             containerApi.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this.params;
+            const { containerApi } = this._params;
             containerApi.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
@@ -135,7 +135,4 @@ export class GridviewPanel extends BasePanelView {
         const minimum = (value) => (value <= 0 ? undefined : value);
         return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
     }
-    dispose() {
-        super.dispose();
-    }
 }

package/dist/esm/gridview/leafNode.js

@@ -92,6 +92,7 @@ export class LeafNode {
         this.view.layout(this.width, this.height);
     }
     dispose() {
+        this._onDidChange.dispose();
         this._disposable.dispose();
     }
 }

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

@@ -1,5 +1,4 @@
 import { DockviewPanelApi } from '../api/groupPanelApi';
-import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { HeaderPartInitParameters } from './types';
 import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../panel/types';
@@ -20,10 +19,7 @@ export interface IGroupPanel extends IDisposable, IPanel {
     readonly title: string;
     readonly suppressClosable: boolean;
     updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void;
-    setDirty(isDirty: boolean): void;
-    close?(): Promise<boolean>;
     init(params: IGroupPanelInitParameters): void;
-    onDidStateChange: Event<void>;
     toJSON(): GroupviewPanelState;
     update(event: GroupPanelUpdateEvent): void;
 }
@@ -35,7 +31,4 @@ export interface GroupviewPanelState {
         [key: string]: any;
     };
     suppressClosable?: boolean;
-    state?: {
-        [key: string]: any;
-    };
 }

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

@@ -11,8 +11,7 @@ import { DockviewDropTargets } from './dnd';
 export declare enum GroupChangeKind2 {
     ADD_PANEL = "ADD_PANEL",
     REMOVE_PANEL = "REMOVE_PANEL",
-    PANEL_ACTIVE = "PANEL_ACTIVE",
-    GROUP_ACTIVE = "GROUP_ACTIVE"
+    PANEL_ACTIVE = "PANEL_ACTIVE"
 }
 export interface DndService {
     canDisplayOverlay(group: IGroupview, event: DragEvent, target: DockviewDropTargets): boolean;
@@ -48,20 +47,26 @@ export interface GroupPanelViewState {
     activeView?: string;
     id: string;
 }
+export interface GroupviewDropEvent {
+    nativeEvent: DragEvent;
+    position: Position;
+    index?: number;
+}
 export interface IGroupview extends IDisposable, IGridPanelView {
     readonly isActive: boolean;
     readonly size: number;
     readonly panels: IGroupPanel[];
     readonly tabHeight: number | undefined;
+    readonly activePanel: IGroupPanel | undefined;
+    readonly onDidDrop: Event<GroupviewDropEvent>;
     isPanelActive: (panel: IGroupPanel) => boolean;
-    activePanel: IGroupPanel | undefined;
     indexOf(panel: IGroupPanel): number;
     openPanel(panel: IGroupPanel, options?: {
         index?: number;
         skipFocus?: boolean;
     }): void;
-    closePanel(panel: IGroupPanel): Promise<boolean>;
-    closeAllPanels(): Promise<boolean>;
+    closePanel(panel: IGroupPanel): void;
+    closeAllPanels(): void;
     containsPanel(panel: IGroupPanel): boolean;
     removePanel: (panelOrId: IGroupPanel | string) => IGroupPanel;
     onDidGroupChange: Event<GroupviewChangeEvent>;
@@ -100,6 +105,8 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     readonly onMove: Event<GroupMoveEvent>;
     private readonly _onDidGroupChange;
     readonly onDidGroupChange: Event<GroupviewChangeEvent>;
+    private readonly _onDidDrop;
+    readonly onDidDrop: Event<GroupviewDropEvent>;
     get element(): HTMLElement;
     get activePanel(): IGroupPanel | undefined;
     get tabHeight(): number | undefined;
@@ -134,8 +141,8 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
         skipFocus?: boolean;
     }): void;
     removePanel(groupItemOrId: IGroupPanel | string): IGroupPanel;
-    closeAllPanels(): Promise<boolean>;
-    closePanel: (panel: IGroupPanel) => Promise<boolean>;
+    closeAllPanels(): void;
+    closePanel(panel: IGroupPanel): void;
     private doClose;
     isPanelActive(panel: IGroupPanel): boolean;
     updateActions(): void;
@@ -147,7 +154,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(dragOverEvent: DragEvent, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean;
     private handleDropEvent;
     dispose(): void;
 }

package/dist/esm/groupview/groupview.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Droptarget, Position } from '../dnd/droptarget';
@@ -21,7 +12,6 @@ export var GroupChangeKind2;
     GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
     GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
     GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-    GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
 })(GroupChangeKind2 || (GroupChangeKind2 = {}));
 export class Groupview extends CompositeDisposable {
     constructor(container, accessor, id, options, parent) {
@@ -42,15 +32,10 @@ export class Groupview extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidGroupChange = new Emitter();
         this.onDidGroupChange = this._onDidGroupChange.event;
-        this.closePanel = (panel) => __awaiter(this, void 0, void 0, function* () {
-            if (panel.close && !(yield panel.close())) {
-                return false;
-            }
-            this.doClose(panel);
-            return true;
-        });
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
         this.container.classList.add('groupview');
-        this.addDisposables(this._onMove, this._onDidGroupChange);
+        this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
         this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
             tabHeight: options.tabHeight,
         });
@@ -72,9 +57,9 @@ export class Groupview extends CompositeDisposable {
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.parent, true);
         }), this.contentContainer.onDidBlur(() => {
-            // this._activePanel?.api._ondid
+            // noop
         }), this.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.event, event.position);
+            this.handleDropEvent(event.nativeEvent, event.position);
         }));
     }
     get element() {
@@ -207,6 +192,8 @@ export class Groupview extends CompositeDisposable {
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
+        // ensure the group is updated before we fire any events
+        panel.updateParentGroup(this.parent, true);
         if (this._activePanel === panel) {
             this.accessor.doSetGroupActive(this.parent);
             return;
@@ -227,43 +214,19 @@ export class Groupview extends CompositeDisposable {
         return this._removePanel(panelToRemove);
     }
     closeAllPanels() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const index = this._activePanel
-                ? this.panels.indexOf(this._activePanel)
-                : -1;
-            if (this._activePanel && index > -1) {
-                if (this.panels.indexOf(this._activePanel) < 0) {
-                    console.warn('active panel not tracked');
-                }
-                const canClose = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close) || (yield this._activePanel.close());
-                if (!canClose) {
-                    return false;
-                }
-            }
-            for (let i = 0; i < this.panels.length; i++) {
-                if (i === index) {
-                    continue;
-                }
-                const panel = this.panels[i];
-                this.openPanel(panel);
-                if (panel.close) {
-                    const canClose = yield panel.close();
-                    if (!canClose) {
-                        return false;
-                    }
-                }
+        if (this.panels.length > 0) {
+            // take a copy since we will be edting the array as we iterate through
+            const arrPanelCpy = [...this.panels];
+            for (const panel of arrPanelCpy) {
+                this.doClose(panel);
             }
-            if (this.panels.length > 0) {
-                // take a copy since we will be edting the array as we iterate through
-                const arrPanelCpy = [...this.panels];
-                yield Promise.all(arrPanelCpy.map((p) => this.doClose(p)));
-            }
-            else {
-                this.accessor.removeGroup(this.parent);
-            }
-            return true;
-        });
+        }
+        else {
+            this.accessor.removeGroup(this.parent);
+        }
+    }
+    closePanel(panel) {
+        this.doClose(panel);
     }
     doClose(panel) {
         this.accessor.removePanel(panel);
@@ -406,8 +369,11 @@ export class Groupview extends CompositeDisposable {
             this.tabsContainer.show();
         }
     }
-    canDisplayOverlay(dragOverEvent, target) {
+    canDisplayOverlay(event, target) {
         // custom overlay handler
+        if (this.accessor.options.showDndOverlay) {
+            return this.accessor.options.showDndOverlay(event, target);
+        }
         return false;
     }
     handleDropEvent(event, position, index) {
@@ -433,7 +399,7 @@ export class Groupview extends CompositeDisposable {
             });
         }
         else {
-            // custom drop handler
+            this._onDidDrop.fire({ nativeEvent: event, position, index });
         }
     }
     dispose() {

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

@@ -1,8 +1,11 @@
 import { IFrameworkPart } from '../panel/types';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { Groupview, GroupOptions } from './groupview';
-import { GridviewPanel } from '../gridview/gridviewPanel';
-export declare class GroupviewPanel extends GridviewPanel {
+import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
+export interface IGroupviewPanel extends IGridviewPanel {
+    model: Groupview;
+}
+export declare class GroupviewPanel extends GridviewPanel implements IGroupviewPanel {
     private readonly _model;
     get model(): Groupview;
     get minimumHeight(): number;

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

@@ -12,6 +12,7 @@ export class ContentContainer extends CompositeDisposable {
         this._element = document.createElement('div');
         this._element.className = 'content-container';
         this._element.tabIndex = -1;
+        this.addDisposables(this._onDidFocus, this._onDidBlur);
         // for hosted containers
         // 1) register a drop target on the host
         // 2) register window dragStart events to disable pointer events

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

@@ -10,33 +10,30 @@ export declare enum MouseEventKind {
     CONTEXT_MENU = "CONTEXT_MENU"
 }
 export interface LayoutMouseEvent {
-    kind: MouseEventKind;
-    event: MouseEvent;
-    panel?: IGroupPanel;
-    tab?: boolean;
+    readonly kind: MouseEventKind;
+    readonly event: MouseEvent;
+    readonly panel?: IGroupPanel;
+    readonly tab?: boolean;
 }
 export interface ITab {
-    panelId: string;
-    element: HTMLElement;
+    readonly panelId: string;
+    readonly element: HTMLElement;
     setContent: (element: ITabRenderer) => void;
     onChanged: Event<LayoutMouseEvent>;
     onDrop: Event<DroptargetEvent>;
     setActive(isActive: boolean): void;
 }
 export declare class Tab extends CompositeDisposable implements ITab {
-    panelId: string;
-    private readonly accessor;
-    private group;
-    private _element;
-    private droptarget;
+    readonly panelId: string;
+    private readonly group;
+    private readonly _element;
+    private readonly droptarget;
     private content?;
     private readonly _onChanged;
     readonly onChanged: Event<LayoutMouseEvent>;
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
-    private readonly panelTransfer;
     get element(): HTMLElement;
-    private iframes;
     constructor(panelId: string, accessor: IDockviewComponent, group: GroupviewPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;

package/dist/esm/groupview/tab.js

@@ -1,9 +1,10 @@
 import { addDisposableListener, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../dnd/dataTransfer';
-import { getElementsByTagName, toggleClass } from '../dom';
+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";
@@ -13,42 +14,34 @@ 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;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-        this.iframes = [];
         this.addDisposables(this._onChanged, this._onDropped);
         this._element = document.createElement('div');
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-            this.iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'none';
+        this.addDisposables(new (class Handler extends DragHandler {
+            constructor() {
+                super(...arguments);
+                this.panelTransfer = LocalSelectionTransfer.getInstance();
             }
-            this.element.classList.add('dragged');
-            setTimeout(() => this.element.classList.remove('dragged'), 0);
-            this.panelTransfer.setData([
-                new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-            ], PanelTransfer.prototype);
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
+            getData() {
+                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
             }
-        }), addDisposableListener(this._element, 'dragend', (ev) => {
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'auto';
+            dispose() {
+                //
             }
-            this.iframes = [];
-            this.panelTransfer.clearData(PanelTransfer.prototype);
-        }), addDisposableListener(this._element, 'mousedown', (event) => {
+        })(this._element));
+        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }