flex中自定义网格组件

package com.cimx.user_defined_component
{
 import flash.display.DisplayObject;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 import mx.containers.Canvas;
 import mx.core.UIComponent;
 import mx.events.MoveEvent;
 import mx.events.ResizeEvent;
 
 public class DockBox extends Canvas {
  public var inheritGridSize:Boolean = false;
  
  public var autoUpdateGrid:Boolean = false;
  
  private var sizingGrid:Boolean = false;
  
  //网格大小
  public function set gridSize( value:int ):void
  {
   sizingGrid = true;
   
   handle.visible = false;
   
   if( value <= 0 ){
    value = gridSize;
   }
   
   if( _gridSize == int(undefined) ){
    _gridSize = value;
    sizingGrid = false;
    return;
   }
   
   var lastGridSize:int = _gridSize;
   
   _gridSize = value;
   
   if( autoUpdateGrid ){
    
    for each( var child:DisplayObject in getChildren() ){
     
     if( child is UIComponent ){
      
      if( !UIComponent( child ).includeInLayout ){
       continue;
      }
      
     }
     
     child.x = ( child.x/lastGridSize ) * _gridSize;
     child.y = ( child.y/lastGridSize ) * _gridSize;
     child.width = ( child.width/lastGridSize ) * _gridSize;
     child.height = ( child.height/lastGridSize ) * _gridSize;
     
     if( child is DockBox ){
      
      var dockBoxChild:DockBox = DockBox( child );
      
      if( dockBoxChild.inheritGridSize ){
       
       dockBoxChild.gridSize = value;
       
      }
      
     }
     
    }
    
   }
   
   callLater( setSizingGridFalse );
   
  }
  
  private function setSizingGridFalse():void
  {
   sizingGrid = false;
  }
  
  private var defaultGridSize:int = 10;
  public var _gridSize:int;
  
  public function get gridSize():int
  {
   if( _gridSize == int(undefined) ){
    return defaultGridSize;
   }
   
   return _gridSize;
  }
  
  
  
  public var resizeMargin:Number = 10;
  
  private var resizingChild:UIComponent;
  
  private var handle:Canvas = new Canvas();
  
  public function DockBox() {
   super();
   
   //create resize-handle
   handle.includeInLayout = false;
   handle.visible = false;
   handle.width = handle.height = resizeMargin;
   //
   handle.graphics.lineStyle( 1, 0x000000 );
   handle.graphics.beginFill( 0x00AADD, 0 );
   //triangle 1
   handle.graphics.moveTo( handle.width/4, handle.height );
   handle.graphics.lineTo( handle.width, handle.height/4 );
   handle.graphics.lineTo( handle.width, handle.height );
   handle.graphics.lineTo( handle.width/4, handle.height );
   //triangle 2
   handle.graphics.moveTo( handle.width/2, handle.height );
   handle.graphics.lineTo( handle.width, handle.height/2 );
   handle.graphics.lineTo( handle.width, handle.height );
   handle.graphics.lineTo( handle.width/2, handle.height );
   //
   handle.graphics.endFill();
   
   handle.addEventListener( MouseEvent.MOUSE_DOWN, startDragChild );
   
   this.addChild( handle );
   
   this.addEventListener( Event.ADDED_TO_STAGE, initListeners );
  }
  
  //初始化监听器
  private function initListeners( event:Event ):void {
   this.stage.addEventListener( MouseEvent.MOUSE_UP, clearSizingListener );
  }
  
  public override function addChildAt(child:DisplayObject, index:int):DisplayObject {
   sizingGrid = true;
   
   super.addChildAt( child, index );
   
   if( child is UIComponent ){
    if( UIComponent( child ).includeInLayout ){
     child.addEventListener( MouseEvent.MOUSE_DOWN, startDragChild );
     child.addEventListener( MouseEvent.MOUSE_UP, stopDragChild );
     child.addEventListener( MoveEvent.MOVE, snapChildToGrid );
     child.addEventListener( ResizeEvent.RESIZE, resizeChildToGrid );
     
     //show hide resize-handle
     child.addEventListener( MouseEvent.MOUSE_OVER, showChildHandle );
     child.addEventListener( MouseEvent.MOUSE_OUT, hideChildHandle );
    }
   }
   
   callLater( setSizingGridFalse );
   
   return child;
  }
  
  private function showChildHandle( event:MouseEvent ):void {
   var child:UIComponent = UIComponent( event.currentTarget );
   
   if( !userInteracting ){
    resizingChild = child;
   }
   
   placeHandle( child );
   bringHandleToFront();
   handle.visible = true;
  }
  
  private function bringHandleToFront():void {
   setChildIndex( handle, numChildren-1 );
  }
  
  private function placeHandle( child:UIComponent ):void {
   handle.x = child.x + child.width - handle.width;
   handle.y = child.y + child.height - handle.height;
  }
  
  private function hideChildHandle( event:MouseEvent ):void {
   if( !userInteracting && !UIComponent( event.currentTarget ).getBounds( this ).contains( mouseX, mouseY ) && !handle.getBounds( this ).contains(
    
    mouseX, mouseY ) ){
    handle.visible = false;
   }
  }
  
  private function startDragChild( event:MouseEvent ):void {
   var child:UIComponent = UIComponent( event.currentTarget );
   
   if( event.target == handle ){
    child = resizingChild;
   }else{
    resizingChild = child;
   }
   
   userInteracting = true;
   
   if( (event.localX > child.width - resizeMargin && event.localY > child.height - resizeMargin) || event.target == handle ){
    this.addEventListener( MouseEvent.MOUSE_MOVE, sizeChild, false, 0, true );
   }else{
    
    if( !(event.target is DockBox) && event.currentTarget is DockBox){
     return;
    }
    
    if( event.shiftKey ){
     return;
    }
    
    handle.visible = false;
    
    child.startDrag( false );
   }
   
   super.setChildIndex( child, this.numChildren-1 );
   
   drawGrid();
  }
  
  private function stopDragChild( event:MouseEvent ):void {
   UIComponent( event.currentTarget ).stopDrag();
  }
  
  private function snapChildToGrid( event:MoveEvent ):void {
   if( sizingGrid ){
    return;
   }
   
   var child:UIComponent = UIComponent( event.currentTarget );
   
   if( child.x%gridSize < gridSize/2 ){
    child.x = child.x - child.x%gridSize;
   }else{
    child.x = child.x - (child.x%gridSize) + gridSize;
   }
   
   if( child.y%gridSize < gridSize/2 ){
    child.y = child.y - child.y%gridSize;
   }else{
    child.y = child.y - (child.y%gridSize) + gridSize;
   }
   
   if( child.x < 0 ){
    child.x = 0;
   }
   
   if( child.y < 0 ){
    child.y = 0;
   }
   
   placeHandle( child );
   
  }
  
  private function resizeChildToGrid( event:ResizeEvent ):void {
   if( sizingGrid ){
    return;
   }
   
   var child:UIComponent = UIComponent( event.currentTarget );
   child.width = child.width - child.width%gridSize;
   child.height = child.height - child.height%gridSize;
   
   if( child.width < gridSize ){
    child.width = gridSize;
   }
   
   if( child.height < gridSize ){
    child.height = gridSize;
   }
   
   placeHandle( child );
   
  }
  
  private var userInteracting:Boolean = false;
  
  private function clearSizingListener( event:MouseEvent ):void {
   if( resizingChild ){
    resizingChild.stopDrag();
   }
   userInteracting = false;
   handle.visible = false;
   drawBG();
   this.removeEventListener( MouseEvent.MOUSE_MOVE, sizeChild );
  }
  
  private function sizeChild( event:MouseEvent ):void {
   resizingChild.width = mouseX + horizontalScrollPosition - resizingChild.x;
   resizingChild.height = mouseY + verticalScrollPosition - resizingChild.y;
  }
  
  private var backgroundAlphaLevel:Number;
  
  private function drawBG():void {
   var bgColor:uint = this.getStyle( "backgroundColor" ) as uint;
   var bgAlpha:Number = this.getStyle( "backgroundAlpha" ) as Number;
   
   if( bgAlpha == Number( undefined ) ){
    bgAlpha = 1;
   }
   
   if( this.backgroundAlphaLevel == Number( undefined ) ){
    this.backgroundAlphaLevel = bgAlpha;
    this.setStyle( "backgroundAlpha", 0 );
   }else{
    bgColor = this.backgroundAlphaLevel;
   }
   
   if( bgColor == uint( undefined ) ){
    bgColor = 0x000000;
    bgAlpha = 0;
   }
   
   this.graphics.clear();
   this.graphics.lineStyle(0,0,0);
   this.graphics.beginFill( bgColor, bgAlpha );
   this.graphics.drawRect( 0, 0, this.width, this.height );
   this.graphics.endFill();
  }
  
  
  private function drawGrid():void
  {
   drawBG();
   
   //draw grid line
   var rows:int = Math.round(this.height / gridSize);
   var cols:int = Math.round(this.width / gridSize);
   
   this.graphics.lineStyle(1, 0x00AADD);
   this.graphics.beginFill( 0, 0 );
   
   for( var c:int = 0; c < cols; c++ )
   {
    for( var r:int = 0; r < rows; r++ )
    {
     var toX:Number = c * gridSize - ( horizontalScrollPosition%gridSize );
     var toY:Number = r * gridSize - ( verticalScrollPosition%gridSize );
     if( toX + gridSize <= this.width && toY + gridSize <= this.height ){
      if( toX >= 0 && toY >= 0 ){
       this.graphics.drawRect(toX, toY, gridSize, gridSize);
      }
     }
    }
   }
   
   this.graphics.endFill();
   
  }
 }
}