started dnd on canvas

Author: timatooth

public/draw.js

@@ -12,7 +12,11 @@ $(function(){
     optionTabOpen = true;
     settingsTabOpen = false;
     setColor = '#000';
-    defaultName = "Guest";
+    defaultName = "Guest",
+    draggingTool = false,
+    dragging = false;
+
+    var pastDragX = 0, pastDragY = 0;
 
     // Generate an unique ID
     var id = Math.round($.now()*Math.random());
@@ -99,41 +103,85 @@ $(function(){
 
     canvas.on('mousedown',function(e){
 	e.preventDefault();
-	drawing = true;
-	prev.x = e.pageX;
-	prev.y = e.pageY;
+	if(!draggingTool){
+	    drawing = true;
+	    prev.x = e.pageX;
+	    prev.y = e.pageY;   
+	    // Hide the instructions
+	    instructions.fadeOut();
+	} else {
+	    //we're dragging the page around
+	    dragging = true;
+	}
+	pastDragX = e.pageX;
+	pastDragY = e.pageY;
 
-	// Hide the instructions
-	instructions.fadeOut();
     });
 
     doc.bind('mouseup mouseleave',function(){
 	drawing = false;
+	dragging = false;
     });
 
     var lastEmit = $.now();
 
     doc.on('mousemove',function(e){
-	if($.now() - lastEmit > 10){
-	    socket.emit('mousemove',{
-		'x': e.pageX,
-		'y': e.pageY,
-		'drawing': drawing,
-		'id': id,
-		'color': setColor
-	    });
-	    lastEmit = $.now();
-	}
-	
-	// Draw a line for the current user's movement, as it is
-	// not received in the socket.on('moving') event above
-	
-	if(drawing){
+	if(!draggingTool){
+	    if($.now() - lastEmit > 10){
+		socket.emit('mousemove',{
+		    'x': e.pageX,
+		    'y': e.pageY,
+		    'drawing': drawing,
+		    'id': id,
+		    'color': setColor
+		});
+		lastEmit = $.now();
+	    }
 
-	    drawLine(prev.x, prev.y, e.pageX, e.pageY, setColor);
+	    // Draw a line for the current user's movement, as it is
+	    // not received in the socket.on('moving') event above
 
-	    prev.x = e.pageX;
-	    prev.y = e.pageY;
+	    if(drawing){
+		
+		drawLine(prev.x, prev.y, e.pageX, e.pageY, setColor);
+		
+		prev.x = e.pageX;
+		prev.y = e.pageY;
+	    }
+	} else {
+	    //we're dragging!
+	    if(dragging){
+		/*
+		//get the current (top, left) for canvas element
+	
+		var dX, dY;
+		//get the difference between now and then
+		dX = e.pageX - pastDragX;
+		dY = e.pageY - pastDragY;
+
+		//we need to find out the relative x,y inside the canvas element
+		var relX = e.pageX - curX;
+		var relY = e.pageY - curY;
+	
+		var cOriginX = e.pageX - relX;
+		var cOriginY = e.pageY - relY;
+
+		//console.log("dX " + dX + " dY " + dY + " css curX " + curX + " curY " + curY);
+		
+		//$('#paper').css({top: curY + dY, left: curX + dX});
+		
+		pastDragX = e.pageX;
+		pastDragY = e.pageY;
+		*/
+		var curX = parseInt($('#paper').css('left'), 10);
+		var curY = parseInt($('#paper').css('top'), 10);
+		var dX = e.pageX - pastDragX;
+		var dY = e.pageY - pastDragY;
+		$('#paper').css({top: curY + dY, left: curX + dX});
+	//	console.log(dX);
+		pastDragX = e.pageX;
+		pastDragY = e.pageY;
+	    }
 	}
     });
 
@@ -237,4 +285,16 @@ $(function(){
 	$('#chatBox').val("");
     }
 
+    //enable/disable the dragging tool
+    $('#handTool').click(function(){
+	draggingTool = !draggingTool;
+	if(draggingTool){
+	    $('canvas').addClass("canvas-draggable");
+	    $('#handTool').addClass('active');
+	} else {
+	    $('canvas').removeClass("canvas-draggable");
+	    $('#handTool').removeClass('active');
+	}
+    });
+
 });

public/hand_tool.png

@@ -6,12 +6,13 @@
 html{
     background:url('bg.png') repeat #e4e4e4;
     /* This will hide the extra canvas if the screen is small */
-    overflow:hidden;
+    /*overflow:hidden;*/
 }
 
 body{
     font:14px/1.3 'Segoe UI',Arial, sans-serif;
     color:#444;
+    position: relative;
 }
 
 a, a:visited {
@@ -128,7 +129,7 @@ h3{
 }
 
 #settingsPanel {
-    position: absolute;
+    position: fixed;
     right: 20px;
     bottom: -300px;
     width: 200px;
@@ -186,3 +187,24 @@ h3{
 #usernameInput {
     width: 160px;
 }
+
+#handTool {
+    background-image: url("hand_tool.png");
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+}
+
+.active {
+    box-shadow: 1px 1px 10px #0C0;
+}
+
+.canvas-draggable {
+    cursor: move;
+}
+
+#paper {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+}

public/style.css

@@ -19,8 +19,9 @@ html
         li#c-black.c Black
         li#c-yellow.c Yellow
         li#c-red.c Red
+      div#handTool	
     div#cursors
-    canvas#paper(width="1900" height="1000") Your browser doesn't support canvas!
+    canvas#paper(width="900" height="900") Your browser doesn't support canvas!
     hgroup#instructions
       h1 Draw anywhere!
       h2 You will see everyone else who is doing the same.