mako 0.0.0

data/lib/mako/data/flash_widget_dev_core/src/materia/components/ScrollableSizableImage.mxml

@@ -0,0 +1,654 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
+           xmlns:local="*" clipContent="true"
+           horizontalScrollPolicy="off" verticalScrollPolicy="off"
+		>
+
+	<mx:Metadata>
+		[Event(name="repositionDone", type="flash.events.Event")]
+		[Event(name="imageLoaded", type="flash.events.Event")]
+	</mx:Metadata>
+
+	<mx:Image id="displayedImage" source="{_sourceImageBytes}"
+	          mouseDown="{mouseDownFunction()}"
+	          maintainAspectRatio="true"
+	          scaleContent="true"
+	          complete="{trace('complete'); imageLoaded()}" smoothBitmapContent="true"
+			/>
+
+	<mx:SWFLoader id="drawingClip" source="{new MovieClip()}" />
+
+	<!-- removing scale slider -> not needed -->
+	<!--
+	<mx:Canvas width="300" 
+		visible="{_isCurrentlyEditing}"
+		bottom="0"
+		 horizontalCenter="0">
+		<mx:HBox width="100%">
+			<mx:Label text="Image Scale" color="0x000000"/>
+			<mx:HSlider id="imageScaleSlider" 
+				minimum="{MINIMUM_SCALE}" 
+				maximum="2.0" 
+				value="1.0" 
+				change="{scaleSliderChange();}"/>
+		</mx:HBox>
+	</mx:Canvas>
+	-->
+
+	<mx:Button id="buttonDone" visible="{_isCurrentlyEditing}" label="Done" click="{dispatchEvent(new Event('repositionDone'))}" styleName="gameButton"
+			/>
+
+	<mx:Script>
+		<![CDATA[
+		import nm.draw.lines.Dotted;
+
+		// NOTE: making this assuming it is going to have a set size that doesnt move around
+
+		public static const EVENT_IMAGE_LOAD_COMPLETE:String = "EVENT_IMAGE_LOAD_COMPLETE";
+
+		protected static const MINIMUM_SCALE:Number = 0.2;
+
+		protected static const SQUARE_SIZE:Number = 10.0;
+
+		public var loaded:Boolean = false;
+
+		[Bindable]
+		protected var _sourceImageBytes:*; // note: not using a byte array anymore TODO rename
+
+		// NOTE: for some reason, i need to do both width and height even tho i have maintainAspectRatio="true"
+		protected var _originalImageHeight:Number = 0.0;
+		protected var _originalImageWidth:Number = 0.0;
+
+		[Bindable]
+		protected var _isCurrentlyEditing:Boolean = false;
+
+		protected var _isScalingBlocksInit:Boolean = false
+		protected var _squareTopLeft:MovieClip;
+		protected var _squareTopRight:MovieClip;
+		protected var _squareBottomLeft:MovieClip;
+		protected var _squareBottomRight:MovieClip;
+
+		// a previous image location so they can cancel to undo image moves
+		protected var _hasPreviousLocation:Boolean = false;
+		protected var _prevImageWidth:Number;
+		protected var _prevImageHeight:Number;
+		protected var _prevImageX:Number;
+		protected var _prevImageY:Number;
+
+		protected var _imageScale:Number = 1.0;
+
+		// if they try to set the scale before the image is loaded
+		//  we need to remember it for when it is loaded
+		protected var _needToReScaleOnLoad:Boolean = false;
+		protected var _rescaleOnLoadScale:Number = 1.0;
+
+		// used by classes that extend this class that don't want dragging enabled
+		protected var _allowDragging:Boolean = true;
+
+		public function resetImage():void
+		{
+			if(displayedImage.content != null)
+			{
+				// if the image is too large, scale it down to fix
+
+				var imageWidth:Number = _originalImageWidth;
+				var imageHeight:Number = _originalImageHeight;
+				var containerWidth:Number = this.width - SQUARE_SIZE * 2;
+				var containerHeight:Number = this.height - SQUARE_SIZE * 2;
+
+				var scaleChange:Number;
+				// fix width
+				if(imageWidth > containerWidth)
+				{
+					scaleChange = (imageWidth - containerWidth)/ imageWidth;
+					imageWidth = containerWidth;
+					imageHeight -= imageHeight * scaleChange;
+				}
+
+				// fix height
+				if(imageHeight > containerHeight)
+				{
+					scaleChange = (imageHeight - containerHeight) / imageHeight;
+					imageHeight = containerHeight;
+					imageWidth -= imageWidth * scaleChange;
+				}
+
+				displayedImage.content.width = imageWidth;
+				displayedImage.content.height = imageHeight;
+
+				// vertically / horizontally center the image
+
+				displayedImage.x = (this.width - displayedImage.content.width) / 2.0;
+				displayedImage.y = (this.height - displayedImage.content.height) / 2.0;
+
+				imageScale = displayedImage.content.width / _originalImageWidth;
+
+				positionDoneButton();
+			}
+		}
+
+		public function set allowScrollingAndSizing(allow:Boolean):void
+		{
+			if(! _isCurrentlyEditing && allow)
+			{
+				startScaling();
+			}
+			else if(_isCurrentlyEditing && ! allow)
+			{
+				stopScaling();
+			}
+
+			_isCurrentlyEditing = allow;
+
+		}
+
+
+		public function storeCurrentImageSize():void
+		{
+			_hasPreviousLocation = true;
+			_prevImageWidth = displayedImage.content.width;
+			_prevImageHeight = displayedImage.content.height;
+			_prevImageX = displayedImage.x;
+			_prevImageY = displayedImage.y;
+		}
+
+		public function loadPreviousImageSize():void
+		{
+			if(_hasPreviousLocation)
+			{
+				displayedImage.content.width = _prevImageWidth;
+				displayedImage.content.height = _prevImageHeight;
+				displayedImage.x = _prevImageX;
+				displayedImage.y = _prevImageY;
+			}
+		}
+
+		protected function startScaling():void
+		{
+			showScalingBlocks();
+			positionDoneButton();
+		}
+
+
+		protected function showScalingBlocks():void
+		{
+			// dont do anything if we dont have an image
+			if(displayedImage.content == null)
+			{
+				return;
+			}
+
+			// draw the scaling boxes and show the scaling slider
+
+			if(! _isScalingBlocksInit)
+			{
+				_squareTopLeft = new MovieClip();
+				_squareTopRight = new MovieClip();
+				_squareBottomLeft = new MovieClip();
+				_squareBottomRight = new MovieClip();
+
+				const squares:Array = [_squareTopLeft,_squareTopRight,_squareBottomLeft,_squareBottomRight]
+
+				var clip:MovieClip = drawingClip.source as MovieClip;
+
+				for(var i:int = 0; i< squares.length; i++)
+				{
+					var sq:MovieClip = squares[i];
+
+					drawSquare(sq, SQUARE_SIZE);
+					clip.addChild(sq);
+					sq.addEventListener(MouseEvent.MOUSE_DOWN, resizeSquareMouseDown, false, 0, true);
+					sq.buttonMode = true;
+				}
+
+				_isScalingBlocksInit = true;
+			}
+			else
+			{
+				_squareTopLeft.visible = true;
+				_squareTopRight.visible = true;
+				_squareBottomLeft.visible = true;
+				_squareBottomRight.visible = true;
+			}
+
+			positionScalingBlocks();
+
+		}
+
+		protected var _draggingResizeSquare:MovieClip;
+		protected function resizeSquareMouseDown(e:MouseEvent):void
+		{
+			stage.addEventListener(MouseEvent.MOUSE_UP, resizeSquareMouseUp, false,0, true);
+			stage.addEventListener(MouseEvent.MOUSE_MOVE, resizeSquareMouseMove, false,0, true);
+
+			_draggingResizeSquare = (e.target as MovieClip);
+
+			// note: not doing start drag because it will behave a little differently
+			// see resizeSquareMouseMove
+		}
+
+		protected function resizeSquareMouseUp(e:MouseEvent):void
+		{
+			stage.removeEventListener(MouseEvent.MOUSE_UP, resizeSquareMouseUp);
+			stage.removeEventListener(MouseEvent.MOUSE_MOVE, resizeSquareMouseMove);
+
+			_draggingResizeSquare = null
+
+			//_draggingResizeSquare.stopDrag();
+			//resizeSquareMouseMove();
+		}
+
+		protected function resizeSquareMouseMove(e:MouseEvent):void
+		{
+			// NOTE: this should never be called when _draggingResizeSquare == null
+
+			var originalDraggingSquareX:Number = _draggingResizeSquare.x;
+			var originalDraggingSquareY:Number = _draggingResizeSquare.y;
+
+			var p:Point = drawingClip.globalToLocal(new Point(e.stageX, e.stageY));
+
+			var center:Point = getResizeSquareCenter();
+
+			var distFromCenterX:Number = p.x - center.x;
+			var distFromCenterY:Number = p.y - center.y;
+
+			_draggingResizeSquare.x = p.x;
+			_draggingResizeSquare.y = p.y;
+
+			var oppositeResizeSquare:MovieClip = getOppositeResizeSquare(_draggingResizeSquare);
+
+			oppositeResizeSquare.x = center.x - distFromCenterX;
+			oppositeResizeSquare.y = center.y - distFromCenterY;
+
+			// resize / position the image based on the dragging
+			keepResizeSquareASquare(_draggingResizeSquare);
+			keepResizeSquareASquare(oppositeResizeSquare);
+
+			var w:Number = getResizeSquaresWidth();
+			var h:Number = getResizeSquaresHeight();
+
+			var newScale:Number;
+			var scaleChanged:Boolean = false;
+
+			if( w / _originalImageWidth < h / _originalImageHeight)
+			{
+				newScale = w / _originalImageWidth;
+
+				if(newScale < MINIMUM_SCALE)
+				{
+					newScale = MINIMUM_SCALE;
+				}
+
+				scaleChanged = _setImageScale(newScale);
+			}
+			else
+			{
+				newScale = h / _originalImageHeight;
+
+				if(newScale < MINIMUM_SCALE)
+				{
+					newScale = MINIMUM_SCALE;
+				}
+
+				scaleChanged = _setImageScale(newScale);
+			}
+
+			if(! scaleChanged)
+			{
+				// i cant remember why this was here?
+				// move everything back -> no change was made
+
+				_draggingResizeSquare.x = originalDraggingSquareX;
+				_draggingResizeSquare.y = originalDraggingSquareY;
+
+				keepResizeSquareASquare(_draggingResizeSquare);
+			}
+			else
+			{
+				//keepResizeSquareToAspectRatio(_originalImageWidth, _originalImageHeight);
+				//positionScalingBlocks(); // NOTE: not behaving quite right?
+				//positionScalingSquaresFromDraggingSquare(_draggingResizeSquare);
+
+				// note: we have to restrict the image to the original aspect ratio
+				//   so, dont trust getResizeSquaresX alone, compute the image x,y based on the center of the resizer squares
+				displayedImage.x = getResizeSquaresX() + (getResizeSquaresWidth() - displayedImage.content.width)/ 2.0;
+				displayedImage.y = getResizeSquaresY() + (getResizeSquaresHeight() - displayedImage.content.height)/ 2.0;
+
+				//displayedImage.x = getResizeSquaresX();
+				//displayedImage.y = getResizeSquaresY();
+
+				positionScalingBlocks();
+
+				//drawDottedLines();
+
+			}
+
+			positionDoneButton();
+
+		}
+
+		protected function positionDoneButton():void
+		{
+			buttonDone.x = int(displayedImage.x + (displayedImage.content.width - buttonDone.width) / 2);
+			buttonDone.y = int(displayedImage.y + (displayedImage.content.height - buttonDone.height) / 2);
+		}
+
+		protected function getOppositeResizeSquare(square:MovieClip):MovieClip
+		{
+			if( square == _squareTopLeft) return _squareBottomRight;
+			else if( square == _squareBottomRight) return _squareTopLeft;
+			else if( square == _squareTopRight) return _squareBottomLeft;
+			else // if( square == _squareBottomLeft)
+				return _squareTopRight;
+		}
+
+		protected function drawDottedLines():void
+		{
+			(drawingClip.source as MovieClip).graphics.clear();
+			drawLinesBetween([_squareTopLeft, _squareTopRight, _squareBottomRight, _squareBottomLeft]);
+			drawLinesBetween([_squareTopLeft, _squareBottomLeft] ); // bug with dotted line not drawing straigt up
+		}
+
+		protected function drawLinesBetween(clips:Array):void
+		{
+			var g:Graphics = (drawingClip.source as MovieClip).graphics;
+
+			g.lineStyle( 1,0x000000);
+
+			for(var i:int =0; i< clips.length-1; i++)
+			{
+				Dotted.lineTo(g, clips[i].x, clips[i].y, clips[i+1].x, clips[i+1].y, 5);
+			}
+		}
+
+		protected function getResizeSquaresWidth():Number
+		{
+			return _squareTopRight.x - _squareTopLeft.x;
+		}
+
+		protected function getResizeSquaresHeight():Number
+		{
+			return _squareBottomLeft.y - _squareTopLeft.y;
+		}
+
+		protected function getResizeSquaresX():Number
+		{
+			return _squareTopLeft.x;
+		}
+
+		protected function getResizeSquaresY():Number
+		{
+			return _squareTopLeft.y;
+		}
+
+		protected function getResizeSquareCenter():Point
+		{
+			var p:Point = new Point();
+			p.x = getResizeSquaresX() + getResizeSquaresWidth() / 2.0;
+			p.y = getResizeSquaresY() + getResizeSquaresHeight() / 2.0;
+
+			return p;
+		}
+
+		protected function keepResizeSquareASquare(movedSquare:MovieClip):void
+		{
+			// move some of the other resize handels based on the moving of the given handle
+
+			if(movedSquare == _squareTopLeft)
+			{
+				_squareTopRight.y = movedSquare.y;
+				_squareBottomLeft.x = movedSquare.x;
+			}
+			else if( movedSquare == _squareTopRight)
+			{
+				_squareTopLeft.y = movedSquare.y;
+				_squareBottomRight.x = movedSquare.x;
+			}
+			else if( movedSquare == _squareBottomLeft)
+			{
+				_squareTopLeft.x = movedSquare.x;
+				_squareBottomRight.y = movedSquare.y;
+			}
+			else // if( square == _squareBottomRight) // default to this square
+			{
+				_squareBottomLeft.y = movedSquare.y;
+				_squareTopRight.x = movedSquare.x;
+			}
+		}
+
+		protected function positionScalingBlocks():void
+		{
+			if(! _isScalingBlocksInit)
+			{
+				showScalingBlocks();
+			}
+			else
+			{
+				const xPlusWidth:Number = displayedImage.x + displayedImage.content.width;
+				const yPlusHeight:Number = displayedImage.y + displayedImage.content.height;
+
+				_squareTopLeft.x = displayedImage.x;
+				_squareTopLeft.y = displayedImage.y;
+
+				_squareTopRight.x = xPlusWidth;
+				_squareTopRight.y = displayedImage.y;
+
+				_squareBottomLeft.x = displayedImage.x;
+				_squareBottomLeft.y = yPlusHeight;
+
+				_squareBottomRight.x = xPlusWidth;
+				_squareBottomRight.y = yPlusHeight;
+
+				drawDottedLines();
+
+			}
+		}
+
+		// this wont work quite right for when we scale from the center
+		// NOTE: not using this function, should be ok to delete it
+		protected function positionScalingSquaresFromDraggingSquare(draggedSquare:MovieClip):void
+		{
+			// Make the squares fit the image, taking into account we are dragging one
+			// NOTE: the dragged one is the one that will move from its original position the most
+			// NOTE: the image is not going to be lined up with the scaling squares
+			//  it will be lined up later -> just put the scaling squares in the right places
+
+			var widthDifference:Number = getResizeSquaresWidth() - displayedImage.content.width;
+			var heightDifference:Number = getResizeSquaresHeight() - displayedImage.content.height;
+
+			if(draggedSquare == _squareTopLeft)
+			{
+				draggedSquare.x += widthDifference;
+				draggedSquare.y += heightDifference;
+			}
+			else if( draggedSquare == _squareTopRight)
+			{
+				draggedSquare.x -= widthDifference;
+				draggedSquare.y += heightDifference;
+			}
+			else if( draggedSquare == _squareBottomLeft)
+			{
+				draggedSquare.x += widthDifference;
+				draggedSquare.y -= heightDifference;
+			}
+			else // if( draggedSquare == _squareBottomRight) // default to this square
+			{
+				draggedSquare.x -= widthDifference;
+				draggedSquare.y -= heightDifference;
+			}
+
+			keepResizeSquareASquare(draggedSquare);
+
+		}
+
+		protected static function drawSquare(clip:MovieClip, theSize:Number):void
+		{
+			clip.graphics.clear();
+
+			clip.graphics.beginFill(0xffffff);
+			clip.graphics.drawRect( -theSize, -theSize, theSize*2, theSize*2);
+
+			theSize -= 2.0
+
+			clip.graphics.beginFill(0x000000);
+			clip.graphics.drawRect(-theSize,-theSize, theSize*2, theSize*2);
+
+			theSize -= 2.0;
+
+			clip.graphics.beginFill(0xffffff);
+			clip.graphics.drawRect( -theSize, -theSize, theSize*2, theSize*2);
+
+			clip.graphics.endFill();
+		}
+
+		protected function stopScaling():void
+		{
+			// hide the scaling boxes and hide the scaling slider
+			if(_isScalingBlocksInit)
+			{
+				_squareTopLeft.visible = false;
+				_squareTopRight.visible = false;
+				_squareBottomLeft.visible = false;
+				_squareBottomRight.visible = false;
+			}
+
+			(drawingClip.source as MovieClip).graphics.clear();
+		}
+
+		public function get source():*
+		{
+			return _sourceImageBytes;
+		}
+
+		public function set source(imageData:*):void
+		{
+			allowScrollingAndSizing = false;
+
+			//_sourceImageBytes = null;// so it actually re-sets the size of it
+
+			if(_sourceImageBytes == imageData)
+			{
+				resetImage();
+			}
+			else
+			{
+				_sourceImageBytes = imageData;
+			}
+		}
+
+		protected function imageLoaded():void
+		{
+			trace("Image Loaded");
+			loaded = true;
+			dispatchEvent(new Event('imageLoaded'));
+			_originalImageWidth = displayedImage.content.width;
+			_originalImageHeight = displayedImage.content.height;
+
+			// set the scale, incase it was changed before the image loaded
+			//imageScale = _imageScale;
+
+			if(_needToReScaleOnLoad == true)
+			{
+				imageScale = _rescaleOnLoadScale;
+				_needToReScaleOnLoad = false;
+			}
+			else
+			{
+				resetImage();
+			}
+
+			dispatchEvent(new Event(EVENT_IMAGE_LOAD_COMPLETE) );
+		}
+
+		public function set imageScale(s:Number):void
+		{
+			// note: image will maintain its aspect ratio
+			if(displayedImage.content != null)
+			{
+				_setImageScale(s);
+			}
+			else
+			{
+				_needToReScaleOnLoad = true;
+				_rescaleOnLoadScale = s;
+			}
+
+			_imageScale = s;
+
+			if(_isCurrentlyEditing)
+			{
+				positionScalingBlocks();
+				// removing scale slider
+				//imageScaleSlider.value = s;
+			}
+		}
+
+		/*
+		 // removing scale slider
+		 protected function scaleSliderChange():void
+		 {
+		 _setImageScale( imageScaleSlider.value);
+		 positionScalingBlocks();
+		 }
+		 */
+
+		// set the scale without positioning the blocks
+		protected function _setImageScale(s:Number):Boolean
+		{
+
+			var success:Boolean = false;
+
+			if( s >= MINIMUM_SCALE )
+			{
+				const newWidth:Number = _originalImageWidth * s;
+				const newHeight:Number = _originalImageHeight * s;
+
+				displayedImage.content.width = newWidth;
+				displayedImage.content.height = newHeight;
+				// removing scale slider
+				//imageScaleSlider.value = s;
+
+				_imageScale = s;
+
+				success = true;
+			}
+
+			return success;
+		}
+
+		public function get imageScale():Number
+		{
+			return _imageScale;
+		}
+
+
+		protected function mouseDownFunction():void
+		{
+			if(_isCurrentlyEditing)
+			{
+				if(_allowDragging) displayedImage.startDrag(false);
+				this.stage.addEventListener(MouseEvent.MOUSE_MOVE, imageDragged, false, 0, true);
+				this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpFunction, false, 0, true);
+				//this.addEventListener(MouseEvent.MOUSE_MOVE, imageDragged, false, 0, true);
+			}
+		}
+
+		protected function mouseUpFunction(event:MouseEvent):void
+		{
+			if(_allowDragging) displayedImage.stopDrag();
+			this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, imageDragged);
+			this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpFunction);
+
+			//One last position update (for old time's sake):
+			imageDragged(event);
+		}
+
+		protected function imageDragged(e:MouseEvent):void
+		{
+			positionScalingBlocks();
+			positionDoneButton();
+		}
+
+		]]>
+	</mx:Script>
+</mx:Canvas>