whiteboard scales properly

bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/business/shapes/ShapeFactory.as

@@ -52,15 +52,32 @@ package org.bigbluebutton.modules.whiteboard.business.shapes
 		 */		
 		public function makeShape(shape:DrawObject):DrawObject{
 			if (shape.getType() == DrawObject.PENCIL){
-				return makePencil(Pencil(shape));
+				return makePencil(shape as Pencil);
 			} else if (shape.getType() == DrawObject.RECTANGLE){
-				return makeRectangle(Rectangle(shape));
+				return makeRectangle(shape as Rectangle);
 			} else if (shape.getType() == DrawObject.ELLIPSE){
-				return makeEllipse(Ellipse(shape));
+				return makeEllipse(shape as Ellipse);
 			}
 			return null;
 		}
 		
+		private function denormalize(val:Number, side:int):int {
+			return (val/100)*side;
+		}
+		
+		private function normalize(val:Number, side:int):Number {
+			return (val/side)*100;
+		}
+		
+		public function createDrawObject(type:String, segment:Array, color:uint, thickness:uint):DrawObject {
+			var normSegment:Array = new Array();
+			for (var i:int = 0; i < segment.length; i += 2) {
+				normSegment[i] = normalize(segment[i], _parentWidth);
+				normSegment[i+1] = normalize(segment[i+1], _parentHeight);
+			}
+			return makeShape(drawFactory.makeDrawObject(type, normSegment, color, thickness));
+		}
+		
 		/**
 		 * Creates a shape from the specified parameters 
 		 * @param segment
@@ -70,10 +87,12 @@ package org.bigbluebutton.modules.whiteboard.business.shapes
 		 * @return A Flash Shape object
 		 * 
 		 */		
-		public function makeFeedback(segment:Array, type:String, color:uint, thickness:uint):DrawObject{
+		public function makeFeedback(type:String, segment:Array, color:uint, thickness:uint):DrawObject{
 			return makeShape(drawFactory.makeDrawObject(type, segment, color, thickness));
 		}
 		
+
+		
 		/**
 		 * Creates a Flash Shape from a Pencil DrawObject 
 		 * @param p a Pencil DrawObject
@@ -87,11 +106,11 @@ package org.bigbluebutton.modules.whiteboard.business.shapes
 			var graphicsCommands:Vector.<int> = new Vector.<int>();
 			graphicsCommands.push(1);
 			var coordinates:Vector.<Number> = new Vector.<Number>();
-			coordinates.push(p.getShapeArray()[0], p.getShapeArray()[1]);
+			coordinates.push(denormalize(p.getShapeArray()[0], _parentWidth), denormalize(p.getShapeArray()[1], _parentHeight));
 			
 			for (var i:int = 2; i < p.getShapeArray().length; i += 2){
 				graphicsCommands.push(2);
-				coordinates.push(p.getShapeArray()[i], p.getShapeArray()[i+1]);
+				coordinates.push(denormalize(p.getShapeArray()[i], _parentWidth), denormalize(p.getShapeArray()[i+1], _parentHeight));
 			}
 
 			newShape.graphics.drawPath(graphicsCommands, coordinates);
@@ -112,10 +131,10 @@ package org.bigbluebutton.modules.whiteboard.business.shapes
 			var newShape:Shape = r.getShape();
 			newShape.graphics.lineStyle(r.getThickness(), r.getColor());
 			var arrayEnd:Number = r.getShapeArray().length;
-			var x:Number = r.getShapeArray()[0];
+			var x:Number = denormalize(r.getShapeArray()[0], _parentWidth);
-			var y:Number = r.getShapeArray()[1];
+			var y:Number = denormalize(r.getShapeArray()[1], _parentHeight);
-			var width:Number = r.getShapeArray()[arrayEnd-2] - x;
+			var width:Number = denormalize(r.getShapeArray()[arrayEnd-2], _parentWidth) - x;
-			var height:Number = r.getShapeArray()[arrayEnd-1] - y;
+			var height:Number = denormalize(r.getShapeArray()[arrayEnd-1], _parentHeight) - y;
 			
 			newShape.graphics.drawRect(x,y,width,height);
 			if (r.getColor() == 0x000000 || r.getColor() == 0xFFFFFF) newShape.alpha = 1.0;
@@ -134,10 +153,10 @@ package org.bigbluebutton.modules.whiteboard.business.shapes
 			var newShape:Shape = e.getShape();
 			newShape.graphics.lineStyle(e.getThickness(), e.getColor());
 			var arrayEnd:Number = e.getShapeArray().length;
-			var x:Number = e.getShapeArray()[0];
+			var x:Number = denormalize(e.getShapeArray()[0], _parentWidth);
-			var y:Number = e.getShapeArray()[1];
+			var y:Number = denormalize(e.getShapeArray()[1], _parentHeight);
-			var width:Number = e.getShapeArray()[arrayEnd-2] - x;
+			var width:Number = denormalize(e.getShapeArray()[arrayEnd-2], _parentWidth) - x;
-			var height:Number = e.getShapeArray()[arrayEnd-1] - y;
+			var height:Number = denormalize(e.getShapeArray()[arrayEnd-1], _parentHeight) - y;
 			
 			newShape.graphics.drawEllipse(x,y,width,height);
 			if (e.getColor() == 0x000000 || e.getColor() == 0xFFFFFF) newShape.alpha = 1.0;

bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardCanvas.mxml

@@ -50,7 +50,6 @@
 			private var x2:int; 
 			private var y2:int;
 			
-			public var d:DrawObject;	
 			private var isDrawing:Boolean; 
 			private var sending:Boolean = false;
 			private var feedback:Shape = new Shape();
@@ -58,7 +57,6 @@
 			private var segment:Array = new Array();
 			private var shapeList:Array = new Array();
 			
-			protected var drawFactory:DrawObjectFactory;
 			protected var shapeFactory:ShapeFactory;
 			protected var bbbCanvas:IBbbCanvas;
 		
@@ -78,7 +76,6 @@
 			private var drawTimer:Timer;
 			
 			private function init():void{
-				drawFactory = new DrawObjectFactory();
 				shapeFactory = new ShapeFactory();
 				this.label = "Highlighter";
 			}
@@ -109,9 +106,9 @@
 			private function sendShapeToServer():void{
 				if (segment.length == 0) return;
 				
-				this.d = drawFactory.makeDrawObject(this.shapeStyle, segment, this.drawColor, this.thickness);
+				var d:DrawObject = shapeFactory.createDrawObject(this.shapeStyle, segment, this.drawColor, this.thickness);
-				this.d.parentHeight = this.height;
+				d.parentHeight = (d.getShape().height / this.height) * 100;
-				this.d.parentWidth = this.width;
+				d.parentWidth = (d.getShape().width / this.width) * 100;
 				var event:WhiteboardDrawEvent = new WhiteboardDrawEvent(WhiteboardDrawEvent.SEND_SHAPE);
 				event.message = d;
 				dispatchEvent(event);
@@ -160,7 +157,7 @@
 					segment.push(y2);
 					
 					rawChildren.removeChild(feedback);
-					var doFb:DrawObject = shapeFactory.makeFeedback(segment,this.shapeStyle, this.drawColor, this.thickness);
+					var doFb:DrawObject = shapeFactory.createDrawObject(this.shapeStyle, segment, this.drawColor, this.thickness);
 					feedback = doFb.getShape();
 					rawChildren.addChild(feedback);
 					
@@ -193,11 +190,11 @@
 				
 				var drawObject:DrawObject = shapeFactory.makeShape(o);
 				var newShape:Shape = drawObject.getShape();
-				newShape.width = newShape.width * (this.width/o.parentWidth);
+				newShape.width = ((o.parentWidth/100) * this.width);
-				newShape.height = newShape.height * (this.height/o.parentHeight);
+				newShape.height = ((o.parentHeight/100) * this.height);
-	            shapeList.push(newShape);
+
-	            //rawChildren.addChild(shapeList[shapeList.length-1]);
+	            shapeList.push(drawObject);
-	            bbbCanvas.addRawChild(shapeList[shapeList.length-1]);
+	            bbbCanvas.addRawChild(newShape);
 			}
 			
 			/**
@@ -232,8 +229,9 @@
 			 */
 			public function clearBoard(event:WhiteboardUpdate = null):void{
 				for (var i:Number = 0; i < this.shapeList.length; i++){
-					if (this.bbbCanvas.doesContain(this.shapeList[i])){
+					var dobj:DrawObject = this.shapeList[i] as DrawObject;
-						this.bbbCanvas.removeRawChild(this.shapeList[i]);	
+					if (this.bbbCanvas.doesContain(dobj.getShape())){
+						this.bbbCanvas.removeRawChild(dobj.getShape());	
 					}
 				}
 				this.shapeList = new Array();
@@ -241,7 +239,8 @@
 			
 			public function undoShape(event:WhiteboardUpdate):void{
 				if (this.shapeList.length > 0) {
-					this.bbbCanvas.removeRawChild(this.shapeList[this.shapeList.length-1]);
+					var dobj:DrawObject = this.shapeList[this.shapeList.length-1] as DrawObject;
+					this.bbbCanvas.removeRawChild(dobj.getShape());
 					shapeList.pop();
 				}
 			}
@@ -315,16 +314,42 @@
 				this.y = y;
 			}
 			
+			private function cleanShapes():void {
+				for (var i:Number = 0; i < this.shapeList.length; i++){
+					var dobj:DrawObject = this.shapeList[i] as DrawObject;
+					if (this.bbbCanvas.doesContain(dobj.getShape())){
+						this.bbbCanvas.removeRawChild(dobj.getShape());	
+					}
+				}
+			}
+			
+			private function redrawShapes():void {
+				for (var i:Number = 0; i < this.shapeList.length; i++){
+					var dobj:DrawObject = this.shapeList[i] as DrawObject;
+					shapeFactory.makeShape(dobj);
+					var newShape:Shape = dobj.getShape();
+					bbbCanvas.addRawChild(newShape);
+				}
+			}
+			
 			public function zoomCanvas(width:int, height:int):void{
+				shapeFactory.setParentDim(width, height);
+//				cleanShapes();
+//				redrawShapes();
+				
 				for (var i:int = 0; i < this.shapeList.length; i++){
-					var s:Shape = this.shapeList[i] as Shape;
+					var dobj:DrawObject = this.shapeList[i] as DrawObject;
-					s.width = s.width * (width /this.width);
+					var s:Shape = dobj.getShape();
-					s.height = s.height * (height /this.height);
+	//				s.width = newShape.width * ((o.parentWidth/100) * this.width);
+	//				s.height = newShape.height * ((o.parentHeight/100) * this.height);
+					
+					s.width = ((dobj.parentWidth/100) * width);
+					s.height = ((dobj.parentHeight/100) * height);
 				}
 				
 				this.width = width;
 				this.height = height;
-				shapeFactory.setParentDim(width, height);
+				
 			}
 			
 			public function showCanvas(show:Boolean):void{