#Sizing issue with Electron, React and Konva.

2 messages · Page 1 of 1 (latest)

woeful horizon
#

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>
nocturne goblet
#

hey!
if you add console logs to ResizeObserver it does correctly change values on decreasing window size?

const resizeObserver = new ResizeObserver(() => {
  console.log(observedDiv.current.offsetWidth, observedDiv.current.offsetHeight);
  if (observedDiv.current.offsetWidth !== stageWidth) {
    setWidth(observedDiv.current.offsetWidth);
  }
  if (observedDiv.current.offsetHeight !== stageHeight) {
    setHeight(observedDiv.current.offsetHeight);
  }
});