From cb8fc9d4e32470301db1355058a1a642126fd50d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 30 May 2025 20:37:58 +0900
Subject: [PATCH] wip

---
 .../frontend/src/components/MkImageEffectorDialog.vue     | 8 ++++++--
 .../frontend/src/components/MkWatermarkEditorDialog.vue   | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 6009f82066..ecce9a5447 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, useTemplateRef, watch, onMounted, onUnmounted, reactive, nextTick } from 'vue';
 import { v4 as uuid } from 'uuid';
 import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { i18n } from '@/i18n.js';
@@ -122,6 +122,8 @@ onMounted(async () => {
 
 	const closeWaiting = os.waiting();
 
+	await nextTick(); // waitingがレンダリングされるまで待つ
+
 	imageBitmap = await window.createImageBitmap(props.image);
 
 	const MAX_W = 500;
@@ -161,7 +163,7 @@ onUnmounted(() => {
 	}
 });
 
-function save() {
+async function save() {
 	if (layers.length === 0 || renderer == null || imageBitmap == null || canvasEl.value == null) {
 		cancel();
 		return;
@@ -169,6 +171,8 @@ function save() {
 
 	const closeWaiting = os.waiting();
 
+	await nextTick(); // waitingがレンダリングされるまで待つ
+
 	renderer.changeResolution(imageBitmap.width, imageBitmap.height); // 本番レンダリングのためオリジナル画質に戻す
 	renderer.render(); // toBlobの直前にレンダリングしないと何故か壊れる
 	canvasEl.value.toBlob((blob) => {
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index f8c11e9867..19a4c3d08e 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, useTemplateRef, watch, onMounted, onUnmounted, reactive, nextTick } from 'vue';
 import { v4 as uuid } from 'uuid';
 import type { WatermarkPreset } from '@/utility/watermark.js';
 import { WatermarkRenderer } from '@/utility/watermark.js';
@@ -198,6 +198,8 @@ async function initRenderer() {
 onMounted(async () => {
 	const closeWaiting = os.waiting();
 
+	await nextTick(); // waitingがレンダリングされるまで待つ
+
 	await sampleImage_3_2_loading;
 	await sampleImage_2_3_loading;