diff --git a/packages/frontend/assets/sample/2-3.jpg b/packages/frontend/assets/sample/2-3.jpg new file mode 100644 index 0000000000..ee9bff6527 Binary files /dev/null and b/packages/frontend/assets/sample/2-3.jpg differ diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue index a13d7e0d8f..b941362139 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -21,7 +21,11 @@ SPDX-License-Identifier: AGPL-3.0-only
-
{{ i18n.ts.preview }}
+
{{ i18n.ts.preview }}
+
+ + +
@@ -102,25 +106,60 @@ watch(preset, async (newValue, oldValue) => { const canvasEl = useTemplateRef('canvasEl'); -const sampleImage = new Image(); -sampleImage.src = '/client-assets/sample/3-2.jpg'; +const sampleImage_3_2 = new Image(); +sampleImage_3_2.src = '/client-assets/sample/3-2.jpg'; +const sampleImage_3_2_loading = new Promise(resolve => { + sampleImage_3_2.onload = () => resolve(); +}); + +const sampleImage_2_3 = new Image(); +sampleImage_2_3.src = '/client-assets/sample/2-3.jpg'; +const sampleImage_2_3_loading = new Promise(resolve => { + sampleImage_2_3.onload = () => resolve(); +}); + +const sampleImageType = ref('3_2'); +watch(sampleImageType, async () => { + if (renderer != null) { + renderer.destroy(); + renderer = null; + initRenderer(); + } +}); let renderer: Watermarker | null = null; -onMounted(() => { - sampleImage.onload = async () => { +async function initRenderer() { + if (canvasEl.value == null) return; + + if (sampleImageType.value === '3_2') { renderer = new Watermarker({ canvas: canvasEl.value, width: 1500, height: 1000, preset: preset, - originalImage: sampleImage, + originalImage: sampleImage_3_2, }); + } else if (sampleImageType.value === '2_3') { + renderer = new Watermarker({ + canvas: canvasEl.value, + width: 1000, + height: 1500, + preset: preset, + originalImage: sampleImage_2_3, + }); + } - await renderer.bakeTextures(); + await renderer!.bakeTextures(); - renderer.render(); - }; + renderer!.render(); +} + +onMounted(async () => { + await sampleImage_3_2_loading; + await sampleImage_2_3_loading; + + initRenderer(); }); onUnmounted(() => { @@ -166,19 +205,17 @@ async function save() { background-color: var(--MI_THEME-bg); background-size: auto auto; background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px); - cursor: not-allowed; } .previewContainer { display: flex; flex-direction: column; height: 100%; - pointer-events: none; user-select: none; -webkit-user-drag: none; } -.watermarkEditorPreviewTitle { +.previewTitle { position: absolute; z-index: 100; top: 8px; @@ -188,7 +225,25 @@ async function save() { font-size: 85%; } -.watermarkEditorPreviewSpinner { +.previewControls { + position: absolute; + z-index: 100; + bottom: 8px; + right: 8px; + display: flex; + align-items: center; + gap: 8px; + padding: 6px 10px; + border-radius: 6px; +} + +.previewControlsButton { + &.active { + color: var(--MI_THEME-accent); + } +} + +.previewSpinner { position: absolute; top: 50%; left: 50%;