保存処理

locales/index.d.ts

@@ -10670,6 +10670,14 @@ export interface Locale extends ILocale {
          * 画像ファイルを選択してください
          */
         "driveFileTypeWarnDescription": string;
+        /**
+         * 設定が不十分です
+         */
+        "settingInvalidWarn": string;
+        /**
+         * プレビューが正常に表示されることを確認してから保存してください
+         */
+        "settingInvalidWarnDescription": string;
         /**
          * 描画モード
          */

locales/ja-JP.yml

@@ -2845,6 +2845,8 @@ _followRequest:
 _watermarkEditor:
   driveFileTypeWarn: "このファイルは対応していません"
   driveFileTypeWarnDescription: "画像ファイルを選択してください"
+  settingInvalidWarn: "設定が不十分です"
+  settingInvalidWarnDescription: "プレビューが正常に表示されることを確認してから保存してください"
   repeatSetting: "描画モード"
   repeat: "全体を埋め尽くす"
   padding: "余白"

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -125,16 +125,11 @@ function cancel() {
 	emit('cancel');
 	dialogEl.value?.close();
 }
-
-function save() {
-	emit('ok');
-	dialogEl.value?.close();
-}
 //#endregion
 
 //#region 設定
 const useWatermark = computed(defaultStore.makeGetterSetter('useWatermark'));
-const watermarkConfig = ref<Partial<WatermarkConfig> | null>(defaultStore.state.watermarkConfig ?? {
+const watermarkConfig = ref<WatermarkConfig>(defaultStore.state.watermarkConfig ?? {
 	opacity: 0.2,
 	repeat: true,
 	rotate: 15,
@@ -195,6 +190,22 @@ const paddingBottom = computed({
 	get: () => watermarkConfig.value?.padding?.bottom ?? 0,
 	set: (v) => setPadding('bottom', v),
 });
+
+function save() {
+	if (canPreview(watermarkConfig.value)) {
+		defaultStore.set('watermarkConfig', watermarkConfig.value);
+	} else {
+		os.alert({
+			type: 'warning',
+			title: i18n.ts._watermarkEditor.settingInvalidWarn,
+			text: i18n.ts._watermarkEditor.settingInvalidWarnDescription,
+		});
+		return;
+	}
+
+	emit('ok');
+	dialogEl.value?.close();
+}
 //#endregion
 
 //#region ファイル選択
@@ -269,7 +280,6 @@ onMounted(() => {
 
 //#region paddingViewの制御
 const focusedForm = ref<'top' | 'left' | 'right' | 'bottom' | null>(null);
-
 //#endregion
 </script>
 

packages/frontend/src/scripts/watermark.ts

@@ -84,17 +84,19 @@ export async function applyWatermark(img: string | Blob, el: HTMLCanvasElement,
 						const desiredHeight = canvas.height * (config.sizeRatio ?? 1);
 
 						if (
-							(watermarkAspectRatio > 1 && canvasAspectRatio > 1) ||
+							(watermarkAspectRatio > 1 && canvasAspectRatio > 1) || // 両方横長
-							(watermarkAspectRatio < 1 && canvasAspectRatio < 1)
+							(watermarkAspectRatio < 1 && canvasAspectRatio < 1)    // 両方縦長
 						) {
+							// 横幅を基準にウォーターマークのサイズを決定
 							return {
 								width: desiredWidth,
-								height: desiredWidth / watermarkAspectRatio
+								height: desiredWidth / watermarkAspectRatio,
 							};
 						} else {
+							// 縦幅を基準にウォーターマークのサイズを決定
 							return {
 								width: desiredHeight * watermarkAspectRatio,
-								height: desiredHeight
+								height: desiredHeight,
 							};
 						}
 					})();
@@ -102,7 +104,7 @@ export async function applyWatermark(img: string | Blob, el: HTMLCanvasElement,
 					ctx.globalAlpha = config.opacity ?? 1;
 
 					if (config.repeat) {
-						// 余白をもたせた状態のウォーターマークを作成しておく
+						// 余白をもたせた状態のウォーターマークを作成しておく（それをパターン繰り返しする）
 						const resizedWatermark = document.createElement('canvas');
 						resizedWatermark.width = width + (config.padding ? (config.padding.left ?? 0) + (config.padding.right ?? 0) : 0);
 						resizedWatermark.height = height + (config.padding ? (config.padding.top ?? 0) + (config.padding.bottom ?? 0) : 0);