How force Fabric.js polygon to update his points correctly after modify

[TheSinOfGreed]

I’m using the latest version of Fabric.js, and I have a problem with a polygon. As we know, in Fabric.js, the points field of a polygon doesn’t update after modification (it always contains the initial points).

I want to recalculate the polygon's points after modification to get the current position of each point. To achieve this, I use the trick with calcTransformMatrix (the points are calculated correctly), and then I assign the new points to the existing polygon.

The problem occurs when I try to scale or rotate a polygon with updated points—this leads to crashes and bugs, and I don’t know why.

Here is demo code:
https://codesandbox.io/p/devbox/vibrant-kowalevski-v8vkjk?workspaceId=ws_JP9WoSuC2iw5iMuNawSDEv

After dragging, when we try to scale or rotate, we can see weird behavior.
I expect that after updating the points, rotating or scaling should not break the polygon.
If you try scale/rotate after drag (so after update points) you will see crashes.

Before drag (before points update):

After drag & scale/rotate or just scale/rotate:

[shookcodes]

Hi @TheSinOfGreed!

I just battled with a similar issue with Polygons and their points. Here's what worked for me.

I utilized controlsUtils to generate polygon point controls, then, instead of polygon.setBoundingBox(true), add the option "exactBoundingBox: true" to your initial Polygon options.

const polygon = new fabric.Polygon(polygonPoints, {
  fill: "rgba(0, 128, 255, 0.5)",
  stroke: "blue",
  strokeWidth: 2,
  selectable: true,
  exactBoundingBox: true
});

// Import controlsUtils from Fabric
polygon.set({
  controls: controlsUtils.createPolyControls(polygon)
})

I have a polygon that changes between default controls (using controlsUtils.createObjectDefaultControls()) and polyControls with a mousedblclick listener on the Polygon. When using defaultControls, I set exactBoundingBox to false, then set it back to true when I switch back over to poly controls.

[asturur]

That is also what you can find here:
https://fabricjs.com/demos/poly-controls/

exactBoundingBox shouldn't really matter, but if you are using spiky points and stroke that may be useful.