Layout Editor: Background image layer in viewer and control

relates to xibosignageltd/xibo-private#826

ui/src/editor-core/layer-manager.js

@@ -175,6 +175,18 @@ LayerManager.prototype.createStructure = function() {
       duration: parseDuration(canvas.duration),
       layers: canvasObject.subLayers,
     });
+
+    // If we have a background image for the layout
+    // Add it to structure
+    if (
+      self.parent.layout.backgroundImage &&
+      self.parent.layout.backgroundzIndex != null
+    ) {
+      addToLayerStructure(self.parent.layout.backgroundzIndex, {
+        type: 'layoutBackground',
+        name: 'Layout Background',
+      });
+    }
   }
 
   // Get static widgets and playlists
@@ -299,8 +311,11 @@ LayerManager.prototype.render = function(reset) {
         this.DOMObject
           .find('.layer-manager-layer-item.selectable:not(.selected)')
           .off('click').on('click', function(ev) {
-            const elementId = $(ev.currentTarget).data('item-id');
-            const $viewerObject = self.viewerContainer.find('#' + elementId);
+            const elementData = $(ev.currentTarget).data();
+            const elementId = elementData.itemId;
+            const $viewerObject = (elementData.type === 'layoutBackground') ?
+              self.viewerContainer :
+              self.viewerContainer.find('#' + elementId);
 
             if ($viewerObject.length) {
               // Select in editor
@@ -584,6 +599,7 @@ LayerManager.prototype.saveSort = function({
 
   if (type === 'main') {
     const regionToBeSaved = [];
+    let layoutSaving = null;
     lD.viewer.layerManager.DOMObject
       .find('.layer-manager-body > .sortable-main')
       .each((idx, target) => {
@@ -594,7 +610,21 @@ LayerManager.prototype.saveSort = function({
           $target.data('itemId');
         const newLayer = idx;
         let updateOnViewer = '';
-        if (targetType === 'canvas') {
+
+        if (targetType === 'layoutBackground') {
+          // Only save layout if we have a new value
+          if (lD.layout.backgroundzIndex != newLayer) {
+            console.log('Save layout layer:' + newLayer);
+            lD.layout.backgroundzIndex = newLayer;
+
+            layoutSaving = lD.layout.saveBackgroundLayer(newLayer);
+
+            if (lD.selectedObject.type === 'layout') {
+              lD.propertiesPanel.DOMObject
+                .find('#input_backgroundzIndex').val(newLayer);
+            }
+          }
+        } else if (targetType === 'canvas') {
           // Only save canvas if we have a new value
           if (lD.layout.canvas.zIndex != newLayer) {
             const canvas = lD.getObjectByTypeAndId('canvas');
@@ -653,7 +683,15 @@ LayerManager.prototype.saveSort = function({
 
     // Save regions if needed
     if (regionToBeSaved.length > 0) {
-      lD.layout.saveMultipleRegions(regionToBeSaved);
+      const saveRegions = function() {
+        lD.layout.saveMultipleRegions(regionToBeSaved);
+      };
+
+      if (layoutSaving) {
+        layoutSaving.then(saveRegions);
+      } else {
+        saveRegions();
+      }
     }
   } else if (type === 'canvas') {
     const widgetsToSave = {};

ui/src/editor-core/properties-panel.js

@@ -185,6 +185,11 @@ PropertiesPanel.prototype.save = function(
   ) {
     app.common.showLoadingScreen();
 
+    // If it's a layout, save its resolution
+    const resolutionId = (target.type === 'layout') ?
+      formFieldsToSave.filter('[name="resolutionId"]').val() :
+      null;
+
     // Add a save form change to the history array
     // with previous form state and the new state
     app.historyManager.addChange(
@@ -294,6 +299,11 @@ PropertiesPanel.prototype.save = function(
                 app.bottombar.render(originalTarget);
             }
 
+            // If target was layout, update resolution id
+            if (originalTarget.type === 'layout') {
+              app.layout.resolutionId = resolutionId;
+            }
+
             // If we're saving a region, update bottom bar
             // update bottom bar
             if (originalTarget.type === 'region') {
@@ -610,6 +620,9 @@ PropertiesPanel.prototype.render = function(
       dataToRender.orientation = lD.viewer.getLayoutOrientation(
         dataToRender.resolution.width, dataToRender.resolution.height);
       dataToRender.bgImageName = dataToRender.backgrounds[0]?.name || '';
+
+      // Save resolution to layout for later use
+      target.resolutionId = dataToRender.resolution.resolutionId;
     }
 
     // if region, add subtype name

ui/src/layout-editor/layout.js

@@ -68,6 +68,8 @@ const Layout = function(id, data) {
 
   this.backgroundImage = data.backgroundImageId;
   this.backgroundColor = data.backgroundColor;
+  this.backgroundzIndex = data.backgroundzIndex;
+  this.resolutionId = null;
 
   this.code = data.code;
   this.folderId = data.folderId;
@@ -1142,4 +1144,33 @@ Layout.prototype.saveMultipleRegions = function(regions) {
   });
 };
 
+/**
+ * Save layout background layer
+ * @param {number} layer New layer
+ * @return {Promise} - Promise that resolves when the regions are saved
+ */
+Layout.prototype.saveBackgroundLayer = function(layer) {
+  const self = this;
+  return new Promise(function(resolve, reject) {
+    const requestPath =
+      urlsForApi.layout.saveForm.url.replace(':id', self.layoutId);
+
+    $.ajax({
+      url: requestPath,
+      type: urlsForApi.layout.saveForm.type,
+      data: {
+        backgroundColor: self.backgroundColor,
+        backgroundImageId: self.backgroundImage,
+        resolutionId: self.resolutionId,
+        backgroundzIndex: self.backgroundzIndex,
+      },
+    }).done(function(data) {
+      resolve(data);
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+      // Reject promise and return an object with all values
+      reject(new Error({jqXHR, textStatus, errorThrown}));
+    });
+  });
+};
+
 module.exports = Layout;

ui/src/layout-editor/viewer.js

@@ -338,6 +338,10 @@ Viewer.prototype.render = function(forceReload = false, target = {}) {
     // Initialise moveable
     this.initMoveable();
 
+    // Remove background image component if exists
+    $viewerContainer.find('.layout-live-preview .layout-background-image')
+      .remove();
+
     // Render background image or color to the preview
     if (lD.layout.backgroundImage === null) {
       $viewerContainer.find('.viewer-object')
@@ -348,7 +352,9 @@ Viewer.prototype.render = function(forceReload = false, target = {}) {
       // Replace ID in the link
       linkToAPI = linkToAPI.replace(':id', lD.layout.layoutId);
 
-      $viewerContainer.find('.viewer-object')
+      // Append layout background image component
+      const $layoutBgImage = $('<div class="layout-background-image"></div>');
+      $layoutBgImage
         .css({
           background:
             'url(\'' + linkToAPI + '?preview=1&width=' +
@@ -362,7 +368,9 @@ Viewer.prototype.render = function(forceReload = false, target = {}) {
             lD.layout.backgroundImage + '\') top center no-repeat',
           backgroundSize: '100% 100%',
           backgroundColor: lD.layout.backgroundColor,
+          zIndex: lD.layout.backgroundzIndex,
         });
+      $layoutBgImage.appendTo($viewerContainer.find('.layout-live-preview'));
     }
 
     // Render viewer regions/widgets

ui/src/style/layout-editor.scss

@@ -1530,6 +1530,14 @@ body.editor-opened {
                 }
             }
         }
+
+        /* Layout tbackgrouynd */
+        .viewer-object .layout-background-image {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
     }
 
     .viewer-object-select.selected-temp {
@@ -1775,6 +1783,7 @@ div#bg_media_name {
         gap: 6px;
         padding: 0 4px;
         height: 34px;
+        cursor: pointer;
 
         .layer {
             flex-basis: 30px;

ui/src/templates/layer-manager.hbs

@@ -92,6 +92,9 @@
                     {{#eq type 'staticWidget'}}
                         <i title="{{moduleName}}" class="{{icon}}"></i>
                     {{/eq}}
+                    {{#eq type 'layoutBackground'}}
+                        <i class="fa fa-image" title="{{../../trans.layoutBackground}}"></i>
+                    {{/eq}}
 
                     <span class="name" title="{{../../trans.name}}">
                         {{name}}

views/common.twig

@@ -887,6 +887,7 @@
                 shrink: "{{ "Shrink" |trans }}",
                 playlist: "{{ "Playlist" |trans }}",
                 zone: "{{ "Zone" |trans }}",
+                layoutBackground: "{{ "Layout Background" |trans }}",
                 invalidRegion: "{{ "Invalid Region" |trans }}",
                 invalidRegionHelp: "{{ "Region is invalid: Please delete it to validate the Layout!" |trans }}",
             };