Shapes not rendering within Stage in react-konva

Question

I have a few lines of code to create a Rectangle or any other shapes I have tried are not rendering within the Stage. I have tried adding html elements, however they do render within the Stage. Is this caused due to the use of refs? There are no errors that appear in the console as well.

App.js

import "./App.css";
import { Stage, Layer, Rect, Circle } from "react-konva";
import { Html } from "react-konva-utils";
import { useEffect, useRef, useState } from "react";
import Elements from "./components/elements/elements.component";

function App() {
  const canRef = useRef(null);
  const canvasContainerRef = useRef(null);

  const [canvasHeight, setCanvasHeight] = useState(0);
  const [canvasWidth, setCanvasWidth] = useState(0);

  useEffect(() => {
    setCanvasWidth(canvasContainerRef.current.offsetWidt);
    setCanvasHeight(canvasContainerRef.current.offsetHeight);
  }, []);

  return (
    <div className="app">
      <div className="header"></div>
      <div className="main">
        <div className="sidebar"></div>
        <div className="elements">
          <Elements canvasRef={canRef} />
        </div>
        <div className="editor">
          <div ref={canvasContainerRef} className="canvas">
            <Stage ref={canRef} width={canvasWidth} height={canvasHeight}>
              <Layer>
                <Html>
                  <h1> testing</h1>
                </Html>
                <Rect x={20} y={50} width={100} height={100} fill="red" />
              </Layer>
            </Stage>
          </div>
          <div className="slides"></div>
        </div>
      </div>
    </div>
  );
}

export default App;

App.css

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.header {
  display: flex;
  width: 100%;
  height: 8%;
  background-color: white;
  border-style: solid;
}

.main {
  display: flex;
  flex-direction: row;
  background-color: white;
  width: 100%;
  height: 92%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 6%;
  border-style: solid;
  background-color: white;
}

.elements {
  display: flex;
  background-color: white;
  width: 40%;
  max-width: 40%;
}

.editor {
  display: flex;
  flex-direction: column; 
  width: 100%;
  height: 100%;
}

.canvas {
  display: flex;
  width: 100%;
  height: 80%;
  background-color: #ebf1ff;
  border-style: solid;
}

.slides {
  background-color: white;
  width: 100%;
  height: 20%;
  border-style: solid;
}

Answer 1

I was able to fix this by changing height and width of the stage to window.innerHeight and window.innerWidth. I am not sure why it worked now as it used to have the same height and width before as well, but that fixed my issue

Shapes not rendering within Stage in react-konva

Question

1 answers

solution1
1 2022-10-04 04:34:05

Shapes not rendering within Stage in react-konva

Question

1 answers

solution1 1 2022-10-04 04:34:05

solution1
1 2022-10-04 04:34:05