Preview: Fix element group rendering with respect to layer

relates to xibosignage/xibo#3485
xibosignage · Oct 18, 2024 · 22d8f5d · 22d8f5d
1 parent c78d293
commit 22d8f5d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/modules/player.bundle.min.js b/modules/player.bundle.min.js
@@ -4203,12 +4203,27 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
       if (isGroup) {
         // Grouped elements
         if (elemObj.items.length > 0) {
+          // Check if group element exists
+          // If not, then create
+          var $groupContent;
+          if ($content.find(".".concat(itemKey)).length === 0) {
+            $groupContent = $("<div class=\"".concat(itemKey, "\"></div>"));
+            $groupContent.css({
+              width: elemObj.width,
+              height: elemObj.height,
+              position: 'absolute',
+              top: elemObj.top,
+              left: elemObj.left,
+              zIndex: elemObj.layer
+            });
+          }
+
           // Loop through group items
           elemObj.items.forEach(function (groupItem) {
             var _groupItem$templateDa;
             // Load element functions
             self.loadElementFunctions(groupItem, {});
-            groupItem.hbs && $content.append(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));
+            groupItem.hbs && $groupContent && $groupContent.append(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));
             var itemID = groupItem.uniqueID || ((_groupItem$templateDa = groupItem.templateData) === null || _groupItem$templateDa === void 0 ? void 0 : _groupItem$templateDa.uniqueID);
 
             // Call onTemplateRender
@@ -4219,6 +4234,12 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
               data: {}
             }), meta);
           });
+
+          // If there's a group content element
+          // Append it to the page
+          if ($groupContent) {
+            $content.append($groupContent);
+          }
         }
       } else {
         var _elemObj$templateData;
@@ -7286,6 +7307,10 @@ var PlayerHelper = function () {
     var hbsTemplate = hbs(Object.assign(props, globalOptions));
     var topPos = props.top;
     var leftPos = props.left;
+    var hasGroup = Boolean(props.groupId);
+    var hasGroupProps = Boolean(props.groupProperties);
+
+    // @NOTE: I think this is deprecated but needs more checking
     if (props.group) {
       if (props.group.isMarquee) {
         topPos = props.top - props.group.top;
@@ -7314,6 +7339,11 @@ var PlayerHelper = function () {
         left: props.left,
         zIndex: props.layer
       });
+      if (hasGroup && hasGroupProps) {
+        cssStyles.top = props.top >= props.groupProperties.top ? props.top - props.groupProperties.top : 0;
+        cssStyles.left = props.left >= props.groupProperties.left ? props.left - props.groupProperties.left : 0;
+        cssStyles.zIndex = 'none';
+      }
     }
     if (!props.isGroup && props.dataOverride === 'text' && props.group && props.group.isMarquee && (props.effect === 'marqueeLeft' || props.effect === 'marqueeRight')) {
       cssStyles = _objectSpread(_objectSpread({}, cssStyles), {}, {

diff --git a/modules/player.bundle.min.js.map b/modules/player.bundle.min.js.map
diff --git a/modules/src/xibo-player.js b/modules/src/xibo-player.js
@@ -1372,12 +1372,28 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
       if (isGroup) {
         // Grouped elements
         if (elemObj.items.length > 0) {
+          // Check if group element exists
+          // If not, then create
+          let $groupContent;
+          if ($content.find(`.${itemKey}`).length === 0) {
+            $groupContent = $(`<div class="${itemKey}"></div>`);
+
+            $groupContent.css({
+              width: elemObj.width,
+              height: elemObj.height,
+              position: 'absolute',
+              top: elemObj.top,
+              left: elemObj.left,
+              zIndex: elemObj.layer,
+            });
+          }
+
           // Loop through group items
           elemObj.items.forEach(function(groupItem) {
             // Load element functions
             self.loadElementFunctions(groupItem, {});
 
-            (groupItem.hbs) && $content.append(
+            (groupItem.hbs) && ($groupContent) && $groupContent.append(
               PlayerHelper.renderElement(
                 groupItem.hbs,
                 groupItem.templateData,
@@ -1399,6 +1415,12 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
               meta,
             );
           });
+
+          // If there's a group content element
+          // Append it to the page
+          if ($groupContent) {
+            $content.append($groupContent);
+          }
         }
       } else {
         // Single elements

diff --git a/ui/src/helpers/player-helper.js b/ui/src/helpers/player-helper.js
@@ -133,7 +133,10 @@ const PlayerHelper = function() {
     const hbsTemplate = hbs(Object.assign(props, globalOptions));
     let topPos = props.top;
     let leftPos = props.left;
+    const hasGroup = Boolean(props.groupId);
+    const hasGroupProps = Boolean(props.groupProperties);
 
+    // @NOTE: I think this is deprecated but needs more checking
     if (props.group) {
       if (props.group.isMarquee) {
         topPos = (props.top - props.group.top);
@@ -165,6 +168,14 @@ const PlayerHelper = function() {
         left: props.left,
         zIndex: props.layer,
       };
+
+      if (hasGroup && hasGroupProps) {
+        cssStyles.top = (props.top >= props.groupProperties.top) ?
+          (props.top - props.groupProperties.top) : 0;
+        cssStyles.left = (props.left >= props.groupProperties.left) ?
+          (props.left - props.groupProperties.left) : 0;
+        cssStyles.zIndex = 'none';
+      }
     }
 
     if (!props.isGroup && props.dataOverride === 'text' &&