OMG drawing is workinggit status

jenniferarnesen · Mar 15, 2013 · 38e0245 · 38e0245
1 parent 7ecd210
commit 38e0245
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 17 deletions.
diff --git a/public/Draw.html b/public/Draw.html
@@ -10,7 +10,10 @@
 
 </style>
 
-<drawing-board stroke-size="5" on-draw="onDraw(start,end,color,stroke)" id="myCanvas" width="1000" height="1000"></drawing-board>
+<drawing-board 	stroke-size="5" 
+				on-draw="onDraw(start,end,color,stroke)" 
+				on-start-draw="onStartDraw(start,color,stroke)"
+				id="myCanvas" width="1000" height="1000"></drawing-board>
 
 <script>
 

diff --git a/public/js/DrawCtrl.js b/public/js/DrawCtrl.js
@@ -6,7 +6,7 @@ function DrawCtrl($scope, JScribbleService) {
 	}
 
 	$scope.onStartDraw = function(start, color, stroke) {
-		
+
 		JScribbleService.sendStartDraw(start, color, stroke);
 	}
 }
@@ -20,21 +20,30 @@ app.directive('drawingBoard', function() {
 		scope: {
 			strokeSize: "@strokeSize",
 			penColor: "@penColor",
-			onDraw: "&onDraw"
+			onDraw: "&onDraw",
+			onStartDraw: "&onStartDraw"
 		},
 
 		link: function(scope, element, attrs) {
 
+			scope.drawingCanvases = {};
+			scope.oldPts = {};
+    		scope.oldMidPts = {};
+
 			scope.handleMouseDown = function() {
 
 	    		scope.oldPt = new createjs.Point(scope.stage.mouseX, scope.stage.mouseY);
 	    		scope.oldMidPt = scope.oldPt;
 	    		scope.stage.addEventListener("stagemousemove" , scope.handleMouseMove);
+
+				if (!scope.strokeSize)
+					scope.strokeSize = 5;
+				if (!scope.penColor)
+					scope.penColor = "#000";
 
-				scope.onDraw({	start: scope.oldMidPt, 
-								end: scope.oldMidPt, 
-								color: scope.penColor, 
-								stroke: scope.strokeSize } );
+				scope.onStartDraw({	start: scope.oldMidPt, 
+									color: scope.penColor, 
+									stroke: scope.strokeSize } );
 
 			};
 
@@ -75,24 +84,63 @@ app.directive('drawingBoard', function() {
     		}
 
     		scope.$on('remoteDraw', function(evt, msg) {
-    			//scope.canvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round')
-    			//		.beginStroke(scope.penColor)
-    			//		.moveTo(scope.end.x, scope.end.y)
-    					//.curveTo(scope.end.x, scope.end.y, oldMidPts[user].x, oldMidPts[user].y)
-    						;
-    			//scope.stage.update();
+
+    			if (msg.action == "start") {
+    				debugger;
+					var currentDrawingCanvas = scope.drawingCanvases[msg.userId];
+	    			if (currentDrawingCanvas == null) {
+	        			currentDrawingCanvas = new createjs.Shape();
+	        			scope.drawingCanvases[msg.userId] = currentDrawingCanvas;
+	        			scope.stage.addChild(currentDrawingCanvas);
+	        		}
+	        		scope.oldPts[msg.userId] = new createjs.Point(msg.start.x, msg.start.y);
+	    			scope.oldMidPts[msg.userId] = scope.oldPts[msg.userId]
+    			} else if (msg.action == "draw") {
+    				var currentDrawingCanvas = scope.drawingCanvases[msg.userId];
+    				if (currentDrawingCanvas == null)
+    					currentDrawingCanvas = scope.canvas;
+
+    				var midPt = new createjs.Point(	scope.oldPts[msg.userId].x + msg.start.x>>1, 
+    												scope.oldPts[msg.userId].y + msg.start.y>>1);
+
+    				currentDrawingCanvas
+    					.graphics
+    					.clear()
+    					.setStrokeStyle(msg.stroke, 'round', 'round')
+    					.beginStroke(msg.color)
+    					.moveTo(midPt.x, midPt.y)
+    					.curveTo(scope.oldPts[msg.userId].x, scope.oldPts[msg.userId].y, scope.oldMidPts[msg.userId].x, scope.oldMidPts[msg.userId].y);
+
+    				scope.oldPts[msg.userId].x = msg.end.x;
+    				scope.oldPts[msg.userId].y = msg.end.y;
+
+				    scope.oldMidPts[msg.userId].x = midPt.x;
+				    scope.oldMidPts[msg.userId].y = midPt.y;
+
+    				scope.stage.update();
+
+
+    				// scope.canvas.graphics.clear()
+    				// 	.setStrokeStyle(msg.stroke, 'round', 'round')
+    				// 	.beginStroke(msg.color)
+    				// 	.moveTo(msg.end.x, msg.end.y)
+    				// 	.curveTo(msg.end.x, msg.end.y, msg.end.x, msg.end.y)
+    				// 		;
+    				// scope.stage.update();	
+    			}
+
     		});
 
 
-			var canvas = angular.element(element)[0];
+			scope.canvas = angular.element(element)[0];
 
 			$(window).resize(function() {
 			  	scope.stageResize();
 			});
 			//drawingCanvases[clientName] = canvas;
 
 		    //check to see if we are running in a browser with touch support
-		    scope.stage = new createjs.Stage(canvas);
+		    scope.stage = new createjs.Stage(scope.canvas);
 
 		    scope.stage.autoClear = false;
 		    scope.stage.enableEvents(true);

diff --git a/public/js/JScribbleService.js b/public/js/JScribbleService.js
@@ -126,7 +126,6 @@ app.factory('JScribbleService', function($rootScope) {
           // ignore our own messages being retransmitted back to us...
           return;
         }
-
         // send a notification message...
         $rootScope.$broadcast('remoteDraw', message);
 
@@ -148,7 +147,7 @@ app.factory('JScribbleService', function($rootScope) {
                                             start: start,
                                             end: start,
                                             color: color,
-                                            storke: stroke }));
+                                            stroke: stroke }));
       }
 
   	}