GridController widget: allows to easily configure the number of cells in a grid

example for minimalcomps and GridController
date: July 24, 2009

forked:1
favorite:2
lines:344
license : All rights reserved
modified : 2009-09-09 05:05:16

Embed: Tweet

// forked from Adrian's minimalcomps example: Window, Horizontal/Vertical sliders, Panel
// example for minimalcomps and GridController
// date: July 24, 2009

package {
    import com.bit101.components.*;
    import flash.display.Sprite;

[SWF(width = "205", height = "205", frameRate = "30", backgroundColor = "0x000000")]
    public class Test extends Sprite {
	
        private var myGC:GridController;
	private var myPanel:BlocksPanel;
	private var myLabel:Label;
		
        public function Test() {

var padding:int = 8;
		myGC = new GridController(this, padding, padding, 100);
		myGC.setGridSize(7);
		myGC.setActiveGrid(2,5);
		myGC.addEventListener(GridControllerEvent.GRID_CONFIGURED, onGridConfigured);
		addChild(myGC);
			
		myLabel = new Label(this, 10, 120, "...");
		addChild(myLabel);

} // end constructor
		
	public function onGridConfigured(evt:GridControllerEvent):void {
		myLabel.text = "Rows: " + evt.rows + "\tCols: " + evt.cols;
		myLabel.text += "\n";
		myLabel.text += "Grid: " + myGC.gridSize + " x " + myGC.gridSize;
	}
    } // end class
} // end package

import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.events.MouseEvent;

class BlockEvent extends Event {
	public var row:int = 0; 
	public var col:int = 0; 
		
	public function BlockEvent (type:String, r:int = 0, c:int=0 ) {
		super(type);
		row = r;
		col = c;
	}

public override function clone():Event {
		return new BlockEvent(type, row, col);
	}
				
} // end class

class BlockSliderEvent extends Event {
	public var value:int = 0; 
	public static const SLIDED:String = "slided";

public function BlockSliderEvent (type:String, val:int ) {
		super(type);
		this.value = val;
	}

override public function clone():Event {
		return new BlockSliderEvent(type, value);
	}

} // end class

class GridControllerEvent extends Event {
	public var rows:int = 0; 
	public var cols:int = 0; 
		
	public static const GRID_CONFIGURED:String = "grid_configured";

public function GridControllerEvent (type:String, r:int = 0, c:int=0 ) {
		super(type);
		rows = r;
		cols = c;
	}
		
	public override function clone():Event {
		return new GridControllerEvent(type, rows, cols);
	}

} // end class

import com.bit101.components.Panel;
// import fl.motion.Color;
import flash.display.DisplayObject;

class Block extends Panel {
	public var row:int;
	public var col:int;
	private var selectedColor:int	= 0xff0000;
	private var overColor:int	= 0xffe0e0;
	private var clearColor:int	= 0xfefefe;
	private var currentColor:int	= clearColor;

public static const SELECTED:String	= "selected";
	public static const OVER:String		= "over";
	public static const CLEAR:String	= "clear";
	public static const CURRENT:String	= "current";
		
		
	public function Block (parent:DisplayObjectContainer, blockSize:int, xpos:int, ypos:int, r:int, c:int) {
		super(parent, xpos, ypos);

this.row = r;
		this.col = c;
			
		setSize(blockSize, blockSize);
		name	= "block_" + r + "_" + c;
		color = currentColor;
			
		buttonMode = true;
		useHandCursor = true;
	}

public function onColorBlocks(evt:BlockEvent):void {
			previewSetColor(evt.row, evt.col);
		}
		
		public function onClearBlock(evt:Event):void {
			parent.removeEventListener("ClearBlock", onClearBlock);
			parent.removeEventListener("ColorBlocks", onColorBlocks);
			parent.removeEventListener("ColorBlocksDown", onColorBlocksDown);
			
			parent.removeChild(this);			
		}

public function onColorBlocksDown(evt:BlockEvent):void {
			setColor(evt.row, evt.col);
		}
		
		private function previewSetColor(r:int, c:int):void {
			if (row <= r && col <= c) {
				setBlockColor(Block.OVER);
			}else {
				setBlockColor(Block.CURRENT);
			}
		};
		
		private function setColor(r:int, c:int):void {
			if (row <= r && col <= c) {
				setBlockColor(Block.SELECTED);
			}else {
				setBlockColor(Block.CURRENT);
			}
		};
		
		
		
		public function setBlockColor(color:String):void {

switch (color) {
				case "selected":
					this.color = selectedColor;
					break;
				case "current":
					this.color = currentColor;
					break;
				case "over":
					this.color = overColor;
					break;
				case "clear":
					this.color = clearColor;
					break;
				default:
					this.color = clearColor;
			}
		} // end function 
		
	} // end class

import com.bit101.components.Slider;

class BlocksSlider extends Slider {

public function BlocksSlider (parent:DisplayObjectContainer, sliderPos:String, xpos:int = 0, ypos:int = 0, width:int = 100, height:int = 100 ) {
		super(sliderPos, parent, xpos, ypos);
		setSize(width, height);
		name = "blocksSlider";
		backClick = true;
	}

override public function draw():void {
		super.draw();
	}

override protected function onDrop(event:MouseEvent):void {	
		super.onDrop(event);
		setSliderParams(minimum, maximum, Math.round(value));
		dispatchEvent(new BlockSliderEvent(BlockSliderEvent.SLIDED, Math.round(value)));
	}
		
	override protected function onBackClick(event:MouseEvent):void{
		super.onBackClick(event);
		setSliderParams(minimum, maximum, Math.round(value));
		dispatchEvent(new BlockSliderEvent(BlockSliderEvent.SLIDED, Math.round(value)));
	}

public function setSliderValue(gridBlocks:int = 3):void {
		setSliderParams(minimum, maximum, gridBlocks);			
	}

} // end class

// -----------------------------------------------

class BlocksPanel extends Panel {
	private var blocks:Array;
        private var panelSize:int = 100;
        public static const MinBlocks:int = 1;
        public static const MaxBlocks:int = 7;
        private var _currBlock :int = 3;	// how many blocks are available for selection		-> influences the bottomSlider pos
        private var blocksActiveR:int = 0;	// how many blocks are currently active per row		-> influences the leftSlider pos
						// 0 here mens 1 since the array is 0 based
        private var blocksActiveC:int = 0;	// how many blocks are currently active per column	-> influences the topSlider pos
						// 0 here mens 1 since the array is 0 based
	private var blockSize:int = 13;
	private var blockSpacer:int = 8;
	private var padding:int = 10;

public function BlocksPanel (parent:DisplayObjectContainer, xpos:int = 0, ypos:int = 0, width:int = 100, height:int = 100 ) {
		super(parent, xpos, ypos);
		setSize(width, height);
		name = "blocksPanel";

buttonMode = true;
		useHandCursor = false;
		shadow = false;

addEventListener(MouseEvent.MOUSE_OVER,	onMouseOver, true);
		addEventListener(MouseEvent.MOUSE_DOWN,	onMouseDown, true);
		addEventListener(MouseEvent.MOUSE_OUT,	onRollOut);
	}

override public function draw():void {
		super.draw();
		clearExistingBlocks();
		addBlocks();
	}

public function addBlocks():void {			
		computeBlockInfo();
			
		blocks = new Array();
			
		blocksActiveC = (blocksActiveC+1 >= currBlock) ? currBlock-1 : blocksActiveC;
		blocksActiveR = (blocksActiveR+1 >= currBlock) ? currBlock-1 : blocksActiveR;
			
		for (var r:int = 0; r < currBlock; r++ ) {
			var blocksR:Array = new Array();

for (var c:int = 0; c < currBlock; c++ ) {
				
				var xpos:int = padding + c * (blockSize + blockSpacer); // xpos is based on c (no of columns)
				var ypos:int = padding + r * (blockSize + blockSpacer); // ypos is based on r (no of rows)
				var sp:Block = new Block(this, blockSize, xpos, ypos, r, c);
					
				this.addEventListener("ColorBlocks", sp.onColorBlocks);
				this.addEventListener("ColorBlocksDown", sp.onColorBlocksDown);
				this.addEventListener("ClearBlock", sp.onClearBlock);
					
				blocksR.push(sp);
			}	
				
			blocks.push(blocksR);
		}

dispatchEvent(new BlockEvent("ColorBlocksDown", blocksActiveR, blocksActiveC));
		dispatchEvent(new GridControllerEvent(GridControllerEvent.GRID_CONFIGURED, blocksActiveR+1, blocksActiveC+1));

} // end function

public function onMouseOver(evt:Event):void {
		evt.stopPropagation(); // comment this out if we don't want the Blocks to receive this event notification
		var bl:Block = (evt.target) as Block;
		dispatchEvent(new BlockEvent("ColorBlocks", bl.row, bl.col));
	}

public function onMouseDown(evt:Event):void {
		evt.stopPropagation(); // comment this out if we don't want the Blocks to receive this event notification
			
    	        var bl:Block = (evt.target) as Block;
		blocksActiveR = bl.row;
		blocksActiveC = bl.col;

dispatchEvent(new BlockEvent("ColorBlocksDown", blocksActiveR, blocksActiveC));
		dispatchEvent(new GridControllerEvent(GridControllerEvent.GRID_CONFIGURED, blocksActiveR+1, blocksActiveC+1)); 
	}

public function onRollOut(evt:MouseEvent):void {
		if (evt.target is BlocksPanel) {
			var bp:BlocksPanel = (evt.target) as BlocksPanel;
				
			if ( (stage.mouseX <= bp.x || stage.mouseX >= bp.x + bp.width) 
                                || (stage.mouseY <= bp.y || stage.mouseY >= bp.y + bp.height) ) 
                        {
				dispatchEvent(new BlockEvent("ColorBlocksDown", blocksActiveR, blocksActiveC));
			}
		}
	}

public function onSlide(evt:BlockSliderEvent):void {
			currBlock = evt.value;
		}
		
		
		private function computeBlockInfo():void{
			blockSpacer = this.width / (2.618 * currBlock + 1);
			blockSize = blockSpacer * 1.618;
			padding = blockSpacer + (this.width - (2.618 * currBlock + 1) * blockSpacer) / 2;
			//trace("blockSpacer: " + blockSpacer + "\tblockSize: " + blockSize + "\tpadding: " + padding);
		}

private function clearExistingBlocks():void {
			dispatchEvent(new Event("ClearBlock"));			
		}

public function set currBlock(val:int):void {
			_currBlock = val;
			invalidate();
		}
		
		public function get currBlock():int {
			return _currBlock;
		}

public function setActiveGrid(r:int = 1, c:int = 1):void {
			blocksActiveC = c-1;
			blocksActiveR = r-1;
			invalidate();			
		}

public function setGridSize(gridBlocks:int = 3):void {
			currBlock = gridBlocks;
		}

} // end class

// ---------------------------------------------------------------------------------------------------------------------------

import com.bit101.components.Component;
import com.bit101.components.Style;
import flash.display.Sprite;
import flash.display.Shape;

class GridController extends Component {
	public var blocksPanel:BlocksPanel;
	public var blocksSlider:BlocksSlider;
	public var padding:int = 2;
	public var sliderHeight:int = 8;
	private var panelSize:int;
	
	private var _mask:Sprite;
	private var _background:Shape;
	private var _color:int = -1;
	private var _gridSize:int = 3;
	private var _shadow:Boolean = true;

public var content:Sprite;

public function GridController (parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number =  0, pnlSize:int = 100) {
            super(parent, xpos, ypos);
	    this.panelSize = pnlSize;
		
	    addBlocksPanel(this.content, panelSize);
	    blocksPanel.addEventListener(GridControllerEvent.GRID_CONFIGURED, onGridConfigured);
	    addBlocksSlider(this.content, blocksPanel);
	}

public function addBlocksPanel (parent:DisplayObjectContainer, pnlSize:int = 100):void {
            blocksPanel = new BlocksPanel(parent, 0, 0, pnlSize, pnlSize);
            blocksPanel.color = 0xefef00;
	    blocksPanel.currBlock = 5;
	    parent.addChild(blocksPanel);
	}

public function addBlocksSlider (parent:DisplayObjectContainer, bp:BlocksPanel):void {
	    blocksSlider = new BlocksSlider(parent, Slider.HORIZONTAL, bp.x, bp.y + bp.height, bp.width, sliderHeight);
	    blocksSlider.setSliderParams(BlocksPanel.MinBlocks, BlocksPanel.MaxBlocks, bp.currBlock);
	    blocksSlider.addEventListener(BlockSliderEvent.SLIDED, bp.onSlide);
            blocksSlider.addEventListener(BlockSliderEvent.SLIDED, onSlide);
	    addChild(blocksSlider);
	}

override protected function init():void {
	    super.init();
	    setSize(100, 100);
	}
	
	
	override protected function addChildren():void {
		_background = new Shape();
		addChild(_background);
		
		_mask = new Sprite();
		_mask.mouseEnabled = false;
		addChild(_mask);
		
		content = new Sprite();
		addChild(content);
		content.mask = _mask;
		
		filters = [getShadow(2, true)];

}
	
	
	
	override public function draw():void {
    	    super.draw();
	    _background.graphics.clear();
	    if(_color == -1){
		_background.graphics.beginFill(Style.PANEL);
            }
	    else
	    {
		_background.graphics.beginFill(_color);
            }
	    _background.graphics.drawRect(0, 0, _width, _height);
	    _background.graphics.endFill();
		
    	    _mask.graphics.clear();
	    _mask.graphics.beginFill(0xff0000);
	    _mask.graphics.drawRect(0, 0, _width, _height);
	    _mask.graphics.endFill();
	}	
	
	
	public function onGridConfigured(evt:GridControllerEvent):void {
	    dispatchEvent(evt);
	}
	
	
	public function setGridSize(gridBlocks:int = 3):void {
		gridSize = gridBlocks;			
		blocksPanel.setGridSize(gridSize);
		blocksSlider.setSliderValue(gridSize);
	}
		
	public function setActiveGrid(rows:int = 1, cols:int = 1):void {
		blocksPanel.setActiveGrid(rows, cols);
	}

public function onSlide(evt:BlockSliderEvent):void {
		gridSize = evt.value;
	}
		
	public function set gridSize(noOfBlocks:int):void {
		_gridSize = noOfBlocks;
	}
		
	public function get gridSize():int{
		return _gridSize;
	}	
} // end class

//--------------------------------------------------------------------------------------------------------------------------------

Code Fullscreen

Preview Fullscreen