[FIXED-EXTJSIV-445] Ext.draw.Component: Render Items Config not rendered right

[Nickname]

Hi,

didn't find any matching bug, so opening a new one:

Using the SVG Tiger Example, removed items config and replaced it with a simple circle config

Result:
Circle is fit into the Ext.draw.Component instead of using the configured x,y,radius

Expected Result:
From the example code below: A circle should be placed with center point at [100,100] and a radius of 30

var cmp = Ext.create('Ext.draw.Component', {
    width: 400,
    height: 400,
    draggable: {
        constrain: true
    },
    floating: true,
    renderTo: Ext.getBody(),
    items: [{
        type: "circle",
        x: 100,
        y: 100,
        radius: 30,
        stroke:"#000",
        fill:"#fff"
    }]
}); 

Workaround:
Don't configure items and add them later to the surface

// now create the circle
// now create the circle
var circle = cmp.surface.add(Ext.create('Ext.draw.Sprite', {
        type: "circle",
        x: 100,
        y: 100,
        radius: 30,
        stroke:"#000",
        fill:"#fff",
        surface: cmp.surface // <-- Need to add surface, even if we add an item to a surface?!
}));
circle.show(true); // and show it 

Edit:
Thread title is not good, should be something like "Rendering primitives from items config". sorry.
I cannot change it.

[johanhaest]

Try setting viewBox: false in your draw.Component.
This should fix your problem normally. I've had this problem too where it streches the items in your surface to fill the surface completely. When I added them like you this was indeed fixed.
But the viewBox on false seems to work aswell.

[Nickname]

Thank you. Problem solved.

I read the JsDoc for the 'viewBox', but I didn't expect that it will overwrite a defined parameter like radius for circles and width/height for rectangles. I thought it will scale, if this informations are missing it will scale.

/**
 * @cfg {Boolean} viewBox
 * Turn on view box support which will scale and position items in the draw component to fit to the component while
 * maintaining aspect ratio. Defaults to true.
 */
viewBox: true, 

[Jamie Avins]

I'll change the documentation to be more clear.

[steffenk]

and maybe set it to false by default? This setting is something you should activate on need, not deactivate.

[Jamie Avins]

We may change this before release it's gone back and forth a couple times during development...