Release v2.15.5

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

@@ -1232,8 +1232,18 @@
     return Boolean(getRegionLockRatio(card));
   }
 
-  function syncLockedDimensions(card, changedField) {
-    normalizeRegionCard(card, changedField);
+  function syncLockedDimensions(card, changedField, isEditing) {
+    if (isEditing) {
+      var current = readCard(card);
+      var aspect = parseLockRatio(current.lock_ratio);
+      if (aspect && changedField === 'width' && current.width > 0) {
+        writeCard(card, { height: Math.max(12, Math.round(current.width / aspect.ratio)) });
+      } else if (aspect && changedField === 'height' && current.height > 0) {
+        writeCard(card, { width: Math.max(12, Math.round(current.height * aspect.ratio)) });
+      }
+    } else {
+      normalizeRegionCard(card, changedField);
+    }
     updateRegionLockBadge(card);
     markTemplateFormDirty();
     requestOverlayRender();
@@ -1327,9 +1337,6 @@
     card.dataset.regionKey = String(region.region_key || region.label || getRegionName(card) || '').trim();
     setRegionRemovalState(card);
     var nameInput = card.querySelector('[name="region_name[]"]');
-    var lockRatioInput = card.querySelector('[name="region_lock_ratio[]"]');
-    var widthInput = card.querySelector('[name="region_width[]"]');
-    var heightInput = card.querySelector('[name="region_height[]"]');
     var animationPresetInputs = card.querySelectorAll('[data-animation-preset]');
     var animationResetButtons = card.querySelectorAll('[data-animation-reset-button]');
     var animationAdvancedButton = card.querySelector('[data-animation-advanced-button]');
@@ -1365,21 +1372,24 @@
         }
       });
     }
-    if (lockRatioInput) {
-      lockRatioInput.addEventListener('input', function () {
-        syncLockedDimensions(card, 'width');
+    ['x', 'y', 'z', 'width', 'height', 'lock_ratio'].forEach(function (field) {
+      var input = card.querySelector('[name="region_' + field + '[]"]');
+      if (!input) {
+        return;
+      }
+      var changedField = field === 'lock_ratio' ? 'width' : field;
+      input.addEventListener('input', function () {
+        syncLockedDimensions(card, changedField, true);
       });
-    }
-    if (widthInput) {
-      widthInput.addEventListener('input', function () {
-        syncLockedDimensions(card, 'width');
+      input.addEventListener('change', function () {
+        syncLockedDimensions(card, changedField);
       });
-    }
-    if (heightInput) {
-      heightInput.addEventListener('input', function () {
-        syncLockedDimensions(card, 'height');
-      });
-    }
+    });
+    card.addEventListener('keydown', function (event) {
+      if (event.key === 'Enter' && event.target && event.target.tagName === 'INPUT') {
+        event.preventDefault();
+      }
+    });
     card.addEventListener('click', function (event) {
       if (event.target && event.target.closest && event.target.closest('[data-region-remove-button]')) {
         return;