added a function to set the Area styles

src/p5.image-map-creator.js

@@ -12,27 +12,26 @@ var imageMapCreator = function (p) {
 		var canvas = p.createCanvas(600, 450);
 		canvas.drop(p.handeFile).dragLeave(p.onLeave).dragOver(p.onOver);
 		settings = QuickSettings.create(p.width + 5, 0, "Image-map Creator", p.canvas.parentElement)
+			.setDraggable(false)
 			.addText("Map Name", "", v => { map.setName(v) })
 			.addDropDown("Tool", ["rectangle", "circle", "inspect"], v => { tool = v.value })
 			.addButton("Undo", map.undoManager.undo)
 			.addButton("Redo", map.undoManager.redo)
-			.addButton("Generate Html", function () { settings.setValue("Html Output", map.toHtml()) })
-			.addTextArea("Html Output");
+			.addButton("Generate Html", function () { settings.setValue("Output", map.toHtml()) })
+			.addTextArea("Output");
 	}
 
 	p.draw = function () {
 		if (p.mouseIsPressed) {
 			tempArea.updateLastCoord(p.mouseX, p.mouseY)
 		}
 		p.setCursor();
-
 		p.background(img ? img : 200);
 		bgLayer.display();
-		p.fill(255, 255, 255, 178);
-		p.strokeWeight(1);
-		p.stroke(0);
+
 		var allAreas = map.areas.concat([tempArea]);
 		allAreas.forEach(area => {
+			p.setAreaStyle(area);
 			if (area.isValidShape())
 				area.display(p);
 		});
@@ -117,6 +116,15 @@ var imageMapCreator = function (p) {
 		}
 	}
 
+	p.setAreaStyle = function (area) {
+		var color = p.color(255, 255, 255, 178);
+		if (tool == "inspect" && area == p.mouseIsHoverArea())
+			color = p.color(255, 200, 200, 178);
+		p.fill(color);
+		p.strokeWeight(1);
+		p.stroke(0);
+	}
+
 	p.setTempArea = function (x, y) {
 		var coords = [new XY(x, y)];
 		switch (tool) {