Hey everyone! I'm struggling with an issue for 2 days nearly and I need help. So I use React and Electron with Konva. I want to dynamically adjust my Stage's width and height. When I increase the height or width of my window it perfectly adjusts itself but when I decrease it, it doesn't change and stay as it is. I set my Stage's height and width to a div that I referenced. What could be wrong?
const [stageHeight, setHeight] = useState()
const [stageWidth, setWidth] = useState()
const observedDiv = useRef()
useEffect(() => {
if (!observedDiv.current) {
return
}
const resizeObserver = new ResizeObserver(() => {
if (observedDiv.current.offsetWidth !== stageWidth) {
setWidth(observedDiv.current.offsetWidth)
}
if (observedDiv.current.offsetHeight !== stageHeight) {
setHeight(observedDiv.current.offsetHeight)
}
})
resizeObserver.observe(observedDiv.current)
return function cleanup() {
resizeObserver.disconnect()
}
}, [observedDiv.current])
<main className="flex flex-1 flex-col col-[2_/_3] row-[2_/_3]" ref={observedDiv}>
<Stage height={stageHeight} width={stageWidth} draggable>
<Layer>
<Tank xCoordinate={0} yCoordinate={0} tankLabel="Feed" />
</Layer>
</Stage>
</main>