CODEWITHSUNDEEP
reactjskonvajsreact-konvakonvajs-reactjs
Aaeron
Aaeron

Reputation: 23

Shapes not rendering within Stage in react-konva

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;
}

Upvotes: 1

Views: 413

Answers (1)

Aaeron
Aaeron

Reputation: 23

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

Upvotes: 1

Related Questions