Set CSS states for states

css/app.css

@@ -24,6 +24,10 @@ text {
     -moz-user-select: none;
 }
 
+#map.state-drawing {
+    cursor: pointer;
+}
+
 .currentMode {
     font-weight: bold;
 }

js/iD/Controller.js

@@ -12,35 +12,43 @@ declare("iD.Controller", [Evented], {
 	presets: null,			// tag presets
 	editorCache: null,		// cache of tag editor objects, means we don't have to repeatedly load them
 	
-	constructor:function(_map) {
+	constructor:function(map) {
 		// summary:		The Controller marshalls ControllerStates and passes events to them.
-		this.map=_map;
-		this.undoStack=new iD.actions.UndoStack();
-		this.presets={};
-		this.editorCache={};
+		this.map = map;
+		this.undoStack = new iD.actions.UndoStack();
+		this.presets = {};
+		this.editorCache = {};
 	},
 
-	setStepper:function(_stepper) {
+	setStepper:function(stepper) {
 		// summary:		Set reference for the singleton-like class for the step-by-step instruction panel.
-		this.stepper=_stepper;
+		this.stepper = stepper;
 	},
 
-	setTagPresets:function(type,url) {
+	setTagPresets:function(type, url) {
 		// summary:		Load and store a JSON tag preset file.
-		this.presets[type]=new iD.tags.PresetList(type,url);
+		this.presets[type] = new iD.tags.PresetList(type,url);
 	},
 	
 	setState:function(newState) {
 		// summary:		Enter a new ControllerState, firing exitState on the old one, and enterState on the new one.
-		if (newState==this.state) { return; }
+		if (newState === this.state) { return; }
 		if (this.state) {
 			this.state.exitState(newState);
-			this.emit("exitState", { bubbles: true, cancelable: true, state: this.state.stateNameAsArray() });
+			this.emit("exitState", {
+                bubbles: true,
+                cancelable: true,
+                state: this.state.stateNameAsArray()
+            });
 		}
 		newState.setController(this);
-		this.state=newState;
+		this.state = newState;
 		newState.enterState();
-		this.emit("enterState", { bubbles: true, cancelable: true, state: this.state.stateNameAsArray() });
+		this.emit("enterState", {
+            bubbles: true,
+            cancelable: true,
+            state: this.state.stateNameAsArray()
+        });
 	},
 
 	entityMouseEvent:function(event,entityUI) {

js/iD/controller/edit/EditBaseState.js

@@ -12,21 +12,22 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
 	editortooltip: null,
 	
 	constructor:function() {
-		// summary:		Base state for the 'Edit object' states - where an object is selected and the user is making changes to it.
+		// summary:	Base state for the 'Edit object' states - where an
+        // object is selected and the user is making changes to it.
 	},
-	
+
 	openEditorTooltip:function(x,y,entity) {
 		// summary:		Open the initial 'Edit tags/Edit shape' tooltip.
 		// x: Number	Screen co-ordinate.
 		// y: Number	Screen co-ordinate.
-		// entity: iD.Entity	The entity to be edited.
+        // entity: iD.Entity	The entity to be edited.
         var h = iD.Util.friendlyName(entity);
-		this.editortooltip = new dijit.TooltipDialog({
-			content: h+"<button data-dojo-type='dijit.form.Button' id='editTags'  parseOnLoad='false' type='submit'>Edit tags</button> "
-			          +"<button data-dojo-type='dijit.form.Button' id='editShape' parseOnLoad='false' type='submit'>Edit shape</button> ",
-			autoFocus: false
-		});
-		on(registry.byId('editTags'), 'click', lang.hitch(this,this.editTags,entity));
+        this.editortooltip = new dijit.TooltipDialog({
+            content: h + "<button data-dojo-type='dijit.form.Button' id='editTags'  parseOnLoad='false' type='submit'>Edit tags</button> " +
+                "<button data-dojo-type='dijit.form.Button' id='editShape' parseOnLoad='false' type='submit'>Edit shape</button> ",
+            autoFocus: false
+        });
+        on(registry.byId('editTags'), 'click', lang.hitch(this,this.editTags,entity));
 		dijit.popup.open({ popup: this.editortooltip, x: x, y: y });
 	},
 	
@@ -34,10 +35,12 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
 		// summary:		Close the tooltip.
 		array.forEach(['editTags','editShape'], function(b){
 			if (!registry.byId(b)) return;
-			registry.byId(b).type='';	// fix Safari issue
+			registry.byId(b).type = ''; // fix Safari issue
 			registry.byId(b).destroy();	// remove from registry so we can reinitialise next time
 		});
-		if (this.editortooltip) { dijit.popup.close(this.editortooltip); }
+		if (this.editortooltip) {
+            dijit.popup.close(this.editortooltip);
+        }
 	},
 
 	editTags:function(entity) {

js/iD/controller/shape/NoSelection.js

@@ -30,12 +30,17 @@ declare("iD.controller.shape.NoSelection", [iD.controller.ControllerState], {
 		// summary:		In 'Draw shape' mode but nothing is selected.
 	},
 
-	enterState:function() {
+    exitState: function() {
+        this.controller.map.div.className = '';
+    },
+
+	enterState: function() {
+        this.controller.map.div.className = 'state-drawing';
 		this.controller.stepper.setSteps({
-			begin: "Click anywhere on the map to start drawing there",
-			draw: "Keep clicking to add each point, and press Enter or double-click when you're done",
+			begin: "Click anywhere on the map to start drawing",
+			draw: "Keep clicking to add each point then double-click when you're done",
 			tag: "Set the type of the road or shape"
-		},['begin','draw','tag']).highlight('begin');
+		}, ['begin', 'draw', 'tag']).highlight('begin');
 	},
 
 	processMouseEvent:function(event,entityUI) {
@@ -47,13 +52,13 @@ declare("iD.controller.shape.NoSelection", [iD.controller.ControllerState], {
 			switch (entityType) {
 				case 'node':
 					// Click to select a node
-					var ways=entity.parentWays();
-					if (ways.length==0) { return new iD.controller.shape.SelectedPOINode(entity); }
-//					               else { return new iD.controller.shape.SelectedWayNode(entity,ways[0]); }
-//					               ** FIXME: ^^^ the above should start a new branching way, not select the node
-					return this;
-				case 'way':
-					// Click to select a way
+                    var ways=entity.parentWays();
+                    if (ways.length==0) { return new iD.controller.shape.SelectedPOINode(entity); }
+                    //					               else { return new iD.controller.shape.SelectedWayNode(entity,ways[0]); }
+                    //					               ** FIXME: ^^^ the above should start a new branching way, not select the node
+                    return this;
+                case 'way':
+                    // Click to select a way
 					return new iD.controller.shape.SelectedWay(entityUI.entity);
 				default:
 					// Click to start a new way