3 Replies Latest reply: Apr 13, 2012 12:31 PM by medialutionlab RSS

    WhiteBoardCustomShapes Images always on top




      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

        • 1. Re: WhiteBoardCustomShapes Images always on top
          Sandy_Lerman Community Member

          As far as I can tell, there's no concept of z-order on the whiteboard. We've run into this issue as well and haven't found a fix for it.

          • 2. Re: WhiteBoardCustomShapes Images always on top
            medialutionlab Community Member

            Thank you for your reply.


            Were you even close to analyzing the problem or did you just stop trying. It kind of seems to me that the shapes(objects) are being saved in an order with a shapeID and on reloading the WhiteBoard, it is rendering them in that exact order. But somehow images do not follow that order and I am assuming it has something to do with images always being loaded on display (putting them on the stage). But that is just an assumption.


            Anyone thoughts on that?!

            • 3. Re: WhiteBoardCustomShapes Images always on top
              medialutionlab Community Member

              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.




              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) {



              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) {




                           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