0

I am using Fabric js inside my react project ( I did that by following this concept). And I used createContext to fetch the canvas that is been created. There is a Property window component which is going to check what object is selected in the canvas. Initially, there is no canvas. It is created when the user imports an image. I was planning that there will be a useState variable , which will change whenever new object of canvas is selected.
Objective is similar to Fabricjs Kitchensink 

import { fabric } from "fabric";
import { useContext, useEffect, useState } from "react";
import { FabricContext } from "../../App";
export const PropertyWindow = () => {
   let canvas = useContext(FabricContext);
   // when the canvas will be created then canvas.current will point to `fabric.Canvas`
   let [selectedObject, setSelectedObject] = useState();
   return (
      <div>{/* Here I will add the styles of that selected object. */}</div>
   );
};

Here in this code I wanted to store the selected object inside selectedObject and also the value will change whenever a new object is created

Firstly I planned to create a function that will trigger whenever the canvas is created, for this I used useEffect (like this: useEffect(() => {},[canvas]) ) with useState, but it was not working (I was printing the canvas, and in the console it was showing null and that was when the page was loaded ). Later, my approach was to use useEffect in the parent component and send the canvas as a prop, here also it was showing the same thing.
Right now I am planning for classic javascript approach to solve this problem. I will be using setInterval like this 

setInterval(()=>{
   if(canvas.current?.getSelectedObject() !== null){
      setSelectedObject(canvas.current.getSelectedObject()
   }
}, 300);

This will check inside the canvas if there is any object selected every 300ms and if there is selected then it will change the useState variable.
I have not used it yet, and I think there is a better way to fix this problem. I am not sure how to even search for this problem over the internet since this is problem is too specific.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
TanmayKr
  • 33
  • 6
  • `useEffect` won't detect changes to ref, because changes to ref don't trigger a render. I don't understand why so you need state at all – Konrad Nov 20 '22 at 08:20
  • @KonradLinkowski , Is there any hook for detecting the changes to ref. I consider using setInterval is not the correct approach for solving this problem. And also thanks, I atleast understood that this problem is actually related to detecting changes to ref. – TanmayKr Nov 20 '22 at 08:29
  • I can make changes in `useCallback` where the canvas is created. But this will only help to trigger when the canvas is created. I want to create a function that needs to constantly check the value inside `canvas.current.getSelectedObject()` – TanmayKr Nov 20 '22 at 08:39
  • But why do you need to do this? – Konrad Nov 20 '22 at 09:05

0 Answers0