wip

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>
 

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) {

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);
 }