feat : drag intercept examples

packages/dockview-core/src/api/component.api.ts

@@ -38,6 +38,10 @@ import {
 import { Emitter, Event } from '../events';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
 import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import {
+    GroupDragEvent,
+    TabDragEvent,
+} from '../dockview/components/titlebar/tabsContainer';
 
 export interface CommonApi<T = any> {
     readonly height: number;
@@ -118,7 +122,9 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.layout(width, height);
     }
 
-    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddSplitviewComponentOptions<T>
+    ): ISplitviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -213,7 +219,9 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         this.component.layout(width, height);
     }
 
-    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddPaneviewComponentOptions<T>
+    ): IPaneviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -297,7 +305,9 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
         this.component.layout(width, height, force);
     }
 
-    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddComponentOptions<T>
+    ): IGridviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -402,6 +412,14 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.onDidDrop;
     }
 
+    get onWillDragGroup(): Event<GroupDragEvent> {
+        return this.component.onWillDragGroup;
+    }
+
+    get onWillDragPanel(): Event<TabDragEvent> {
+        return this.component.onWillDragPanel;
+    }
+
     get panels(): IDockviewPanel[] {
         return this.component.panels;
     }
@@ -432,7 +450,9 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         this.component.layout(width, height, force);
     }
 
-    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddPanelOptions<T>
+    ): IDockviewPanel {
         return this.component.addPanel(options);
     }
 

packages/dockview-core/src/dnd/abstractDragHandler.ts

@@ -66,6 +66,9 @@ export abstract class DragHandler extends CompositeDisposable {
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
 
+                    const hasData = event.dataTransfer.items.length > 0;
+
+                    if (!hasData) {
                         /**
                          * Although this is not used by dockview many third party dnd libraries will check
                          * dataTransfer.types to determine valid drag events.
@@ -80,6 +83,7 @@ export abstract class DragHandler extends CompositeDisposable {
                             '__dockview_internal_drag_event__'
                         );
                     }
+                }
             }),
             addDisposableListener(this.el, 'dragend', () => {
                 this.pointerEventsDisposable.dispose();

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

@@ -1,4 +1,5 @@
 import {
+    DockviewApi,
     DockviewDndOverlayEvent,
     DockviewDropEvent,
     DockviewReact,
@@ -42,8 +43,14 @@ const DraggableElement = () => (
 );
 
 const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
-    const onReady = (event: DockviewReadyEvent) => {
-        event.api.addPanel({
+    const [api, setApi] = React.useState<DockviewApi>();
+
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
+
+        api.addPanel({
             id: 'panel_1',
             component: 'default',
             params: {
@@ -51,7 +58,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             },
         });
 
-        event.api.addPanel({
+        api.addPanel({
             id: 'panel_2',
             component: 'default',
             params: {
@@ -59,7 +66,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             },
         });
 
-        event.api.addPanel({
+        api.addPanel({
             id: 'panel_3',
             component: 'default',
             params: {
@@ -67,7 +74,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             },
         });
 
-        event.api.addPanel({
+        api.addPanel({
             id: 'panel_4',
             component: 'default',
             params: {
@@ -75,6 +82,45 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             },
             position: { referencePanel: 'panel_1', direction: 'right' },
         });
+
+        const panelDragDisposable = api.onWillDragPanel((event) => {
+            const dataTransfer = event.nativeEvent.dataTransfer;
+
+            if (dataTransfer) {
+                dataTransfer.setData(
+                    'text/plain',
+                    'Some custom panel data transfer data'
+                );
+                dataTransfer.setData(
+                    'text/json',
+                    '{text: "Some custom panel data transfer data"}'
+                );
+            }
+        });
+
+        const groupDragDisposable = api.onWillDragGroup((event) => {
+            const dataTransfer = event.nativeEvent.dataTransfer;
+
+            if (dataTransfer) {
+                dataTransfer.setData(
+                    'text/plain',
+                    'Some custom group data transfer data'
+                );
+                dataTransfer.setData(
+                    'text/json',
+                    '{text: "Some custom group data transfer data"}'
+                );
+            }
+        });
+
+        return () => {
+            panelDragDisposable.dispose();
+            groupDragDisposable.dispose();
+        };
+    }, [api]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
     };
 
     const onDidDrop = (event: DockviewDropEvent) => {
@@ -92,6 +138,20 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         return true;
     };
 
+    const onDrop = (event: React.DragEvent) => {
+        const dataTransfer = event.dataTransfer;
+
+        let text = 'The following dataTransfer data was found:\n';
+
+        for (let i = 0; i < dataTransfer.items.length; i++) {
+            const item = dataTransfer.items[i];
+            const value = dataTransfer.getData(item.type);
+            text += `type=${item.type},data=${value}\n`;
+        }
+
+        alert(text);
+    };
+
     return (
         <div
             style={{
@@ -102,6 +162,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         >
             <div style={{ margin: '2px 0px' }}>
                 <DraggableElement />
+                <div onDrop={onDrop}>Inspect Data Transfer</div>
             </div>
             <DockviewReact
                 components={components}