Masonry: fix do not reflow in resizing

This commit is contained in:
thislight 2024-11-24 16:45:24 +08:00
parent 5199f2bb6a
commit 2c35950d27
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E

View file

@ -46,30 +46,49 @@ function createCompatMasonry(
const size = createElementSize(element); const size = createElementSize(element);
const treeMutObx = new MutationObserver(() => { let layoutNotRequested = true;
layout.reloadItems?.();
});
onCleanup(() => treeMutObx.disconnect()); const reflow = () => {
layout.layout?.();
layoutNotRequested = true;
};
createRenderEffect(() => { createRenderEffect(() => {
const opts = options(); const opts = options();
layout.option?.(opts); layout.option?.(opts);
}); });
const treeMutObx = new MutationObserver(() => {
layout.reloadItems?.();
if (layoutNotRequested) {
layoutNotRequested = false;
requestAnimationFrame(reflow);
}
});
onCleanup(() => treeMutObx.disconnect());
createRenderEffect(() => { createRenderEffect(() => {
treeMutObx.observe(element, { childList: true }); treeMutObx.observe(element, { childList: true });
}); });
createRenderEffect(() => { createRenderEffect(() => {
const width = size.width; // only tracking width const width = size.width; // only tracking width
layout.layout?.(); if (layoutNotRequested) {
layoutNotRequested = false;
requestAnimationFrame(reflow);
}
}); });
if (import.meta.hot) { if (import.meta.hot) {
import.meta.hot.on("vite:afterUpdate", () => { const onHotReloadUpdate = () => {
layout.layout?.(); if (layoutNotRequested) {
}); layoutNotRequested = false;
requestAnimationFrame(reflow);
}
};
import.meta.hot.on("vite:afterUpdate", onHotReloadUpdate);
import.meta.hot.off("vite:afterUpdate", onHotReloadUpdate);
} }
} }