github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: optimize the drag-and-drop performance (#7601) 

#### What type of PR is this?

/kind importment
/area editor
/milestone 2.21.x

#### What this PR does / why we need it:

为默认编辑器拖拽事件增加节流，解决部分由于鼠标移动事件所产生的性能损耗。

#### Does this PR introduce a user-facing change?
```release-note
None
```
pull/7612/head
Takagi 2025-06-30 11:03:29 +08:00 committed by GitHub
parent 552eaec40b
commit 1ac665f59c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/packages/editor/src/extensions/draggable/index.ts
View File

@ -16,6 +16,7 @@ import {
} from "@/tiptap/pm"; } from "@/tiptap/pm";
import { Editor, Extension } from "@/tiptap/vue-3"; import { Editor, Extension } from "@/tiptap/vue-3";
import type { DraggableItemType, ExtensionOptions } from "@/types"; import type { DraggableItemType, ExtensionOptions } from "@/types";
import { throttle } from "lodash-es";
// https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API // https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
// https://github.com/ueberdosis/tiptap/blob/7832b96afbfc58574785043259230801e179310f/demos/src/Experiments/GlobalDragHandle/Vue/DragHandle.js // https://github.com/ueberdosis/tiptap/blob/7832b96afbfc58574785043259230801e179310f/demos/src/Experiments/GlobalDragHandle/Vue/DragHandle.js
@ -468,7 +469,7 @@ const Draggable = Extension.create({
props: { props: {
handleDOMEvents: { handleDOMEvents: {
// @ts-ignore // @ts-ignore
mousemove: (view: EditorView, event) => { mousemove: throttle((view: EditorView, event: MouseEvent) => {
const coords = { left: event.clientX, top: event.clientY }; const coords = { left: event.clientX, top: event.clientY };
const pos = view.posAtCoords(coords); const pos = view.posAtCoords(coords);
if (!pos || !pos.pos) return false; if (!pos || !pos.pos) return false;
@ -479,6 +480,7 @@ const Draggable = Extension.create({
view.nodeDOM(nodePos) || view.nodeDOM(nodePos) ||
view.domAtPos(nodePos)?.node || view.domAtPos(nodePos)?.node ||
event.target; event.target;
if (!nodeDom) { if (!nodeDom) {
hideDragHandleDOM(); hideDragHandleDOM();
return false; return false;
@ -514,14 +516,14 @@ const Draggable = Extension.create({
} }
renderDragHandleDOM(view, activeNode); renderDragHandleDOM(view, activeNode);
return false; return false;
}, }, 100),
mouseleave: () => { mouseleave: throttle(() => {
clearTimeout(mouseleaveTimer); clearTimeout(mouseleaveTimer);
mouseleaveTimer = setTimeout(() => { mouseleaveTimer = setTimeout(() => {
hideDragHandleDOM(); hideDragHandleDOM();
}, 400); }, 800);
return false; return false;
}, }, 100),
}, },
handleKeyDown() { handleKeyDown() {
if (!draggableHandleDom) return false; if (!draggableHandleDom) return false;