enhance: add settings for noBoundingBoxExpansion

locales/index.d.ts

@@ -12341,6 +12341,14 @@ export interface Locale extends ILocale {
          * 敷き詰める
          */
         "repeat": string;
+        /**
+         * 回転した分の面積を確保する
+         */
+        "preserveBoundingRect": string;
+        /**
+         * 通常はオンで問題ありません。ウォーターマークを回転させた際に余白が不自然になった場合はオフにしてみてください。
+         */
+        "preserveBoundingRectDescription": string;
         /**
          * 不透明度
          */

locales/ja-JP.yml

@@ -3304,6 +3304,8 @@ _watermarkEditor:
   title: "ウォーターマークの編集"
   cover: "全体に被せる"
   repeat: "敷き詰める"
+  preserveBoundingRect: "回転した分の面積を確保する"
+  preserveBoundingRectDescription: "通常はオンで問題ありません。ウォーターマークを回転させた際に余白が不自然になった場合はオフにしてみてください。"
   opacity: "不透明度"
   scale: "サイズ"
   text: "テキスト"

packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue

@@ -65,6 +65,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSwitch v-model="layer.repeat">
 			<template #label>{{ i18n.ts._watermarkEditor.repeat }}</template>
 		</MkSwitch>
+
+		<MkSwitch v-model="layerPreserveBoundingRect">
+			<template #label>{{ i18n.ts._watermarkEditor.preserveBoundingRect }}</template>
+			<template #caption>{{ i18n.ts._watermarkEditor.preserveBoundingRectDescription }}</template>
+		</MkSwitch>
 	</template>
 
 	<template v-else-if="layer.type === 'image'">
@@ -129,6 +134,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSwitch v-model="layer.cover">
 			<template #label>{{ i18n.ts._watermarkEditor.cover }}</template>
 		</MkSwitch>
+
+		<MkSwitch v-model="layerPreserveBoundingRect">
+			<template #label>{{ i18n.ts._watermarkEditor.preserveBoundingRect }}</template>
+			<template #caption>{{ i18n.ts._watermarkEditor.preserveBoundingRectDescription }}</template>
+		</MkSwitch>
 	</template>
 
 	<template v-else-if="layer.type === 'qr'">
@@ -335,7 +345,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { WatermarkPreset } from '@/utility/watermark.js';
 import { i18n } from '@/i18n.js';
@@ -351,6 +361,20 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 
 const layer = defineModel<WatermarkPreset['layers'][number]>('layer', { required: true });
 
+const layerPreserveBoundingRect = computed({
+	get: () => {
+		if (layer.value.type === 'text' || layer.value.type === 'image') {
+			return !layer.value.noBoundingBoxExpansion;
+		}
+		return false;
+	},
+	set: (v: boolean) => {
+		if (layer.value.type === 'text' || layer.value.type === 'image') {
+			layer.value.noBoundingBoxExpansion = !v;
+		}
+	},
+});
+
 const driveFile = ref<Misskey.entities.DriveFile | null>(null);
 const driveFileError = ref(false);
 onMounted(async () => {

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -90,6 +90,7 @@ function createTextLayer(): WatermarkPreset['layers'][number] {
 		angle: 0,
 		opacity: 0.75,
 		repeat: false,
+		noBoundingBoxExpansion: false,
 	};
 }
 
@@ -104,6 +105,7 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
 		angle: 0,
 		opacity: 0.75,
 		repeat: false,
+		noBoundingBoxExpansion: false,
 		cover: false,
 	};
 }
@@ -261,7 +263,7 @@ async function initRenderer() {
 
 	await renderer!.setLayers(preset.layers);
 
-	renderer!.render();
+	await renderer!.render();
 }
 
 onMounted(async () => {

packages/frontend/src/utility/watermark.ts

@@ -27,6 +27,7 @@ export type WatermarkPreset = {
 		type: 'text';
 		text: string;
 		repeat: boolean;
+		noBoundingBoxExpansion: boolean;
 		scale: number;
 		angle: number;
 		align: Align;
@@ -38,6 +39,7 @@ export type WatermarkPreset = {
 		imageId: string | null;
 		cover: boolean;
 		repeat: boolean;
+		noBoundingBoxExpansion: boolean;
 		scale: number;
 		angle: number;
 		align: Align;
@@ -106,6 +108,7 @@ export class WatermarkRenderer {
 					id: layer.id,
 					params: {
 						repeat: layer.repeat,
+						noBoundingBoxExpansion: layer.noBoundingBoxExpansion,
 						scale: layer.scale,
 						align: layer.align,
 						angle: layer.angle,
@@ -123,6 +126,7 @@ export class WatermarkRenderer {
 					id: layer.id,
 					params: {
 						repeat: layer.repeat,
+						noBoundingBoxExpansion: layer.noBoundingBoxExpansion,
 						scale: layer.scale,
 						align: layer.align,
 						angle: layer.angle,