added area move back/frontward + better contextmenu preventDefault

README.md

@@ -1,4 +1,4 @@
-# Image Map Creator
+# [Image Map Creator](https://rawgit.com/n-peugnet/image-map-creator/master/demos/)
 
 This is a simple map creator tool made with the p5.js library. I want it
 to be easy to use for both the end user and the developper.
@@ -19,8 +19,8 @@ _The checked ones are implemented, the others are the ones I plan to add in the
 -   [x] show a menu by right-clicking on an area with these options :
 	-   [x] set url
 	-   [x] delete
-	-   [ ] move forward
-	-   [ ] move backwards
+	-   [x] move forward
+	-   [x] move backwards
 -   [x] differents tools :
 	-   [x] draw rectangular areas
 	-   [x] draw circular areas (by dragging left)
@@ -43,6 +43,8 @@ _The checked ones are implemented, the others are the ones I plan to add in the
 	-   [x] redo
 	-   [x] export the result as a valid html map
 	-   [ ] export the result as a usable svg map
+	-   [ ] export the result as JSON
+	-   [ ] import from JSON
 
 ## How to Integrate it
 

src/class.image-map.js

@@ -52,11 +52,27 @@ class ImageMap {
 	}
 
 	rmvArea(id) {
-		var index = this.areaIndex(id);
+		let index = this.areaIndex(id);
 		this.areas.splice(index, 1);
 		return index;
 	}
 
+	/**
+	 * 
+	 * @param {number} id 
+	 * @param {number} direction 
+	 */
+	moveArea(id, direction) {
+		let index = this.areaIndex(id);
+		let area = this.areas[index];
+		let nextIndex = index + direction;
+		if (nextIndex < 0 || nextIndex >= this.areas.length)
+			return false;
+		this.rmvArea(id);
+		this.insertArea(area, nextIndex);
+		return nextIndex;
+	}
+
 	popArea() {
 		return this.areas.pop();
 	}
@@ -71,6 +87,14 @@ class ImageMap {
 		});
 	}
 
+	isFirstArea(id) {
+		return this.areaIndex(id) == 0;
+	}
+
+	isLastArea(id) {
+		return this.areaIndex(id) == this.areas.length - 1;
+	}
+
 	getNewId() {
 		this.lastId++;
 		return this.lastId;

src/p5.image-map-creator.js

@@ -7,9 +7,18 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 		SetUrl: {
 			onSelect: (target, key, item, area) => { p.setAreaUrl(area); },
 			label: "Set url",
-			title: "Click here to set the url of this area"
 		},
-		Delete: (target, key, item, area) => { p.deleteArea(area); }
+		Delete: (target, key, item, area) => { p.deleteArea(area); },
+		MoveUp: {
+			onSelect: (target, key, item, area) => { p.moveArea(area, 1); },
+			enabled: true,
+			label: "Move Forward",
+		},
+		MoveDown: {
+			onSelect: (target, key, item, area) => { p.moveArea(area, -1); },
+			enabled: true,
+			label: "Move Backward",
+		}
 	};
 	var tempArea = new Area();
 	var tempCoord = new XY();
@@ -35,6 +44,8 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 			.addButton("Generate Html", function () { settings.setValue("Output", map.toHtml()) })
 			.addButton("Generate Svg", function () { settings.setValue("Output", map.toSvg()) })
 			.addTextArea("Output");
+		// Fix for oncontextmenu
+		p.canvas.addEventListener("contextmenu", function (e) { e.preventDefault(); });
 	}
 
 	p.draw = function () {
@@ -50,7 +61,7 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 
 	//------------------------------ Events -----------------------------------
 
-	p.mousePressed = function (e) {
+	p.mousePressed = function () {
 		if (p.mouseIsHover()) {
 			if (p.mouseButton == p.LEFT && !ContextMenu.isOpen()) {
 				hovered.shape != "default" ? selected = hovered : false;
@@ -82,14 +93,6 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 						}
 						break;
 				}
-			} else if (p.mouseButton == p.RIGHT) {
-				if (hovered) {
-					ContextMenu.display(e, menu, {
-						position: "click",
-						data: hovered
-					});
-				}
-				return false; // doesen't work as expected
 			}
 		}
 	}
@@ -105,7 +108,7 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 		}
 	}
 
-	p.mouseReleased = function () {
+	p.mouseReleased = function (e) {
 		switch (tool) {
 			case "rectangle":
 			case "circle":
@@ -130,6 +133,17 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 		}
 		bgLayer.disappear();
 		selected = false;
+		if (p.mouseButton == p.RIGHT) {
+			if (hovered) {
+				menu.MoveUp.enabled = !map.isLastArea(hovered.id);
+				menu.MoveDown.enabled = !map.isFirstArea(hovered.id);
+				ContextMenu.display(e, menu, {
+					position: "click",
+					data: hovered
+				});
+			}
+			return false; // doesen't work as expected
+		}
 	}
 
 	//---------------------------- Functions ----------------------------------
@@ -318,6 +332,19 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 		}
 	}
 
+	p.moveArea = function (area, direction) {
+		if (map.moveArea(area.id, direction) !== false) {
+			undoManager.add({
+				undo: function () {
+					map.moveArea(area.id, -direction);
+				},
+				redo: function () {
+					map.moveArea(area.id, direction);
+				}
+			});
+		}
+	}
+
 	p.setAreaUrl = function (area) {
 		var href = area.href;
 		var input = prompt("Entrez l'url vers laquelle devrait pointer cette zone", href ? href : "http://");
@@ -330,7 +357,7 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 				redo: function () {
 					area.sethref(input);
 				}
-			})
+			});
 		}
 	}
 
@@ -345,7 +372,7 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 				map.setDefaultArea(bool);
 				settings.setValue("Default Area", bool)
 			}
-		})
+		});
 	}
 
 	p.clearAreas = function () {
@@ -358,7 +385,7 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 			redo: function () {
 				map.clearAreas();
 			}
-		})
+		});
 	}
 
 	//---------------------------- P5 Classes ---------------------------------
@@ -393,7 +420,4 @@ var imageMapCreator = function (p, width = 600, height = 450) {
 		p.fill(255, 255, 255, this.alpha);
 		p.rect(0, 0, p.width, p.height);
 	}
-}
-
-// Fix for oncontextmenu
-window.addEventListener("contextmenu", function (e) { e.preventDefault(); });
+}