Add automatic label length trimming

app/static/mobile.js

@@ -2,6 +2,7 @@ const fields = {
   text: document.getElementById("mobileText"),
   tape: document.getElementById("mobileTape"),
   length: document.getElementById("mobileLength"),
+  autoLength: document.getElementById("mobileAutoLength"),
   margin: document.getElementById("mobileMargin"),
   font: document.getElementById("mobileFont"),
   copies: document.getElementById("mobileCopies"),
@@ -13,6 +14,13 @@ const fields = {
   message: document.getElementById("mobileMessage"),
 };
 
+function estimateTextLengthMm(text, fontSize, margin, frame) {
+  const lines = String(text || " ").split("\n");
+  const longest = lines.reduce((max, line) => Math.max(max, line.length), 0);
+  const textWidth = Math.max(8, longest * fontSize * 0.62);
+  return Math.min(300, Math.max(20, Math.ceil(textWidth + margin * 2 + (frame ? 4 : 0))));
+}
+
 function setMessage(text, type = "") {
   fields.message.textContent = text;
   fields.message.className = `message ${type}`;
@@ -20,9 +28,15 @@ function setMessage(text, type = "") {
 
 function mobileDesign() {
   const tapeWidth = Number(fields.tape.value);
-  const length = Number(fields.length.value);
   const margin = Number(fields.margin.value);
   const text = fields.text.value.trim() || " ";
+  const fontSize = Number(fields.font.value);
+  const autoLength = fields.autoLength.checked;
+  const length = autoLength
+    ? estimateTextLengthMm(text, fontSize, margin, fields.frame.checked)
+    : Number(fields.length.value);
+  fields.length.value = String(length);
+  fields.length.disabled = autoLength;
   const objects = [];
   if (fields.frame.checked) {
     objects.push({
@@ -44,7 +58,7 @@ function mobileDesign() {
     w: Math.max(2, length - margin * 2 - (fields.frame.checked ? 2 : 0)),
     h: Math.max(2, tapeWidth - margin * 2),
     text,
-    fontSizeMm: Number(fields.font.value),
+    fontSizeMm: fontSize,
     bold: fields.bold.checked,
     align: fields.align.value,
     valign: "middle",
@@ -52,6 +66,7 @@ function mobileDesign() {
   return {
     tapeWidthMm: tapeWidth,
     lengthMm: length,
+    autoLength,
     marginMm: margin,
     orientation: "landscape",
     cutMode: fields.cutMode.value,
@@ -89,3 +104,11 @@ document.getElementById("mobileDetect").addEventListener("click", async () => {
   fields.tape.value = String(payload.width);
   setMessage(`Band erkannt: ${payload.width} mm`, "success");
 });
+
+["text", "font", "margin", "frame", "autoLength"].forEach((name) => {
+  fields[name].addEventListener("input", () => {
+    if (name === "autoLength" || fields.autoLength.checked) mobileDesign();
+  });
+});
+
+mobileDesign();