From e3e87f413352a9721fb2fd1542b30e4def8146d7 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 17 Jan 2024 22:19:43 +0000
Subject: [PATCH] feat: provide classnames for droptarget overlays

---
 .../dockview-core/src/dnd/droptarget.scss     | 24 ++++++++++++-------
 packages/dockview-core/src/dnd/droptarget.ts  | 14 +++++++----
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/dockview-core/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss
index 2767c2c24..9baf55508 100644
--- a/packages/dockview-core/src/dnd/droptarget.scss
+++ b/packages/dockview-core/src/dnd/droptarget.scss
@@ -22,20 +22,28 @@
             will-change: transform;
             pointer-events: none;
 
-            &.small-top {
-                border-top: 1px solid var(--dv-drag-over-border-color);
+            &.dv-overlay-top {
+                &.dv-overlay-small-vertical {
+                    border-top: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-bottom {
-                border-bottom: 1px solid var(--dv-drag-over-border-color);
+            &.dv-overlay-bottom {
+                &.dv-overlay-small-vertical {
+                    border-bottom: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-left {
-                border-left: 1px solid var(--dv-drag-over-border-color);
+            &.dv-overlay-left {
+                &.dv-overlay-small-horizontal {
+                    border-left: 1px solid var(--dv-drag-over-border-color);
+                }
             }
 
-            &.small-right {
-                border-right: 1px solid var(--dv-drag-over-border-color);
+            &.dv-overlay-right {
+                &.dv-overlay-small-horizontal {
+                    border-right: 1px solid var(--dv-drag-over-border-color);
+                }
             }
         }
     }
diff --git a/packages/dockview-core/src/dnd/droptarget.ts b/packages/dockview-core/src/dnd/droptarget.ts
index 357d4c32f..c9c638f82 100644
--- a/packages/dockview-core/src/dnd/droptarget.ts
+++ b/packages/dockview-core/src/dnd/droptarget.ts
@@ -269,10 +269,16 @@ export class Droptarget extends CompositeDisposable {
 
         this.overlayElement.style.transform = transform;
 
-        toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
-        toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
-        toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
-        toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
+        toggleClass(this.overlayElement, 'dv-overlay-small-vertical', isSmallY);
+        toggleClass(
+            this.overlayElement,
+            'dv-overlay-small-horizontal',
+            isSmallX
+        );
+        toggleClass(this.overlayElement, 'dv-overlay-left', isLeft);
+        toggleClass(this.overlayElement, 'dv-overlay-right', isRight);
+        toggleClass(this.overlayElement, 'dv-overlay-top', isTop);
+        toggleClass(this.overlayElement, 'dv-overlay-bottom', isBottom);
     }
 
     private setState(quadrant: Position): void {