Use long touches to "hold" items to be moved in inventory or placed o…

…n ground... - #417 - #254
arianne · Jun 16, 2022 · e00187a · e00187a
1 parent 1f0ab8a
commit e00187a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 45 deletions.
diff --git a/srcjs/stendhal/main.js b/srcjs/stendhal/main.js
@@ -168,9 +168,7 @@ stendhal.main = {
 		gamewindow.addEventListener("dblclick", stendhal.ui.gamewindow.onMouseDown);
 		gamewindow.addEventListener("dragstart", stendhal.ui.gamewindow.onDragStart);
 		gamewindow.addEventListener("mousemove", stendhal.ui.gamewindow.onMouseMove);
-		//gamewindow.addEventListener("touchstart", stendhal.ui.gamewindow.onTouchStart);
-		//gamewindow.addEventListener("touchend", stendhal.ui.gamewindow.onTouchEnd);
-		//gamewindow.addEventListener("touchmove", stendhal.ui.gamewindow.onTouchMove);
+		gamewindow.addEventListener("touchend", stendhal.ui.gamewindow.onTouchEnd);
 		gamewindow.addEventListener("dragover", stendhal.ui.gamewindow.onDragOver);
 		gamewindow.addEventListener("drop", stendhal.ui.gamewindow.onDrop);
 		gamewindow.addEventListener("contextmenu", stendhal.ui.gamewindow.onContentMenu);

diff --git a/srcjs/stendhal/ui/component/ItemContainerImplementation.ts b/srcjs/stendhal/ui/component/ItemContainerImplementation.ts
@@ -60,20 +60,12 @@ export class ItemContainerImplementation {
 			e.addEventListener("mouseup", (event: MouseEvent) => {
 				this.onMouseUp(event)
 			});
-			/*
 			e.addEventListener("touchstart", (event: TouchEvent) => {
 				this.onTouchStart(event)
 			});
 			e.addEventListener("touchend", (event: TouchEvent) => {
 				this.onTouchEnd(event)
 			});
-			e.addEventListener("touchmove", (event: TouchEvent) => {
-				this.onTouchMove(event)
-			});
-			e.addEventListener("touchcancel", (event: TouchEvent) => {
-				this.onTouchCancel(event)
-			});
-			*/
 			e.addEventListener("contextmenu", (event: MouseEvent) => {
 				this.onContextMenu(event);
 			});
@@ -139,17 +131,29 @@ export class ItemContainerImplementation {
 			return;
 		}
 
-		let slotNumber = (event.target as HTMLElement).id.slice(this.slot.length + this.suffix.length);
+		let target
+		if (event instanceof DragEvent) {
+			target = (event.target as HTMLElement);
+		} else {
+			// touch event
+			const touch = event.touches[0] || event.targetTouches[0] || event.changedTouches[0];
+			target = (touch.target as HTMLElement);
+		}
+
+		const slotNumber = target.id.slice(this.slot.length + this.suffix.length);
 		let item = myobject[this.slot].getByIndex(slotNumber);
 		if (item) {
 			stendhal.ui.heldItem = {
 				path: item.getIdPath(),
 				zone: marauroa.currentZoneName,
 				slot: this.slot
 			} as any;
+
+			const img = stendhal.data.sprites.getAreaOf(stendhal.data.sprites.get(item.sprite.filename), 32, 32);
 			if (event instanceof DragEvent && event.dataTransfer) {
-				const img = stendhal.data.sprites.getAreaOf(stendhal.data.sprites.get(item.sprite.filename), 32, 32);
 				event.dataTransfer.setDragImage(img, 0, 0);
+			} else if (event instanceof TouchEvent) {
+				stendhal.ui.touch.setHeldItem(img);
 			}
 		} else {
 			event.preventDefault();
@@ -282,25 +286,22 @@ export class ItemContainerImplementation {
 	}
 
 	private onTouchStart(evt: TouchEvent) {
-		evt.preventDefault();
-		stendhal.ui.touch.timestampTouchStart = +new Date();
+		stendhal.ui.touch.onTouchStart();
 	}
 
 	private onTouchEnd(evt: TouchEvent) {
-		evt.preventDefault();
-		stendhal.ui.touch.timestampTouchEnd = +new Date();
-		if (stendhal.ui.heldItem) {
-			this.onDrop(evt);
-		} else {
-			this.onMouseUp(evt);
-		}
-	}
+		stendhal.ui.touch.onTouchEnd();
+		if (stendhal.ui.touch.isLongTouch() && !stendhal.ui.touch.held) {
+			// don't call this.onMouseUp
+			evt.preventDefault();
 
-	private onTouchMove(evt: TouchEvent) {
-		if (stendhal.ui.heldItem) {
-			this.onDragOver(evt);
-		} else {
 			this.onDragStart(evt);
+		} else if (stendhal.ui.touch.held) {
+			// don't call this.onMouseUp
+			evt.preventDefault();
+
+			this.onDrop(evt);
+			stendhal.ui.touch.unsetHeldItem();
 		}
 	}
 }
diff --git a/srcjs/stendhal/ui/gamewindow.js b/srcjs/stendhal/ui/gamewindow.js
@@ -401,26 +401,13 @@ stendhal.ui.gamewindow = {
 		e.preventDefault();
 	},
 
-	onTouchStart: function(e) {
-		e.preventDefault();
-		stendhal.ui.touch.timestampTouchStart = +new Date();
-	},
-
 	onTouchEnd: function(e) {
-		e.preventDefault();
-		stendhal.ui.touch.timestampTouchEnd = +new Date();
-		if (stendhal.ui.heldItem) {
-			this.onDrop(e);
-		} else {
-			this.onMouseUp(e);
-		}
-	},
+		if (stendhal.ui.touch.held) {
+			// don't call this.onMouseUp
+			e.preventDefault();
 
-	onTouchMove: function(e) {
-		if (stendhal.ui.heldItem) {
-			this.onDragOver(e);
-		} else {
-			this.onDragStart(e);
+			stendhal.ui.gamewindow.onDrop(e);
+			stendhal.ui.touch.unsetHeldItem();
 		}
 	},
 

diff --git a/srcjs/stendhal/ui/touch.js b/srcjs/stendhal/ui/touch.js
@@ -46,8 +46,26 @@ stendhal.ui.touch = {
 		}
 	},
 
+	onTouchStart: function() {
+		stendhal.ui.touch.timestampTouchStart = +new Date();
+	},
+
+	onTouchEnd: function() {
+		stendhal.ui.touch.timestampTouchEnd = +new Date();
+	},
+
 	isLongTouch: function() {
 		return (stendhal.ui.touch.timestampTouchEnd - stendhal.ui.touch.timestampTouchStart
 				> stendhal.ui.touch.longTouchDuration);
+	},
+
+	setHeldItem: function(img) {
+		stendhal.ui.touch.held = {
+			image: img
+		}
+	},
+
+	unsetHeldItem: function() {
+		stendhal.ui.touch.held = undefined;
 	}
 }