I have a main canvas ‘blackboard’ in a panel, this canvas has itself several children, like a toolbar (tiles), a label and some skinning.
The problem is that when I move to the rectangle tool and I start drawing rectangles if I want to change the tool when I click on an other tool such as ‘circle’ or ‘select’ the button won’t catch the click event, instead the canvas will catch the mouse down and start drawing.
Just like on the picture. So I am unable to change tool once I start drawing.
alt text http://www.freeimagehosting.net/uploads/397a7cd49e.png
How could I not make the canvas react when it is on a tool, or how could I make the button catch the click first and tell the canvas no to do draw anything.
Of course I could just put the toolbar somewhere else not on the canvas, but since space is important I would like the buttons to be on the canvas.
I am open to any suggestions.
=== Here are some code to show how it works internally. ===
<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:degrafa="http://www.degrafa.com/2007" xmlns:comp="org.foo.bar.view.components.*" layout="absolute" title="Tableau"> <mx:Script> <![CDATA[ import org.edorado.edoboard.ApplicationFacade; ]]> </mx:Script> <mx:Canvas id="blackBoard"> <degrafa:Surface id="boardSurfaceContainer"> skinning </degrafa:Surface> <!-- Tool bar --> <comp:ToolbarView id = "toolbar" name = "toolbar" verticalScrollPolicy="off" horizontalScrollPolicy="off" bottom="5" right="5" top="5" direction="vertical" width="30" /> <mx:Label x="10" y="10" text="Label" color="#FFFFFF" id="lbl"/> </mx:Canvas> </mx:Panel> The toolbar is a list of buttons contained in a tile. The canvas ‘blackboard’ is linked to several events handling, in particular mouse up down and move for drawing shapes.
... boardCanvas.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown); boardCanvas.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp); ... private function handleMouseDown(event:MouseEvent):void { // Get the current mouse location which may be adjusted to the grid var selectPoint:Point = boardCanvas.globalToLocal(new Point(event.stageX, event.stageY)); startPoint = snapPoint(selectPoint.x, selectPoint.y); boardView.lbl.text = '(' + startPoint.x +',' + startPoint.y + ')'; .... The toolbar also listen to clicks
<?xml version="1.0" encoding="utf-8"?> <mx:Tile xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.charts.BubbleChart; import org.edorado.edoboard.view.components.shapes.*; public static const TOOL_CHANGE:String = "toolChange"; public static const TEXT_TOOL:String = "textTool"; public static const SELECT_TOOL:String = "selectTool"; public static const RECTANGLE_TOOL:String = "rectangleTool"; private var b:Button = null; private function handleButtonClick(event:MouseEvent):void { trace("CLICKED TOOL"); // selectButton.dispatchEvent(new Event(TOOL_CHANGE, true, true)) b = event.target as Button; b.dispatchEvent(new Event(TOOL_CHANGE, true, true)); } ]]> </mx:Script> <!-- Use class facotry ? --> <mx:Button id="selectButton" name="{SELECT_TOOL}" selectedUpSkin="assets.skins.ToolButtonSkin" width="30" height="30" styleName="selectButton" toolTip="selection" click="handleButtonClick(event); " /> <mx:Button id="textButton" name = "{TEXT_TOOL}" selectedUpSkin="assets.skins.ToolButtonSkin" width="30" height="30" styleName="textButton" toolTip="text" click="handleButtonClick(event);" /> <mx:Button id="rectButton" name = "{RECTANGLE_TOOL}" selectedUpSkin="assets.skins.ToolButtonSkin" width="30" height="30" styleName="rectButton" toolTip="rectButton" click="handleButtonClick(event);" /> </mx:Tile>
Thanks, I found some similar post actualy i just listened for mouse down in my toolbar and stoped the event propagation so that the canvas dont catch it.