Possible bug? Scaling in CompositeSprite.setAttributes causes corrupted SVG image

[Joe Kuan]

In ExtJs 4.1 the current CompositeSprite.setAttributes method is implemented as the following:

setAttributes: function(attrs, redraw) {
     var i = 0,
           items = this.items,
            len = this.length;
     for (; i < len; i++) {
            items[i].setAttributes(attrs, redraw);
     }
     return this;
}, 

I don't think it is totally correct because when I did the following:

compositeSprite.setAttributes({
       scale: {
             x: 0.5, y: 0.5
        }
}); 

I ended up with a corrupted SVG image. Each individual SVG element is correctly scaled but NOT between their distance. This is because it hasn't taken account the bbox dimension of the WHOLE CompositeSprite when it comes to scaling. When items[i].setAttributes(attrs, redraw) is called, it will call Ext.draw.Surface.scale method which has the following the implementation:

scale: function(sprite) {        
    var bbox,
          x = sprite.attr.scaling.x || 1,
          y = sprite.attr.scaling.y || 1,
          centerX = sprite.attr.scaling.centerX,
          centerY = sprite.attr.scaling.centerY;

    if (!Ext.isNumber(centerX) || !Ext.isNumber(centerY)) {
         bbox = this.getBBox(sprite, true);
         centerX = !Ext.isNumber(centerX) ? bbox.x + bbox.width / 2 : centerX;
         centerY = !Ext.isNumber(centerY) ? bbox.y + bbox.height / 2 : centerY;
    }
    sprite.transformations.push({
         type: "scale",
         x: x,
         y: y,
         centerX: centerX,
         centerY: centerY        
    });
}, 

As you can see, the line

bbox = this.getBBox(sprite, true); 

doesn't take the account the fact that the element is part of the CompositeSprite

IMHO, I think the CompositeSprite.setAttributes should be something like that and cascade the change down to the Surface implementation:

setAttributes: function(attrs, redraw) {
     var bbox = this.getBBox();
     var i = 0,
           items = this.items,
            len = this.length;
     for (; i < len; i++) {
            items[i].setAttributesByGroup(attrs, bbox, redraw);
     }
     return this;
}, 

Many thanks
Joe

[Joe Kuan]

Actually, this fix is a lot easier than I thought.

First for the CompositeSprite object, the usage of setAttributes method MUST contain cx and cy for the whole BBox in scaling, i.e. (This should be in the method documentation)

var bbox = spriteGroup.getBBox();
sprite.setAttributes({
     scale: {
           x: 0.5,
           y: 0.5,
           cx: bbox.x + bbox.width / 2,
           cy: bbox.y + bbox.height / 2
     }, true);
}); 

The above code will make sure each sprite is scaled within the perspective of the composite sprite.

Next, you need to fix the centerX and centerY typos bug in the Ext.draw.Surface.scale method

scale: function(sprite) {
    var bbox,
    x = sprite.attr.scaling.x || 1,
    y = sprite.attr.scaling.y || 1,
    // Typo 
    // centerX = sprite.attr.scaling.centerX,
    // centerY = sprite.attr.scaling.centerY;
    centerX = sprite.attr.scaling.cx,
    centerY = sprite.attr.scaling.cy;