Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 13:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): some dnd perf issues (#9661)

Browse Source 
1. page list item are bound two draggables. adding `draggable` prop to WorkbenchLink to mitigate the issue.
2. DndService may not resolve datatransfer when dragging.
This commit is contained in:
pengx17
2025-01-15 15:04:01 +00:00
parent b1896746f9
commit 0ed9258f51
5 changed files with 89 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/frontend/component/src/ui/dnd/draggable.ts
View File

@@ -87,10 +87,16 @@ export const useDraggable = <D extends DNDData = DNDData>(
}, [...deps, context.toExternalData]);
useEffect(() => {
if (!dragRef.current) {
if (
!dragRef.current ||
(typeof options.canDrag === 'boolean' && !options.canDrag)
) {
return;
}
const element = dragRef.current;
const dragHandle = dragHandleRef.current;
const windowEvent = {
dragleave: () => {
setDraggingPosition(state =>
@@ -104,11 +110,11 @@ export const useDraggable = <D extends DNDData = DNDData>(
},
};
dragRef.current.dataset.affineDraggable = 'true';
element.dataset.affineDraggable = 'true';
const cleanupDraggable = draggable({
element: dragRef.current,
dragHandle: dragHandleRef.current ?? undefined,
element,
dragHandle: dragHandle ?? undefined,
canDrag: draggableGet(options.canDrag),
getInitialData: draggableGet(options.data),
getInitialDataForExternal: draggableGet(options.toExternalData),
@@ -130,8 +136,8 @@ export const useDraggable = <D extends DNDData = DNDData>(
if (enableDropTarget.current) {
setDropTarget([]);
}
if (dragRef.current) {
dragRef.current.dataset['dragging'] = 'true';
if (element) {
element.dataset['dragging'] = 'true';
}
options.onDragStart?.(args);
},
@@ -153,8 +159,8 @@ export const useDraggable = <D extends DNDData = DNDData>(
if (enableDropTarget.current) {
setDropTarget([]);
}
if (dragRef.current) {
delete dragRef.current.dataset['dragging'];
if (element) {
delete element.dataset['dragging'];
}
options.onDrop?.(args);
},

87
packages/frontend/component/src/ui/dnd/drop-target.ts
View File

@@ -1,3 +1,4 @@
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
import type {
@@ -17,7 +18,14 @@ import {
type Instruction,
type ItemMode,
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { shallowUpdater } from '../../utils';
import { getAdaptedEventArgs, isExternalDrag } from './common';
@@ -201,9 +209,16 @@ export const useDropTarget = <D extends DNDData = DNDData>(
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...deps, dropTargetContext.fromExternalData]);
const dropTargetOptions = useMemo(() => {
const getDropTargetOptions = useCallback(() => {
const wrappedCanDrop = dropTargetGet(options.canDrop, options);
let _element: HTMLElement | null = null;
let element: HTMLElement | null = dropTargetRef.current;
if (
!element ||
(typeof options.canDrop === 'boolean' && !options.canDrop)
) {
return null;
}
const updateDragOver = (
args: DropTargetDragEvent<D>,
@@ -254,12 +269,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
};
return {
get element() {
if (!_element) {
_element = dropTargetRef.current;
}
return _element;
},
element,
canDrop: wrappedCanDrop
? (args: DropTargetGetFeedback<D>) => {
// check if args has data. if not, it's an external drag
@@ -290,8 +300,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
}
if (options.treeInstruction) {
setTreeInstruction(null);
if (dropTargetRef.current) {
delete dropTargetRef.current.dataset['treeInstruction'];
if (element) {
delete element.dataset['treeInstruction'];
}
}
if (options.closestEdge) {
@@ -300,8 +310,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
if (enableDropEffect.current) {
setDropEffect(null);
}
if (dropTargetRef.current) {
delete dropTargetRef.current.dataset['draggedOver'];
if (element) {
delete element.dataset['draggedOver'];
}
// external data is only available in drop event thus
@@ -318,10 +328,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
return;
}
if (
args.location.current.dropTargets[0]?.element ===
dropTargetRef.current
) {
if (args.location.current.dropTargets[0]?.element === element) {
options.onDrop?.({
...args,
treeInstruction: extractInstruction(args.self.data),
@@ -376,19 +383,15 @@ export const useDropTarget = <D extends DNDData = DNDData>(
},
onDropTargetChange: (args: DropTargetDropEvent<D>) => {
args = getAdaptedEventArgs(args, options.fromExternalData);
if (
args.location.current.dropTargets[0]?.element ===
dropTargetRef.current
) {
if (args.location.current.dropTargets[0]?.element === element) {
if (enableDraggedOver.current) {
setDraggedOver(true);
}
if (options.treeInstruction) {
const instruction = extractInstruction(args.self.data);
setTreeInstruction(instruction);
if (dropTargetRef.current) {
dropTargetRef.current.dataset['treeInstruction'] =
instruction?.type;
if (element) {
element.dataset['treeInstruction'] = instruction?.type;
}
}
if (options.closestEdge) {
@@ -410,8 +413,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
clientY: args.location.current.input.clientY,
});
}
if (dropTargetRef.current) {
dropTargetRef.current.dataset['draggedOver'] = 'true';
if (element) {
element.dataset['draggedOver'] = 'true';
}
} else {
if (enableDraggedOver.current) {
@@ -422,8 +425,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
}
if (options.treeInstruction) {
setTreeInstruction(null);
if (dropTargetRef.current) {
delete dropTargetRef.current.dataset['treeInstruction'];
if (element) {
delete element.dataset['treeInstruction'];
}
}
if (enableDropEffect.current) {
@@ -440,8 +443,8 @@ export const useDropTarget = <D extends DNDData = DNDData>(
if (options.closestEdge) {
setClosestEdge(null);
}
if (dropTargetRef.current) {
delete dropTargetRef.current.dataset['draggedOver'];
if (element) {
delete element.dataset['draggedOver'];
}
}
},
@@ -449,18 +452,26 @@ export const useDropTarget = <D extends DNDData = DNDData>(
}, [options]);
useEffect(() => {
if (!dropTargetRef.current) {
const dropTargetOptions = getDropTargetOptions();
if (!dropTargetOptions) {
return;
}
return dropTargetForElements(dropTargetOptions as any);
}, [dropTargetOptions]);
useEffect(() => {
if (!dropTargetRef.current || !options.fromExternalData) {
return;
// @ts-expect-error: fix type error
const cleanup = [dropTargetForElements(dropTargetOptions)];
if (options.allowExternal && options.fromExternalData) {
// @ts-expect-error: fix type error
cleanup.push(dropTargetForExternal(dropTargetOptions));
}
return dropTargetForExternal(dropTargetOptions as any);
}, [dropTargetOptions, options.fromExternalData]);
return combine(...cleanup);
}, [
getDropTargetOptions,
options.canDrop,
options.allowExternal,
options.fromExternalData,
]);
return {
dropTargetRef,

2
packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
View File

@@ -382,7 +382,7 @@ const PageListItemWrapper = forwardRef(
if (to) {
return (
<WorkbenchLink ref={ref} {...commonProps} to={to}>
<WorkbenchLink ref={ref} draggable={false} {...commonProps} to={to}>
{children}
</WorkbenchLink>
);

42
packages/frontend/core/src/modules/dnd/services/index.ts
View File

@@ -81,7 +81,7 @@ export class DndService extends Service {
isDropEvent?: boolean
) => {
if (!isDropEvent) {
return this.resolveBlocksuiteExternalData(args.source) || {};
return {};
}
let resolved: AffineDNDData['draggable'] | null = null;
@@ -168,30 +168,24 @@ export class DndService extends Service {
if (!dndAPI) {
return null;
}
if (source.types.includes(dndAPI.mimeType)) {
const from = {
at: 'blocksuite-editor',
} as const;
let entity: Entity | null = null;
const encoded = source.getStringData(dndAPI.mimeType);
const snapshot = encoded ? dndAPI.decodeSnapshot(encoded) : null;
entity = snapshot ? this.resolveBlockSnapshot(snapshot) : null;
if (!entity) {
return {
from,
};
} else {
return {
entity,
from,
};
}
const encoded = source.getStringData(dndAPI.mimeType);
if (!encoded) {
return null;
}
return null;
const snapshot = dndAPI.decodeSnapshot(encoded);
if (!snapshot) {
return null;
}
const entity = this.resolveBlockSnapshot(snapshot);
if (!entity) {
return null;
}
return {
entity,
from: {
at: 'blocksuite-editor',
},
};
};
private readonly resolveHTML: EntityResolver = html => {

9
packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
View File

@@ -47,7 +47,10 @@ function resolveToEntity(
}
export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
function WorkbenchLink({ to, onClick, replaceHistory, ...other }, ref) {
function WorkbenchLink(
{ to, onClick, draggable = true, replaceHistory, ...other },
ref
) {
const { workbenchService } = useServices({
WorkbenchService,
});
@@ -79,8 +82,10 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
to: stringTo,
},
},
canDrag:
typeof draggable === 'boolean' ? draggable : draggable === 'true',
};
}, [to, basename, stringTo]);
}, [to, basename, stringTo, draggable]);
return (
<a