Release 2.16.0

src/web/public/js/slides/slide-form.js

@@ -2,6 +2,8 @@ import { createTemplateSelectorLockController } from '/assets/js/slides/slide-fo
 import { createSlideFormEditorController } from '/assets/js/slides/slide-form-editor.js';
 import { createSlideFormRegionHelpers } from '/assets/js/slides/slide-form-regions.js';
 import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-preview.js';
+import { createSlideLayoutEditor } from '/assets/js/slides/slide-layout-editor.js';
+import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-editor.js';
 
 (function () {
   var DEFAULT_FONT_SIZE = 32;
@@ -58,6 +60,37 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var sidebarBaseOffset = 16;
   var templateSelectorLock = createTemplateSelectorLockController(templateSelect);
   var regionTypes = window.pulseRegionTypes || {};
+  var slideLayoutEditor = createSlideLayoutEditor({
+    slideId: slideEditorData.slideId,
+    stage: slidePreviewStage,
+    getTemplate: getSelectedTemplate,
+    requestPreviewRender: requestPreviewRender,
+    updateTemplate: function (updatedTemplate) {
+      Object.assign(getSelectedTemplate(), updatedTemplate);
+    },
+    markEdited: function () {
+      slideForm.dataset.dirty = 'true';
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+    }
+  });
+  var slideAnimationEditor = createSlideAnimationEditor({
+    stage: slidePreviewStage,
+    slideId: slideEditorData.slideId,
+    getTemplate: getSelectedTemplate,
+    requestPreviewRender: requestPreviewRender,
+    updateTemplate: function (updatedTemplate) {
+      Object.assign(getSelectedTemplate(), updatedTemplate);
+    },
+    getAnimation: slideLayoutEditor.getAnimation,
+    getAnimationOverrides: slideLayoutEditor.getAnimationOverrides,
+    setAnimationOverrides: slideLayoutEditor.setAnimationOverrides,
+    markEdited: function () {
+      slideForm.dataset.dirty = 'true';
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+    }
+  });
 
   function escapeHtml(value) {
     return String(value ?? '')
@@ -614,6 +647,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     currentPreviewCanvasWidth = canvasWidth;
     currentPreviewCanvasHeight = canvasHeight;
     slidePreviewStage.style.aspectRatio = canvasWidth + ' / ' + canvasHeight;
+    slidePreviewStage.style.setProperty('--slide-layout-ratio', String(canvasWidth / canvasHeight));
     applyBackdropStyle(slidePreviewStage, template.background_color || '#111111', template.background_image_path, template.background_gradient);
     slidePreviewMeta.textContent = canvasWidth + 'x' + canvasHeight;
     if (!(template.regions || []).length) {
@@ -651,7 +685,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     slidePreviewCanvas.style.height = canvasHeight + 'px';
     slidePreviewCanvas.style.transform = 'translate3d(0, 0, 0) scale(' + scale + ')';
     slidePreviewCanvas.style.transformOrigin = 'top left';
-    var regions = template.regions || [];
+    var regions = (template.regions || []).map(slideLayoutEditor.apply);
     slidePreviewOverlay.innerHTML = regions.map(function (region) {
       var box = getRegionBox(region, canvasWidth, canvasHeight);
       var card = templateFields.querySelector('[data-region-id="' + region.id + '"]');
@@ -680,7 +714,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
           : region.region_type === 'html'
             ? ' slide-preview-html-region'
           : ' slide-preview-text-region';
-      return '<div class="slide-preview-region' + selected + '" style="left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px;">' + content + '</div>';
+      return '<div class="slide-preview-region' + selected + '" data-region-key="' + escapeHtml(region.region_key || '') + '" style="left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px;z-index:' + Math.max(1, Number(region.z_index) || 1) + ';">' + content + '</div>';
     }).join('');
 
     regions.forEach(function (region) {
@@ -692,6 +726,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
 
     startPreviewVideoPlayback(slidePreviewOverlay);
 
+    slideLayoutEditor.refresh();
     syncPopupPreview();
   }
 
@@ -723,6 +758,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     clearImagePreviewUrls();
     slideFormEditorController.destroyEditors();
     var template = getTemplateById(templateSelect.value);
+    slideLayoutEditor.reset(Number(templateSelect.value) === Number(existingTemplateId) ? existingContent : {});
     if (!template) {
       templateFields.innerHTML = '';
       requestPreviewRender();