From 7677d593467e7cc29cf10f28301152776c027bd2 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 28 Jun 2022 22:24:55 +1000
Subject: Use double-taps on mobile

---
 src/App.vue                     |  6 ++++--
 src/components/Tile.vue         | 38 +++++++++++++++++++++++++++++---------
 src/components/TutorialPane.vue |  3 +--
 src/index.css                   |  1 +
 src/lib.ts                      |  1 +
 src/util.ts                     |  4 ++++
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f67cbb1..42a4cd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
 	:style="{backgroundColor: uiOpts.bgColor}">
 	<!-- Title bar -->
 	<div class="flex shadow gap-2 p-2" :style="{backgroundColor: uiOpts.bgColorDark2}">
-		<h1 class="my-auto ml-2 text-3xl" :style="{color: uiOpts.altColor}">Tilo</h1>
+		<h1 class="my-auto ml-2 text-3xl" :style="{color: uiOpts.altColor}">Tilo (prototype)</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
 		<icon-button v-if="!uiOpts.disabledActions.has('search')" :style="buttonStyles" @click="onSearchIconClick">
@@ -86,7 +86,8 @@ import HelpIcon from './components/icon/HelpIcon.vue';
 import {TolNode, TolMap, getServerResponse, Action, UiOptions} from './lib';
 import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout';
 import {initLayoutTree, initLayoutMap, tryLayout} from './layout';
-import {getBreakpoint, getScrollBarWidth, arraySum, randWeightedChoice, timeout} from './util';
+import {getBreakpoint, getScrollBarWidth, isTouchDevice,
+	arraySum, randWeightedChoice, timeout} from './util';
 
 // Type representing auto-mode actions
 type AutoAction = 'move across' | 'move down' | 'move up' | Action;
@@ -162,6 +163,7 @@ function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 		searchJumpMode: false,
 		tutorialSkip: false,
 		disabledActions: new Set() as Set<Action>,
+		useDblClick: isTouchDevice(),
 	};
 }
 const lytOptPrefix = 'LYT '; // Used when saving to localStorage
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 73a818a..15b1b48 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -425,17 +425,34 @@ export default defineComponent({
 		// Click handling
 		onMouseDown(): void {
 			this.highlight = false;
-			clearTimeout(this.clickHoldTimer);
-			this.clickHoldTimer = setTimeout(() => {
-				this.clickHoldTimer = 0;
-				this.onClickHold();
-			}, this.uiOpts.clickHoldDuration);
+			if (!this.uiOpts.useDblClick){
+				// Wait for a mouseup or click-hold
+				clearTimeout(this.clickHoldTimer);
+				this.clickHoldTimer = setTimeout(() => {
+					this.clickHoldTimer = 0;
+					this.onClickHold();
+				}, this.uiOpts.clickHoldDuration);
+			} else {
+				// Wait for or recognise a double-click
+				if (this.clickHoldTimer == 0){
+					this.clickHoldTimer = setTimeout(() => {
+						this.clickHoldTimer = 0;
+						this.onClick();
+					}, this.uiOpts.clickHoldDuration);
+				} else {
+					clearTimeout(this.clickHoldTimer)
+					this.clickHoldTimer = 0;
+					this.onDblClick();
+				}
+			}
 		},
 		onMouseUp(): void {
-			if (this.clickHoldTimer > 0){
-				clearTimeout(this.clickHoldTimer);
-				this.clickHoldTimer = 0;
-				this.onClick();
+			if (!this.uiOpts.useDblClick){
+				if (this.clickHoldTimer > 0){
+					clearTimeout(this.clickHoldTimer);
+					this.clickHoldTimer = 0;
+					this.onClick();
+				}
 			}
 		},
 		onClick(): void {
@@ -453,6 +470,9 @@ export default defineComponent({
 			}
 			this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode);
 		},
+		onDblClick(): void {
+			this.onClickHold();
+		},
 		onInfoIconClick(evt: Event): void {
 			this.$emit('info-click', this.layoutNode.name);
 		},
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 88e1c66..894d834 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -8,8 +8,7 @@
 	<template v-if="stage == 0">
 		<div :style="contentStyles">
 			This page provides a visualisation of the biological Tree of Life.
-			It was made using data from OTOL, EOL, and Wikipedia.
-			For more project information, click here.
+			It is unfinished, and is just here for testing.
 		</div>
 		<div class="w-full flex justify-evenly mt-2">
 			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
diff --git a/src/index.css b/src/index.css
index 6569d31..c3e9ac7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,7 @@
 }
 body {
 	font-family: Ubuntu, system-ui, sans-serif;
+	touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */
 }
 
 /* For transitions/animations */
diff --git a/src/lib.ts b/src/lib.ts
index cad51c4..66e0176 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -127,4 +127,5 @@ export type UiOptions = {
 	searchJumpMode: boolean,
 	tutorialSkip: boolean,
 	disabledActions: Set<Action>,
+	useDblClick: boolean,
 };
diff --git a/src/util.ts b/src/util.ts
index 907cce5..3feb419 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -31,6 +31,10 @@ export function getScrollBarWidth(){
 	//
 	return scrollBarWidth;
 }
+// Detects a touch device
+export function isTouchDevice(){
+	return window.matchMedia('(pointer: coarse)').matches;
+}
 
 // Returns [0 ... len]
 export function range(len: number): number[] {
-- 
cgit v1.2.3