How to (correctly position) childSymbols on mouse click.

Hi folks,

I found a really good tutorial here for how to create childsymbols on a mouse click and it works fine - as long as you are doing it on the main stage.

Here is the code:

var circle = sym.createChildSymbol("flower", "Rectangle");

var circleElement = circle.getSymbolElement();

var posX = (e.pageX- ($(circleElement).width()/2)) + "px";

var posY = (e.pageY- ($(circleElement).height()/2)) + "px";

sym.$(circleElement).css({"position":"absolute", "top":posY, "left":posX});

I wanted to create the ChildSymbols on to a premade symbol I have called 'Rectangle'. This works as long as my symbol 'Rectangle' is the same size as the Stage or at least placed at the top left of the screen.

However if I move the symbol 'Rectangle' away from the 0,0 coordinates then the Child symbols appear offset by the distance that 'Rectangle is from the zero point.

Any ideas on how to keep the Child symbols where I want them to be on the Rectangle? I tried calling the childSymbol like this:

var circle = sym.createChildSymbol("flower", "Stage");

And that keeps the symbols where they should be, but for some reason it has a performance lag and also means that you can't click within the bounds of a generated childSymbol.

Any help would be much appreciated!

Thanks,

Tom