Grid Alignment Feature

Visualizer supports grid alignment tool. It facilitates the location of items. the location of the grid points depends of a number of styles, namely, size, spacing and color. the activation of such tool needs to set the option enableGrid to true;

visualizer.enableGrid=true;
This print screen demonstrates the grid tool:

It is possible to change the grid styles by modifying the parameters:

  • gridPointSize : the size of the point of the grid.
  • gridSpacing: the vertical and horizontal spacing between grid points.
  • gridPointColor: the color of grid points.
  • GridStyle(visualizer.gridStyle).gridPointColor=0xCC0000;
    GridStyle(visualizer.gridStyle).gridPointSize=2;
    GridStyle(visualizer.gridStyle).gridSpacing=50;
    

    The view of the new grid is as follows in this print screen:

    Grid Snap Tool

    The Grid tool supports a grid snap tool which take parts of displaceAction. It places the nodes (or groups) in the nearest point in the grid. The grid snap tool, is a parameter in the displaceActionData, it is activated as follows:
    var data:DisplaceActionData= new DisplaceActionData();
    data.useSnapGrid=true;
    
    This picture illustrates the validity of the grid snap tool:

    Alignment Methods

    Visualizer supports different alignment methods and this with setting a property "alignMethod" which is an uint to one of the following constants:

  • HORIZONTAL_ALIGNEMENT_CENTERED : alignment corresponding to the horizontal center of selected items.
  • HORIZONTAL_ALIGNEMENT_LEFT : horizontal alignment corresponding to the left item of the selection.
  • HORIZONTAL_ALIGNEMENT_RIGHT : horizontal alignment corresponding to the right item of the selection.
  • VERTICAL_ALIGNEMENT_CENTERED : alignment corresponding to the vertical center of selected items.
  • VERTICAL_ALIGNEMENT_TOP : vertical alignment corresponding to the top item of the selection.
  • VERTICAL_ALIGNEMENT_BOTTOM : vertical alignment corresponding to the bottom item of the selection.
  • VERTICAL_DISTRIBUTION : selection alignment with the same distance in the vertical direction.
  • HORIZONTAL_DISTRIBUTION : selection alignment with the same distance in the horizontal direction.
  • MIXED_DISTRIBUTION : selection alignment with the same distance in the horizontal and vertical directions.
  • This following code shows how a developer can use the align methods

    protected function AlignMethod_changeHandler(event:IndexChangeEvent):void
    		{
    			var alignMethod:uint;
    			switch (alignMethodComboBox.selectedItem)
    			{
    				case "HORIZONTAL_ALIGNEMENT_CENTERED":
    					alignMethod=0;
    					break;
    				case "HORIZONTAL_ALIGNEMENT_LEFT":
    					alignMethod=1;
    					break;
    				case "HORIZONTAL_ALIGNEMENT_RIGHT":
    					alignMethod=2;
    					break;
    				case "VERTICAL_ALIGNEMENT_CENTERED":
    					alignMethod=3;
    					break;
    				case "VERTICAL_ALIGNEMENT_TOP":
    					alignMethod=4;
    					break;
    				case "VERTICAL_ALIGNEMENT_BOTTOM":
    					alignMethod=5;
    					break;
    				case "VERTICAL_DISTRIBUTION":
    					alignMethod=6;
    					break;
    				case "HORIZONTAL_DISTRIBUTION":
    					alignMethod=7;
    					break;
    				case "MIXED_DISTRIBUTION":
    					alignMethod=8;
    					break;
    			}
    			vis.alignSelection(alignMethod);	
    		}