mirror of
https://github.com/Horizontal42/summarum.git
synced 2026-11-11 02:12:00 +03:00
fix stale drag rects on scroll, drop unused jsdom deps
This commit is contained in:
parent
d08d807961
commit
135ef290df
1 changed files with 21 additions and 7 deletions
28
src/main.ts
28
src/main.ts
|
|
@ -110,6 +110,7 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
|
|||
el.addEventListener("mousedown", (e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) return;
|
||||
const startY = e.clientY;
|
||||
let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null;
|
||||
const onMove = (ev: MouseEvent) => {
|
||||
if (!dragging) {
|
||||
if (Math.abs(ev.clientY - startY) < 4) return;
|
||||
|
|
@ -118,21 +119,33 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
|
|||
el.classList.add("dragging");
|
||||
document.body.style.cursor = "grabbing";
|
||||
}
|
||||
const items = [...list.querySelectorAll<HTMLElement>(".doc-item")];
|
||||
for (const item of items) item.classList.remove("drag-over");
|
||||
const over = items.find((item) => {
|
||||
if (item === el) return false;
|
||||
const r = item.getBoundingClientRect();
|
||||
return ev.clientY >= r.top && ev.clientY <= r.bottom;
|
||||
});
|
||||
if (!cachedItems) {
|
||||
const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")];
|
||||
cachedItems = domItems.map((item) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
return { el: item, top: rect.top, bottom: rect.bottom };
|
||||
});
|
||||
}
|
||||
let over: HTMLElement | undefined;
|
||||
for (const item of cachedItems) {
|
||||
item.el.classList.remove("drag-over");
|
||||
if (!over && item.el !== el) {
|
||||
if (ev.clientY >= item.top && ev.clientY <= item.bottom) {
|
||||
over = item.el;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (over) {
|
||||
const overDoc = data.docs.find((d) => d.id === over.dataset.docId);
|
||||
if (overDoc && !!overDoc.pinned === !!doc.pinned) over.classList.add("drag-over");
|
||||
}
|
||||
};
|
||||
const onScroll = () => { cachedItems = null; };
|
||||
const onUp = () => {
|
||||
window.removeEventListener("mousemove", onMove);
|
||||
window.removeEventListener("mouseup", onUp);
|
||||
list.removeEventListener("scroll", onScroll);
|
||||
cachedItems = null;
|
||||
if (dragging) {
|
||||
const target = list.querySelector<HTMLElement>(".doc-item.drag-over");
|
||||
for (const item of list.querySelectorAll(".doc-item")) item.classList.remove("drag-over", "dragging");
|
||||
|
|
@ -143,6 +156,7 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
|
|||
};
|
||||
window.addEventListener("mousemove", onMove);
|
||||
window.addEventListener("mouseup", onUp);
|
||||
list.addEventListener("scroll", onScroll);
|
||||
});
|
||||
el.addEventListener("click", () => {
|
||||
if (suppressClick) { suppressClick = false; return; }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue