Change item property in a group

[zkrami]

I just started with fabric.js I created a group and I triend to animate a single item of it but nothing happened ` var canvas = new fabric.Canvas("c");

       var rectangle = new fabric.Rect({width:200 , height:100 , fill:'red' , top:100 , left:100}); 

       var group = new fabric.Group( [  rectangle] ) ; 

       canvas.add(group);
       canvas.renderAll();

    document.getElementsByTagName("body")[0].onclick = function(){

       console.log(group.item(0).getAngle());
       group.item(0).setAngle(45); 
       console.log(group.item(0).getAngle());

       canvas.renderAll();

    };
   ` 

I downloaded the latest version of your project and I'm working on Google Chrome 56.0.2924.87 (Official Build) (64-bit)

[asturur]

mmm this is a caching problem

angle is not in the list of the properties that invalidate cache. So changing it will not invalidate the group cache.

Other than that rotating an element inside a group is highly discouraged since the group dimension will not be affected from its rotation.

Please have a read here

http://fabricjs.com/fabric-object-caching

If you just started you took an unfortunate example i have to say. if you want to rotate objects inside group, disable object caching. Instructions in the link provided

[zkrami]

Thank you I think the problem solved

[ncou]

Will the "angle" propertie be added to the list of properties to invalidate the cache in the next fabric.js release ?

[asturur]

no. we should see a way to refresh groups anyway. Groups are not meant to be modified internally yet. bounding boxes do not update. you can change colors and other small things but not dimensions affecting properties

[Ivanca]

Is there a way to modify groups internally yet? I'm directly calling group._calcBounds() and this.graphic._updateObjectsCoords() to make it work but is mostly a hack.

[asturur]

not really. I did not made any progress in that direction, because is unclear to me what would be a feature and what not. Care to illustrate your use case?

[Ivanca]

I assumed modifying properties of children would just work:

let rect = new Rect({top: 0, left: 100, width: 100, height: 100})
let group = new Group()
group.add(rect)
// Next line should just move it 10 pixels from top, it moves it all to the center instead
rect.set({top: 10, left: 100, width: 100, height: 100}) 

This is a very important feature for what I'm doing so I decided to use konvajs for this project instead which already implements this feature. Still best of luck with fabric.

[joaojhgs]

not really. I did not made any progress in that direction, because is unclear to me what would be a feature and what not. Care to illustrate your use case?

Just passing by this 7yo issue... I'm also currently using the _calcBounds() and _updateObjectsCoords() functions for a use case of mine, so I thought I would just reply and ilustrate the use case, it may come in hand to understand how something natively implemented would be usefull.

I'm creating a custom group where it's custom properties are used to generate other objects directly into said group, every time said properties are changed I simply recalculate the objects positions, add the ones that weren't there before and remove the ones that shouldn't be there anymore.

I also created custom controls that go into these custom properties which are in fact points on the canvas delimiting the group size and bounds to which the objects will be generated, interacting with these controls change the points and as such the group objects sometimes could be completely redistributed, making it necessary to update the group bounding box in realtime. That could only be acomplished by using these internal functions (calcBounds and updateObjectsCoords).

I understand that groups are inherently not thought of to be used in cases like this, since their "internal" objects shouldn't be changed by themselves, but reality differs from theory and most of the time when someone using fabricjs needs to group things into one entity using custom logic they will end up using an extension of the group object, and end up needing to battle against the opinionated group implementation, as such, support for these advanced/custom implementations would be greatly appreciated for performance.

[ShaMan123]

@joaojhgs as you said this is an old ticket. A shame to stick to the old version of fabric it relates to. v6 has all you need I believe.

[joaojhgs]

@joaojhgs as you said this is an old ticket. A shame to stick to the old version of fabric it relates to. v6 has all you need I believe.

Fair enough, I've taken a look at the roadmap for version 6 and the group refactoring looks like exactly what I need. I'm just a bit skeptical to adopt the beta version yet since what I'm building rn is supposed to be production ready soon. Any hints towards a loosely beta "stable"?

[ShaMan123]

nope. but using anything else is a complete waste of time IMO