scaling a SharedWhiteBoard

[richtextformat]

i don't seem to be able to scale a whiteboard. this for instance, makes the whiteboard extremely wide - although no higher than 300px oddly - without distorting any of its contents:

<pods:SharedWhiteBoard id="whiteBoard"
width="500" height="300"
scaleX="0.5" scaleY="0.5"
/>

putting it in a container and adjusting scale on the container too is strange:

<mx:Box id="whiteBoardContainer"
width="100%" height="100%"
scaleX="0.5"
scaleY="0.5"
borderColor="#0000ff"
borderThickness="5"
>

<pods:SharedWhiteBoard id="whiteBoard"
width="100%" height="100%"
/>

all the components (toolbar, dragged arrows, etc) are half-sized and the whiteboard stretches halfway across the box but fills its full height! the fact that the toolbar shrinks is reason enough not to do that tho.

so with no way of effectively changing scale on either the whiteboard or its container... scale can't and/or shouldn't be adjusted on a whiteboard?

[richtextformat]

i have found a solution for this involving using two canvases

<mx:Canvas id="whiteBoardContainer"
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
>

<mx:Canvas id="whiteBoardWrapper">

<pods:SharedWhiteBoard id="whiteBoard"
width="100%" height="100%"
creationComplete="whiteBoard.shapesToolBar.move(0,0)"
/>

</mx:Canvas>

</mx:Canvas>

by setting the static size of 'whiteBoardWrapper' to its parent's ("whiteBoardContainer") wid & hei and then setting its scaleX & scaleY on resize events allows the whiteboard to scale accurately

[richtextformat]

i have also found a particularly cunning way of scaling & dealing with the distortion that happens to the shapesToolBar when you do this. obviously scaling a whole container scales all its contents, including the shapesToolBar, which you don't want scaled. But, by simply removeChilding it from the whiteboard and addChilding it to the whiteboard's unscaled parent, you lose none of the functionality and don't have to bother reverse engineering the scaling on the shapesToolBar. you have your MXML thus:

<mx:Canvas id="whiteBoardContainer"
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
>

<mx:Canvas id="whiteBoardWrapper">

<pods:SharedWhiteBoard id="whiteBoard"
width="100%" height="100%"
creationComplete="whiteBoard.shapesToolBar.move(0,0)"
/>

</mx:Canvas>

</mx:Canvas>

and you are scaling 'whiteBoardWrapper' but also on creationComplete you are doing this:

private function _onCreationComplete (event:Event=null):void
{

    whiteBoardContainer.addChild(whiteBoard.shapesToolBar);

}

problem solved with one simple line of code!

[richtextformat]

finishing this off, i also have to deal with the properties panels that pop up when you select certain tools. i'm adding a couple of listeners:

whiteBoard.addEventListener(WBCanvasEvent.PROPERTIES_TOOLBAR_ADD, _onAddProps);
whiteBoard.addEventListener(WBCanvasEvent.PROPERTIES_TOOLBAR_REMOVE, _onRemoveProps);

then making sure the props pop up lives in the same place as the shapesToolBar

private function _onAddProps (event:WBCanvasEvent):void
{
    _currentPropertiesPopUp = whiteBoard.currentPropertiesToolBar as UIComponent;
    whiteBoardContainer.addChild(_currentPropertiesPopUp);
}

private function _onRemoveProps (event:WBCanvasEvent):void
{
    whiteBoardContainer.removeChild(_currentPropertiesPopUp);
    _currentPropertiesPopUp = null;
}

which is a solution i particulary like because it's simple, it works, and it involves changing NONE of the adobe cocomo code

[Former Community Member]

Sounds like you got this right - we actually do something similar to this in ConnectNow to manage the toolbars.

nigel