test

packages/frontend/src/components/MkDrive.file.vue

@@ -5,12 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-      :class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
+	:class="[$style.root, { [$style.isSelected]: isSelected || isSelectedFile }]"
 	draggable="true"
 	:title="title"
 	@click="onClick"
-      @pointerdown="startLongPress(file)"
-      @pointerup="endLongPress"
 	@contextmenu.stop="onContextmenu"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
@@ -32,11 +30,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
 
 		<p :class="$style.name">
-        <span>{{
+			<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name }}</span>
-            file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name
+			<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
-          }}</span>
-        <span v-if="file.name.lastIndexOf('.') != -1"
-              style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
 		</p>
 	</div>
 </div>
@@ -50,31 +45,15 @@ import bytes from '@/filters/bytes.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import {getDriveFileMenu, getDriveFileMultiMenu} from '@/scripts/get-drive-file-menu.js';
+import { getDriveFileMenu, getDriveMultiFileMenu } from '@/scripts/get-drive-file-menu.js';
-const isLongPressing = ref(false);
+import { isTouchUsing } from '@/scripts/touch.js';
-let longPressTimeout = null;
-import {defaultStore} from '@/store.js'
-function startLongPress() {
-  isLongPressing.value = true;
-  longPressTimeout = setTimeout(() => {
-    if (isLongPressing) {
-    }
-  }, 800); // 長押しと判断する時間（1秒）を設定
-}
 
-function endLongPress() {
-  isLongPressing.value = false;
-  clearTimeout(longPressTimeout);
-}
-
-const isMultiSelect = ref(false);
 const props = withDefaults(defineProps<{
 	file: Misskey.entities.DriveFile;
 	folder: Misskey.entities.DriveFolder | null;
 	isSelected?: boolean;
 	selectMode?: boolean;
-  multipleselect?;
+  SelectFiles?: string[];
-  isLongPressing?;
 }>(), {
 	isSelected: false,
 	selectMode: false,
@@ -87,46 +66,35 @@ const emit = defineEmits<{
 }>();
 
 const isDragging = ref(false);
-
+const isSelectedFile = ref(false);
 const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
-watch(props.multipleselect, () => {
-  isMultiSelect.value = !!props.multipleselect.some(item => item.id === props.file.id);
-});
-function onClick(ev: MouseEvent) {
 
+watch(props.SelectFiles, () => {
+	const index = props.SelectFiles.findIndex(item => item.id === props.file.id);
+	isSelectedFile.value = index !== -1;
+});
+
+function onClick(ev: MouseEvent) {
+	console.log('onclick');
 	if (props.selectMode) {
 		emit('chosen', props.file);
-  } else if (ev.shiftKey && ev.button === 2 || isMultiSelect.value  ) {
+	} else if (!ev.shiftKey && !isTouchUsing && !isSelectedFile.value) {
-    os.popupMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
-
-  }
-  else if (!ev.shiftKey) {
 		os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else if (!ev.shiftKey && isSelectedFile.value && props.SelectFiles.length === 0) {
+		os.popupMenu(getDriveMultiFileMenu(props.SelectFiles), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	} else if (isTouchUsing && !isSelectedFile.value && props.SelectFiles.length === 0) {
+    os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	}
+}
 
-  }
-}
-function device() {
-  var ua = navigator.userAgent;
-  if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
-    return 'mobile';
-  }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
-    return 'tablet';
-  }else{
-    return 'desktop';
-  }
-}
 function onContextmenu(ev: MouseEvent) {
-
+	console.log('oncontext');
-  if (!ev.shiftKey && !isMultiSelect.value) {
+	if (!isTouchUsing) {
+		if (!ev.shiftKey && !isSelectedFile.value) {
 			os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
-  } else if (ev.shiftKey && props.multipleselect.length > 0 && ev.button === 2) {
+		} else if (isSelectedFile.value) {
-      os.contextMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), ev);
+			os.contextMenu(getDriveMultiFileMenu(props.SelectFiles), ev);
-  } else if(device()=== "desktop"){
-    os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
-
 		}
-  if (props.isLongPressing){
-    isMultiSelect.value = !isMultiSelect.value
 	}
 }
 
@@ -136,7 +104,7 @@ function onDragstart(ev: DragEvent) {
 		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
 	}
 	isDragging.value = true;
-
+	console.log(isDragging.value)
 	emit('dragstart');
 }
 

packages/frontend/src/components/MkDrive.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root">
+<div :class="$style.root" @scroll="handleScroll">
 	<nav :class="$style.nav">
 		<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
 			<XNavFolder
@@ -14,7 +14,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				@upload="upload"
 				@removeFile="removeFile"
 				@removeFolder="removeFolder"
-        :multipleselect="multipleselect"
 			/>
 			<template v-for="f in hierarchyFolders">
 				<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -26,7 +25,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@upload="upload"
 					@removeFile="removeFile"
 					@removeFolder="removeFolder"
-          :multipleselect="multipleselect"
 				/>
 			</template>
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
@@ -53,7 +51,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
-          :multipleselect="multipleselect"
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
@@ -76,15 +73,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="folder"
 					:selectMode="select === 'file'"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
+					:SelectFiles="SelectFiles"
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
 					@pointerdown="startLongPress(file)"
 					@pointerup="endLongPress"
-          @click.shift.left.exact="selectClick(file)"
+					@pointermove="debounceEvent"
-          @click.ctrl.left.exact="selectClick(file)"
+					@pointercancel="debounceEvent"
-          :multipleselect="multipleselect"
+					@click.shift.left.exact="multipleSelect(file)"
-          :isLongPressing="isLongPressing"
 				/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
@@ -116,7 +113,7 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-
+import { isTouchUsing } from '@/scripts/touch.js';
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 	type?: string;
@@ -127,24 +124,6 @@ const props = withDefaults(defineProps<{
 	select: null,
 });
 
-const isLongPressing = ref(false);
-let longPressTimeout = null;
-
-function startLongPress(file) {
-  isLongPressing.value = true;
-  longPressTimeout = setTimeout(() => {
-    if (isLongPressing) {
-      selectClick(file)
-    }
-  }, 800); // 長押しと判断する時間（1秒）を設定
-}
-
-function endLongPress() {
-  isLongPressing.value = false;
-  clearTimeout(longPressTimeout);
-}
-
-
 const emit = defineEmits<{
 	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
 	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
@@ -167,7 +146,11 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = useStream().useChannel('drive');
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
-let multipleselect = ref([]);
+const SelectFiles = ref([]);
+const isLongPressing = ref(false);
+let longPressTimeout = null;
+const isScrolling = ref(false); // スクロール中でない状態で初期化
+
 // ドロップされようとしているか
 const draghover = ref(false);
 
@@ -186,6 +169,47 @@ watch(folder, () => emit('cd', folder.value));
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
 }
+let timeout;
+const debounceEvent = (event) => {
+  if (isTouchUsing &&  SelectFiles.value.length === 0) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isLongPressing.value = false;
+    }, 900);
+  }else{
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isLongPressing.value = false;
+		}, 80);
+  }
+};
+
+function startLongPress(file) {
+  console.log(SelectFiles.value.length)
+	if (isTouchUsing && SelectFiles.value.length === 0) {
+		isLongPressing.value = true;
+		longPressTimeout = setTimeout(() => {
+			if (isLongPressing.value) {
+				multipleSelect(file);
+			}
+		}, 1000);
+	}else{
+    isLongPressing.value = true;
+    longPressTimeout = setTimeout(() => {
+      if (isLongPressing.value) {
+        multipleSelect(file);
+      }
+    }, 100);
+  }
+}
+
+
+function endLongPress() {
+	if (isTouchUsing) {
+		isLongPressing.value = false;
+		clearTimeout(longPressTimeout);
+	}
+}
 
 function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
 	const current = folder.value ? folder.value.id : null;
@@ -195,18 +219,7 @@ function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
 		addFile(file, true);
 	}
 }
-function selectClick(file) {
-  const index = multipleselect.value.findIndex(item => item.id === file.id);
 
-  if (index !== -1) {
-    // File is already selected, so remove it
-    multipleselect.value.splice(index, 1);
-  } else {
-    // File is not selected, so add it
-    multipleselect.value.push(file);
-  }
-
-}
 function onStreamDriveFileDeleted(fileId: string) {
 	removeFile(fileId);
 }
@@ -214,7 +227,14 @@ function onStreamDriveFileDeleted(fileId: string) {
 function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
 	addFolder(createdFolder, true);
 }
-
+function multipleSelect(file) {
+	const index = SelectFiles.value.findIndex(item => item.id === file.id);
+	if (index !== -1) {
+		SelectFiles.value.splice(index, 1);
+	} else {
+		SelectFiles.value.push(file);
+	}
+}
 function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== updatedFolder.parentId) {
@@ -443,7 +463,6 @@ function chooseFile(file: Misskey.entities.DriveFile) {
 			emit('change-selection', [file]);
 		}
 	}
-
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
@@ -466,7 +485,6 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 }
 
 function move(target?: Misskey.entities.DriveFolder) {
-  multipleselect.value = []
 	if (!target) {
 		goRoot();
 		return;
@@ -531,17 +549,11 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
 	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
-  const index = multipleselect.value.findIndex(item => item.id === file.id);
-  if (index !== -1) {
-    // File is already selected, so remove it
-    multipleselect.value.splice(index, 1);
-  }
 }
 
 function removeFile(file: Misskey.entities.DriveFile | string) {
 	const fileId = typeof file === 'object' ? file.id : file;
 	files.value = files.value.filter(f => f.id !== fileId);
-  multipleselect.value = multipleselect.value.filter(a => a.id !== fileId)
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -691,12 +703,10 @@ function getMenu() {
 }
 
 function showMenu(ev: MouseEvent) {
-  multipleselect.value = []
 	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 }
-
+const contents = ref(null);
 function onContextmenu(ev: MouseEvent) {
-  multipleselect.value = []
 	os.contextMenu(getMenu(), ev);
 }
 
@@ -733,6 +743,7 @@ onBeforeUnmount(() => {
 	connection.dispose();
 	ilFilesObserver.disconnect();
 });
+
 </script>
 
 <style lang="scss" module>

packages/frontend/src/scripts/get-drive-file-menu.ts

@@ -39,10 +39,10 @@ function describe(file: Misskey.entities.DriveFile) {
 	}, 'closed');
 }
 
-function toggleSensitive(file: Misskey.entities.DriveFile , isSensitive?) {
+function toggleSensitive(file: Misskey.entities.DriveFile) {
 	os.api('drive/files/update', {
 		fileId: file.id,
-		isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
+		isSensitive: !file.isSensitive,
 	}).catch(err => {
 		os.alert({
 			type: 'error',
@@ -72,10 +72,10 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 		fileId: file.id,
 	});
 }
-async function deleteSelectFile(files) {
+async function MultideleteFile(files: Misskey.entities.DriveFile[] | null) {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: files.length+'つのファイルをまとめて削除しますか？',
+		text: i18n.t('driveMultiFileDeleteConfirm', { name: files.length }),
 	});
 
 	if (canceled) return;
@@ -84,6 +84,20 @@ async function deleteSelectFile(files) {
 			fileId: e.id,
         });
 	})
+}
+function isSensitive(files: Misskey.entities.DriveFile[] | null ,sensitive:boolean) {
+	files.forEach((e)=>{
+		os.api('drive/files/update', {
+			fileId: e.id,
+			isSensitive: sensitive,
+		}).catch(err => {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.error,
+				text: err.message,
+			});
+		});
+	})
 
 }
 export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
@@ -144,35 +158,22 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
 
 	return menu;
 }
-
+export function getDriveMultiFileMenu(files: string[] & boolean): MenuItem[] {
-export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
-
 	let menu;
 	menu = [{
 		text:  i18n.ts.unmarkAsSensitive,
 		icon: 'ti ti-eye',
-		action: () => {file.forEach((e) => toggleSensitive(e,false))}
+		action: () => isSensitive(files,false),
 	},{
 		text: i18n.ts.markAsSensitive,
 		icon:  'ti ti-eye-exclamation',
-		action: () => {file.forEach((e) => toggleSensitive(e,true))}
+		action: () => isSensitive(files,true),
-		,
 	}, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',
 		danger: true,
-		action: () =>  deleteSelectFile(file),
+		action: () => MultideleteFile(files),
 	}];
 
-	if (defaultStore.state.devMode) {
-		menu = menu.concat([null, {
-			icon: 'ti ti-id',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(file.id);
-			},
-		}]);
-	}
-
 	return menu;
 }