WhiteBoardCustomShapes Images always on top

Question

Hi,
I am playing around with the WhiteBoardCustomShapes source and I noticed that images that are drawn on the WBcanvas are always above all the other elements after you reload the whiteboard.
At first everything is fine. The images stay in the order they are being placed on the whiteboard. But if you close and reopen the whiteboard. All the images are always above the other elements (arrows, strokes,text and so on).
Does anyone have an idea why and how to fix that?
Thank you

Answer 1

Okay so I found the solution and answer. If I am wrong, please correct me.
First the reason of the problem:
If you make customShapes you have to register them to the whiteboard. Well in the WhiteboardCustomShapes example they use the following code:
WBTriangle.mxml LINE 62:93
protected function onToolBarAdd(p_evt:Event):void
                if (sharedWB.isSynchronized) {
                   //.....some code here//.............                   
                    var imageShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
                    imageShape.toolTip ="Image";
                   imageShape.shapeFactory = new WBCustomShapeFactory(WBFileImageShape, WBSimpleShapeFactory.CURSOR_RECTANGLE, new WBFileImageShapeToolBar());
                    //..... and some more code
Okay so here is the code where we register our customShapaFactory. But if you check some more code com.adobe.coreUI.controls.whiteboardClasses.WBCanvas.as and debug it. You will realize that the
function protected function drawShape(p_desc:WBShapeDescriptor, p_animate:Boolean=false):void starting at line 894 is not recognizing our factory at the first call. The reason is that the whiteboard is registering its own shapeFactories somewhere at the beginning and we register our customShapeFactory after the whiteboard has already synchronized and started drawing elements on the Canvas.
SOLUTION:
Put this line of code this.sharedWB.registerFactory(new WBCustomShapeFactory(WBFileImageShape, WBSimpleShapeFactory.CURSOR_RECTANGLE, new WBFileImageShapeToolBar())); for example into the init() function [Line:70] or in the roomConnector_synchronizationChangeHandler function into the if (cSession.isSynchronized) { block (file: WBTriangle.mxml). This will register your customShapeFactory somewhere at the beginning and will make sure that your shapes are being drawn on the canvas at the same time all the regular shapes (triangles, arrows, rectangles and so on) are.
ANOTHER PROBLEM:
Well you might think that it will work now. And it does ..........SOMETIMES.
Objects do not have an order. doing something like this :
          for (var shapeID:String in _shapes) {
                returnArray.push(shapeID);
does not mean you will get the elements into the array in the same order as they are in the Object. So in line 423 file com.adobe.coreUI.controls.whiteboardClasses.SharedWBModel.as the function override public function getShapeIDs():Array does the above. To get rid of that problem i just added one line returnArray.sort(Array.NUMERIC); to that function.My changed function looks like this:
          override public function getShapeIDs():Array
             var returnArray:Array = new Array();
             for (var shapeID:String in _shapes) {
                 returnArray.push(shapeID);
             returnArray.sort(Array.NUMERIC);
             return returnArray;
After the two above mentioned changes everything is being rendered in the order it was originally drawn on the whiteboard.
If anyone knows a different or better way, please tell us. If not I hope that this will help somebody out there that had the same headache causing problem, for example you SANDY_LERMAN