From 9fa35ed490da19c1bf254500506372c3b8baad10 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Sat, 11 Jan 2025 03:15:07 +0000
Subject: [PATCH] fix(editor): drag indicator flickering (#9636)

---
 .../src/drag-indicator/file-drop-manager.ts   | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts b/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts
index 69c177c0f1..7c1a59aa34 100644
--- a/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts
+++ b/blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts
@@ -54,20 +54,21 @@ export class FileDropExtension extends LifeCycleWatcher {
     return indicator;
   }
 
-  point$ = signal<Point>(new Point(0, 0));
+  point$ = signal<Point | null>(null);
 
   closestElement$ = signal<BlockComponent | null>(null);
 
   dropTarget$ = computed<DropTarget | null>(() => {
     let target = null;
     const element = this.closestElement$.value;
-    if (!element) return null;
+    if (!element) return target;
 
     const model = element.model;
     const parent = this.std.store.getParent(model);
+
     if (!matchFlavours(parent, ['affine:surface' as BlockSuite.Flavour])) {
       const point = this.point$.value;
-      target = calcDropTarget(point, model, element);
+      target = point && calcDropTarget(point, model, element);
     }
 
     return target;
@@ -124,6 +125,7 @@ export class FileDropExtension extends LifeCycleWatcher {
     const oldPoint = this.point$.peek();
 
     if (
+      oldPoint &&
       Math.round(oldPoint.x) === Math.round(clientX) &&
       Math.round(oldPoint.y) === Math.round(clientY)
     )
@@ -133,7 +135,7 @@ export class FileDropExtension extends LifeCycleWatcher {
   };
 
   onDragLeave = () => {
-    this.closestElement$.value = null;
+    this.point$.value = null;
   };
 
   onDragOver = (event: DragEvent) => {
@@ -168,9 +170,21 @@ export class FileDropExtension extends LifeCycleWatcher {
       this.point$.subscribe(
         throttle(
           value => {
-            if (value.x * value.y === 0) return;
+            if (!value) {
+              this.closestElement$.value = null;
+              return;
+            }
 
-            this.closestElement$.value = getClosestBlockComponentByPoint(value);
+            const element = getClosestBlockComponentByPoint(value);
+            if (!element) {
+              return;
+            }
+
+            if (element === this.closestElement$.value) {
+              return;
+            }
+
+            this.closestElement$.value = element;
           },
           233,
           { leading: true, trailing: true }