From 1ebd75ac10a0992cb7190c1d0fc3313dccfc0691 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 2 Jun 2025 20:38:04 +0900
Subject: [PATCH] wip

---
 .../MkImageEffectorDialog.Layer.vue           |  8 ++++++-
 .../src/components/MkImageEffectorDialog.vue  | 18 ++++++++++++++
 .../components/MkWatermarkEditorDialog.vue    | 24 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
index d1034f824a..3d4f13dff9 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -7,7 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkFolder :defaultOpen="true" :canPage="false">
 	<template #label>{{ fx.name }}</template>
 	<template #footer>
-		<MkButton @click="emit('del')">{{ i18n.ts.remove }}</MkButton>
+		<div class="_buttons">
+			<MkButton iconOnly @click="emit('del')"><i class="ti ti-trash"></i></MkButton>
+			<MkButton iconOnly @click="emit('swapUp')"><i class="ti ti-arrow-up"></i></MkButton>
+			<MkButton iconOnly @click="emit('swapDown')"><i class="ti ti-arrow-down"></i></MkButton>
+		</div>
 	</template>
 
 	<div :class="$style.root" class="_gaps">
@@ -60,6 +64,8 @@ if (fx == null) {
 
 const emit = defineEmits<{
 	(e: 'del'): void;
+	(e: 'swapUp'): void;
+	(e: 'swapDown'): void;
 }>();
 </script>
 
diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index d7ff9e706d..5d8cfb67a8 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -35,6 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:key="layer.id"
 						v-model:layer="layers[i]"
 						@del="onLayerDelete(layer)"
+						@swapUp="onLayerSwapUp(layer)"
+						@swapDown="onLayerSwapDown(layer)"
 					></XLayer>
 
 					<MkButton rounded primary style="margin: 0 auto;" @click="addEffect"><i class="ti ti-plus"></i> {{ i18n.ts._imageEffector.addEffect }}</MkButton>
@@ -105,6 +107,22 @@ function addEffect(ev: MouseEvent) {
 	})), ev.currentTarget ?? ev.target);
 }
 
+function onLayerSwapUp(layer: ImageEffectorLayer) {
+	const index = layers.indexOf(layer);
+	if (index > 0) {
+		layers.splice(index, 1);
+		layers.splice(index - 1, 0, layer);
+	}
+}
+
+function onLayerSwapDown(layer: ImageEffectorLayer) {
+	const index = layers.indexOf(layer);
+	if (index < layers.length - 1) {
+		layers.splice(index, 1);
+		layers.splice(index + 1, 0, layer);
+	}
+}
+
 function onLayerDelete(layer: ImageEffectorLayer) {
 	const index = layers.indexOf(layer);
 	if (index !== -1) {
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index e5c93abfc9..f11f7ced92 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -48,7 +48,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div v-if="layer.type === 'image'">{{ i18n.ts._watermarkEditor.image }}</div>
 							</template>
 							<template #footer>
-								<MkButton @click="removeLayer(layer)">{{ i18n.ts.remove }}</MkButton>
+								<div class="_buttons">
+									<MkButton iconOnly @click="removeLayer(layer)"><i class="ti ti-trash"></i></MkButton>
+									<MkButton iconOnly @click="swapUpLayer(layer)"><i class="ti ti-arrow-up"></i></MkButton>
+									<MkButton iconOnly @click="swapDownLayer(layer)"><i class="ti ti-arrow-down"></i></MkButton>
+								</div>
 							</template>
 
 							<XLayer
@@ -280,6 +284,24 @@ function addLayer(ev: MouseEvent) {
 	}], ev.currentTarget ?? ev.target);
 }
 
+function swapUpLayer(layer: WatermarkPreset['layers'][number]) {
+	const index = preset.layers.findIndex(l => l.id === layer.id);
+	if (index > 0) {
+		const tmp = preset.layers[index - 1];
+		preset.layers[index - 1] = preset.layers[index];
+		preset.layers[index] = tmp;
+	}
+}
+
+function swapDownLayer(layer: WatermarkPreset['layers'][number]) {
+	const index = preset.layers.findIndex(l => l.id === layer.id);
+	if (index < preset.layers.length - 1) {
+		const tmp = preset.layers[index + 1];
+		preset.layers[index + 1] = preset.layers[index];
+		preset.layers[index] = tmp;
+	}
+}
+
 function removeLayer(layer: WatermarkPreset['layers'][number]) {
 	preset.layers = preset.layers.filter(l => l.id !== layer.id);
 }