luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(editor): drag indicator flickering (#9636)

Browse Source
This commit is contained in:
fundon
2025-01-11 03:15:07 +00:00
parent 6de62ef7cf
commit 9fa35ed490
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
blocksuite/affine/components/src/drag-indicator/file-drop-manager.ts
View File

@@ -54,20 +54,21 @@ export class FileDropExtension extends LifeCycleWatcher {
return indicator; return indicator;
} }
point$ = signal<Point>(new Point(0, 0)); point$ = signal<Point | null>(null);
closestElement$ = signal<BlockComponent | null>(null); closestElement$ = signal<BlockComponent | null>(null);
dropTarget$ = computed<DropTarget | null>(() => { dropTarget$ = computed<DropTarget | null>(() => {
let target = null; let target = null;
const element = this.closestElement$.value; const element = this.closestElement$.value;
if (!element) return null; if (!element) return target;
const model = element.model; const model = element.model;
const parent = this.std.store.getParent(model); const parent = this.std.store.getParent(model);
if (!matchFlavours(parent, ['affine:surface' as BlockSuite.Flavour])) { if (!matchFlavours(parent, ['affine:surface' as BlockSuite.Flavour])) {
const point = this.point$.value; const point = this.point$.value;
target = calcDropTarget(point, model, element); target = point && calcDropTarget(point, model, element);
} }
return target; return target;
@@ -124,6 +125,7 @@ export class FileDropExtension extends LifeCycleWatcher {
const oldPoint = this.point$.peek(); const oldPoint = this.point$.peek();
if ( if (
oldPoint &&
Math.round(oldPoint.x) === Math.round(clientX) && Math.round(oldPoint.x) === Math.round(clientX) &&
Math.round(oldPoint.y) === Math.round(clientY) Math.round(oldPoint.y) === Math.round(clientY)
) )
@@ -133,7 +135,7 @@ export class FileDropExtension extends LifeCycleWatcher {
}; };
onDragLeave = () => { onDragLeave = () => {
this.closestElement$.value = null; this.point$.value = null;
}; };
onDragOver = (event: DragEvent) => { onDragOver = (event: DragEvent) => {
@@ -168,9 +170,21 @@ export class FileDropExtension extends LifeCycleWatcher {
this.point$.subscribe( this.point$.subscribe(
throttle( throttle(
value => { 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, 233,
{ leading: true, trailing: true } { leading: true, trailing: true }