Compare commits

...

2 Commits

Author SHA1 Message Date
github-actions[bot] 45d6c090f2 Bump version to 2025.5.0-alpha.2 2025-05-05 05:41:19 +00:00
かっこかり 57a1ac3dd0
fix(frontend): 横スワイプの挙動改善 (#15952) 2025-05-05 14:28:54 +09:00
3 changed files with 22 additions and 9 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "misskey", "name": "misskey",
"version": "2025.5.0-alpha.1", "version": "2025.5.0-alpha.2",
"codename": "nasubi", "codename": "nasubi",
"repository": { "repository": {
"type": "git", "type": "git",

View File

@ -53,12 +53,12 @@ const MIN_SWIPE_DISTANCE = 20;
// //
const SWIPE_DISTANCE_THRESHOLD = 70; const SWIPE_DISTANCE_THRESHOLD = 70;
// Y
const SWIPE_ABORT_Y_THRESHOLD = 75;
// //
const MAX_SWIPE_DISTANCE = 120; const MAX_SWIPE_DISTANCE = 120;
//
const SWIPE_DIRECTION_ANGLE_THRESHOLD = 50;
// // // //
let startScreenX: number | null = null; let startScreenX: number | null = null;
@ -69,6 +69,7 @@ const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === t
const pullDistance = ref(0); const pullDistance = ref(0);
const isSwipingForClass = ref(false); const isSwipingForClass = ref(false);
let swipeAborted = false; let swipeAborted = false;
let swipeDirectionLocked: 'horizontal' | 'vertical' | null = null;
function touchStart(event: TouchEvent) { function touchStart(event: TouchEvent) {
if (!prefer.r.enableHorizontalSwipe.value) return; if (!prefer.r.enableHorizontalSwipe.value) return;
@ -79,6 +80,7 @@ function touchStart(event: TouchEvent) {
startScreenX = event.touches[0].screenX; startScreenX = event.touches[0].screenX;
startScreenY = event.touches[0].screenY; startScreenY = event.touches[0].screenY;
swipeDirectionLocked = null; //
} }
function touchMove(event: TouchEvent) { function touchMove(event: TouchEvent) {
@ -95,15 +97,24 @@ function touchMove(event: TouchEvent) {
let distanceX = event.touches[0].screenX - startScreenX; let distanceX = event.touches[0].screenX - startScreenX;
let distanceY = event.touches[0].screenY - startScreenY; let distanceY = event.touches[0].screenY - startScreenY;
if (Math.abs(distanceY) > SWIPE_ABORT_Y_THRESHOLD) { //
swipeAborted = true; if (!swipeDirectionLocked) {
const angle = Math.abs(Math.atan2(distanceY, distanceX) * (180 / Math.PI));
if (angle > 90 - SWIPE_DIRECTION_ANGLE_THRESHOLD && angle < 90 + SWIPE_DIRECTION_ANGLE_THRESHOLD) {
swipeDirectionLocked = 'vertical';
} else {
swipeDirectionLocked = 'horizontal';
}
}
//
if (swipeDirectionLocked === 'vertical') {
swipeAborted = true;
pullDistance.value = 0; pullDistance.value = 0;
isSwiping.value = false; isSwiping.value = false;
window.setTimeout(() => { window.setTimeout(() => {
isSwipingForClass.value = false; isSwipingForClass.value = false;
}, 400); }, 400);
return; return;
} }
@ -164,6 +175,8 @@ function touchEnd(event: TouchEvent) {
window.setTimeout(() => { window.setTimeout(() => {
isSwipingForClass.value = false; isSwipingForClass.value = false;
}, 400); }, 400);
swipeDirectionLocked = null; //
} }
/** 横スワイプに関与する可能性のある要素を調べる */ /** 横スワイプに関与する可能性のある要素を調べる */
@ -190,7 +203,7 @@ watch(tabModel, (newTab, oldTab) => {
const newIndex = props.tabs.findIndex(tab => tab.key === newTab); const newIndex = props.tabs.findIndex(tab => tab.key === newTab);
const oldIndex = props.tabs.findIndex(tab => tab.key === oldTab); const oldIndex = props.tabs.findIndex(tab => tab.key === oldTab);
if (oldIndex >= 0 && newIndex && oldIndex < newIndex) { if (oldIndex >= 0 && newIndex >= 0 && oldIndex < newIndex) {
transitionName.value = 'swipeAnimationLeft'; transitionName.value = 'swipeAnimationLeft';
} else { } else {
transitionName.value = 'swipeAnimationRight'; transitionName.value = 'swipeAnimationRight';

View File

@ -1,7 +1,7 @@
{ {
"type": "module", "type": "module",
"name": "misskey-js", "name": "misskey-js",
"version": "2025.5.0-alpha.1", "version": "2025.5.0-alpha.2",
"description": "Misskey SDK for JavaScript", "description": "Misskey SDK for JavaScript",
"license": "MIT", "license": "MIT",
"main": "./built/index.js", "main": "./built/index.js",