hippofish/packages/client/src/components/MkDrive.vue

<template>
	<div class="yfudmmck">
		<nav>
			<div class="path" @contextmenu.prevent.stop="() => {}">
				<XNavFolder
					:class="{ current: folder == null }"
					:parent-folder="folder"
					@move="move"
					@upload="upload"
					@removeFile="removeFile"
					@removeFolder="removeFolder"
				/>
				<template v-for="f in hierarchyFolders">
					<span class="separator"
						><i :class="icon('ph-caret-right')"></i
					></span>
					<XNavFolder
						:folder="f"
						:parent-folder="folder"
						@move="move"
						@upload="upload"
						@removeFile="removeFile"
						@removeFolder="removeFolder"
					/>
				</template>
				<span v-if="folder != null" class="separator"
					><i :class="icon('ph-caret-right')"></i
				></span>
				<span v-if="folder != null" class="folder current">{{
					folder.name
				}}</span>
			</div>
			<button class="menu _button" @click="showMenu">
				<i :class="icon('ph-dots-three-outline')"></i>
			</button>
		</nav>
		<div
			ref="main"
			class="main"
			:class="{ uploading: uploadings.length > 0, fetching }"
			@dragover.prevent.stop="onDragover"
			@dragenter="onDragenter"
			@dragleave="onDragleave"
			@drop.prevent.stop="onDrop"
			@contextmenu.stop="onContextmenu"
		>
			<div ref="contents" class="contents">
				<div
					v-show="folders.length > 0"
					ref="foldersContainer"
					class="folders"
				>
					<XFolder
						v-for="(f, i) in folders"
						:key="f.id"
						v-anim="i"
						class="folder"
						:folder="f"
						:select-mode="select === 'folder'"
						:is-selected="
							selectedFolders.some((x) => x.id === f.id)
						"
						@chosen="chooseFolder"
						@move="move"
						@upload="upload"
						@removeFile="removeFile"
						@removeFolder="removeFolder"
						@dragstart="isDragSource = true"
						@dragend="isDragSource = false"
					/>
					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
					<div v-for="(_, i) in 16" :key="i" class="padding"></div>
					<MkButton v-if="moreFolders" ref="moreFolders">{{
						i18n.ts.loadMore
					}}</MkButton>
				</div>
				<div
					v-show="files.length > 0"
					ref="filesContainer"
					class="files"
				>
					<XFile
						v-for="(file, i) in files"
						:key="file.id"
						v-anim="i"
						class="file"
						:file="file"
						:select-mode="select === 'file'"
						:is-selected="
							selectedFiles.some((x) => x.id === file.id)
						"
						@chosen="chooseFile"
						@dragstart="isDragSource = true"
						@dragend="isDragSource = false"
					/>
					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
					<div v-for="(_, i) in 16" :key="i" class="padding"></div>
					<MkButton
						v-show="moreFiles"
						ref="loadMoreFiles"
						@click="fetchMoreFiles"
						>{{ i18n.ts.loadMore }}</MkButton
					>
				</div>
				<div
					v-if="files.length == 0 && folders.length == 0 && !fetching"
					class="empty"
				>
					<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
					<p v-if="!draghover && folder == null">
						<strong>{{ i18n.ts.emptyDrive }}</strong
						><br />{{ i18n.t("empty-drive-description") }}
					</p>
					<p v-if="!draghover && folder != null">
						{{ i18n.ts.emptyFolder }}
					</p>
				</div>
			</div>
			<MkLoading v-if="fetching" />
		</div>
		<div v-if="draghover" class="dropzone"></div>
		<input
			ref="fileInput"
			type="file"
			accept="*/*"
			multiple
			tabindex="-1"
			@change="onChangeFileInput"
		/>
	</div>
</template>

<script lang="ts" setup>
import {
	nextTick,
	onActivated,
	onBeforeUnmount,
	onMounted,
	ref,
	watch,
} from "vue";
import type * as firefish from "firefish-js";
import MkButton from "./MkButton.vue";
import XNavFolder from "@/components/MkDrive.navFolder.vue";
import XFolder from "@/components/MkDrive.folder.vue";
import XFile from "@/components/MkDrive.file.vue";
import * as os from "@/os";
import { stream } from "@/stream";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { uploadFile, uploads } from "@/scripts/upload";
import icon from "@/scripts/icon";

const props = withDefaults(
	defineProps<{
		initialFolder?: firefish.entities.DriveFolder;
		type?: string;
		multiple?: boolean;
		select?: "file" | "folder" | null;
	}>(),
	{
		multiple: false,
		select: null,
	},
);

const emit = defineEmits<{
	(
		ev: "selected",
		v: firefish.entities.DriveFile | firefish.entities.DriveFolder,
	): void;
	(
		ev: "change-selection",
		v: firefish.entities.DriveFile[] | firefish.entities.DriveFolder[],
	): void;
	(ev: "move-root"): void;
	(ev: "cd", v: firefish.entities.DriveFolder | null): void;
	(ev: "open-folder", v: firefish.entities.DriveFolder): void;
}>();

const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
const fileInput = ref<HTMLInputElement>();

const folder = ref<firefish.entities.DriveFolder | null>(null);
const files = ref<firefish.entities.DriveFile[]>([]);
const folders = ref<firefish.entities.DriveFolder[]>([]);
const moreFiles = ref(false);
const moreFolders = ref(false);
const hierarchyFolders = ref<firefish.entities.DriveFolder[]>([]);
const selectedFiles = ref<firefish.entities.DriveFile[]>([]);
const selectedFolders = ref<firefish.entities.DriveFolder[]>([]);
const uploadings = uploads;
const connection = stream.useChannel("drive");
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい

// ドロップされようとしているか
const draghover = ref(false);

// 自身の所有するアイテムがドラッグをスタートさせたか
// (自分自身の階層にドロップできないようにするためのフラグ)
const isDragSource = ref(false);

const fetching = ref(true);

const ilFilesObserver = new IntersectionObserver(
	(entries) =>
		entries.some((entry) => entry.isIntersecting) &&
		!fetching.value &&
		moreFiles.value &&
		fetchMoreFiles(),
);

watch(folder, () => emit("cd", folder.value));

function onStreamDriveFileCreated(file: firefish.entities.DriveFile) {
	addFile(file, true);
}

function onStreamDriveFileUpdated(file: firefish.entities.DriveFile) {
	const current = folder.value ? folder.value.id : null;
	if (current !== file.folderId) {
		removeFile(file);
	} else {
		addFile(file, true);
	}
}

function onStreamDriveFileDeleted(fileId: string) {
	removeFile(fileId);
}

function onStreamDriveFolderCreated(
	createdFolder: firefish.entities.DriveFolder,
) {
	addFolder(createdFolder, true);
}

function onStreamDriveFolderUpdated(
	updatedFolder: firefish.entities.DriveFolder,
) {
	const current = folder.value ? folder.value.id : null;
	if (current !== updatedFolder.parentId) {
		removeFolder(updatedFolder);
	} else {
		addFolder(updatedFolder, true);
	}
}

function onStreamDriveFolderDeleted(folderId: string) {
	removeFolder(folderId);
}

function onDragover(ev: DragEvent): any {
	if (!ev.dataTransfer) return;

	// ドラッグ元が自分自身の所有するアイテムだったら
	if (isDragSource.value) {
		// 自分自身にはドロップさせない
		ev.dataTransfer.dropEffect = "none";
		return;
	}

	const isFile = ev.dataTransfer.items[0].kind === "file";
	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
	const isDriveFolder =
		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
	if (isFile || isDriveFile || isDriveFolder) {
		ev.dataTransfer.dropEffect =
			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
	} else {
		ev.dataTransfer.dropEffect = "none";
	}

	return false;
}

function onDragenter() {
	if (!isDragSource.value) draghover.value = true;
}

function onDragleave() {
	draghover.value = false;
}

function onDrop(ev: DragEvent): any {
	draghover.value = false;

	if (!ev.dataTransfer) return;

	// ドロップされてきたものがファイルだったら
	if (ev.dataTransfer.files.length > 0) {
		for (const file of Array.from(ev.dataTransfer.files)) {
			upload(file, folder.value);
		}
		return;
	}

	// #region ドライブのファイル
	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
	if (driveFile != null && driveFile !== "") {
		const file = JSON.parse(driveFile);
		if (files.value.some((f) => f.id === file.id)) return;
		removeFile(file.id);
		os.api("drive/files/update", {
			fileId: file.id,
			folderId: folder.value ? folder.value.id : null,
		});
	}
	// #endregion

	// #region ドライブのフォルダ
	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
	if (driveFolder != null && driveFolder !== "") {
		const droppedFolder = JSON.parse(driveFolder);

		// 移動先が自分自身ならreject
		if (folder.value && droppedFolder.id === folder.value.id) return false;
		if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
		removeFolder(droppedFolder.id);
		os.api("drive/folders/update", {
			folderId: droppedFolder.id,
			parentId: folder.value ? folder.value.id : null,
		})
			.then(() => {
				// noop
			})
			.catch((err) => {
				switch (err) {
					case "detected-circular-definition":
						os.alert({
							title: i18n.ts.unableToProcess,
							text: i18n.ts.circularReferenceFolder,
						});
						break;
					default:
						os.alert({
							type: "error",
							text: i18n.ts.somethingHappened,
						});
				}
			});
	}
	// #endregion
}

function selectLocalFile() {
	fileInput.value?.click();
}

function urlUpload() {
	os.inputText({
		title: i18n.ts.uploadFromUrl,
		type: "url",
		placeholder: i18n.ts.uploadFromUrlDescription,
	}).then(({ canceled, result: url }) => {
		if (canceled || !url) return;
		os.api("drive/files/upload-from-url", {
			url,
			folderId: folder.value ? folder.value.id : undefined,
		});

		os.alert({
			title: i18n.ts.uploadFromUrlRequested,
			text: i18n.ts.uploadFromUrlMayTakeTime,
		});
	});
}

function createFolder() {
	os.inputText({
		title: i18n.ts.createFolder,
		placeholder: i18n.ts.folderName,
	}).then(({ canceled, result: name }) => {
		if (canceled) return;
		os.api("drive/folders/create", {
			name,
			parentId: folder.value ? folder.value.id : undefined,
		}).then((createdFolder) => {
			addFolder(createdFolder, true);
		});
	});
}

function renameFolder(folderToRename: firefish.entities.DriveFolder) {
	os.inputText({
		title: i18n.ts.renameFolder,
		placeholder: i18n.ts.inputNewFolderName,
		default: folderToRename.name,
	}).then(({ canceled, result: name }) => {
		if (canceled) return;
		os.api("drive/folders/update", {
			folderId: folderToRename.id,
			name,
		}).then((updatedFolder) => {
			// FIXME: 画面を更新するために自分自身に移動
			move(updatedFolder);
		});
	});
}

function deleteFolder(folderToDelete: firefish.entities.DriveFolder) {
	os.api("drive/folders/delete", {
		folderId: folderToDelete.id,
	})
		.then(() => {
			// 削除時に親フォルダに移動
			move(folderToDelete.parentId);
		})
		.catch((err) => {
			switch (err.id) {
				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
					os.alert({
						type: "error",
						title: i18n.ts.unableToDelete,
						text: i18n.ts.hasChildFilesOrFolders,
					});
					break;
				default:
					os.alert({
						type: "error",
						text: i18n.ts.unableToDelete,
					});
			}
		});
}

function onChangeFileInput() {
	if (!fileInput.value?.files) return;
	for (const file of Array.from(fileInput.value.files)) {
		upload(file, folder.value);
	}
}

function upload(
	file: File,
	folderToUpload?: firefish.entities.DriveFolder | null,
) {
	uploadFile(
		file,
		folderToUpload && typeof folderToUpload === "object"
			? folderToUpload.id
			: null,
		undefined,
		keepOriginal.value,
	).then((res) => {
		addFile(res, true);
	});
}

function chooseFile(file: firefish.entities.DriveFile) {
	const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
	if (props.multiple) {
		if (isAlreadySelected) {
			selectedFiles.value = selectedFiles.value.filter(
				(f) => f.id !== file.id,
			);
		} else {
			selectedFiles.value.push(file);
		}
		emit("change-selection", selectedFiles.value);
	} else {
		if (isAlreadySelected) {
			emit("selected", file);
		} else {
			selectedFiles.value = [file];
			emit("change-selection", [file]);
		}
	}
}

function chooseFolder(folderToChoose: firefish.entities.DriveFolder) {
	const isAlreadySelected = selectedFolders.value.some(
		(f) => f.id === folderToChoose.id,
	);
	if (props.multiple) {
		if (isAlreadySelected) {
			selectedFolders.value = selectedFolders.value.filter(
				(f) => f.id !== folderToChoose.id,
			);
		} else {
			selectedFolders.value.push(folderToChoose);
		}
		emit("change-selection", selectedFolders.value);
	} else {
		if (isAlreadySelected) {
			emit("selected", folderToChoose);
		} else {
			selectedFolders.value = [folderToChoose];
			emit("change-selection", [folderToChoose]);
		}
	}
}

function move(target?: firefish.entities.DriveFolder) {
	if (!target) {
		goRoot();
		return;
	} else if (typeof target === "object") {
		target = target.id;
	}

	fetching.value = true;

	os.api("drive/folders/show", {
		folderId: target,
	}).then((folderToMove) => {
		folder.value = folderToMove;
		hierarchyFolders.value = [];

		const dive = (folderToDive) => {
			hierarchyFolders.value.unshift(folderToDive);
			if (folderToDive.parent) dive(folderToDive.parent);
		};

		if (folderToMove.parent) dive(folderToMove.parent);

		emit("open-folder", folderToMove);
		fetch();
	});
}

function addFolder(
	folderToAdd: firefish.entities.DriveFolder,
	unshift = false,
) {
	const current = folder.value ? folder.value.id : null;
	if (current !== folderToAdd.parentId) return;

	if (folders.value.some((f) => f.id === folderToAdd.id)) {
		const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
		folders.value[exist] = folderToAdd;
		return;
	}

	if (unshift) {
		folders.value.unshift(folderToAdd);
	} else {
		folders.value.push(folderToAdd);
	}
}

function addFile(fileToAdd: firefish.entities.DriveFile, unshift = false) {
	const current = folder.value ? folder.value.id : null;
	if (current !== fileToAdd.folderId) return;

	if (files.value.some((f) => f.id === fileToAdd.id)) {
		const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
		files.value[exist] = fileToAdd;
		return;
	}

	if (unshift) {
		files.value.unshift(fileToAdd);
	} else {
		files.value.push(fileToAdd);
	}
}

function removeFolder(folderToRemove: firefish.entities.DriveFolder | string) {
	const folderIdToRemove =
		typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
	folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
}

function removeFile(file: firefish.entities.DriveFile | string) {
	const fileId = typeof file === "object" ? file.id : file;
	files.value = files.value.filter((f) => f.id !== fileId);
}

function appendFile(file: firefish.entities.DriveFile) {
	addFile(file);
}

function appendFolder(folderToAppend: firefish.entities.DriveFolder) {
	addFolder(folderToAppend);
}
/*
function prependFile(file: firefish.entities.DriveFile) {
	addFile(file, true);
}

function prependFolder(folderToPrepend: firefish.entities.DriveFolder) {
	addFolder(folderToPrepend, true);
}
*/
function goRoot() {
	// 既にrootにいるなら何もしない
	if (folder.value == null) return;

	folder.value = null;
	hierarchyFolders.value = [];
	emit("move-root");
	fetch();
}

async function fetch() {
	folders.value = [];
	files.value = [];
	moreFolders.value = false;
	moreFiles.value = false;
	fetching.value = true;

	const foldersMax = 30;
	const filesMax = 30;

	const foldersPromise = os
		.api("drive/folders", {
			folderId: folder.value ? folder.value.id : null,
			limit: foldersMax + 1,
		})
		.then((fetchedFolders) => {
			if (fetchedFolders.length === foldersMax + 1) {
				moreFolders.value = true;
				fetchedFolders.pop();
			}
			return fetchedFolders;
		});

	const filesPromise = os
		.api("drive/files", {
			folderId: folder.value ? folder.value.id : null,
			type: props.type,
			limit: filesMax + 1,
		})
		.then((fetchedFiles) => {
			if (fetchedFiles.length === filesMax + 1) {
				moreFiles.value = true;
				fetchedFiles.pop();
			}
			return fetchedFiles;
		});

	const [fetchedFolders, fetchedFiles] = await Promise.all([
		foldersPromise,
		filesPromise,
	]);

	for (const x of fetchedFolders) appendFolder(x);
	for (const x of fetchedFiles) appendFile(x);

	fetching.value = false;
}

function fetchMoreFiles() {
	fetching.value = true;

	const max = 30;

	// ファイル一覧取得
	os.api("drive/files", {
		folderId: folder.value ? folder.value.id : null,
		type: props.type,
		untilId: files.value[files.value.length - 1].id,
		limit: max + 1,
	}).then((files) => {
		if (files.length === max + 1) {
			moreFiles.value = true;
			files.pop();
		} else {
			moreFiles.value = false;
		}
		for (const x of files) appendFile(x);
		fetching.value = false;
	});
}

function getMenu() {
	return [
		{
			type: "switch",
			text: i18n.ts.keepOriginalUploading,
			ref: keepOriginal,
		},
		null,
		{
			text: i18n.ts.addFile,
			type: "label",
		},
		{
			text: i18n.ts.upload,
			icon: `${icon("ph-upload-simple")}`,
			action: () => {
				selectLocalFile();
			},
		},
		{
			text: i18n.ts.fromUrl,
			icon: `${icon("ph-link-simple")}`,
			action: () => {
				urlUpload();
			},
		},
		null,
		{
			text: folder.value ? folder.value.name : i18n.ts.drive,
			type: "label",
		},
		folder.value
			? {
					text: i18n.ts.renameFolder,
					icon: `${icon("ph-cursor-text")}`,
					action: () => {
						renameFolder(folder.value);
					},
			  }
			: undefined,
		folder.value
			? {
					text: i18n.ts.deleteFolder,
					icon: `${icon("ph-trash")}`,
					action: () => {
						deleteFolder(
							folder.value as firefish.entities.DriveFolder,
						);
					},
			  }
			: undefined,
		{
			text: i18n.ts.createFolder,
			icon: `${icon("ph-folder-notch-plus")}`,
			action: () => {
				createFolder();
			},
		},
	];
}

function showMenu(ev: MouseEvent) {
	os.popupMenu(
		getMenu(),
		(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined,
	);
}

function onContextmenu(ev: MouseEvent) {
	os.contextMenu(getMenu(), ev);
}

onMounted(() => {
	if (defaultStore.state.enableInfiniteScroll && loadMoreFiles.value) {
		nextTick(() => {
			ilFilesObserver.observe(loadMoreFiles.value?.$el);
		});
	}

	connection.on("fileCreated", onStreamDriveFileCreated);
	connection.on("fileUpdated", onStreamDriveFileUpdated);
	connection.on("fileDeleted", onStreamDriveFileDeleted);
	connection.on("folderCreated", onStreamDriveFolderCreated);
	connection.on("folderUpdated", onStreamDriveFolderUpdated);
	connection.on("folderDeleted", onStreamDriveFolderDeleted);

	if (props.initialFolder) {
		move(props.initialFolder);
	} else {
		fetch();
	}
});

onActivated(() => {
	if (defaultStore.state.enableInfiniteScroll) {
		nextTick(() => {
			ilFilesObserver.observe(loadMoreFiles.value?.$el);
		});
	}
});

onBeforeUnmount(() => {
	connection.dispose();
	ilFilesObserver.disconnect();
});
</script>

<style lang="scss" scoped>
.yfudmmck {
	display: flex;
	flex-direction: column;
	height: 100%;

	> nav {
		display: flex;
		z-index: 2;
		width: 100%;
		padding: 0 8px;
		box-sizing: border-box;
		overflow: auto;
		font-size: 0.9em;
		box-shadow: 0 1px 0 var(--divider);
		position: fixed;
		background-color: var(--bg);

		&,
		* {
			user-select: none;
		}

		> .path {
			display: inline-block;
			vertical-align: bottom;
			line-height: 42px;
			white-space: nowrap;

			> * {
				display: inline-block;
				margin: 0;
				padding: 0 8px;
				line-height: 42px;
				cursor: pointer;

				* {
					pointer-events: none;
				}

				&:hover {
					text-decoration: underline;
				}

				&.current {
					font-weight: bold;
					cursor: default;

					&:hover {
						text-decoration: none;
					}
				}

				&.separator {
					margin: 0;
					padding: 0;
					opacity: 0.5;
					cursor: default;

					> i {
						margin: 0;
					}
				}
			}
		}

		> .menu {
			margin-left: auto;
			padding: 0 12px;
		}
	}

	> .main {
		flex: 1;
		overflow: auto;
		padding: var(--margin);
		margin-top: 40px;

		&,
		* {
			user-select: none;
		}

		&.fetching {
			cursor: wait !important;

			* {
				pointer-events: none;
			}

			> .contents {
				opacity: 0.5;
			}
		}

		&.uploading {
			height: calc(100% - 38px - 100px);
		}

		> .contents {
			> .folders,
			> .files {
				display: flex;
				flex-wrap: wrap;

				> .folder,
				> .file {
					flex-grow: 1;
					width: 128px;
					margin: 4px;
					box-sizing: border-box;
				}

				> .padding {
					flex-grow: 1;
					pointer-events: none;
					width: 128px + 8px;
				}
			}

			> .empty {
				padding: 16px;
				text-align: center;
				pointer-events: none;
				opacity: 0.5;

				> p {
					margin: 0;
				}
			}
		}
	}

	> .dropzone {
		position: absolute;
		left: 0;
		top: 38px;
		width: 100%;
		height: calc(100% - 38px);
		border: dashed 2px var(--focus);
		pointer-events: none;
	}

	> input {
		display: none;
	}
}
</style>