chore: tests and docs

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -13,6 +13,10 @@ import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import { fireEvent } from '@testing-library/dom';
 import { getPanelData } from '../../dnd/dataTransfer';
+import {
+    GroupDragEvent,
+    TabDragEvent,
+} from '../../dockview/components/titlebar/tabsContainer';
 
 class PanelContentPartTest implements IContentRenderer {
     element: HTMLElement = document.createElement('div');
@@ -3979,4 +3983,84 @@ describe('dockviewComponent', () => {
         });
         expect(showDndOverlay).toBeCalledTimes(5);
     });
+
+    test('that dragging a tab triggers onWillDragPanel', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const tabDragEvents: TabDragEvent[] = [];
+        const groupDragEvents: GroupDragEvent[] = [];
+
+        dockview.onWillDragPanel((event) => {
+            tabDragEvents.push(event);
+        });
+        dockview.onWillDragGroup((event) => {
+            groupDragEvents.push(event);
+        });
+
+        const el = dockview.element.querySelector('.tab')!;
+        expect(el).toBeTruthy();
+
+        fireEvent.dragStart(el);
+
+        expect(tabDragEvents.length).toBe(1);
+        expect(groupDragEvents.length).toBe(0);
+    });
+
+    test('that dragging a group triggers onWillDragGroup', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        const tabDragEvents: TabDragEvent[] = [];
+        const groupDragEvents: GroupDragEvent[] = [];
+
+        dockview.onWillDragPanel((event) => {
+            tabDragEvents.push(event);
+        });
+        dockview.onWillDragGroup((event) => {
+            groupDragEvents.push(event);
+        });
+
+        const el = dockview.element.querySelector('.void-container')!;
+        expect(el).toBeTruthy();
+
+        fireEvent.dragStart(el);
+
+        expect(tabDragEvents.length).toBe(0);
+        expect(groupDragEvents.length).toBe(1);
+    });
 });

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -155,10 +155,10 @@ export class DockviewComponent
     private _options: Exclude<DockviewComponentOptions, 'orientation'>;
     private watermark: IWatermarkRenderer | null = null;
 
-    readonly _onWillDragPanel = new Emitter<TabDragEvent>();
+    private readonly _onWillDragPanel = new Emitter<TabDragEvent>();
     readonly onWillDragPanel: Event<TabDragEvent> = this._onWillDragPanel.event;
 
-    readonly _onWillDragGroup = new Emitter<GroupDragEvent>();
+    private readonly _onWillDragGroup = new Emitter<GroupDragEvent>();
     readonly onWillDragGroup: Event<GroupDragEvent> =
         this._onWillDragGroup.event;
 

packages/docs/docs/components/dockview.mdx

@@ -365,6 +365,10 @@ return (
 );
 ```
 
+### Intercepting Drag Events
+
+You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
+
 <MultiFrameworkContainer sandboxId="dnd-dockview" react={DndDockview} />
 
 ### Third Party Dnd Libraries

packages/docs/sandboxes/dnd-dockview/src/app.tsx

@@ -38,7 +38,7 @@ const DraggableElement = () => (
         }}
         draggable={true}
     >
-        Drag me
+        Drag me into the dock
     </span>
 );
 
@@ -162,7 +162,17 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         >
             <div style={{ margin: '2px 0px' }}>
                 <DraggableElement />
-                <div onDrop={onDrop}>Inspect Data Transfer</div>
+                <div
+                    style={{
+                        padding: '0px 4px',
+                        backgroundColor: 'black',
+                        borderRadius: '2px',
+                        color: 'white',
+                    }}
+                    onDrop={onDrop}
+                >
+                    Drop a tab or group here to inspect the attached metadata
+                </div>
             </div>
             <DockviewReact
                 components={components}