mirror of
https://github.com/Horizontal42/summarum.git
synced 2026-11-10 20:21:58 +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) => {
|
el.addEventListener("mousedown", (e) => {
|
||||||
if ((e.target as HTMLElement).closest("button")) return;
|
if ((e.target as HTMLElement).closest("button")) return;
|
||||||
const startY = e.clientY;
|
const startY = e.clientY;
|
||||||
|
let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null;
|
||||||
const onMove = (ev: MouseEvent) => {
|
const onMove = (ev: MouseEvent) => {
|
||||||
if (!dragging) {
|
if (!dragging) {
|
||||||
if (Math.abs(ev.clientY - startY) < 4) return;
|
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");
|
el.classList.add("dragging");
|
||||||
document.body.style.cursor = "grabbing";
|
document.body.style.cursor = "grabbing";
|
||||||
}
|
}
|
||||||
const items = [...list.querySelectorAll<HTMLElement>(".doc-item")];
|
if (!cachedItems) {
|
||||||
for (const item of items) item.classList.remove("drag-over");
|
const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")];
|
||||||
const over = items.find((item) => {
|
cachedItems = domItems.map((item) => {
|
||||||
if (item === el) return false;
|
const rect = item.getBoundingClientRect();
|
||||||
const r = item.getBoundingClientRect();
|
return { el: item, top: rect.top, bottom: rect.bottom };
|
||||||
return ev.clientY >= r.top && ev.clientY <= r.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) {
|
if (over) {
|
||||||
const overDoc = data.docs.find((d) => d.id === over.dataset.docId);
|
const overDoc = data.docs.find((d) => d.id === over.dataset.docId);
|
||||||
if (overDoc && !!overDoc.pinned === !!doc.pinned) over.classList.add("drag-over");
|
if (overDoc && !!overDoc.pinned === !!doc.pinned) over.classList.add("drag-over");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const onScroll = () => { cachedItems = null; };
|
||||||
const onUp = () => {
|
const onUp = () => {
|
||||||
window.removeEventListener("mousemove", onMove);
|
window.removeEventListener("mousemove", onMove);
|
||||||
window.removeEventListener("mouseup", onUp);
|
window.removeEventListener("mouseup", onUp);
|
||||||
|
list.removeEventListener("scroll", onScroll);
|
||||||
|
cachedItems = null;
|
||||||
if (dragging) {
|
if (dragging) {
|
||||||
const target = list.querySelector<HTMLElement>(".doc-item.drag-over");
|
const target = list.querySelector<HTMLElement>(".doc-item.drag-over");
|
||||||
for (const item of list.querySelectorAll(".doc-item")) item.classList.remove("drag-over", "dragging");
|
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("mousemove", onMove);
|
||||||
window.addEventListener("mouseup", onUp);
|
window.addEventListener("mouseup", onUp);
|
||||||
|
list.addEventListener("scroll", onScroll);
|
||||||
});
|
});
|
||||||
el.addEventListener("click", () => {
|
el.addEventListener("click", () => {
|
||||||
if (suppressClick) { suppressClick = false; return; }
|
if (suppressClick) { suppressClick = false; return; }
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue