Masonry: fix do not reflow in resizing
This commit is contained in:
parent
5199f2bb6a
commit
2c35950d27
1 changed files with 27 additions and 8 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue