From fbe4869d1ed336d3fb7d08d3d2f75710eb0fb1a4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 5 Dec 2021 13:10:19 +0900
Subject: [PATCH] =?UTF-8?q?fix(client):=20=E3=82=BF=E3=83=83=E3=83=81?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E4=BB=98=E3=81=8D=E3=83=87=E3=82=A3=E3=82=B9?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=82=A4=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=81=84=E3=81=A6=E3=83=9E=E3=82=A6=E3=82=B9=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E3=82=92=E3=81=97=E3=81=A6=E3=81=84=E3=82=8B=E5=A0=B4=E5=90=88?=
 =?UTF-8?q?=E3=81=AB=E4=B8=80=E9=83=A8=E6=A9=9F=E8=83=BD=E3=81=8C=E5=8B=95?=
 =?UTF-8?q?=E4=BD=9C=E3=81=97=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  7 +++++++
 .../client/src/components/emoji-picker.vue    |  6 +++---
 packages/client/src/components/global/url.vue |  6 +++---
 packages/client/src/components/link.vue       |  6 +++---
 packages/client/src/directives/tooltip.ts     |  6 +++---
 packages/client/src/os.ts                     | 10 ----------
 .../client/src/scripts/is-device-touch.ts     |  1 -
 packages/client/src/scripts/touch.ts          | 19 +++++++++++++++++++
 packages/client/src/scripts/use-tooltip.ts    |  5 ++---
 9 files changed, 40 insertions(+), 26 deletions(-)
 delete mode 100644 packages/client/src/scripts/is-device-touch.ts
 create mode 100644 packages/client/src/scripts/touch.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 281416fd7..a46f9c7c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,13 @@
 
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+
+### Bugfixes
+- クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
+
 ## 12.98.0 (2021/12/03)
 
 ### Improvements
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 6695c236e..180aff87a 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -79,7 +79,7 @@ import { emojilist } from '@/scripts/emojilist';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import Particle from '@/components/particle.vue';
 import * as os from '@/os';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import { isMobile } from '@/scripts/is-mobile';
 import { emojiCategories } from '@/instance';
 import XSection from './emoji-picker.section.vue';
@@ -108,7 +108,7 @@ export default defineComponent({
 			pinned: this.$store.reactiveState.reactions,
 			width: this.asReactionPicker ? this.$store.state.reactionPickerWidth : 3,
 			height: this.asReactionPicker ? this.$store.state.reactionPickerHeight : 2,
-			big: this.asReactionPicker ? isDeviceTouch : false,
+			big: this.asReactionPicker ? isTouchUsing : false,
 			customEmojiCategories: emojiCategories,
 			customEmojis: this.$instance.emojis,
 			q: null,
@@ -268,7 +268,7 @@ export default defineComponent({
 
 	methods: {
 		focus() {
-			if (!isMobile && !isDeviceTouch) {
+			if (!isMobile && !isTouchUsing) {
 				this.$refs.search.focus({
 					preventScroll: true
 				});
diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/url.vue
index 4987c2b61..097fcddef 100644
--- a/packages/client/src/components/global/url.vue
+++ b/packages/client/src/components/global/url.vue
@@ -23,7 +23,7 @@
 import { defineComponent } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -91,13 +91,13 @@ export default defineComponent({
 			}
 		},
 		onMouseover() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/packages/client/src/components/link.vue b/packages/client/src/components/link.vue
index 5a6754016..8b8cde651 100644
--- a/packages/client/src/components/link.vue
+++ b/packages/client/src/components/link.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { url as local } from '@/config';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -65,13 +65,13 @@ export default defineComponent({
 			}
 		},
 		onMouseover() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
-			if (isDeviceTouch) return;
+			if (isTouchUsing) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 0e36322cd..e14ee81df 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -2,11 +2,11 @@
 // ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
 
 import { Directive, ref } from 'vue';
-import { isDeviceTouch } from '@/scripts/is-device-touch';
+import { isTouchUsing } from '@/scripts/touch';
 import { popup, alert } from '@/os';
 
-const start = isDeviceTouch ? 'touchstart' : 'mouseover';
-const end = isDeviceTouch ? 'touchend' : 'mouseleave';
+const start = isTouchUsing ? 'touchstart' : 'mouseover';
+const end = isTouchUsing ? 'touchend' : 'mouseleave';
 const delay = 100;
 
 export default {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 37b57557c..1c3c6d3e5 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -12,16 +12,6 @@ import { resolve } from '@/router';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
 
-export let isScreenTouching = false;
-
-window.addEventListener('touchstart', () => {
-	isScreenTouching = true;
-}, { passive: true });
-
-window.addEventListener('touchend', () => {
-	isScreenTouching = false;
-}, { passive: true });
-
 export const stream = markRaw(new Misskey.Stream(url, $i));
 
 export const pendingApiRequestsCount = ref(0);
diff --git a/packages/client/src/scripts/is-device-touch.ts b/packages/client/src/scripts/is-device-touch.ts
deleted file mode 100644
index 3f0bfefed..000000000
--- a/packages/client/src/scripts/is-device-touch.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isDeviceTouch = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
new file mode 100644
index 000000000..06b4f8b2e
--- /dev/null
+++ b/packages/client/src/scripts/touch.ts
@@ -0,0 +1,19 @@
+const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
+
+export let isTouchUsing = false;
+
+export let isScreenTouching = false;
+
+if (isTouchSupported) {
+	window.addEventListener('touchstart', () => {
+		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
+		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
+		isTouchUsing = true;
+
+		isScreenTouching = true;
+	}, { passive: true });
+	
+	window.addEventListener('touchend', () => {
+		isScreenTouching = false;
+	}, { passive: true });
+}
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index a9bf6d93d..b88075cdb 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,6 +1,5 @@
-import { isScreenTouching } from '@/os';
 import { Ref, ref } from 'vue';
-import { isDeviceTouch } from './is-device-touch';
+import { isScreenTouching, isTouchUsing } from './touch';
 
 export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 	let isHovering = false;
@@ -14,7 +13,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 
 		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
 		// これが無いと、画面に触れてないのにツールチップが出たりしてしまう
-		if (isDeviceTouch && !isScreenTouching) return;
+		if (isTouchUsing && !isScreenTouching) return;
 
 		const showing = ref(true);
 		onShow(showing);