temp

packages/dockview/src/dnd/abstractDragHandler.ts

@@ -1,14 +1,15 @@
+import { MutableDisposable } from '..';
 import { getElementsByTagName } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 
 export abstract class DragHandler extends CompositeDisposable {
-    private iframes: HTMLElement[] = [];
+    private readonly disposable = new MutableDisposable();
 
     private readonly _onDragStart = new Emitter<void>();
     readonly onDragStart = this._onDragStart.event;
 
-    private disposable: IDisposable | undefined;
+    private iframes: HTMLElement[] = [];
 
     constructor(private readonly el: HTMLElement) {
         super();
@@ -32,8 +33,11 @@ export abstract class DragHandler extends CompositeDisposable {
                 this.el.classList.add('dragged');
                 setTimeout(() => this.el.classList.remove('dragged'), 0);
 
-                this.disposable?.dispose();
+                this.disposable.value = this.getData();
-                this.disposable = this.getData();
+
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                }
             }),
             addDisposableListener(this.el, 'dragend', (ev) => {
                 for (const iframe of this.iframes) {
@@ -41,8 +45,7 @@ export abstract class DragHandler extends CompositeDisposable {
                 }
                 this.iframes = [];
 
-                this.disposable?.dispose();
+                this.disposable.dispose();
-                this.disposable = undefined;
             })
         );
     }

packages/dockview/src/groupview/tab.ts

@@ -1,17 +1,18 @@
 import { addDisposableListener, Emitter, Event } from '../events';
-import { CompositeDisposable } from '../lifecycle';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
 import {
     getPanelData,
     LocalSelectionTransfer,
     PanelTransfer,
 } from '../dnd/dataTransfer';
-import { getElementsByTagName, toggleClass } from '../dom';
+import { toggleClass } from '../dom';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { ITabRenderer } from './types';
 import { IGroupPanel } from './groupPanel';
 import { GroupviewPanel } from './groupviewPanel';
 import { DroptargetEvent, Droptarget } from '../dnd/droptarget';
 import { DockviewDropTargets } from './dnd';
+import { DragHandler } from '../dnd/abstractDragHandler';
 
 export enum MouseEventKind {
     CLICK = 'CLICK',
@@ -19,15 +20,15 @@ export enum MouseEventKind {
 }
 
 export interface LayoutMouseEvent {
-    kind: MouseEventKind;
+    readonly kind: MouseEventKind;
-    event: MouseEvent;
+    readonly event: MouseEvent;
-    panel?: IGroupPanel;
+    readonly panel?: IGroupPanel;
-    tab?: boolean;
+    readonly tab?: boolean;
 }
 
 export interface ITab {
-    panelId: string;
+    readonly panelId: string;
-    element: HTMLElement;
+    readonly element: HTMLElement;
     setContent: (element: ITabRenderer) => void;
     onChanged: Event<LayoutMouseEvent>;
     onDrop: Event<DroptargetEvent>;
@@ -35,8 +36,8 @@ export interface ITab {
 }
 
 export class Tab extends CompositeDisposable implements ITab {
-    private _element: HTMLElement;
+    private readonly _element: HTMLElement;
-    private droptarget: Droptarget;
+    private readonly droptarget: Droptarget;
     private content?: ITabRenderer;
 
     private readonly _onChanged = new Emitter<LayoutMouseEvent>();
@@ -45,19 +46,14 @@ export class Tab extends CompositeDisposable implements ITab {
     private readonly _onDropped = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDropped.event;
 
-    private readonly panelTransfer =
-        LocalSelectionTransfer.getInstance<PanelTransfer>();
-
     public get element() {
         return this._element;
     }
 
-    private iframes: HTMLElement[] = [];
-
     constructor(
-        public panelId: string,
+        public readonly panelId: string,
-        private readonly accessor: IDockviewComponent,
+        accessor: IDockviewComponent,
-        private group: GroupviewPanel
+        private readonly group: GroupviewPanel
     ) {
         super();
 
@@ -69,42 +65,32 @@ export class Tab extends CompositeDisposable implements ITab {
         this._element.draggable = true;
 
         this.addDisposables(
-            addDisposableListener(this._element, 'dragstart', (event) => {
+            new (class Handler extends DragHandler {
-                this.iframes = [
+                private readonly panelTransfer =
-                    ...getElementsByTagName('iframe'),
+                    LocalSelectionTransfer.getInstance<PanelTransfer>();
-                    ...getElementsByTagName('webview'),
-                ];
-
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-
-                this.element.classList.add('dragged');
-                setTimeout(() => this.element.classList.remove('dragged'), 0);
 
+                getData(): IDisposable {
                     this.panelTransfer.setData(
-                    [
+                        [new PanelTransfer(accessor.id, group.id, panelId)],
-                        new PanelTransfer(
-                            this.accessor.id,
-                            this.group.id,
-                            this.panelId
-                        ),
-                    ],
                         PanelTransfer.prototype
                     );
 
-                if (event.dataTransfer) {
+                    return {
-                    event.dataTransfer.effectAllowed = 'move';
+                        dispose: () => {
+                            this.panelTransfer.clearData(
+                                PanelTransfer.prototype
+                            );
+                        },
+                    };
                 }
-            }),
-            addDisposableListener(this._element, 'dragend', (ev) => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
 
-                this.panelTransfer.clearData(PanelTransfer.prototype);
+                public dispose(): void {
-            }),
+                    //
+                }
+            })(this._element)
+        );
+
+        this.addDisposables(
             addDisposableListener(this._element, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;

packages/dockview/src/lifecycle.ts

@@ -48,6 +48,7 @@ export class MutableDisposable implements IDisposable {
     public dispose() {
         if (this._disposable) {
             this._disposable.dispose();
+            this._disposable = Disposable.NONE;
         }
     }
 }