[Bug]: Controls do not re-render on VPT change

[SupremeDeity]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.0.2

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/devbox/fabric-nextjs-sandbox-forked-5hhs5t?workspaceId=ws_DrBw2XRMwTM7BRr64FWCik

Steps To Reproduce

1. Open the codesandbox
2. Select the text object
3. Scroll

Expected Behavior

The controls should move along with the bounding box/object when viewport is panned.

Actual Behavior

The controls do not move with the bounding box when the viewport transforms are changed (in this case viewport is scrolled/panned).
I allow panning in my app and this issue happens when i do. In this example i have set up vertical panning with scroll. The controls's default color and settings have also been changed so they are more clearly seen (and also to replicate how it looks in my app). Although changing these settings does not affect this bug.

Error Message & Stack Trace

[SupremeDeity]

I already know the controls depend on the oCoords:

fabric.js/src/shapes/Object/InteractiveObject.ts

Line 571 in 798ecdb

const p = this.oCoords[key];

So i tried a little something:

canvas.getActiveObjects().forEach((obj: any) => obj.calcOCoords());
canvas.renderAll()

However, even this does not work. Maybe ill have to probe it a bit more.

[SupremeDeity]

Alright i found a solution, although i think it can probably get expensive real quick. Some advice would be appreciated.

I found one thing in the Zoom and pan, introduction to Fabric.js part 5

this.setViewportTransform(this.viewportTransform);

I have actually done the exact same thing in my app, however 2 things were causing discrepancies:

1. The docs do not consider if the user is using manual rendering mode, which i think is my bad for forgetting it but also a warning would be nice. I should try working on the docs a bit. What this essentially means is i need to call after the setViewportTransform:

canvas.requestRenderAll()

2. Following the tutorial should technically only fix the control's position AFTER mouse:up. This is where the expensive part comes in. You need to call canvas.setViewportTransform + canvas.requestRenderAll(). This will ensure the control's position changes correctly even while the "dragging/panning" is currently in process and hasn't ended yet.