Layout Canvas: does not get a layer set on it in the XLF

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

@@ -893,9 +893,14 @@ PropertiesPanel.prototype.render = function(
 
       // Add position tab after advanced tab
       self.DOMObject.find('[href="#advancedTab"]').parent()
-        .after('<li class="nav-item">' +
-          '<a class="nav-link" href="#positionTab" data-toggle="tab">' +
-          '<i class="fas fa-border-none"></i></a></li>');
+        .after(`<li class="nav-item">
+          <a class="nav-link" href="#positionTab"
+            data-toggle="tab">
+            <i class="fas fa-border-none tooltip-always-on"
+              data-toggle="tooltip"
+              data-title="${propertiesPanelTrans.positioning}"></i>
+          </a>
+        </li>`);
 
       // Add position tab content after advanced tab content
       // If element is in a group, adjust position to the group's
@@ -907,8 +912,20 @@ PropertiesPanel.prototype.render = function(
         positionProperties.top -= targetAux.group.top;
       }
 
+      // If it's an element, or element group, show canvas layer
+      if (
+        targetAux?.type == 'element' ||
+        targetAux?.type == 'element-group'
+      ) {
+        positionProperties.zIndexCanvas = app.layout.canvas.zIndex;
+
+        positionProperties.showElementLayer = true;
+      }
+
       self.DOMObject.find('#advancedTab').after(
-        positionTemplate(positionProperties),
+        positionTemplate(
+          Object.assign(positionProperties, {trans: propertiesPanelTrans}),
+        ),
       );
 
       // Hide make fullscreen button for element groups
@@ -919,21 +936,48 @@ PropertiesPanel.prototype.render = function(
       // If we change any input, update the target position
       self.DOMObject.find('#positionTab [name]').on(
         'change', _.debounce(function(ev) {
-          const viewerScale = lD.viewer.containerObjectDimensions.scale;
           const form = $(ev.currentTarget).parents('#positionTab');
 
-          // Prevent layer to be negative
-          let zIndexVal = Number(form.find('[name="zIndex"]').val());
+          const preventNegative = function($field) {
+            // Prevent layer to be negative
+            let fieldValue = Number($field.val());
+            if (fieldValue && fieldValue < 0) {
+              fieldValue = 0;
+
+              // Set form field back to 0
+              $field.val(0);
+            }
+
+            // Return field value
+            return fieldValue;
+          };
+
+          // If we changed the canvas layer, save only the canvas region
           if (
-            zIndexVal &&
-            zIndexVal < 0
+            $(ev.currentTarget).parents('.position-canvas-input').length > 0
           ) {
-            zIndexVal = 0;
+            const canvasZIndexVal = preventNegative(
+              form.find('[name="zIndexCanvas"]'),
+            );
+
+            // Save canvas region
+            app.layout.canvas.changeLayer(canvasZIndexVal);
+
+            // Change layer for the viewer object
+            app.viewer.DOMObject.find('.designer-region-canvas')
+              .css('zIndex', canvasZIndexVal);
 
-            // Set form field back to 0
-            form.find('[name="zIndex"]').val(0);
+            // Don't save the rest of the form
+            return;
           }
 
+          const viewerScale = lD.viewer.containerObjectDimensions.scale;
+
+          // Prevent layer to be negative
+          const zIndexVal = preventNegative(
+            form.find('[name="zIndex"]'),
+          );
+
           if (targetAux == undefined) {
             // Widget
             const regionId = target.parent.id;
@@ -1409,7 +1453,9 @@ PropertiesPanel.prototype.renderActionTab = function(
 
   // Create tab
   self.DOMObject.find('.nav-tabs').append(
-    actionsFormTabTemplate(object),
+    actionsFormTabTemplate({
+      trans: layoutEditorTrans,
+    }),
   );
 
   // Create tab content

ui/src/layout-editor/canvas.js

@@ -41,4 +41,59 @@ const Canvas = function(id, data, layoutDimensions) {
   this.zIndex = data.zIndex;
 };
 
+
+/**
+ * Change canvas layer
+ * @param {number} [newLayer] - New left position (for move tranformation)
+ * @param {bool=} saveToHistory - Flag to save or not to the change history
+ */
+Canvas.prototype.changeLayer = function(newLayer, saveToHistory = true) {
+  // add transform change to history manager
+  if (saveToHistory) {
+    // save old/previous values
+    const oldValues = [{
+      width: this.dimensions.width,
+      height: this.dimensions.height,
+      top: this.dimensions.top,
+      left: this.dimensions.left,
+      zIndex: this.zIndex,
+      regionid: this.regionId,
+    }];
+
+    // Update new values if they are provided
+    const newValues = [{
+      width: this.dimensions.width,
+      height: this.dimensions.height,
+      top: this.dimensions.top,
+      left: this.dimensions.left,
+      zIndex: (newLayer != undefined) ?
+        newLayer : this.zIndex,
+      regionid: this.regionId,
+    }];
+
+    // Add a tranform change to the history array
+    lD.historyManager.addChange(
+      'transform',
+      'region',
+      this.regionId,
+      {
+        regions: JSON.stringify(oldValues),
+      },
+      {
+        regions: JSON.stringify(newValues),
+      },
+      {
+        upload: true, // options.upload
+      },
+    ).catch((error) => {
+      toastr.error(errorMessagesTrans.transformRegionFailed);
+      console.log(error);
+    });
+  }
+
+  // Apply changes to the canvas ( updating values )
+  this.zIndex = (newLayer != undefined) ?
+    newLayer : this.zIndex;
+};
+
 module.exports = Canvas;

ui/src/layout-editor/viewer.js

@@ -1493,11 +1493,6 @@ Viewer.prototype.renderElementContent = function(
         const elData = elementData?.data;
         const meta = elementData?.meta;
 
-        // If we don't have data, stop here
-        if (elData === undefined) {
-          return;
-        }
-
         // Check all data elements and make replacements
         for (const key in elData) {
           if (elData.hasOwnProperty(key)) {

ui/src/templates/actions-form-tab-template.hbs

@@ -1,5 +1,5 @@
 <li class="nav-item actions-tab">
     <a class="nav-link" href="#actionsTab" role="tab" data-toggle="tab">
-        <i class="fas fa-paper-plane"></i>
+        <i class="fas fa-paper-plane tooltip-always-on" data-toggle="tooltip" data-title="{{trans.actions}}"></i>
     </a>
 </li>

ui/src/templates/forms/position.hbs

@@ -4,29 +4,41 @@
         {{> inputs/hidden id="name" value=regionName customClass="position-input" }}
     {{/eq}}
 
+    {{#if showElementLayer}}
+        {{set "layerTitle" trans.positionTab.elementLayer}}
+        {{set "layerHelp" trans.positionTab.elementLayerHelp}}
+    {{else}}
+        {{set "layerTitle" trans.positionTab.layer}}
+        {{set "layerHelp" trans.positionTab.layerHelp}}
+    {{/if}}
+
     {{#ifCond zIndex '!=' undefined}}
-        {{> inputs/number value=zIndex id="zIndex" title="Layer" helpText="The z-index" min="0" customClass="position-input" }}
+        {{> inputs/number value=zIndex id="zIndex" title=layerTitle helpText=layerHelp min="0" customClass="position-input" }}
+    {{/ifCond}}
+
+    {{#ifCond zIndexCanvas '!=' undefined}}
+        {{> inputs/number value=zIndexCanvas id="zIndexCanvas" title=trans.positionTab.canvasLayer helpText=trans.positionTab.canvasLayerHelp min="0" customClass="position-canvas-input" }}
     {{/ifCond}}
 
     {{#ifCond top '!=' undefined}}
-        {{> inputs/number value=top id="top" title="Top" helpText="The top position" customClass="position-input" }}
+        {{> inputs/number value=top id="top" title=trans.positionTab.top customClass="position-input" }}
     {{/ifCond}}
 
     {{#ifCond left '!=' undefined}}
-        {{> inputs/number value=left id="left" title="Left" helpText="The left position" customClass="position-input" }}
+        {{> inputs/number value=left id="left" title=trans.positionTab.left customClass="position-input" }}
     {{/ifCond}}
 
     {{#ifCond width '!=' undefined}}
-        {{> inputs/number value=width id="width" title="Width" helpText="The width" customClass="position-input" }}
+        {{> inputs/number value=width id="width" title=trans.positionTab.width customClass="position-input" }}
     {{/ifCond}}
 
     {{#ifCond height '!=' undefined}}
-        {{> inputs/number value=height id="height" title="Height" helpText="The height" customClass="position-input" }}
+        {{> inputs/number value=height id="height" title=trans.positionTab.height customClass="position-input" }}
     {{/ifCond}}
 
     {{#ifCond rotation '!=' undefined}}
-        {{> inputs/number value=rotation id="rotation" title="Rotation" helpText="The rotation" customClass="position-input" }}
+        {{> inputs/number value=rotation id="rotation" title=trans.positionTab.rotation customClass="position-input" }}
     {{/ifCond}}
 
-    {{> button id="setFullScreen" type="btn-block btn-outline-primary inline-btn" name="Make this element full screen." }}
+    {{> button id="setFullScreen" type="btn-block btn-outline-primary inline-btn" name=trans.positionTab.setFullscreen }}
 </div>

ui/src/templates/forms/region.hbs

@@ -1,7 +1,7 @@
 <form class="region-form">
     <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item"><a class="nav-link active" href="#generalTab" role="tab" data-toggle="tab"><span>{{trans.general}}</span></a></li>
-        <li class="nav-item"><a class="nav-link" href="#positioningTab" role="tab" data-toggle="tab"><span>{{trans.positioning}}</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="#positioningTab" role="tab" data-toggle="tab"><i class="fas fa-border-none tooltip-always-on" data-toggle="tooltip" data-title="{{trans.positioning}}"></i></a></li>
     </ul>
     <div class="form-content">
         <form id="regionFormEdit" class="XiboForm">

ui/src/templates/viewer.hbs

@@ -12,7 +12,12 @@
     {{!-- Render Layout --}}
     <div class="layout-live-preview">
         {{#with layout.canvas}}
-            <div id="{{id}}" class="designer-region-canvas"></div>
+            <div id="{{id}}" 
+                class="designer-region-canvas"
+                style="
+                    position:absolute;
+                    z-index: {{ zIndex }};">
+            </div>
         {{/with}}
         <div id="regions">
             {{#each layout.regions}}

views/common.twig

@@ -525,6 +525,20 @@
                     save: "{{ "Save" |trans }}",
                     cancel: "{{ "Cancel" |trans }}",
                 },
+                positionTab: {
+                    layer: "{{ "Layer" |trans }}",
+                    layerHelp: "{{ "Layer related to all layout objects" |trans }}",
+                    elementLayer: "{{ "Element Layer" |trans }}",
+                    elementLayerHelp: "{{ "Layer for the element related to other elements" |trans }}",
+                    canvasLayer: "{{ "Canvas Layer" |trans }}",
+                    canvasLayerHelp: "{{ "Layer for the canvas containing all elements" |trans }}",
+                    top: "{{ "Top" |trans }}",
+                    left: "{{ "Left" |trans }}",
+                    width: "{{ "Width" |trans }}",
+                    height: "{{ "Height" |trans }}",
+                    rotation: "{{ "Rotation" |trans }}",
+                    setFullscreen: "{{ "Make this element full screen." |trans }}",
+                },
             };
 
             var toolbarTrans = {

views/layout-designer-page.twig

@@ -75,6 +75,7 @@
                     unlockMessage: "{% trans "The current layout will be unlocked to other users. You will also be redirected to the Layouts page" %}",
                     viewModeTitle: "{% trans "View" %}",
                     regionEditModeMessage: "{% trans "Editing Regions" %}",
+                    actions: "{% trans "Actions" %}",
                     welcomeModalMessage: "{% trans "This Layout is Published and cannot be edited. You can checkout the Layout for editing below, or continue to view it in a read only mode." %}"
                 };