how to sync objects state when there is multiple selection

[jhxxs]

I can update state when there is just one object being selected, but with multiple selection, I don't know how to continue, because opt.target is the transformer.

canvas.on("object:scaling", (opt) => {
	const id = opt.target.id
	if (id) {
		setShapes((state) => state.map((v) => (v.id === id ? opt.target : v)))
	} else {
		// !TODO how to update shapes
		console.log("opt", opt.target)
	}
})

https://codesandbox.io/p/github/jhxxs/fabric-demo/main?import=true&embed=1&showConsole=true&file=%2Fapp%2Fcomponents%2FFabric.tsx

[asturur]

opt.target._objects contains the objects that are selected.
Or just do opt.target.getObjects().

You will see they have transformed position and you have to counter transform them

[jhxxs]

Sorry, can you elaborate. getObjects() will get a ts error, and works. But the results I get from getObjects() is still the original state.

[asturur]

What is the state you want to know about? you don't say that, and the screenshot shows only width and height that do not change inside a group

[jhxxs]

I want to keep track of the state of every object on the canvas in order to show its current width and height and other things on the screen.
At first I tried to store every instance, but when multiple objects selected, in objects:scaling callback the state of the selected objects doesn't change, if I manually update the scaleX and scaleY of every object it will affects the ongoing scaling action.
Finally I managed to work it out by storing toJSON data, not sure whether it's a best practice.

[asturur]

if you want to know width and height of an object after it has been transformed by parents group you can take object.getCoords() and then make the distance between tl and tr for the width and tl and bl for the height.

That is the simplest thing i can think of