fixes #1340

src/client/ui/templates/middleHud/styles.less

@@ -14,7 +14,7 @@
 		margin-left: calc(12px - 60px);
 		text-align: center;
 		position: absolute;
-		left: calc(50vw - 86px);
+		left: calc(50vw - 88px);
 		top: calc(50vh - 113px);
 		width: 64px;
 		height: 64px;
@@ -27,6 +27,7 @@
 			height: 100%;
 			background: url(../../../images/uiIcons.png) -448px -64px;
 		}
+
 	}
 
 	.casting {
@@ -51,5 +52,7 @@
 			text-align: center;
 			color: @black;
 		}
+
 	}
+
 }

src/client/ui/templates/passives/input.js

@@ -45,7 +45,9 @@ define([
 
 		enabled: true,
 
-		init: function (el) {
+		init: function (el, zoom) {
+			this.zoom = zoom;
+
 			el
 				.on('mousedown', this.events.mouse.mouseDown.bind(this))
 				.on('mouseup', this.events.mouse.mouseUp.bind(this))
@@ -197,7 +199,7 @@ define([
 
 			touch: {
 				touchStart: function (e) {
-					let pos = this.events.touch.convertTouchPos(e);
+					let pos = this.events.touch.convertTouchPos.call(this, e);
 
 					this.mouse.raw = {
 						clientX: pos.x,
@@ -215,7 +217,7 @@ define([
 				},
 
 				touchMove: function (e) {
-					let pos = this.events.touch.convertTouchPos(e);
+					let pos = this.events.touch.convertTouchPos.call(this, e);
 
 					this.mouse.raw = {
 						clientX: pos.x,
@@ -244,8 +246,8 @@ define([
 				convertTouchPos: function (e) {
 					let rect = e.target.getBoundingClientRect();
 					return {
-						x: e.targetTouches[0].pageX - rect.left,
-						y: e.targetTouches[0].pageY - rect.top
+						x: (e.targetTouches[0].pageX - rect.left) * this.zoom,
+						y: (e.targetTouches[0].pageY - rect.top) * this.zoom
 					};
 				}
 			}

src/client/ui/templates/passives/passives.js

@@ -1,3 +1,7 @@
+let zoom = window.devicePixelRatio;
+if (isMobile)
+	zoom /= 2;
+
 define([
 	'js/system/events',
 	'js/system/client',
@@ -51,7 +55,7 @@ define([
 		handlerResize: null,
 
 		postRender: function () {
-			input.init(this.el);
+			input.init(this.el, zoom);
 
 			this.data.nodes = temp.nodes;
 			this.data.links = temp.links.map(l => {
@@ -74,8 +78,6 @@ define([
 			this.handlerResize = this.onResize.bind(this);
 			window.addEventListener('resize', this.handlerResize);
 
-			let zoom = window.devicePixelRatio;
-
 			this.canvas = this.find('.canvas')[0];
 			this.size.w = this.canvas.width = this.find('.bottom').width() * zoom;
 			this.size.h = this.canvas.height = this.find('.bottom').height() * zoom;
@@ -120,8 +122,6 @@ define([
 			if (isMobile || !this.shown)
 				return;
 			
-			let zoom = window.devicePixelRatio;
-
 			this.size.w = this.canvas.width = this.find('.bottom').width() * zoom;
 			this.size.h = this.canvas.height = this.find('.bottom').height() * zoom;
 
@@ -357,8 +357,8 @@ define([
 						text = 'Starting node for ' + node.spiritStart + ' spirits';
 
 					let tooltipPos = {
-						x: input.mouse.raw.clientX + 15,
-						y: input.mouse.raw.clientY
+						x: (input.mouse.raw.clientX + 15) / zoom,
+						y: (input.mouse.raw.clientY) / zoom
 					};
 
 					events.emit('onShowTooltip', text, this.el[0], tooltipPos);
@@ -399,10 +399,9 @@ define([
 
 				this.events.onMouseMove.call(this, e);
 
-				let windowZoom = window.devicePixelRatio;
 				this.panOrigin = {
-					x: e.raw.clientX * windowZoom,
-					y: e.raw.clientY * windowZoom
+					x: e.raw.clientX * zoom,
+					y: e.raw.clientY * zoom
 				};
 			},
 
@@ -419,12 +418,11 @@ define([
 					};
 				}
 
-				let windowZoom = window.devicePixelRatio;
 				let zoomPanMultiplier = this.currentZoom;
 				let scrollSpeed = constants.scrollSpeed / zoomPanMultiplier;
 
-				const rawX = e.raw.clientX * windowZoom;
-				const rawY = e.raw.clientY * windowZoom;
+				const rawX = e.raw.clientX * zoom;
+				const rawY = e.raw.clientY * zoom;
 
 				this.pos.x += (this.panOrigin.x - rawX) * scrollSpeed;
 				this.pos.y += (this.panOrigin.y - rawY) * scrollSpeed;