Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

WhiteBoardCustomShapes Images always on top

Avatar

Former Community Member

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

1 Accepted Solution

Avatar

Correct answer by
Former 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.

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

View solution in original post

3 Replies

Avatar

Former 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.

Avatar

Former 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?!

Avatar

Correct answer by
Former 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.

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

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----