Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-11 01:02:01 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: prevent layout thrashing on document drag

Browse source 
Swaps the order of DOM reads (getBoundingClientRect) and writes (classList.add) in the dragging onMove handler to prevent forced synchronous layouts.

Co-authored-by: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot] 2026-08-12 17:41:18 +00:00
parent 268ac9e81b
commit c06a6eeba2
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/main.ts
View file

@ -112,13 +112,6 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
const startY = e.clientY; const startY = e.clientY;
let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null; let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null;
const onMove = (ev: MouseEvent) => { const onMove = (ev: MouseEvent) => {
if (!dragging) {
if (Math.abs(ev.clientY - startY) < 4) return;
dragging = true;
suppressClick = true;
el.classList.add("dragging");
document.body.style.cursor = "grabbing";
}
if (!cachedItems) { if (!cachedItems) {
const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")]; const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")];
cachedItems = domItems.map((item) => { cachedItems = domItems.map((item) => {
@ -126,6 +119,13 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
return { el: item, top: rect.top, bottom: rect.bottom }; return { el: item, top: rect.top, bottom: rect.bottom };
}); });
} }
if (!dragging) {
if (Math.abs(ev.clientY - startY) < 4) return;
dragging = true;
suppressClick = true;
el.classList.add("dragging");
document.body.style.cursor = "grabbing";
}
let over: HTMLElement | undefined; let over: HTMLElement | undefined;
for (const item of cachedItems) { for (const item of cachedItems) {
item.el.classList.remove("drag-over"); item.el.classList.remove("drag-over");