From bb77844bfb39fe94170949208800b9c548af1961 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 30 Oct 2025 19:33:43 +0900
Subject: [PATCH] wip

---
 .../components/MkImageLabelEditorDialog.vue    |  2 +-
 .../src/utility/image-effector/fxs/label.glsl  | 18 ++++++++++++++----
 .../src/utility/image-label-renderer.ts        |  8 ++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkImageLabelEditorDialog.vue b/packages/frontend/src/components/MkImageLabelEditorDialog.vue
index 81e1438d86..ef0e4d971c 100644
--- a/packages/frontend/src/components/MkImageLabelEditorDialog.vue
+++ b/packages/frontend/src/components/MkImageLabelEditorDialog.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div :class="$style.controls">
 				<div class="_spacer _gaps">
-					<MkRange v-model="frame.frameThickness" :min="0" :max="0.1" :step="0.01" :continuousUpdate="true">
+					<MkRange v-model="frame.frameThickness" :min="0" :max="0.2" :step="0.01" :continuousUpdate="true">
 						<template #label>{{ i18n.ts._imageLabelEditor.frameThickness }}</template>
 					</MkRange>
 
diff --git a/packages/frontend/src/utility/image-effector/fxs/label.glsl b/packages/frontend/src/utility/image-effector/fxs/label.glsl
index 7ecc48acd1..2cb379e363 100644
--- a/packages/frontend/src/utility/image-effector/fxs/label.glsl
+++ b/packages/frontend/src/utility/image-effector/fxs/label.glsl
@@ -17,17 +17,27 @@ uniform float u_imageMarginX;
 uniform float u_imageMarginY;
 out vec4 out_color;
 
+float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) {
+	return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin));
+}
+
 void main() {
 	float labelRatio = u_labelEnabled ? (u_labelResolution.y / in_resolution.y) : 0.0;
-	vec4 image_color = texture(u_image, (in_uv / vec2(1.0, 1.0 - labelRatio) / vec2(1.0 - u_imageMarginX - u_imageMarginX, 1.0 - u_imageMarginY)) - vec2(u_imageMarginX, u_imageMarginY));
+
+	vec4 image_color = texture(u_image, vec2(
+		remap(in_uv.x, u_imageMarginX, 1.0 - u_imageMarginX, 0.0, 1.0),
+		remap(in_uv.y, u_imageMarginY, 1.0 - labelRatio, 0.0, 1.0)
+	));
+
 	vec4 label_color = texture(u_label, (in_uv - vec2(0.0, 1.0 - labelRatio)) / vec2(1.0, labelRatio));
+
 	if (in_uv.y > (1.0 - labelRatio)) {
 		out_color = label_color;
 	} else {
-		if (in_uv.x < u_imageMarginX || in_uv.x > (1.0 - u_imageMarginX) || in_uv.y < u_imageMarginY) {
-			out_color = vec4(1.0, 1.0, 1.0, 1.0);
-		} else {
+		if (in_uv.y > u_imageMarginY && in_uv.x > u_imageMarginX && in_uv.x < (1.0 - u_imageMarginX)) {
 			out_color = image_color;
+		} else {
+			out_color = vec4(1.0, 1.0, 1.0, 1.0);
 		}
 	}
 }
diff --git a/packages/frontend/src/utility/image-label-renderer.ts b/packages/frontend/src/utility/image-label-renderer.ts
index 3816917a3e..64ca0812ae 100644
--- a/packages/frontend/src/utility/image-label-renderer.ts
+++ b/packages/frontend/src/utility/image-label-renderer.ts
@@ -101,7 +101,7 @@ export class ImageLabelRenderer {
 		const textsMarginRight = textsMarginLeft;
 		const withQrCode = params.withQrCode;
 		const qrSize = labelCanvasCtx.canvas.height * 0.6;
-		const qrMarginX = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, (imageAreaW * params.frameThickness) / aspectRatio);
+		const qrMarginRight = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, paddingRight);
 
 		labelCanvasCtx.fillStyle = '#ffffff';
 		labelCanvasCtx.fillRect(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height);
@@ -116,7 +116,7 @@ export class ImageLabelRenderer {
 			labelCanvasCtx.fillText(this.interpolateText(params.title), labelCanvasCtx.canvas.width / 2, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
 		} else {
 			labelCanvasCtx.textAlign = 'left';
-			labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
+			labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0));
 		}
 
 		labelCanvasCtx.fillStyle = '#00000088';
@@ -129,7 +129,7 @@ export class ImageLabelRenderer {
 			labelCanvasCtx.fillText(this.interpolateText(params.text), labelCanvasCtx.canvas.width / 2, textY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
 		} else {
 			labelCanvasCtx.textAlign = 'left';
-			labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
+			labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0));
 		}
 
 		const $i = ensureSignin();
@@ -172,7 +172,7 @@ export class ImageLabelRenderer {
 
 			labelCanvasCtx.drawImage(
 				qrImageBitmap,
-				labelCanvasCtx.canvas.width - qrSize - qrMarginX,
+				labelCanvasCtx.canvas.width - qrSize - qrMarginRight,
 				(labelCanvasCtx.canvas.height - qrSize) / 2,
 				qrSize,
 				qrSize,