Strange "mouse:over" behavior after changing object attributes (left, top, radius etc.) via numeric input

Question

I am fairly new to JavaScript programming and FabricJS (I've only been learning both of them for about a month now) so please bear with me.

I am trying to use FabricJS to create a user interface which should basically function as described below:

1. User creates a new circle object
2. User selects the created circle object
3. User is able to modify the selected object using the bounding box (as per usual)
4. Upon selecting the circle object, a sidebar positioned next to the canvas is updated dynamically with the parameters of the selected object (in this case the X (left), Y (top) and radius parameters). To do this, the user would need to enter the new desired values in the input boxes on the right hand side and click on the "Update" button afterwards.

This is handled by a switch case as such:

 case 'circle':
      if (rows <= 1) {
        //------------------------------PARAMETER VARIABLES-----------------------------------------------------
        var x = Math.round(activeObj.get("left"));
        var y = Math.round(activeObj.get("top"));
        var r = Math.round(activeObj.get("radius"));
        //------------------------------DYNAMIC PARAMETERS------------------------------------------------------
        $('#parameter_input_table tbody').append("<tr><td>X</td><td><input type=\"text\" id=\"x_table\" value=\"" + x + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td>Y</td><td><input type=\"text\" id=\"y_table\" value=\"" + y + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td>R</td><td><input type=\"text\" id=\"r_table\" value=\"" + r + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td><button id=\"btn_submit\">Update</button></td></tr>")

        //------------------------------HANDLERS------------------------------------------------------------------
        //add event listeners for numeric input
        $('#parameter_input_table tbody tr td input').eq(0).on('input', function() {
          x = this.value;
          activeObj.set({
            left: x
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr td input').eq(1).on('input', function() {
          y = this.value;
          activeObj.set({
            top: y
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr td input').eq(2).on('input', function() {
          r = this.value;
          activeObj.set({
            radius: r
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr #btn_submit').on('click', function() {
          activeObj.set({
            left: x,
            top: y,
            radius: r
          });
          activeObj.setCoords();
          canvas.discardActiveObject().requestRenderAll();
        });
      }
      break;

5. Additionally, the user can delete the currently selected object by pressing the "Delete" key on the keyboard.

I have created a working Fiddle where basically all of the aforementioned functions have been implemented.

Fiddle: Changing FabricJS object parameters using numeric input

However, I am running into a strange issue where updating the values via numeric input causes the cursor to change to the move-cursor at the "wrong" place despite having called setCoords() after modifying the object.

Try it for yourself, you'll see what I mean: open the Fiddle, select the default circle, change the values on the right side and click on update. You'd probably see that the cursor is somehow reacting as if the "mouse:over" event is triggered outside of the new circle's supposed bounding box.

Current workaround:

• Drag the object or
• Reselect object, click update

But obviously this is not a good workaround.

I have also tried deleting the activeObject and creating a new object after the Update button with the values saved in x, y and r. Issue still persists.

If anyone could help me with this issue/direct me to an existing discussion (if this issue has already come up before), I would be very grateful.

Answer 1

When using a value from an input you need to use parseInt() to convert the value from a string to an integer.

x = parseInt(this.value);
activeObj.set({
   left: x
});