Custom grid components in 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;

// Grid size
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 defagrigridsize: Int = 10;
Public VaR _ gridsize: int;

Public Function get gridsize (): int
{
If (_ gridsize = int (undefined )){
Return defagrigridsize;
}

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 );
}

// Initialize the listener
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.tar get = handle ){
Child = resizingchild;
} Else {
Resizingchild = child;
}

Userinteracting = true;

If (event. localx> child. Width-resizemargin & event. localy> child. Height-resizemargin) | event.tar get = handle ){
This. addeventlistener (mouseevent. mouse_move, sizechild, false, 0, true );
} Else {

If (! (Event.tar get 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 );
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 ();

}
}
}