tms(flask): 長押しによるコンテキストメニューイベントの発行を防ぐ

locales/index.d.ts

@@ -10178,6 +10178,16 @@ export interface Locale extends ILocale {
              * {x}を開く
              */
             readonly "openX": ParameterizedString<"x">;
+            readonly "_preventLongPressContextMenu": {
+                /**
+                 * 長押しによるコンテキストメニューイベントの発行を防ぐ
+                 */
+                readonly "label": string;
+                /**
+                 * 長押しを含む操作が中断される問題を解消します。
+                 */
+                readonly "caption": string;
+            };
         };
         readonly "_admin": {
             /**

locales/ja-JP.yml

@@ -2713,5 +2713,8 @@ _tms:
     warning: "これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。"
     forceFetchX: "{x}を強制取得"
     openX: "{x}を開く"
+    _preventLongPressContextMenu:
+      label: "長押しによるコンテキストメニューイベントの発行を防ぐ"
+      caption: "長押しを含む操作が中断される問題を解消します。"
   _admin:
     repositoryUrlDescription: "ソースコードが公開されているリポジトリがある場合、そのURLを記入します。taiymeを現状のまま（ソースコードにいかなる変更も加えずに）使用している場合は https://github.com/taiyme/misskey と記入します。"

packages/frontend/src/boot/common.ts

@@ -25,6 +25,7 @@ import { fetchCustomEmojis } from '@/custom-emojis.js';
 import { setupRouter } from '@/router/definition.js';
 import { tmsFlaskStore } from '@/tms/flask-store.js';
 import { tmsStore } from '@/tms/store.js';
+import { preventLongPressContextMenu } from '@/scripts/tms/prevent-longpress-contextmenu.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`taiyme v${version}`);
@@ -123,6 +124,10 @@ export async function common(createVue: () => App<Element>) {
 	await tmsStore.ready;
 	await tmsFlaskStore.ready;
 
+	if (tmsFlaskStore.state.preventLongPressContextMenu) {
+		preventLongPressContextMenu();
+	}
+
 	const fetchInstanceMetaPromise = fetchInstance();
 
 	fetchInstanceMetaPromise.then(() => {

packages/frontend/src/pages/tms/flags/index.main.vue

@@ -5,6 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
+	<FormSection>
+		<div class="_gaps">
+			<MkSwitch v-model="preventLongPressContextMenu">
+				<template #label>{{ i18n.ts._tms._flags._preventLongPressContextMenu.label }}</template>
+				<template #caption>{{ i18n.ts._tms._flags._preventLongPressContextMenu.caption }}</template>
+			</MkSwitch>
+		</div>
+	</FormSection>
 	<FormSection>
 		<template #label>For developer</template>
 		<div class="_gaps_s">
@@ -27,14 +35,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, readonly, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, readonly, ref, watch } from 'vue';
 import { commitHash, lang, version } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { confirm, popup, waiting } from '@/os.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+//#region 即時変更
+const preventLongPressContextMenu = computed(tmsFlaskStore.makeGetterSetter('preventLongPressContextMenu'));
+//#endregion
 
 const confirmDialog = async (): Promise<boolean> => {
 	const { canceled } = await confirm({

packages/frontend/src/scripts/tms/prevent-longpress-contextmenu.ts

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const preventLongPressContextMenu = () => {
+	let touching = false;
+	let touchCanceled = false;
+
+	const onTouchStart = () => {
+		touching = true;
+		touchCanceled = false;
+	};
+
+	const onTouchMove = () => {
+		touching = true;
+		touchCanceled = false;
+	};
+
+	const onTouchEnd = () => {
+		touching = false;
+		touchCanceled = false;
+	};
+
+	const onTouchCancel = () => {
+		touching = false;
+		touchCanceled = true;
+	};
+
+	document.addEventListener('touchstart', onTouchStart, { passive: true, capture: true });
+	document.addEventListener('touchmove', onTouchMove, { passive: true, capture: true });
+	document.addEventListener('touchend', onTouchEnd, { passive: true, capture: true });
+	document.addEventListener('touchcancel', onTouchCancel, { passive: true, capture: true });
+	document.addEventListener('click', onTouchEnd, { passive: true, capture: true });
+	document.addEventListener('contextmenu', (ev) => {
+		if (touchCanceled || touching) {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+		onTouchEnd();
+	}, { passive: false, capture: true });
+};

packages/frontend/src/tms/flask-store.ts

@@ -10,4 +10,8 @@ import { Storage } from '@/pizzax.js';
  * tmsFlaskStore -- 独自実装した実験的機能についてのデータを格納する
  */
 export const tmsFlaskStore = markRaw(new Storage('tmsFlask', {
+	preventLongPressContextMenu: {
+		where: 'device',
+		default: true,
+	},
 }));