0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 18:32:41 +00:00

use storage instead of state to correctly save position while resizing

This commit is contained in:
Víctor Losada Hernández
2024-10-27 10:13:59 +01:00
parent 46eac41021
commit 987063422d

View File

@@ -11,7 +11,7 @@ const SplitPane = (props)=>{
} = props;
const [isDragging, setIsDragging] = useState(false);
const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null`
const [dividerPos, setDividerPos] = useState(null);
const [moveSource, setMoveSource] = useState(false);
const [moveBrew, setMoveBrew] = useState(false);
const [showMoveArrows, setShowMoveArrows] = useState(true);
@@ -20,7 +20,7 @@ const SplitPane = (props)=>{
// Set initial divider position and liveScroll only after mounting
useEffect(()=>{
const savedPos = window.localStorage.getItem(storageKey);
setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2);
setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
window.addEventListener('resize', handleResize);
@@ -29,8 +29,8 @@ const SplitPane = (props)=>{
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
const handleResize = ()=>setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleUp =(e)=>{
e.preventDefault();
if(isDragging) {
@@ -84,7 +84,7 @@ const SplitPane = (props)=>{
</div>
</div>
);
return (
<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>