From a07fcafdee201d7c979548ffb8cd9546b411f2ef Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Mon, 3 Nov 2025 18:31:39 +0900 Subject: [PATCH] wip --- .../frontend/src/components/MkImageEffectorDialog.vue | 10 +++++----- .../src/components/MkImageFrameEditorDialog.vue | 4 ++-- .../src/components/MkWatermarkEditorDialog.vue | 4 ++-- packages/frontend/src/composables/use-uploader.ts | 6 ++---- .../src/pages/settings/drive.WatermarkItem.vue | 4 ++-- .../src/utility/image-effector/ImageEffector.ts | 6 ++++-- .../utility/image-effector/fxs/watermarkPlacement.ts | 2 +- packages/frontend/src/utility/watermark.ts | 10 +++------- 8 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue index b0b2a137fa..641757fa62 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.vue @@ -94,7 +94,7 @@ const layers = reactive([]); watch(layers, async () => { if (renderer != null) { - renderer.setLayersAndRender(layers); + renderer.render(layers); } }, { deep: true }); @@ -167,7 +167,7 @@ onMounted(async () => { fxs: FXS, }); - await renderer.setLayersAndRender(layers); + await renderer.render(layers); closeWaiting(); }); @@ -194,7 +194,7 @@ async function save() { await nextTick(); // waitingがレンダリングされるまで待つ renderer.changeResolution(imageBitmap.width, imageBitmap.height); // 本番レンダリングのためオリジナル画質に戻す - renderer.render(); // toBlobの直前にレンダリングしないと何故か壊れる + await renderer.render(layers); // toBlobの直前にレンダリングしないと何故か壊れる canvasEl.value.toBlob((blob) => { emit('ok', new File([blob!], `image-${Date.now()}.png`, { type: 'image/png' })); dialog.value?.close(); @@ -206,9 +206,9 @@ const enabled = ref(true); watch(enabled, () => { if (renderer != null) { if (enabled.value) { - renderer.setLayersAndRender(layers); + renderer.render(layers); } else { - renderer.setLayersAndRender([]); + renderer.render([]); } } }); diff --git a/packages/frontend/src/components/MkImageFrameEditorDialog.vue b/packages/frontend/src/components/MkImageFrameEditorDialog.vue index af44a6f162..e13ec3a4e0 100644 --- a/packages/frontend/src/components/MkImageFrameEditorDialog.vue +++ b/packages/frontend/src/components/MkImageFrameEditorDialog.vue @@ -206,7 +206,7 @@ async function cancel() { const updateThrottled = throttle(50, () => { if (renderer != null) { - renderer.updateAndRender(frame); + renderer.render(frame); } }); @@ -285,7 +285,7 @@ async function initRenderer() { }); } - await renderer!.updateAndRender(frame); + await renderer!.render(frame); } onMounted(async () => { diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue index 7f7d746bae..1be5052d44 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -193,7 +193,7 @@ async function cancel() { watch(preset, async (newValue, oldValue) => { if (renderer != null) { - renderer.setLayersAndRender(preset.layers); + renderer.render(preset.layers); } }, { deep: true }); @@ -277,7 +277,7 @@ async function initRenderer() { }); } - await renderer!.setLayersAndRender(preset.layers); + await renderer!.render(preset.layers); } onMounted(async () => { diff --git a/packages/frontend/src/composables/use-uploader.ts b/packages/frontend/src/composables/use-uploader.ts index 5b3a1cc8f6..6e7019f7d5 100644 --- a/packages/frontend/src/composables/use-uploader.ts +++ b/packages/frontend/src/composables/use-uploader.ts @@ -612,7 +612,7 @@ export function useUploader(options: { image: imageBitmap, }); - await renderer.setLayersAndRender(item.watermarkPreset.layers); + await renderer.render(item.watermarkPreset.layers); preprocessedFile = await new Promise((resolve) => { canvas.toBlob((blob) => { @@ -638,13 +638,11 @@ export function useUploader(options: { // title: `${meta_model} + ${meta_lensModel}`, // text: `${date} ${meta_mm}mm f/${meta_f} ${meta_s}s ISO${meta_iso}`, //}); - await frameRenderer.updateAndRender({ + await frameRenderer.render({ title: 'aaaaaaaaaaaaa', text: 'bbbbbbbbbbbbbbbbbbbb', }); - frameRenderer.render(); - preprocessedFile = await new Promise((resolve) => { canvas.toBlob((blob) => { if (blob == null) { diff --git a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue index 80c7d8b171..9ee998c871 100644 --- a/packages/frontend/src/pages/settings/drive.WatermarkItem.vue +++ b/packages/frontend/src/pages/settings/drive.WatermarkItem.vue @@ -78,7 +78,7 @@ onMounted(() => { image: sampleImage, }); - await renderer.setLayersAndRender(props.preset.layers); + await renderer.render(props.preset.layers); }, { immediate: true }); }; }); @@ -92,7 +92,7 @@ onUnmounted(() => { watch(() => props.preset, async () => { if (renderer != null) { - await renderer.setLayersAndRender(props.preset.layers); + await renderer.render(props.preset.layers); } }, { deep: true }); diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index c2df927080..524835f37b 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -159,7 +159,9 @@ export class ImageEffector { } } - public async setLayersAndRender(layers: ImageEffectorLayer[]) { + public async render(layers: ImageEffectorLayer[]) { + const fnParams: Record = {}; + const unused = new Set(this.compositor.getKeysOfRegisteredTextures()); for (const layer of layers) { @@ -198,7 +200,7 @@ export class ImageEffector { this.compositor.render(layers.map(layer => ({ id: layer.id, functionId: layer.fxId, - params: layer.params, + params: fnParams, }))); } diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts index 27ffc97186..38fe0b96d6 100644 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts +++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts @@ -69,7 +69,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({ gl.uniform1i(u.noBBoxExpansion, params.noBoundingBoxExpansion ? 1 : 0); // ウォーターマークテクスチャ - const wm = textures.watermark; + const wm = textures.get(params.watermark); if (wm) { gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, wm.texture); diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts index 55cc19a00a..c25b251755 100644 --- a/packages/frontend/src/utility/watermark.ts +++ b/packages/frontend/src/utility/watermark.ts @@ -83,7 +83,7 @@ export type WatermarkPreset = { }; export class WatermarkRenderer { - private effector: ImageEffector; + private effector: ImageEffector; private layers: WatermarkPreset['layers'] = []; constructor(options: { @@ -200,13 +200,9 @@ export class WatermarkRenderer { }); } - public async setLayersAndRender(layers: WatermarkPreset['layers']) { + public async render(layers: WatermarkPreset['layers']) { this.layers = layers; - await this.effector.setLayersAndRender(this.makeImageEffectorLayers()); - } - - public render(): void { - this.effector.render(); + await this.effector.render(this.makeImageEffectorLayers()); } /*