[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

For line functionality once a line is pressed, then i should be able to draw as many lines as possible.

Posted on 2011-05-07
8
Medium Priority
?
389 Views
Last Modified: 2013-11-11
For line functionality once a line is pressed, then i should be able to draw as many lines as possible.

Below is my code.

Plz change accordingly and send me the updated code.

Thanks
Alam.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" xmlns:local="*" >
        
        <mx:Style>
                CustomDividedBox{
                        dividerAffordance:10;
                        dividerBorderColor:#3387A7;
                        dividerFillColors:#ffffff,#bad2f0;
                        collapseBoxDividerSkin: Embed(source="assets.swf",symbol="CollapseBoxDividerSkin");
                        expandBoxDividerSkin: Embed(source="assets.swf",symbol="ExpendBoxDividerSkin");
                }
        </mx:Style>
        <mx:Script>
                <![CDATA[
                        import DrawingClasses.Designer;
                        
                        import mx.controls.Alert;
                        import mx.core.DragSource;
                        import mx.core.UIComponent;
                        import mx.events.DragEvent;
                        import mx.events.ListEvent;
                        import mx.managers.DragManager;
                        
                        [Bindable]
                        [Embed(source="/Images/line.png")] 
                        public var linePicture:Class; 
                        [Bindable]
                        [Embed(source="/Images/box.png")] 
                        public var boxPicture:Class;
                        
                        [Bindable]
                        public var xm:XML = 
                                <AbstractComponentTemplate></AbstractComponentTemplate>;
                        
                        public var compType:XML = 
                                <ComponentTemplateDescriptor>
                                        <Owner>BackTesting</Owner>
                                        <Name>Component</Name>
                                        <Version>1</Version>
                                </ComponentTemplateDescriptor>;
                        
                        
                        [Bindable]
                        private var cm:ContextMenu;             
                        
                        public var xm1:XML;
                        
                        public var loopparent:Array = new Array();
                        
                        private var mouseTarget:DisplayObject;
                        private var xOff:Number;
                        private var yOff:Number;        
                        private var designer:Designer = new Designer();   
                        private var i:int;
                        private var j:int;
                        
                        private function init():void
                        {
                                designer.setDesignArea(designArea);                     
                                
                                var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
                                cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
                                
                                var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
                                cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
                                
                                var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
                                cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);                      
                                
                                cm = new ContextMenu();
                                cm.hideBuiltInItems();
                                cm.customItems = [cmi1, cmi2, cmi3];
                                cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
                        }
                        
                        private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                                
                        }
                        
                        private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
                                panelRight.width = 260;         
        
					        Alert.show("properties");
                                //vDivProp.moveDivider(0, 400);
                                //accrWinProp.label = "Two Way Split - Properties";                             
                                //accrWinProp.selectedIndex = 1;
                        }
                        
                        private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {                
                                viewstack1.selectedIndex = 1;
                        }
                        
                        private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {                
                                accrWinComp.selectedIndex = 1;
                        }               
                        
                        
                        
                        [Bindable]
                        private var propValue:String = "Component";
                        
                        private function itemClickEvent(event:ListEvent):void {
                                var propKey:String = dgProp.selectedItem.@key;
                                
                                if (propKey == "name") {
                                        propValue = dgProp.selectedItem.propvalue;                              
                                }
                        }
                        
                        [Bindable]
                        private var sourceXML:XML = 
                                <order>
                                        <!--This is a comment. -->
                                        <?PROC_INSTR sample ?>
                                        <item id='1'>
                                                <menuName>burger</menuName>
                                                <price>3.95</price>
                                        </item>
                                        <item id='2'>
                                                <menuName>fries</menuName>
                                                <price>1.45</price>
                                        </item>
                                </order>;
                                
                                [Bindable]
                                private var savedComp:Array=['ComponentTemplate', 
                                'iv85341.EquityCash.v1', 
                                'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
                                'ra92724.TwoWaySplit.EU.OTHERS.v1',
                                'ra92724.TwoWaySplit.US.OTHERS.v1',
                                'iv85341.VanillaNode.v1',
                                'iv85341.ReadGmrFs.v1'
                                ];
                        
                                [Bindable]
                                private var propData:XML = 
                                        <properties>
                                                <prop key="name">
                                                        <propvalue>Component</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Version">
                                                        <propvalue>1.0</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Owner">
                                                        <propvalue>iv85341</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="width">
                                                        <propvalue>250</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="height">
                                                        <propvalue>300</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>                          
                                                <prop key="X-Pos">
                                                        <propvalue>40</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                                <prop key="Y-Pos">
                                                        <propvalue>20</propvalue>
                                                        <itemRenderer>mx.controls.NumericStepper</itemRenderer>
                                                </prop>
                                        </properties>;
                                                
                                                private function rightClick(event:MouseEvent):void
                                                {
                                                Alert.show("Properties ..." + event.currentTarget, "Open");
                        }
                        
                        
                        // Draging Code Starts Here
                        private var curDate:Date = new Date();
                        private var dateList:XMLList = null;
                        
                        public function pictureDragDrop(event:DragEvent):void {  
                        
                        //Alert.show (" com = " + event.dragSource.dataForFormat("key"));
                        var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
                        var nodeValue:String = "";
                        if (nodeValue == "")
                        {
                        if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)      
                                {                                               
                                xm.appendChild(compType);
                                dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
                                xm.appendChild(dateList);                                               
                                dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
                                xm.appendChild(dateList);
                                
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                xm.appendChild(xm1);
                                }
                                else
                                        {                                               
                                        i++;
                                xm1 = XML("<" + nodeName + "></" + nodeName + ">");
                                
                                xm.appendChild(xm1); 
                                //loopparent.push(xmlarray:xm1);
                                
                                loopparent[i] = xm1;                                            
                                }
                                }
                                else
                                        {
                                        
                                        
                                        var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
                                
                                if (xm1 == null)
                                {                                       
                                xm.appendChild(xmlList); 
                                }
                                else
                                        {
                                        for (j = i; j>0; j--)
                                                {
                                                
                                                (loopparent[j]).appendChild(xmlList); 
                                                
                                                //Alert.show("alert");
                                                }                                       
                                                
                                                }
                                                }
                                                var x:int = event.currentTarget.mouseX - xOff;
                                                var y:int = event.currentTarget.mouseY - yOff;  
                                                if(event.dragSource.dataForFormat("key") == "box")
                                                {
                                                designer.addBox(x, y);   
                                                }   
                                                else  if(event.dragSource.dataForFormat("key") == "circle")
                                                {
                                                designer.addCircle(x, y);
                                                }
                                                else
                                                        {
                                                        designer.addRectangle(x, y);
                                                }
                                                
                                              }
                                                
                                                // this method gets x and y coordinate of template box image
                                                private function myoffset(img:Image):void {
                                                xOff = img.mouseX;
                                                yOff = img.mouseY;
                                                }
                                                
                                                // this method does acceptable draging box image
                                                public function pictureDragEnter(event:DragEvent):void{
                                                DragManager.acceptDragDrop(Canvas(event.target));        
                                                }
                                                
                                                // this method supply drag box when mouse move on the design area 
                                                private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
                                                var dragInitiator:Image=Image(event.currentTarget);
                                                var ds:DragSource = new DragSource();
                                                var imageProxy:Image = new Image();
                                                imageProxy.source = img1.source;            
                                                imageProxy.height= 150;
                                                imageProxy.width= 150;
                                                ds.addData(format,"key");
                                                
                                                DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
                                                }      
                                                // this method works when click on the line button 
                                                // it is make enable to draw line
                                                public function doDrawEnable():void {
                                                
                                                designer.setIsDrawEnable(true);                 
                                                
                                                }
                                                
                                                private var fileRef:FileReference;
                                                
                                                public function createXML():void {
                                                var fileName:String = "component.xml";
                                                fileRef = new FileReference();
                                                fileRef.browse();
                                                }
                                                
                                                // Draging code ends here
                                                
                                                
                                                private function onExpand(event:Event):void {
                                                         if (event.target.dividerIndex == 1) {
                											//Alert.show("hi");
                                                                panelRight.width = 0;
                                                        }else{
                                                                panelLeft.width = 200;
                                                        } 
                                                         //       panelLeft.width=this.screen.width-100;
                                                }
                                                
                                                private function onCollapse(event:Event):void{
                                                         if(event.target.dividerIndex == 1){
                                                                panelRight.width = 260;
                                                        }else{
                                                                panelLeft.width = 0;
                                                        }
                                                         
                                              //   panelLeft.width=(this.width)/60;
                                                }
                                                
                ]]>
        </mx:Script>
        
        
        <mx:Fade id="theEffect"/>
        <mx:Resize id="resizeEffect" />
        
        <mx:ApplicationControlBar dock="true">          
                <mx:Image toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                <mx:Image toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
                
                <mx:Image toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                <mx:Image toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />      
                <mx:Image toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
                
                <mx:Spacer width="100%" />
                <mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
        </mx:ApplicationControlBar>
        
        <mx:Resize duration="500" id="r1"/>
        <local:CustomDividedBox width="100%" height="100%" direction="horizontal" expand="onExpand(event)" collapse="onCollapse(event)">
                <mx:VDividedBox id="panelLeft" height="100%" width="20%" resizeEffect="r1">
                        <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinComp" x="51" y="35" width="100%" height="100%">
                                        <mx:Panel label="Nodes" width="100%" height="100%" layout="vertical" borderThicknessTop="-20" paddingTop = "20" paddingLeft = "20" >
                                                <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" ></mx:Image>
                                                <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" ></mx:Image>
                                                
                                                <mx:Button toggle="true" id="line" toolTip="Line" useHandCursor="true" buttonMode="true" icon="@Embed(source='Images/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Button>
                                          </mx:Panel>
                                        <mx:Panel label="Saved Components" width="100%" height="100%" borderThicknessTop="-20">
                                                <mx:List height="100%" width="100%" dataProvider="{savedComp}" />                                                                       
                                        </mx:Panel>
                                </mx:Accordion>         
                        </mx:Panel>
                </mx:VDividedBox>
                <mx:VDividedBox id="mp" height="100%" width="100%">
                        
                        <mx:HDividedBox width="100%" height="100%">                             
                                <mx:Canvas width="100%" height="100%" >
                                        
                                        <mx:TabBar x="0" y="10" dataProvider="viewstack1" />
                                        
                                        <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
                                                
                                                <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >   
                                                        
                                                </mx:Canvas>
                                                
                                                <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
                                                        <mx:ControlBar width="100%" barColor="#FF22CC">
                                                                <mx:Spacer width="100%"/>
                                                                <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />                                        
                                                        </mx:ControlBar>
                                                        <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />                                                           
                                                </mx:Panel>
                                                
                                        </mx:ViewStack>
                                        
                                </mx:Canvas>
                        </mx:HDividedBox>               
                        
                </mx:VDividedBox>
                
                <mx:VDividedBox id="panelRight" height="100%" width="0" resizeEffect="{resizeEffect}" >
                        <!--<mx:Panel title="Component Properties" width="100%" height="100%" layout="vertical" >
                                <mx:Accordion id="accrWinProp" x="51" y="35" width="100%" height="100%">    -->                                                     
                                
                                <mx:Panel id="accrCon2" title="Component Properties" width="100%" height="100%">
                                        
                                        <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
                                                <mx:columns>
                                                        <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
                                                        <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />                                                                                                                                          
                                                </mx:columns>
                                        </mx:DataGrid>
                                        
                                </mx:Panel>
                                
                                <!--</mx:Accordion>
                        </mx:Panel>-->
                </mx:VDividedBox>
                
        </local:CustomDividedBox>
                
</mx:Application>

Open in new window

demo.bmp
box.png
circle.png
rectangle.png
line.png
0
Comment
Question by:alamflex
  • 5
  • 2
7 Comments
 

Author Comment

by:alamflex
ID: 35726664

Designer.as
-----------
package DrawingClasses
{
	import flash.net.URLRequestHeader;
	import mx.collections.ArrayCollection;
	import mx.containers.Canvas;
	import flash.events.MouseEvent;
	import mx.core.UIComponent;
	import mx.rpc.events.AbstractEvent;
	import mx.controls.Alert;
	import flash.filters.BlurFilter;
	
	public class Designer
	{
		private var boxes:ArrayCollection = new ArrayCollection();
		private var circles:ArrayCollection = new ArrayCollection();
		private var rectangles:ArrayCollection = new ArrayCollection();
		private var lines:ArrayCollection = new ArrayCollection();
		private var designArea:Canvas;
		private var isDrawEnable:Boolean = false;
		private var isDrawing:Boolean = false;
		private var templateLine:Line;
		private var currentFromShape:Shape;
		private var currentToShape:Shape;
		
		public var boxCollection:ArrayCollection = new ArrayCollection;
		// designer is a manager class. 
		public function Designer(){        
			templateLine = new Line();
			templateLine.name="templateLine";
			templateLine.visible = false;
		}
		public function setIsDrawEnable(value:Boolean):void{
			this.isDrawEnable = value;
		}
		public function getIsDrawEnable():Boolean{
			return this.isDrawEnable;
		}
		public function setCurrentFromShape(value:Shape):void{
			this.currentFromShape = value;      
		}
		public function setCurrentToShape(value:Shape):void{
			this.currentToShape = value;  
		}

		public function getBoxList():ArrayCollection{
			return boxes;
		}
		public function getCircleList():ArrayCollection{
			return circles;
		}
		public function getRectangleList():ArrayCollection{
			return rectangles;
		}	
		public function getLineList():ArrayCollection{
			return lines;
		}
		private function getId(type:String):String{
			var idString:String  = type + Math.round(Math.random()*10000).toString();
			return idString;
		}
		
		
		// set design area and adding desing area events.    
		public function setDesignArea(value:Canvas):void{
			this.designArea = value;
			designArea.addChild(templateLine);      
			designArea.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			designArea.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
		}
		// this method checks mouse up event on the box or not .
		// if not cancel drawing. 
		// if there is no excpation add lines
		public function mouseUp(event:MouseEvent):void{
			if (isDrawEnable){
				try{
					if (Box(event.currentTarget)!= null){
						
						addLine();
					}                  
				}
				catch(e:Error){
					cancelDrawing();          
				}        
			}      
		}
		//when mouse move on the design area drawing template line if isDrawing true
		public function mouseMove(event:MouseEvent):void{
			if (isDrawing){
				drawLine();  
			}
		}
		// create box 
		public  var myBlur:BlurFilter = new BlurFilter();
		public function addBox(x:int, y:int):void{
			resetFilters();
			var newBox:Box = new Box();
			var id:String = getId("Box");
			newBox.setDesigner(this);
			newBox.create(x,y,id);
			boxes.addItem(newBox);    
			newBox.filters =[myBlur];
		    boxCollection.addItem(newBox); 
			designArea.addChild(newBox);
		}
		// create circle
		public function addCircle(x:int, y:int):void{
			resetFilters();
			var newCircle:Circle = new Circle();
			var id2:String = getId("Circle");
			newCircle.setDesigner(this);
			newCircle.create(x,y,id2);
			circles.addItem(newCircle);
			newCircle.filters =[myBlur];
	        boxCollection.addItem(newCircle);

			designArea.addChild(newCircle);
		}
		// create rectangle
		public function addRectangle(x:int, y:int):void{
			resetFilters();
			var newRectangle:Rectangle= new Rectangle();
			var id3:String = getId("Rectangle");
			newRectangle.setDesigner(this);
			newRectangle.create(x,y,id3);
			rectangles.addItem(newRectangle);
			newRectangle.filters =[myBlur];
			  boxCollection.addItem(newRectangle);

			designArea.addChild(newRectangle);
		} 
		// this method works when mouse down on the box 
		// it sets first point coordinae of template line
		public function prepareDrawing():void{    
			if (isDrawEnable){
				templateLine.graphics.clear();
				templateLine.setX1(designArea.mouseX);
				templateLine.setY1(designArea.mouseY);
				templateLine.visible = true;
				isDrawing = true;      
			}  
		}
		public function resetFilters():void
		{
    	for(var cnt:int = 0;cnt<boxCollection.length;cnt++)
    	{
    		if(boxCollection.getItemAt(cnt) is Box)
    		{
    			 var newBox:Box =boxCollection.getItemAt(cnt) as Box;
    			 newBox.filters = null;
    		}
    		else if(boxCollection.getItemAt(cnt) is Circle)
    		{
    			var newCircle:Circle =boxCollection.getItemAt(cnt) as Circle;
    			 newCircle.filters = null;
    		}
    		else if(boxCollection.getItemAt(cnt) is Rectangle)
    		{
    			var newRectangle:Rectangle =boxCollection.getItemAt(cnt) as Rectangle;
    			 newRectangle.filters = null;
    		}
    	}
		}
		// this methods set second coordinate of template line and draw
		public function drawLine():void{   
			if (isDrawing){
				templateLine.setX2(designArea.mouseX);
				templateLine.setY2(designArea.mouseY);
				templateLine.draw();
			}
		}
		
		// this methods create new line and add line to box and designer
		public function addLine():void{ 
			if (isDrawing){
				var newLine:Line = new Line();
				newLine.setId(getId("Line"));
				newLine.setFromShape(currentFromShape);
				newLine.setToShape(currentToShape);
				newLine.draw();        
				currentFromShape.addFromLine(newLine);
				currentToShape.addToLine(newLine);          
				lines.addItem(newLine);
				designArea.addChild(newLine);
				templateLine.visible = false;        
				isDrawEnable = false;
				isDrawing = false;        
			}
			else{
				cancelDrawing();
			}
		}
		
		// this methods cancel drawing
		public function cancelDrawing():void{
			templateLine.visible = false;
			isDrawEnable = false;
			isDrawing = false;
		}
	}
}

Shape.as
--------
package DrawingClasses
{
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Image;
	
	public class Shape extends Image
	{
		private var designer:Designer;
		//  this line refrence arrays for drawing this box lines especialy when box moving
		private var fromLines:ArrayCollection = new ArrayCollection();
		private var toLines:ArrayCollection = new ArrayCollection();

		public function Shape() {
			super();
		}
		
		public function addFromLine(fromLine:Line):void {
			this.fromLines.addItem(fromLine);
		}
		public function addToLine(toLine:Line):void {
			this.toLines.addItem(toLine);
		}
		public function getFromLines():ArrayCollection {
			return this.fromLines;
		}
		public function getToLines():ArrayCollection {
			return this.toLines;
		}
		public function getWidth():int {
			return this.width;
		}
		public function getHeight():int {
			return this.height;
		}
		public function getX():int {
			return this.x;
		}
		public function getY():int {
			return this.y;
		}
		public function setDesigner(value:Designer):void {
			this.designer = value;
		}

		// when box create from Image Class adding this events for listening mouse movement 
		public function create(x:int,y:int,id:String):void {
			this.x = x;
			this.y = y;
			this.id = id;
			this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
			this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
		}

		// mouse down event define start drawing line or draging box 
		//if line button click before, it sets mouse coordinate as firt points of line
		//if line button dosen't click it sets dragable of box
		private function mouseDown(event:MouseEvent):void {
			if (!designer.getIsDrawEnable()){
				this.startDrag();  
			}
			else{
				designer.prepareDrawing(); 
				designer.setCurrentFromShape(this);
				
			}      
		}
		//mouse move events works when box draging 
		//if this box has line this methods draws it
		private function mouseMove(event:MouseEvent):void {
			if (fromLines.length>0){
				drawFromLines();  
			}
			if (toLines.length>0){
				drawToLines();  
			}        
		}
		// this medthods draw "from direction" lines with updated coordinate 
		public function drawFromLines():void {
			for (var i:int=0;i<fromLines.length;i++){
				Line(fromLines[i]).draw();
			}
		}
		// this medthods draw "to direction" lines with updated coordinate 
		public function drawToLines():void {
			for (var i:int=0;i<toLines.length;i++){
				Line(toLines[i]).draw();
			}
		}
		
		//mouse up events define stop box dragging or finish drawing line
		//if finish drawing line it sets mouse coordinate as last points of line  
		//if stop draging it sets stop drag 
		private function mouseUp(event:MouseEvent):void {
			if (!designer.getIsDrawEnable()){
				this.stopDrag();
			}
			else{  
				designer.setCurrentToShape(this);
				designer.addLine();
			}      
		}

	}
} 

Box.as
------
package DrawingClasses
{
	public class Box extends Shape
	{
		[Bindable]
		[Embed(source="/Images/box.png")] 
		public var boxPicture:Class; 
		
		public function Box() {
			this.source = boxPicture;   
		}
	}
}

Circle.as
---------
package DrawingClasses
{
	public class Circle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/circle.png")] 
		public var circlePicture:Class; 
		
		public function Circle(){
			this.source = circlePicture;   
		}
	}
}

Line.as
-------
package DrawingClasses
{
	import flash.events.MouseEvent;
	import mx.core.UIComponent;
		
	public class Line extends UIComponent
	{
		private var thicknessNumber:uint = 2;
		private var alphaNumber:uint = 4.0;
		private var arrowWidth:int = 4;
		private var arrowHeight:int = 8;
		// x1,y1,x2,y2 this points are coordinate of line first point x,y and second 
		// poind x,y  positions on the screen
		private var x1:int;
		private var y1:int;
		private var x2:int;
		private var y2:int;
		private var color:uint = 0x000000;
		//  this box referance for find line distance
		private var fromShape:Shape;
		private var toShape:Shape;
		//  this boolean variable understand selection on,off    
		private var isSelect:Boolean=false;
		
		public function Line(){
			super();
			this.addEventListener(MouseEvent.CLICK,mouseClick);
		}
		public function setFromShape(value:Shape):void{
			this.fromShape = value;
		}
		public function setToShape(value:Shape):void{
			this.toShape = value;
		}
		public function getX1():int{
			return this.x1;
		}
		public function setX1(value:int):void{
			this.x1 = value;
		}
		public function getY1():int{
			return this.y1;
		}
		public function setY1(value:int):void{
			this.y1 = value;
		}
		public function getX2():int{
			return this.x2;
		}
		public function setX2(value:int):void{		
			this.x2 = value;
		}
		public function getY2():int{
			return this.y2;
		}
		public function setY2(value:int):void{
			this.y2 = value;
		}
		public function setId(value:String):void{
			this.id = value;
		}
		public function getId():String{
			return this.id;
		}
		public function clear():void{
			graphics.clear();
		}
		public function mouseClick(event:MouseEvent):void{
			select();
		}
		//  this method select line 
		public function select():void{
			if (!this.isSelect){
				this.color = 0xff0000;
				this.isSelect = true;
			}
			else{
				this.color = 0x000000;
				this.isSelect = false;
			}
			draw();
		}
		//  this method draw line on UIComponent graphics. 
		public function draw():void{
			if(name != "templateLine"){
				calculateCoordinate();
			}
			graphics.clear();
			//this transparent line for easy selection
			graphics.lineStyle(8,color,0.0);
			graphics.moveTo(getX1(),getY1());
			graphics.lineTo(getX2(),getY2());
			//this is real line
			graphics.lineStyle(thicknessNumber,color,alphaNumber);
			graphics.moveTo(getX1(),getY1());
			graphics.lineTo(getX2(),getY2());
			createArrow();
		}
		//Draw the arrow
		public function createArrow():void{
			var angle:Number = Math.atan2(getY2()-getY1(), getX2()-getX1());
			graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle),
				getY2()-arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle));
			graphics.lineTo(getX2(), getY2());
			graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle),	
				getY2()-arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle));										
		}
		
		//this method find which way "from" box sides.
		public function getDrawDirection():String{
			var drawDirection :String;
			var boxFromX2:int = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			
			if (fromShape.getX()>boxToX2 && boxFromY2<toShape.getY()){
				drawDirection = "RIGHT_TOP";
			}
			else if (fromShape.getX()>boxToX2 && fromShape.getY()>boxToY2){
				drawDirection  = "RIGHT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && fromShape.getY()>boxToY2){
				drawDirection  = "LEFT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && boxFromY2<toShape.getY()){
				drawDirection  = "LEFT_TOP";
			}
			else if (fromShape.getX()>boxToX2){
				drawDirection  = "RIGHT";
			}
			else if (boxFromY2<toShape.getY()){
				drawDirection  = "TOP";
			}
			else if (fromShape.getY()>boxToY2){
				drawDirection  = "BOTTOM";
			}
			else if (boxFromX2<toShape.getX()){
				drawDirection  = "LEFT";
			}
			return drawDirection;
		}
		//this methos calculate coordinate for draw line. it use two side of box distance
		private function calculateCoordinate():void{
			var drawDirection:String = getDrawDirection();
			var boxFromX2:int = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			var diffY:int = 0;
			var diffX:int = 0;
			
			if (drawDirection =="BOTTOM" || drawDirection =="TOP")
			{
				if (fromShape.getX()<=toShape.getX() && boxFromX2>=boxToX2){					
					diffX =(toShape.getWidth())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2>boxToX2){					
					diffX =(boxToX2 - fromShape.getX())/2;
					diffX = fromShape.getX() + diffX;				
				}
				else if (fromShape.getX()<toShape.getX() && boxFromX2<boxToX2){					
					diffX =(boxFromX2 - toShape.getX())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2<boxToX2){					
					diffX =(fromShape.getWidth())/2;
					diffX = fromShape.getX() + diffX;
				}
				if (diffX == 0){
					diffX = fromShape.getX() + (fromShape.getWidth()/2);
				}
			}
			if (drawDirection =="RIGHT" || drawDirection =="LEFT" ){				
				if (fromShape.getY()<=toShape.getY() && boxFromY2>=boxToY2){				
					diffY =(boxToY2 - toShape.getY())/2;					
					diffY = toShape.getY() + diffY;						
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2>boxToY2){					
					diffY =(boxToY2 - fromShape.getY())/2;
					diffY = fromShape.getY() + diffY;
				}
				else if (fromShape.getY()<toShape.getY() && boxFromY2<boxToY2){					
					diffY =(boxFromY2 - toShape.getY())/2;
					diffY = toShape.getY() + diffY;								
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2<boxToY2){					
					diffY =(fromShape.getHeight())/2;
					diffY = fromShape.getY() + diffY;															
				}				
			}
			switch (drawDirection ){
				case "RIGHT_BOTTOM":
					this.x1 = fromShape.getX()+diffX;
					this.y1 = fromShape.getY();
					this.x2 = boxToX2;
					this.y2 = boxToY2-diffY;				
					break;
				case "RIGHT_TOP":
					this.x1 = fromShape.getX();
					this.y1 = boxFromY2-diffY;
					this.x2 = boxToX2-diffX;
					this.y2 = toShape.getY();				
					break;
				case "LEFT_BOTTOM":
					this.x1 = boxFromX2-diffX;
					this.y1 = fromShape.getY() ;
					this.x2 = toShape.getX();
					this.y2 = boxToY2-diffY;				
					break;					
				case "LEFT_TOP":
					this.x1 = boxFromX2;
					this.y1 = boxFromY2-diffY;
					this.x2 = toShape.getX()+diffX;
					this.y2 = toShape.getY();				
					break;					
				case "RIGHT":
					this.x1 = fromShape.getX();
					this.y1 = diffY;
					this.x2 = boxToX2;
					this.y2 = diffY;			
					break;
				case "TOP":
					this.x1 = diffX;
					this.y1 = boxFromY2;
					this.x2 = diffX;
					this.y2 = toShape.getY();				
					break;
				case "BOTTOM":
					this.x1= diffX;
					this.y1= fromShape.getY();
					this.x2= diffX;
					this.y2= boxToY2;				
					break;
				case "LEFT":
					this.x1= boxFromX2;
					this.y1= diffY;
					this.x2= toShape.getX();
					this.y2= diffY;	
					break;
			}
		}
	}
}
Rectangle.as
------------
package DrawingClasses
{
	public class Rectangle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/rectangle.png")] 
		public var rectanglePicture:Class; 
		
		public function Rectangle() {
			this.source = rectanglePicture;   
			
		}
	}
}

CustomDividedBox.as
-------------------
package  
{
	
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	
	import mx.containers.BoxDirection;
	import mx.containers.DividedBox;
	import mx.containers.dividedBoxClasses.BoxDivider;
	import mx.controls.ToolTip;
	import mx.core.mx_internal;
	import mx.managers.CursorManager;
	import mx.managers.CursorManagerPriority;
	import mx.managers.ToolTipManager;

	use namespace mx_internal;

	[Style(name="collapseBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Style(name="expandBoxDividerSkin", type="Class", format="EmbeddedFile", inherit="no")]
	
	[Event(name="collapse", type="flash.events.Event")]
	
	[Event(name="expand", type="flash.events.Event")]

	[Event(name="stateChange", type="flash.events.Event")]
	
	public class CustomDividedBox extends DividedBox
	{
		private var cursorID:int = CursorManager.NO_CURSOR;
		
		public static const COLLAPSE:String = "collapse";
		public static const EXPAND:String = "expand";
		
		public static const OPEN_RIGHT:String = "right";
		public static const OPEN_LEFT:String = "left";
		
		public var dividerIndex:Number;

		private var _openDirection:String = OPEN_RIGHT;
		
		private var _state:String;
		private var _dividerWidth:Number;
		private var _knobToolTip:ToolTip;
	
		[Bindable]
		[Inspectable(enumeration="collapse,expand", defaultValue="collapse")]
		public function get state():String{
			return _state;
		}
		
		public function set state(value:String):void{
			if(_state != value){
				_state = value;
				dispatchEvent(new Event("stateChange"));
				changeDivider();
			}
		}
		[Bindable]
		[Inspectable(enumeration="right,left", defaultValue="right")]
		public function get openDirection():String{
			return _openDirection;
		}
		public function set openDirection(value:String):void{
			_openDirection = value;
		}
		
		public function get dividerWidth():Number{
			return _dividerWidth;
		}
		
		public function set dividerTooltip(value:String):void{
			if(_knobToolTip)
				ToolTipManager.destroyToolTip(_knobToolTip);
			_knobToolTip = ToolTipManager.createToolTip(value, 0, 0) as ToolTip;
			_knobToolTip.visible = false;
		}
		
		protected function changeDivider():void{
			if(openDirection == OPEN_LEFT){
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}else{
				if(state == COLLAPSE){
					setStyle("dividerSkin", getStyle("collapseBoxDividerSkin"));
					dispatchEvent(new Event(COLLAPSE));
				}else{
					setStyle("dividerSkin", getStyle("expandBoxDividerSkin"));
					dispatchEvent(new Event(EXPAND));
				}
			}
		}
		
		override protected function childrenCreated():void{
			super.childrenCreated();
			direction = BoxDirection.HORIZONTAL;
			changeDivider();
		}
		
		override mx_internal function startDividerDrag(divider:BoxDivider, trigger:MouseEvent):void
		{
			if(divider.numChildren > 0){
				var child:DisplayObject = divider.getChildAt(0);
				dividerIndex = child.parent.parent.getChildIndex(child.parent);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					super.startDividerDrag(divider, trigger);
				}else{
					var newState:String = (getStyle("dividerSkin") == getStyle("collapseBoxDividerSkin") ? EXPAND : COLLAPSE);
					if(openDirection == OPEN_RIGHT){
						state = newState;
					}else{
						state = (newState == EXPAND ? COLLAPSE : EXPAND);
					}
				}
			}
		}
		
		override mx_internal function changeCursor(divider:BoxDivider):void
		{
			if (cursorID == CursorManager.NO_CURSOR && divider.numChildren > 0)
			{
				var child:DisplayObject = divider.getChildAt(0);
				if(child.hitTestPoint(stage.mouseX, stage.mouseY) == false){
					var cursorClass:Class = isVertical() ?
											getStyle("verticalDividerCursor") as Class :
											getStyle("horizontalDividerCursor") as Class;
	
					cursorID = CursorManager.setCursor(cursorClass,
													   CursorManagerPriority.HIGH, 0, 0);
				}else if(_knobToolTip){
					_knobToolTip.move(stage.mouseX + 10, stage.mouseY + 10);
					_knobToolTip.visible = true;
				}
			}
		}
		
		override mx_internal function restoreCursor():void
		{
			if(_knobToolTip){
				_knobToolTip.visible = false;
			}
			if (cursorID != CursorManager.NO_CURSOR)
			{
				CursorManager.removeCursor(cursorID);
				cursorID = CursorManager.NO_CURSOR;
			}
		}
		
		override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    	{
    		super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var fillColors:Array = getStyle("dividerFillColors");
            var borderColor:Number = getStyle("dividerBorderColor");
          //  var matrix:Matrix = new Matrix();
            var fillType:String = GradientType.LINEAR;
        	var alphas:Array = [1, 1];
        	var ratios:Array = [0, 255];
        	
        	if(fillColors == null || isNaN(borderColor))
        		return;

            for(var i:int=0;i < numDividers;i++) {
                var divider:BoxDivider = getDividerAt(i);
				_dividerWidth = divider.getStyle("dividerAffordance");
                
                graphics.clear();
                graphics.lineStyle(1, borderColor);
                if(direction == BoxDirection.VERTICAL){
                   // matrix.createGradientBox(divider.width, _dividerWidth, Math.PI/2, divider.x, divider.y);
					//graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, divider.width, _dividerWidth);
                }else{
                	//matrix.createGradientBox(_dividerWidth, divider.height, 0, divider.x, divider.x);
					//graphics.beginGradientFill(fillType, fillColors, alphas, ratios, matrix);
                    graphics.drawRect(divider.x, divider.y, _dividerWidth, divider.height);
                }
                graphics.endFill();               
            }    
    	}
	}
}

Open in new window

0
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 35750623
In your class Designer.as modify getIsDrawEnable function, it will solve your probelm

public function getIsDrawEnable():Boolean{
     this.isDrawEnable = Button(Application.application["line"]).selected;
    return this.isDrawEnable;
}
0
 

Author Comment

by:alamflex
ID: 35752354
After modifying your code it is giving me two errors
1.Access of undefined property Application.
2.Call to a possibly undefined method Button.

what might be the problem?

Thanks,
Alam.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Closing Comment

by:alamflex
ID: 35752831
I imported Button and Application classes.
Now my problem is solved.
0
 

Author Comment

by:alamflex
ID: 35754323
Here after adding your code images are not moving in the drawing area.
After commenting your code images are moving in the drawing area.
0
 

Author Comment

by:alamflex
ID: 35754333
images on the drawing area should also move.
can you rewrite the code and send to me.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35755621
Man you implemented code and confused yourself how you are expecting users will handle
When u press a Line button you can ONLY draw connections, if you want to drag your boxes you have to click on line button again. If added a toggle option for that button
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question