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%;