enhance(frontend): 中クリックでPullToRefreshするように

Close #15931

locales/index.d.ts

@@ -5713,6 +5713,10 @@ export interface Locale extends ILocale {
          * ひっぱって更新
          */
         "enablePullToRefresh": string;
+        /**
+         * マウスでは、ホイールを押し込みながらドラッグします。
+         */
+        "enablePullToRefresh_description": string;
         "_chat": {
             /**
              * 送信者の名前を表示

locales/ja-JP.yml

@@ -1428,6 +1428,7 @@ _settings:
   ifOff: "オフのとき"
   enableSyncThemesBetweenDevices: "デバイス間でインストールしたテーマを同期"
   enablePullToRefresh: "ひっぱって更新"
+  enablePullToRefresh_description: "マウスでは、ホイールを押し込みながらドラッグします。"
 
   _chat:
     showSenderName: "送信者の名前を表示"

packages/frontend/src/components/MkPullToRefresh.vue

@@ -77,31 +77,37 @@ function unlockDownScroll() {
 }
 
 function moveStart(event: PointerEvent) {
-	const scrollPos = scrollEl!.scrollTop;
+	if (event.pointerType === 'mouse' && event.button !== 1) return;
-	if (scrollPos === 0) {
+	if (isRefreshing.value) return;
-		lockDownScroll();
-		if (!isPulling.value && !isRefreshing.value) {
-			isPulling.value = true;
-			startScreenY = getScreenY(event);
-			pullDistance.value = 0;
 
-			// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
+	const scrollPos = scrollEl!.scrollTop;
-			if (event.pointerType === 'mouse') {
+	if (scrollPos !== 0) {
-				window.addEventListener('mousemove', moving, { passive: true });
-				window.addEventListener('mouseup', () => {
-					window.removeEventListener('mousemove', moving);
-					onPullRelease();
-				}, { passive: true, once: true });
-			} else {
-				window.addEventListener('touchmove', moving, { passive: true });
-				window.addEventListener('touchend', () => {
-					window.removeEventListener('touchmove', moving);
-					onPullRelease();
-				}, { passive: true, once: true });
-			}
-		}
-	} else {
 		unlockDownScroll();
+		return;
+	}
+
+	lockDownScroll();
+
+	// マウスでのpull時、画面上のテキスト選択が発生したり、ブラウザの中クリックによる挙動が競合したりして画面がスクロールされたりするのを防ぐ
+	window.document.body.setAttribute('inert', 'true');
+
+	isPulling.value = true;
+	startScreenY = getScreenY(event);
+	pullDistance.value = 0;
+
+	// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
+	if (event.pointerType === 'mouse') {
+		window.addEventListener('mousemove', moving, { passive: true });
+		window.addEventListener('mouseup', () => {
+			window.removeEventListener('mousemove', moving);
+			onPullRelease();
+		}, { passive: true, once: true });
+	} else {
+		window.addEventListener('touchmove', moving, { passive: true });
+		window.addEventListener('touchend', () => {
+			window.removeEventListener('touchmove', moving);
+			onPullRelease();
+		}, { passive: true, once: true });
 	}
 }
 
@@ -168,8 +174,6 @@ function toggleScrollLockOnTouchEnd() {
 }
 
 function moving(event: MouseEvent | TouchEvent) {
-	if (!isPulling.value || isRefreshing.value) return;
-
 	if ((scrollEl?.scrollTop ?? 0) > SCROLL_STOP + pullDistance.value || isHorizontalSwipeSwiping.value) {
 		pullDistance.value = 0;
 		isPulledEnough.value = false;
@@ -185,11 +189,6 @@ function moving(event: MouseEvent | TouchEvent) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
-	// マウスでのpull時、画面上のテキスト選択が発生して画面がスクロールされたりするのを防ぐ
-	if (pullDistance.value > 3) { // ある程度遊びを持たせないと通常のクリックでも発火しクリックできなくなる
-		window.document.body.setAttribute('inert', 'true');
-	}
-
 	isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
 }
 

packages/frontend/src/pages/settings/preferences.vue

@@ -475,6 +475,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkPreferenceContainer k="enablePullToRefresh">
 									<MkSwitch v-model="enablePullToRefresh">
 										<template #label><SearchLabel>{{ i18n.ts._settings.enablePullToRefresh }}</SearchLabel></template>
+										<template #caption><SearchKeyword>{{ i18n.ts._settings.enablePullToRefresh_description }}</SearchKeyword></template>
 									</MkSwitch>
 								</MkPreferenceContainer>
 							</SearchMarker>