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 treeMutObx = new MutationObserver(() => {
 | 
			
		||||
    layout.reloadItems?.();
 | 
			
		||||
  });
 | 
			
		||||
  let layoutNotRequested = true;
 | 
			
		||||
 | 
			
		||||
  onCleanup(() => treeMutObx.disconnect());
 | 
			
		||||
  const reflow = () => {
 | 
			
		||||
    layout.layout?.();
 | 
			
		||||
    layoutNotRequested = true;
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  createRenderEffect(() => {
 | 
			
		||||
    const opts = options();
 | 
			
		||||
    layout.option?.(opts);
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  const treeMutObx = new MutationObserver(() => {
 | 
			
		||||
    layout.reloadItems?.();
 | 
			
		||||
    if (layoutNotRequested) {
 | 
			
		||||
      layoutNotRequested = false;
 | 
			
		||||
      requestAnimationFrame(reflow);
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  onCleanup(() => treeMutObx.disconnect());
 | 
			
		||||
 | 
			
		||||
  createRenderEffect(() => {
 | 
			
		||||
    treeMutObx.observe(element, { childList: true });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  createRenderEffect(() => {
 | 
			
		||||
    const width = size.width; // only tracking width
 | 
			
		||||
    layout.layout?.();
 | 
			
		||||
    if (layoutNotRequested) {
 | 
			
		||||
      layoutNotRequested = false;
 | 
			
		||||
      requestAnimationFrame(reflow);
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  if (import.meta.hot) {
 | 
			
		||||
    import.meta.hot.on("vite:afterUpdate", () => {
 | 
			
		||||
      layout.layout?.();
 | 
			
		||||
    });
 | 
			
		||||
    const onHotReloadUpdate = () => {
 | 
			
		||||
      if (layoutNotRequested) {
 | 
			
		||||
        layoutNotRequested = false;
 | 
			
		||||
        requestAnimationFrame(reflow);
 | 
			
		||||
      }
 | 
			
		||||
    };
 | 
			
		||||
    import.meta.hot.on("vite:afterUpdate", onHotReloadUpdate);
 | 
			
		||||
    import.meta.hot.off("vite:afterUpdate", onHotReloadUpdate);
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue