feat(frontend): allow cropping images on drive (#11092)

* feat(frontend): allow cropping images on drive

* nanka iroiro

* folder

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

1 files changed, 17 insertions, 4 deletions

diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 18fa142ebc..c50d025ab3 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -16,6 +16,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import * as misskey from 'misskey-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -30,8 +31,9 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any[]): void;
 	(ev: 'detach', id: string): void;
-	(ev: 'changeSensitive'): void;
-	(ev: 'changeName'): void;
+	(ev: 'changeSensitive', file: misskey.entities.DriveFile, isSensitive: boolean): void;
+	(ev: 'changeName', file: misskey.entities.DriveFile, newName: string): void;
+	(ev: 'replaceFile', file: misskey.entities.DriveFile, newFile: misskey.entities.DriveFile): void;
 }>();
 
 let menuShowing = false;
@@ -85,8 +87,15 @@ async function describe(file) {
 	}, 'closed');
 }
 
-function showFileMenu(file, ev: MouseEvent) {
+async function crop(file: misskey.entities.DriveFile): Promise<void> {
+	const newFile = await os.cropImage(file, { aspectRatio: NaN });
+	emit('replaceFile', file, newFile);
+}
+
+function showFileMenu(file: misskey.entities.DriveFile, ev: MouseEvent): void {
 	if (menuShowing) return;
+
+	const isImage = file.type.startsWith('image/');
 	os.popupMenu([{
 		text: i18n.ts.renameFile,
 		icon: 'ti ti-forms',
@@ -99,7 +108,11 @@ function showFileMenu(file, ev: MouseEvent) {
 		text: i18n.ts.describeFile,
 		icon: 'ti ti-text-caption',
 		action: () => { describe(file); },
-	}, {
+	}, ...isImage ? [{
+		text: i18n.ts.cropImage,
+		icon: 'ti ti-crop',
+		action: () : void => { crop(file); },
+	}] : [], {
 		text: i18n.ts.attachCancel,
 		icon: 'ti ti-circle-x',
 		action: () => { detachMedia(file.id); },