1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-01 19:45:51 +02:00
Files
misskey/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
かっこかり 785b85ee46 enhance(frontend): 画像エフェクトのUI改善 (#16191)
* enhance(frontend): 画像エフェクトの改善

* enhance: i18n colorClampAdvanced

* fix: missing translation

* enhance: i18n blockNoise

* fix lint

* fix: narrow down fx defs types

* fix

* fix: watermark用エフェクトは別で定義し直す

* fix lint

* ImageEffectorをwatermarkに隠蔽

* watermark関連の定義を完全に分離

* refactor

* fix

* ぼかし効果 -> スムージング

* refactor: remove unnecessary `as const`

* Update Changelog
2025-08-09 14:11:19 +09:00

40 lines
1.3 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkFolder :defaultOpen="true" :canPage="false">
<template #label>{{ fx.name }}</template>
<template #footer>
<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>
<MkImageEffectorFxForm v-model="layer.params" :paramDefs="fx.params" />
</MkFolder>
</template>
<script setup lang="ts">
import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import MkImageEffectorFxForm from '@/components/MkImageEffectorFxForm.vue';
import { FXS } from '@/utility/image-effector/fxs.js';
const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
const fx = FXS.find((fx) => fx.id === layer.value.fxId);
if (fx == null) {
throw new Error(`Unrecognized effect: ${layer.value.fxId}`);
}
const emit = defineEmits<{
(e: 'del'): void;
(e: 'swapUp'): void;
(e: 'swapDown'): void;
}>();
</script>