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
@@ -60,6 +64,8 @@ if (fx == null) { const emit = defineEmits<{ (e: 'del'): void; + (e: 'swapUp'): void; + (e: 'swapDown'): void; }>(); 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)" > {{ i18n.ts._imageEffector.addEffect }} @@ -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
{{ i18n.ts._watermarkEditor.image }}
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); }