feat: improved dnd model

packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts

@@ -8,6 +8,7 @@ import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
 import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
 import { Tab } from '../../../dockview/components/tab/tab';
 import { IDockviewPanel } from '../../../dockview/dockviewPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('tab', () => {
     test('that empty tab has inactive-tab class', () => {
@@ -46,15 +47,10 @@ describe('tab', () => {
                 id: 'testcomponentid',
             };
         });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
 
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
 
         const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
             return {
@@ -82,28 +78,23 @@ describe('tab', () => {
         fireEvent.dragEnter(cut.element);
         fireEvent.dragOver(cut.element);
 
-        expect(groupView.canDisplayOverlay).toBeCalled();
+        expect(groupView.canDisplayOverlay).toHaveBeenCalled();
 
         expect(
             cut.element.getElementsByClassName('dv-drop-target-dropzone').length
         ).toBe(0);
     });
 
-    test('that if you drag over yourself no drop target is shown', () => {
+    test('that if you drag over yourself a drop target is shown', () => {
         const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
             return {
                 id: 'testcomponentid',
             };
         });
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
 
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
 
         const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
             return {
@@ -136,11 +127,11 @@ describe('tab', () => {
         fireEvent.dragEnter(cut.element);
         fireEvent.dragOver(cut.element);
 
-        expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
+        expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
 
         expect(
             cut.element.getElementsByClassName('dv-drop-target-dropzone').length
-        ).toBe(0);
+        ).toBe(1);
     });
 
     test('that if you drag over another tab a drop target is shown', () => {

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts

@@ -73,15 +73,14 @@ describe('tabsContainer', () => {
             options: {},
         });
 
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
+        const dropTargetContainer = document.createElement('div');
 
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+            // dropTargetContainer: new DropTargetAnchorContainer(
+            //     dropTargetContainer
+            // ),
+        });
 
         const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
             return {
@@ -129,6 +128,10 @@ describe('tabsContainer', () => {
         expect(
             cut.element.getElementsByClassName('dv-drop-target-dropzone').length
         ).toBe(1);
+        // expect(
+        //     dropTargetContainer.getElementsByClassName('dv-drop-target-anchor')
+        //         .length
+        // ).toBe(1);
     });
 
     test('that dropping over the empty space should render a drop target', () => {

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

@@ -133,11 +133,11 @@ describe('dockviewComponent', () => {
             },
             className: 'test-a test-b',
         });
-        expect(dockview.element.className).toBe('test-a test-b');
+        expect(dockview.element.className).toBe('test-a test-b dockview-theme-abyss');
 
         dockview.updateOptions({ className: 'test-b test-c' });
 
-        expect(dockview.element.className).toBe('test-b test-c');
+        expect(dockview.element.className).toBe('dockview-theme-abyss test-b test-c');
     });
 
     describe('memory leakage', () => {
@@ -6652,36 +6652,4 @@ describe('dockviewComponent', () => {
         expect(api.panels.length).toBe(3);
         expect(api.groups.length).toBe(3);
     });
-
-    describe('updateOptions', () => {
-        test('gap', () => {
-            const container = document.createElement('div');
-
-            const dockview = new DockviewComponent(container, {
-                createComponent(options) {
-                    switch (options.name) {
-                        case 'default':
-                            return new PanelContentPartTest(
-                                options.id,
-                                options.name
-                            );
-                        default:
-                            throw new Error(`unsupported`);
-                    }
-                },
-                gap: 6,
-            });
-
-            expect(dockview.gap).toBe(6);
-
-            dockview.updateOptions({ gap: 10 });
-            expect(dockview.gap).toBe(10);
-
-            dockview.updateOptions({});
-            expect(dockview.gap).toBe(10);
-
-            dockview.updateOptions({ gap: 15 });
-            expect(dockview.gap).toBe(15);
-        });
-    });
 });

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

@@ -792,7 +792,7 @@ describe('dockviewGroupPanelModel', () => {
         fireEvent.dragEnd(element);
     });
 
-    test('that should not show drop target if dropping on self', () => {
+    test('that should show drop target if dropping on self', () => {
         const accessor = fromPartial<DockviewComponent>({
             id: 'testcomponentid',
             options: {},
@@ -806,15 +806,9 @@ describe('dockviewGroupPanelModel', () => {
             ),
         });
 
-        const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
-            () => {
-                return {
-                    canDisplayOverlay: jest.fn(),
-                };
-            }
-        );
-
-        const groupView = new groupviewMock() as DockviewGroupPanelModel;
+        const groupView = fromPartial<DockviewGroupPanelModel>({
+            canDisplayOverlay: jest.fn(),
+        });
 
         const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
             return {
@@ -861,10 +855,10 @@ describe('dockviewGroupPanelModel', () => {
 
         expect(
             element.getElementsByClassName('dv-drop-target-dropzone').length
-        ).toBe(0);
+        ).toBe(1);
     });
 
-    test('that should not allow drop when dropping on self for same component id', () => {
+    test('that should allow drop when dropping on self for same component id', () => {
         const accessor = fromPartial<DockviewComponent>({
             id: 'testcomponentid',
             options: {},
@@ -934,7 +928,7 @@ describe('dockviewGroupPanelModel', () => {
 
         expect(
             element.getElementsByClassName('dv-drop-target-dropzone').length
-        ).toBe(0);
+        ).toBe(1);
     });
 
     test('that should not allow drop when not dropping for different component id', () => {

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

@@ -629,10 +629,20 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.totalPanels;
     }
 
+    /**
+     * @deprecated dockview: dockviewComponent.gap has been deprecated. Use `theme` instead. This will be removed in a future version.
+     */
     get gap(): number {
         return this.component.gap;
     }
 
+    /**
+     * @deprecated dockview: dockviewComponent.setGap has been deprecated. Use `theme` instead. This will be removed in a future version.
+     */
+    setGap(gap: number | undefined): void {
+        this.component.updateOptions({ gap: gap });
+    }
+
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -914,10 +924,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.addPopoutGroup(item, options);
     }
 
-    setGap(gap: number | undefined): void {
-        this.component.updateOptions({ gap });
-    }
-
     updateOptions(options: Partial<DockviewComponentOptions>) {
         this.component.updateOptions(options);
     }

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

@@ -67,15 +67,17 @@ export abstract class DragHandler extends CompositeDisposable {
                          * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
                          * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
                          * dnd logic. You can see the code at
-                         * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                          */
                         event.dataTransfer.setData('text/plain', '');
                     }
                 }
             }),
             addDisposableListener(this.el, 'dragend', () => {
                 this.pointerEventsDisposable.dispose();
-                this.dataDisposable.dispose();
+                setTimeout(() => {
+                    this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
+                }, 0);
             })
         );
     }

packages/dockview-core/src/dnd/dropTargetAnchorContainer.scss

@@ -0,0 +1,23 @@
+.dv-drop-target-container {
+    position: absolute;
+    z-index: 9999;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    --dv-transition-duration: 300ms;
+
+    .dv-drop-target-anchor {
+        position: relative;
+        border: var(--dv-drag-over-border);
+        transition: opacity var(--dv-transition-duration) ease-in,
+            top var(--dv-transition-duration) ease-out,
+            left var(--dv-transition-duration) ease-out,
+            width var(--dv-transition-duration) ease-out,
+            height var(--dv-transition-duration) ease-out;
+        background-color: var(--dv-drag-over-background-color);
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,102 @@
+import { CompositeDisposable, Disposable } from '../lifecycle';
+import { DropTargetTargetModel } from './droptarget';
+
+export class DropTargetAnchorContainer extends CompositeDisposable {
+    private _model:
+        | { root: HTMLElement; overlay: HTMLElement; changed: boolean }
+        | undefined;
+
+    private _outline: HTMLElement | undefined;
+
+    private _disabled = false;
+
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    set disabled(value: boolean) {
+        if (this.disabled === value) {
+            return;
+        }
+
+        this._disabled = value;
+
+        if (value) {
+            this.model?.clear();
+        }
+    }
+
+    get model(): DropTargetTargetModel | undefined {
+        if (this.disabled) {
+            return undefined;
+        }
+
+        return {
+            clear: () => {
+                if (this._model) {
+                    this._model.root.parentElement?.removeChild(
+                        this._model.root
+                    );
+                }
+                this._model = undefined;
+            },
+            exists: () => {
+                return !!this._model;
+            },
+            getElements: (event?: DragEvent, outline?: HTMLElement) => {
+                const changed = this._outline !== outline;
+                this._outline = outline;
+
+                if (this._model) {
+                    this._model.changed = changed;
+                    return this._model;
+                }
+
+                const container = this.createContainer();
+                const anchor = this.createAnchor();
+
+                this._model = { root: container, overlay: anchor, changed };
+
+                container.appendChild(anchor);
+                this.element.appendChild(container);
+
+                if (event?.target instanceof HTMLElement) {
+                    const targetBox = event.target.getBoundingClientRect();
+                    const box = this.element.getBoundingClientRect();
+
+                    anchor.style.left = `${targetBox.left - box.left}px`;
+                    anchor.style.top = `${targetBox.top - box.top}px`;
+                }
+
+                return this._model;
+            },
+        };
+    }
+
+    constructor(readonly element: HTMLElement, options: { disabled: boolean }) {
+        super();
+
+        this._disabled = options.disabled;
+
+        this.addDisposables(
+            Disposable.from(() => {
+                this.model?.clear();
+            })
+        );
+    }
+
+    private createContainer(): HTMLElement {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-container';
+
+        return el;
+    }
+
+    private createAnchor(): HTMLElement {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-anchor';
+        el.style.visibility = 'hidden';
+
+        return el;
+    }
+}