feat: improved dnd model

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

@@ -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/api/component.api.ts

@@ -629,10 +629,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.totalPanels;
     }
 
-    get gap(): number {
-        return this.component.gap;
-    }
-
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -914,10 +910,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/dropTragetAnchorContainer.ts

@@ -0,0 +1,78 @@
+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;
+
+    get model(): DropTargetTargetModel {
+        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) {
+        super();
+
+        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;
+    }
+}

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

@@ -1,5 +1,6 @@
 .dv-drop-target {
     position: relative;
+    --dv-transition-duration: 70ms;
 
     > .dv-drop-target-dropzone {
         position: absolute;
@@ -15,10 +16,13 @@
             box-sizing: border-box;
             height: 100%;
             width: 100%;
+            border: var(--dv-drag-over-border);
             background-color: var(--dv-drag-over-background-color);
-            transition: top 70ms ease-out, left 70ms ease-out,
-                width 70ms ease-out, height 70ms ease-out,
-                opacity 0.15s ease-out;
+            transition: 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,
+                opacity var(--dv-transition-duration) ease-out;
             will-change: transform;
             pointer-events: none;
 
@@ -48,3 +52,27 @@
         }
     }
 }
+
+.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;
+    }
+}