Save worktree changes

src/web/public/js/templates/template-designer-utils.js

@@ -12,6 +12,62 @@
     return value === undefined || value === null || value === '' ? fallback : value;
   }
 
+  function normalizeLockRatio(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return '';
+    }
+    if (!/^\d+\s*:\s*\d+$/.test(raw)) {
+      return '';
+    }
+    return raw.replace(/\s+/g, '');
+  }
+
+  function parseLockRatio(value) {
+    var normalized = normalizeLockRatio(value);
+    if (!normalized) {
+      return null;
+    }
+
+    var parts = normalized.split(':');
+    var width = Number(parts[0]);
+    var height = Number(parts[1]);
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return null;
+    }
+
+    return {
+      label: normalized,
+      ratio: width / height
+    };
+  }
+
+  function getDefaultRegionSize(regionType, lockRatio) {
+    var ratio = parseLockRatio(lockRatio);
+    var locked = regionType === 'image' || regionType === 'webpage' || regionType === 'html' || regionType === 'rtmp' || regionType === 'rss' || regionType === 'api';
+
+    if (ratio) {
+      if (ratio.ratio >= 1) {
+        var baseWidth = locked ? 420 : 300;
+        return {
+          width: Math.max(12, Math.round(baseWidth)),
+          height: Math.max(12, Math.round(baseWidth / ratio.ratio))
+        };
+      }
+
+      var baseHeight = locked ? 300 : 240;
+      return {
+        width: Math.max(12, Math.round(baseHeight * ratio.ratio)),
+        height: Math.max(12, Math.round(baseHeight))
+      };
+    }
+
+    return {
+      width: locked ? 420 : 300,
+      height: locked ? 240 : 120
+    };
+  }
+
   function clamp(value, min, max) {
     return Math.max(min, Math.min(max, value));
   }
@@ -34,6 +90,7 @@
       label: name,
       region_type: card.querySelector('[name="region_type[]"]').value,
       font_family: card.querySelector('[name="font_family[]"]').value,
+      lock_ratio: normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value),
       x: Number(card.querySelector('[name="region_x[]"]').value || 0),
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
@@ -52,6 +109,7 @@
     }
     if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
     if (values.font_family !== undefined) { card.querySelector('[name="font_family[]"]').value = values.font_family; }
+    if (values.lock_ratio !== undefined) { card.querySelector('[name="region_lock_ratio[]"]').value = normalizeLockRatio(values.lock_ratio); }
     if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
@@ -112,6 +170,9 @@
     clampRegion: clampRegion,
     getOverlayRect: getOverlayRect,
     toCanvasPoint: toCanvasPoint,
-    canvasRectToPixels: canvasRectToPixels
+    canvasRectToPixels: canvasRectToPixels,
+    normalizeLockRatio: normalizeLockRatio,
+    parseLockRatio: parseLockRatio,
+    getDefaultRegionSize: getDefaultRegionSize
   };
 }());