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

perf: prevent layout thrashing on document drag (#86)

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: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
This commit is contained in:
Horizontal42 2026-08-12 22:07:34 +03:00 • committed by GitHub
parent b215efdda0
commit 445f965c8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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");