From 6f789509fe2e556211b20696fd28c7ba561be671 Mon Sep 17 00:00:00 2001
From: nikolas-con <nikos.a.constantinoiu@gmail.com>
Date: Tue, 12 Mar 2024 20:39:05 +0200
Subject: [PATCH] fixed flickering

---
 lib/client/vanilla/editor.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
index f48e19be..7fe3a244 100644
--- a/lib/client/vanilla/editor.tsx
+++ b/lib/client/vanilla/editor.tsx
@@ -309,8 +309,10 @@ function Editor({ standaloneServer = false }) {
 
     // update border
     const isTopHalf = isElementTopHalf(component, e)
-    component.style.setProperty(`border-${isTopHalf ? 'top' : 'bottom'}`, '4px solid cornflowerblue')
-    component.style.setProperty(`border-${!isTopHalf ? 'top' : 'bottom'}`, '')
+    component.style.setProperty(
+      'box-shadow',
+      isTopHalf ? ' 0px 6px 0px -2px cornflowerblue inset' : '0px -6px 0px -2px cornflowerblue inset',
+    )
 
     // update hovered component
     if (component.isEqualNode(hoveredComponent)) return
@@ -320,15 +322,15 @@ function Editor({ standaloneServer = false }) {
   const removeBorders = () => {
     const components = getComponents()
     components.forEach((c: HTMLDivElement) => {
-      c.style.setProperty('border-top', '')
-      c.style.setProperty('border-bottom', '')
+      c.style.setProperty('box-shadow', '')
     })
   }
 
-  // NOTE this trigger more times than it should
-  const onCanvasDragLeave = () => {
-    setHoveredComponent(null)
-    removeBorders()
+  const onCanvasDragLeave = (e: React.DragEvent<HTMLElement>) => {
+    if (!canvasRef.current?.contains(e.target as HTMLElement)) {
+      setHoveredComponent(null)
+      removeBorders()
+    }
   }
 
   const getComponents = (): HTMLDivElement[] => {