React + Fabric.js: Rectangle movement using input not working after manual movement on canvas

[hamzajamil-care4u]

I'm working on a project where I'm using React with Fabric.js. I have a rectangle on the canvas that can be moved either by dragging it directly on the canvas or by updating its position through input fields (X and Y coordinates).

What I'm trying to do:

Move the rectangle on the canvas by dragging it or by changing its position through input fields.

The position should be in sync, so when I move the rectangle on the canvas, the input fields update, and when I change the input values, the rectangle moves.

The problem:

After dragging the rectangle directly on the canvas, the input fields no longer update the rectangle’s position in a correct position. This only happens after manually moving the rectangle a few times on the canvas.
Expected behavior:

Both dragging the rectangle on the canvas and changing the input values should update the rectangle's position and stay in sync.
You can also check out my full code on StackBlitz here: https://stackblitz.com/edit/fabric-js-react-ts-pzotk6.

Any ideas on what could be causing the input to stop updating the rectangle after moving it on the canvas?

[asturur]

You have to use the on('moving') event on the rectangle to update the input fields. You have to use your own code to update left and top from the input field to the rect and also call rect.setCoords() after that.

[hamzajamil-care4u]

Hi Asturur,
I tried using the on('moving') event to update the input fields and called rect.setCoords() after updating the left and top properties, but it still doesn’t seem to work correctly. The input fields either lag or don’t reflect the changes properly when moving the rectangle.

Any ideas on what might be going wrong?

[asturur]

Your fiddle is 450+ lines long and i can't read all of it.
At a first glance it seems to do what you are asking for so either you have solved it or i can't really understand what you want to improve

[DocAmz]

@hamzajamil-care4u

I'm using something like this, it work fine form me, i'm sure you will find a way to adapt this to your code
(I'm using 'on mousedown' to be sure to get the updated current values when the component is mounted )

    const [x, setX] = useState<number | undefined>(
      item ? toFixed(convertFromPx(item.left, 'mm'), 2) : undefined
    );
    const [y, setY] = useState<number | undefined>(
      item ? toFixed(convertFromPx(item.top, 'mm'),2) : undefined
    );

useEffect(() => {
      if (item) {
        setX(toFixed(convertFromPx(item.left, 'mm'),2))
        setY(toFixed(convertFromPx(item.top, 'mm'), 2))
      }

      const handleMoving = () => {
        setX(toFixed(convertFromPx(item.left, 'mm'),2))
        setY(toFixed(convertFromPx(item.top, 'mm'), 2))
      }
      item.on('moving', handleMoving)
      item.on('mousedown', handleMoving)

      return () => {
        if (item) {
          item.off('moving', handleMoving)
          item.off('mousedown', handleMoving)
        }
      }
    }, []);

<input
    type="number"
    step={'any'}
    inputMode="decimal"
    className="...className"
    value={y}
    onChange={(e) => handleChangeTop(e)}
    onKeyDown={handleKeyDown}
    onFocus={onFocus}
    onBlur={onBlur}
 />