Add automatic label length trimming

app/static/editor.js

@@ -16,6 +16,7 @@ const state = {
   design: {
     tapeWidthMm: 24,
     lengthMm: 70,
+    autoLength: true,
     marginMm: 2,
     orientation: "landscape",
     cutMode: "auto",
@@ -31,6 +32,7 @@ const message = document.getElementById("message");
 const controls = {
   tapeWidth: document.getElementById("tapeWidth"),
   lengthMm: document.getElementById("lengthMm"),
+  autoLength: document.getElementById("autoLength"),
   marginMm: document.getElementById("marginMm"),
   cutMode: document.getElementById("cutMode"),
   copies: document.getElementById("copies"),
@@ -80,6 +82,21 @@ function printablePxPerMm() {
   return (PRINTABLE_TAPE_PX[tape] || (tape * 180) / 25.4) / tape;
 }
 
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function contentLengthMm() {
+  if (!state.design.objects.length) return Number(controls.lengthMm.value) || state.design.lengthMm || 70;
+  const margin = Number(controls.marginMm.value) || 0;
+  const lengthEnd = state.design.objects.reduce((max, obj) => {
+    if (obj.hidden) return max;
+    const end = state.design.orientation === "portrait" ? obj.y + obj.h : obj.x + obj.w;
+    return Math.max(max, end);
+  }, margin);
+  return Math.ceil(clamp(lengthEnd + margin, 10, 500));
+}
+
 function selected() {
   return state.design.objects.find((obj) => obj.id === state.selectedId) || null;
 }
@@ -94,13 +111,20 @@ function syncDesignControls() {
   state.design.lengthMm = Number(controls.lengthMm.value);
   state.design.marginMm = Number(controls.marginMm.value);
   state.design.cutMode = controls.cutMode.value;
+  state.design.autoLength = controls.autoLength.checked;
   state.design.halfcut = "off";
   state.design.orientation = document.querySelector("input[name='orientation']:checked").value;
+  controls.lengthMm.disabled = state.design.autoLength;
+  if (state.design.autoLength) {
+    state.design.lengthMm = contentLengthMm();
+    controls.lengthMm.value = state.design.lengthMm;
+  }
 }
 
 function applyDesignControls() {
   controls.tapeWidth.value = state.design.tapeWidthMm;
   controls.lengthMm.value = state.design.lengthMm;
+  controls.autoLength.checked = state.design.autoLength !== false;
   controls.marginMm.value = state.design.marginMm;
   controls.cutMode.value = state.design.cutMode || "auto";
   document.querySelector(`input[name='orientation'][value='${state.design.orientation}']`).checked = true;
@@ -411,7 +435,7 @@ window.addEventListener("keydown", (event) => {
   }
 });
 
-["tapeWidth", "lengthMm", "marginMm", "cutMode"].forEach((id) => document.getElementById(id).addEventListener("input", draw));
+["tapeWidth", "lengthMm", "autoLength", "marginMm", "cutMode"].forEach((id) => document.getElementById(id).addEventListener("input", draw));
 document.querySelectorAll("input[name='orientation']").forEach((input) => input.addEventListener("change", draw));
 Object.values(controls).forEach((control) => {
   if (control && control.id && control.id.startsWith("prop")) control.addEventListener("input", applyProps);