Drawing SVG shape with mouse using React

Question

I am using React with typescript. In my app, I converted the logic for drawing SVG using javascript on the existing question on StackOverflow

The problem is my shapes are not drawing. Please help me with what I missed in the code my addRectangle method is not triggering.

Here is my code:

let last_mousex: number = 0;
    let last_mousey: number = 0;
    let mousex: number = 0;
    let mousey: number = 0;
    let mousedown:boolean = false;

    const mouseDown = () => {
        last_mousex = xCord;
        last_mousey = yCord;
        mousedown = true;
    }

    const mouseUp = () => {
        mousedown = false;
    }

    const mouseMove = () => {
        mousex = xCord;
        mousey = yCord;
    }

    const addRectangle = () => {
        if (mousedown) {
            const width = Math.abs(mousex - last_mousex);
            const height = Math.abs(mousey - last_mousey);
            return 
        }
    }

return (
    
      
    
  );

user_9175097 · Answer

You were close, but have not used a component state at all, throwing away and overwriting the coordinates. You can do it like that:

const {useRef, useEffect, useState} = React;

const App = () => {
  const svgRef = useRef(null);
  const divRef = useRef(null);
  const { xCord, yCord } = useMousePosition({ divRef });
  const [mousedown, setMouseDown] = useState(false);
  const [last_mousex, set_last_mousex] = useState(0);
  const [last_mousey, set_last_mousey] = useState(0);
  const [mousex, set_mousex] = useState(0);
  const [mousey, set_mousey] = useState(0);
  const [rectx, setrectx] = useState(0);
  const [recty, setrecty] = useState(0);
  const [rectwidth, setrectwidth] = useState(0);
  const [rectheight, setrectheight] = useState(0);

  const mouseDown = () => {
    set_last_mousex(xCord);
    set_last_mousey(yCord);
    setMouseDown(true);
  };

  const mouseUp = () => {
    setMouseDown(false);
  };

  const mouseMove = () => {
    set_mousex(xCord);
    set_mousey(yCord);
  };

  const addRectangle = () => {
    if (mousedown) {
      const width = Math.abs(mousex - last_mousex);
      const height = Math.abs(mousey - last_mousey);

      const rx = mousex < last_mousex ? mousex : last_mousex;
      const ry = mousey < last_mousey ? mousey : last_mousey;
      if(rectx !== rx)  setrectx(rx);
      if(recty !== ry )setrecty(ry);
      if(rectheight !== height) setrectheight(height);
      if(rectwidth !== width)  setrectwidth(width);

      return (
        
      );
    }
  };

  return (
    
      
    
  );
}



function useMousePosition({divRef}){
  const [position, setPosition] = useState({ xCord: 0, yCord: 0 });

  useEffect(() => {

    function setFromEvent(e) {
          return setPosition({ xCord: e.clientX, yCord: e.clientY });
      }
      if(divRef.current){
          divRef.current.addEventListener("mousemove", setFromEvent);
      }
      
    return () => {
        if(divRef.current){
            divRef.current.removeEventListener("mousemove", setFromEvent);
        }
    };
  });
  return position;
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

.App { height: 500px; width: 800px; background-color: rgb(126, 119, 119); } #svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #000000; cursor: crosshair; } .rectangle { fill: rgba(255, 255, 255, 0); stroke-width: 3; stroke: rgb(250, 0, 0); }

Drawing SVG shape with mouse using React

1 Answers