When I have a group of fabric IText objects and I change all their font sizes together, the grouped text objects all shrink or grow according to the font size, but the group controls and border stay in place rather than also changing in size. My question is, how do I get the group controls to auto-size after changing the objects inside the group?
Looking through the code for Fabric, I can't figure out how the boundaries get set in the first place on the group. I have tried calling _setCoords() and setCoords() on the group, but that moves the group to 0, 0 on the canvas and keeps the height and width the same. Calling _setCoords(true) has no effect.
I have also tried the following code in which I attempt to replace the old group with a new one containing the same objects, which would theoretically draw new boundaries, but it seems like a clunky solution. Also, it doesn't work: the new group boundaries and controls do not appear.
var selected = [];
var all = scope.canvas.getObjects();
for(var x in all) {
if(all.active) {
selected[selected.length] = x;
}
}
scope.canvas._discardActiveGroup();
var objects = [];
for(var x in selected) {
objects[x] = scope.canvas.getObjects()[x];
}
var group = new fabric.Group(objects,{
originX: 'center',
originY: 'center',
canvas: scope.canvas
});
//Using $timeout so that this will wait until current $scope digest is finished
$timeout(function () {
scope.canvas.setActiveGroup(group);
scope.canvas.renderAll();
}, 0);
scope.canvas.renderAll();
EDIT:
I think this is related to another problem where after the text object changes size due to font size change, its selection area remains where it was before the size change. That is, it selects the object if you click within the pre-resize bounding rectangle, regardless of the post-resize bounding rectangle. Only after selecting some other object or deselecting all objects does selection work as expected for the object. I call setCoords() for the objects, so their boundaries are drawn correctly.
There were two parts to this problem, as I said in my edit to the question. Solving my problem required both of the solutions below.
Bug #1: IText object's selection area remains as it was before size change even if you use setCoords(). This is because setCoords() "sets corner position coordinates based on current angle, width and height" -- but it does not update width and height based on changes to the text. That only occurs during the method _renderViaNative(ctx):
//inside _renderViaNative:
this.width = this._getTextWidth(ctx, textLines);
this.height = this._getTextHeight(ctx, textLines);
Solution: Because I am actually using a custom descending class of IText, I used an override of the setCoords function to fix it. Something like this override should really be part of the IText class:
/** @Override */
setCoords : function () {
var ctx = this.canvas.getContext();
var textLines = this.text.split(this._reNewline);
this._setTextStyles(ctx);
this.width = this._getTextWidth(ctx, textLines);
this.height = this._getTextHeight(ctx, textLines);
this.callSuper('setCoords');
},
Bug #2: The group's selection area does not refresh after the IText object(s) that it contains change size, even if you call setCoords. If you call _calcBounds with a false parameter, it sets the group's center point by calculating the objects' center point -- but because the objects have been reset to have coordinates relative to the group center as (0,0) for them, the recalculation comes up with (0,0) as the center, and therefore, the whole group moves so that its center is at (0,0) on the canvas. If you call _calcBounds with a true parameter, it resizes around its original center, rather than around the new center, and you can't manually reset the center because that will make the objects move, too.
Solution: Recalculate the boundaries from scratch by resetting the objects' coordinates. I did this mainly by cannibalizing the function addWithUpdate(object).
// set the objects to their not-in-group coordinates
activeGroup.destroy();
// since _restoreObjectsState (inside destroy) set objects inactive, set them active
activeGroup.forEachObject(activeGroup._setObjectActive, activeGroup);
// now we can call _calcBounds without bouncing the group to 0,0
activeGroup._calcBounds();
// set the objects to their in-group coordinates
activeGroup._updateObjectsCoords();