Merge pull request #26 from MapOnline/develop

2.0.6

app/js/classes/level.js

@@ -58,8 +58,6 @@ Level.prototype.checkLoaded = function() {
  * Draws a level on screen
  */
 Level.prototype.draw = function() {
-	main.object.popups.hideAll();
-
 	main.object.context.save();
 	main.object.context.setTransform(1, 0, 0, 1, 0, 0);
 

app/js/classes/levels.js

@@ -181,6 +181,7 @@ Levels.prototype.change = function(level) {
 				}
 			});
 		} else {
+			main.object.popups.hideAll();
 			changeTo(levels[0]);
 		}
 

app/js/classes/point.js

@@ -15,12 +15,12 @@ var Point = function(point) {
 	}
 
 	this.position = {
-		left: Math.min.apply(null, this.shape.map(function(item) { return item.x })) - main.hotspotMargin,
-		top: Math.min.apply(null, this.shape.map(function(item) { return item.y })) - main.hotspotMargin
+		left: Math.min.apply(null, this.shape.map(function(item) { return item.x })),
+		top: Math.min.apply(null, this.shape.map(function(item) { return item.y }))
 	};
 	this.size = {
-		width: Math.max.apply(null, this.shape.map(function(item) { return item.x })) - this.position.left + main.hotspotMargin,
-		height: Math.max.apply(null, this.shape.map(function(item) { return item.y })) - this.position.top + main.hotspotMargin
+		width: Math.max.apply(null, this.shape.map(function(item) { return item.x })) - this.position.left,
+		height: Math.max.apply(null, this.shape.map(function(item) { return item.y })) - this.position.top
 	};
 };
 
@@ -40,13 +40,33 @@ Point.prototype.draw = function() {
  * Check if the user clicked on a specific point
  * @param {number} x - The x value from the user
  * @param {number} y - The y value from the user
+ * @param {number} [r] - The radius for a touch
  * @returns {boolean} Did the user click on a point?
  */
-Point.prototype.isOn = function(x, y) {
-	return (
-		x > this.position.left + main.globals.offset.get().x &&
-		x < this.position.left + this.size.width + main.globals.offset.get().x &&
-		y > this.position.top + main.globals.offset.get().y &&
-		y < this.position.top + this.size.height + main.globals.offset.get().y
-	);
+Point.prototype.isOn = function(x, y, r) {
+	var circle = {
+		x: x,
+		y: y,
+		r: r || 1
+	};
+	var rect = {
+		x: this.position.left + main.globals.offset.get().x,
+		y: this.position.top + main.globals.offset.get().y,
+		w: this.size.width,
+		h: this.size.height
+	};
+
+	var distX = Math.abs(circle.x - rect.x - rect.w / 2);
+	var distY = Math.abs(circle.y - rect.y - rect.h / 2);
+
+	if(distX > (rect.w / 2 + circle.r)) { return false; }
+	if(distY > (rect.h / 2 + circle.r)) { return false; }
+
+	if(distX <= (rect.w / 2)) { return true; }
+	if(distY <= (rect.h / 2)) { return true; }
+
+	var dx = distX - rect.w / 2;
+	var dy = distY - rect.h / 2;
+
+	return (dx * dx + dy * dy <= (circle.r * circle.r));
 };

app/js/classes/points.js

@@ -28,11 +28,12 @@ Points.prototype.draw = function() {
  * Returns the point a user clicked on
  * @param {number} x - The x value from the user
  * @param {number} y - The y value from the user
+ * @param {number} [r] - The radius for a touch
  * @returns {Point|null} The point the user clicked on
  */
-Points.prototype.hitAPoint = function(x, y) {
+Points.prototype.hitAPoint = function(x, y, r) {
 	for(var i = 0; i < this.list.length; i++) {
-		if(this.list[i].isOn(x, y)) {
+		if(this.list[i].isOn(x, y, r)) {
 			return this.list[i];
 		}
 	}

app/js/classes/popup.js

@@ -335,26 +335,26 @@ Popup.prototype.generatePopover = function(popup, title_html, info_html, media_h
 		var show = {
 			above: function() {
 				triangle.classList.add("bottom");
-				popup.style.top = main.globals.offset.get().y + point.position.top - popup.clientHeight - (heightTriangle / 2) + main.hotspotMargin + 'px';
+				popup.style.top = main.globals.offset.get().y + point.position.top - popup.clientHeight - (heightTriangle / 2) + 'px';
 				popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
 				triangle.style.left = (left * 100) + "%";
 			},
 			beneath: function() {
 				triangle.classList.add("top");
-				popup.style.top = main.globals.offset.get().y + point.position.top + point.size.height + (heightTriangle / 2) - main.hotspotMargin + 'px';
+				popup.style.top = main.globals.offset.get().y + point.position.top + point.size.height + (heightTriangle / 2) + 'px';
 				popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
 				triangle.style.left = (left * 100) + "%";
 			},
 			left: function() {
 				triangle.classList.add("right");
 				popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
-				popup.style.left = main.globals.offset.get().x + point.position.left - popup.clientWidth - (heightTriangle / 2) + main.hotspotMargin + 'px';
+				popup.style.left = main.globals.offset.get().x + point.position.left - popup.clientWidth - (heightTriangle / 2) + 'px';
 				triangle.style.top = (top * 100) + "%";
 			},
 			right: function() {
 				triangle.classList.add("left");
 				popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
-				popup.style.left = main.globals.offset.get().x + point.position.left + point.size.width + (heightTriangle / 2) - main.hotspotMargin + 'px';
+				popup.style.left = main.globals.offset.get().x + point.position.left + point.size.width + (heightTriangle / 2) + 'px';
 				triangle.style.top = (top * 100) + "%";
 			}
 		};