Layout Editor: Elements with names (xibosignage#2310)

relates to xibosignage/xibo#3304

ui/src/core/forms.js

@@ -67,6 +67,7 @@ window.forms = {
      * @param {boolean} [playlistId] - If widget, the playlistId
      * @param {object[]} [propertyGroups] - Groups to add the properties to
      * @param {string} [customClass] - Custom class to add to the form fields
+     * @param {boolean} [prepend] - Prepend fields instead?
      *  - If the properties are for an element
      */
   createFields: function(
@@ -76,6 +77,7 @@ window.forms = {
     playlistId,
     propertyGroups = [],
     customClass,
+    prepend = false,
   ) {
     for (const key in properties) {
       if (properties.hasOwnProperty(key)) {
@@ -272,7 +274,11 @@ window.forms = {
           }
 
           // Append the new field to the target container
-          $targetContainer.append($newField);
+          if (prepend) {
+            $targetContainer.prepend($newField);
+          } else {
+            $targetContainer.append($newField);
+          }
 
           // Handle help text
           if (property.helpText) {

ui/src/editor-core/element-group.js

@@ -13,6 +13,9 @@ const ElementGroup = function(data, widgetId, regionId, parentWidget) {
   this.regionId = regionId;
   this.type = 'element-group';
 
+  // Name
+  this.elementGroupName = (data.elementGroupName) ? data.elementGroupName : '';
+
   this.id = data.id;
   this.left = data.left;
   this.top = data.top;

ui/src/editor-core/element.js

@@ -14,6 +14,9 @@ const Element = function(data, widgetId, regionId, parentWidget) {
   this.regionId = regionId;
   this.groupId = data.groupId;
 
+  // Name
+  this.elementName = (data.elementName) ? data.elementName : '';
+
   // If group id is set, grab group properties
   if (this.groupId) {
     this.groupProperties = data.groupProperties;

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

@@ -100,15 +100,17 @@ LayerManager.prototype.createStructure = function() {
 
       // If there's no group, create it
       if (!groupInCanvas) {
+        const module = lD.common.getModuleByType(widget.subType);
         groupInCanvas = addToLayerStructure(
           group.layer,
           {
             type: 'elementGroup',
-            name: group.id,
+            name: group.elementGroupName,
+            templateName: module.name,
             id: group.id,
             widgetId: 'widget_' + group.regionId + '_' + group.widgetId,
             regionId: 'region_' + group.regionId,
-            moduleIcon: lD.common.getModuleByType(widget.subType).icon,
+            moduleIcon: module.icon,
             selected: group.selected,
             expanded: group.expanded,
             layers: [],
@@ -146,8 +148,8 @@ LayerManager.prototype.createStructure = function() {
             element.layer,
             {
               type: 'element',
-              name: (element.template.title) ?
-                element.template.title : element.id,
+              name: element.elementName,
+              templateName: element.template.title,
               widgetId: 'widget_' + element.regionId + '_' + element.widgetId,
               regionId: 'region_' + element.regionId,
               // Element has parent widget duration
@@ -203,9 +205,10 @@ LayerManager.prototype.createStructure = function() {
         addToLayerStructure(region.zIndex, {
           type: 'staticWidget',
           name: (widget.widgetName != '') ?
-            widget.widgetName : `[${widget.moduleName}]`,
+            `"${widget.widgetName}"` : widget.moduleName,
           duration: parseDuration(region.duration),
           icon: widget.getIcon(),
+          moduleName: widget.moduleName,
           id: widget.id,
           auxId: widget.regionId,
           selected: widget.selected,

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

@@ -777,6 +777,43 @@ PropertiesPanel.prototype.render = function(
             });
         }
 
+        // Add name field to advanced tab
+        forms.createFields(
+          [{
+            id: 'elementGroupName',
+            title: propertiesPanelTrans.elementGroupName,
+            helpText: propertiesPanelTrans.elementGroupNameHelpText,
+            customClass: 'element-group-name-input',
+            value: targetAux.elementGroupName,
+            type: 'text',
+            visibility: [],
+          }],
+          self.DOMObject.find('#advancedTab'),
+          targetAux.elementId,
+          null,
+          null,
+          'element-group-property',
+          true, // Prepend
+        );
+
+        // Trigger save on name change
+        self.DOMObject.find('[name="elementGroupName"]')
+          .on('change', function(ev, options) {
+            if (!options?.skipSave) {
+              // Update name for the group
+              targetAux.elementGroupName = $(ev.currentTarget).val();
+
+              // Save elements
+              target.saveElements().then((_res) => {
+                // Update bottom bar
+                app.bottombar.render(targetAux);
+
+                // Update layer manager
+                app.viewer.layerManager.render();
+              });
+            }
+          });
+
         showAppearanceTab();
       }
 
@@ -932,6 +969,37 @@ PropertiesPanel.prototype.render = function(
             'element-property',
           );
 
+          // Add name field to advanced tab
+          forms.createFields(
+            [{
+              id: 'elementName',
+              title: propertiesPanelTrans.elementName,
+              helpText: propertiesPanelTrans.elementNameHelpText,
+              customClass: 'element-name-input',
+              value: targetAux.elementName,
+              type: 'text',
+              visibility: [],
+            }],
+            self.DOMObject.find('#advancedTab'),
+            targetAux.elementId,
+            null,
+            null,
+            'element-property element-common-property',
+            true, // Prepend
+          );
+
+          // Trigger save on name change
+          self.DOMObject.find('[name="elementName"]')
+            .on('change', function(ev, options) {
+              if (!options?.skipSave) {
+                // Update name for the group
+                targetAux.elementName = $(ev.currentTarget).val();
+
+                // Update layer manager
+                app.viewer.layerManager.render();
+              }
+            });
+
           // Show the appearance tab
           // and select it if element isn't the only one on the widget
           // or it's a global element
@@ -1021,12 +1089,14 @@ PropertiesPanel.prototype.render = function(
               }
             },
             focus: function(_ev) {
-              // Skip slot inputs
+              // Skip slot and widget name inputs
               // those are saved with elements
               if (
                 $(_ev.currentTarget)
-                  .parents('.xibo-form-input.element-slot-input')
-                  .length === 0
+                  .parents(
+                    '.xibo-form-input.element-slot-input,' +
+                    '.xibo-form-input.element-name-input',
+                  ).length === 0
               ) {
                 self.toSave = true;
               }
@@ -1617,7 +1687,10 @@ PropertiesPanel.prototype.initFields = function(
       ':not(.snippet-selector):not(.element-slot-input)' +
       ':not(.ticker-tag-style-property)' +
       ':not(.canvas-widget-control-dropdown)';
-    const skipFormInput = ':not(.element-property):not([data-tag-style-input])';
+    const skipFormInput =
+      ':not(.element-property)' +
+      ':not(.element-group-property)' +
+      ':not([data-tag-style-input])';
     $(self.DOMObject).find('form').off()
       .on({
         'change inputChange xiboInputChange': function(_ev, options) {
@@ -2187,6 +2260,7 @@ PropertiesPanel.prototype.updatePositionForm = function(properties) {
  */
 PropertiesPanel.prototype.showWidgetInfo = function(widget) {
   const self = this;
+  const moduleName = widget.moduleName;
 
   // Show widget info for statics
   const $widgetInfo = $(templates.forms.widgetInfo({
@@ -2209,8 +2283,13 @@ PropertiesPanel.prototype.showWidgetInfo = function(widget) {
   // Also update on the widget info
   self.DOMObject.find('.form-control[name="name"]')
     .on('change', function(ev) {
+      // If name field is empty, use the module name
+      const name = ($(ev.currentTarget).val() != '') ?
+        $(ev.currentTarget).val() :
+        moduleName;
+
       // Update info
-      $widgetInfo.find('span').html($(ev.currentTarget).val());
+      $widgetInfo.find('span').html(name);
     });
 };
 

ui/src/editor-core/widget.js

@@ -834,6 +834,7 @@ Widget.prototype.saveElements = function(
 
     const elementObject = {
       id: element.id,
+      elementName: element.elementName,
       elementId: element.elementId,
       type: element.elementType,
       left: element.left,
@@ -849,6 +850,7 @@ Widget.prototype.saveElements = function(
     if (element.group) {
       elementObject.groupId = element.group.id;
       elementObject.groupProperties = {
+        elementGroupName: element.group.elementGroupName,
         top: element.group.top,
         left: element.group.left,
         width: element.group.width,

ui/src/style/layout-editor.scss

@@ -1699,6 +1699,10 @@ div#bg_media_name {
             justify-content: center;
         }
 
+        .label {
+            flex: 1;
+        }
+
         .name {
             white-space: nowrap;
             overflow: hidden;

ui/src/templates/bottombar-viewer.hbs

@@ -12,13 +12,13 @@
         {{else eq object.type "element"}}
             <div class="info d-inline">
                 <span class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> | <span title="{{trans.templateName}}">{{object.template.title}}</span> - <span title="{{trans.widgetName}}">{{#if widget.widgetName}}"{{widget.widgetName}}"{{/if}}</span>
+                    <strong>{{objectTypeName}}</strong> | <span title="{{trans.templateName}}">{{object.template.title}}</span>{{#if object.elementName}} - <span title="{{trans.elementName}}">"{{object.elementName}}"</span>{{/if}}
                 </span>
             </div>
         {{else eq object.type "element-group"}}
             <div class="info d-inline">
                 <span class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> - <span title="{{trans.widgetName}}">{{#if widget.widgetName}}"{{widget.widgetName}}"{{/if}}</span>
+                    <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <span title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</span>{{/if}}
                 </span>
             </div>
         {{else}}

ui/src/templates/layer-manager.hbs

@@ -24,9 +24,9 @@
                                     <div class="layer-manager-layer-item selectable element-group {{#if selected}}selected{{/if}} {{#if expanded}}expanded{{/if}}" data-item-id="{{id}}" data-widget-id="{{widgetId}}">
                                         <div class="layer">{{canvasLayerIdx}}</div>
                                         {{#if moduleIcon}}
-                                            <i class="module-icon {{#if moduleIcon}}{{moduleIcon}}{{else}}fas fa-object-group{{/if}}"></i>
+                                            <i title="{{templateName}}" class="module-icon {{#if moduleIcon}}{{moduleIcon}}{{else}}fas fa-object-group{{/if}}"></i>
                                         {{/if}}
-                                        <span class="label">{{../../../../trans.group}}</span><span class="name" title="{{../../../../trans.id}}">({{id}})</span>
+                                        {{#if name}}<span class="name" title="{{../../../../trans.group}}">"{{name}}"</span>{{else}}<span class="label">{{../../../../trans.group}}</span>{{/if}}
                                         <button class="btn btn-sm expand-group-button">
                                             <i class="fa fa-chevron-down hide-expanded" title="{{../../../../trans.expand}}"></i>
                                             <i class="fa fa-chevron-up show-expanded" title="{{../../../../trans.shrink}}"></i>
@@ -40,9 +40,13 @@
                                                 </div>
                                                 <div class="layer">{{groupLayerIdx}}</div>
                                                 {{#eq type 'element'}}
-                                                    <i class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
+                                                    <i title="{{templateName}}" class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
                                                 {{/eq}}
-                                                <span class="name" title="{{../../../../../../trans.name}}">{{name}}</span>
+                                                {{#if name}}
+                                                    <span class="name" title="{{../../../../../../trans.name}}">"{{name}}"</span>
+                                                {{else}}
+                                                    <span class="name" title="{{../../../../../../trans.template}}">{{templateName}}</span>
+                                                {{/if}}
                                                 {{#if duration}}
                                                     <span class="duration" title="{{../../../../../../trans.duration}}">{{duration}}</span>
                                                 {{/if}}
@@ -57,9 +61,13 @@
                                         {{#if moduleIcon}}
                                             <i class="module-icon {{#if moduleIcon}}{{moduleIcon}}{{else}}fas fa-object-group{{/if}}" {{#if hasGroup}}title="{{groupId}}"{{/if}}></i>
                                         {{/if}}
-                                        <i class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
+                                        <i title="{{templateName}}" class="element-icon {{#if icon}}{{icon}}{{else}}fas fa-atom{{/if}}"></i>
                                     {{/eq}}
-                                    <span class="name" title="{{../../../../trans.name}}">{{name}}</span>
+                                    {{#if name}}
+                                        <span class="name" title="{{../../../../../../trans.name}}">"{{name}}"</span>
+                                    {{else}}
+                                        <span class="name" title="{{../../../../../../trans.template}}">{{templateName}}</span>
+                                    {{/if}}
                                     {{#if duration}}
                                         <span class="duration" title="{{../../../../trans.duration}}">{{duration}}</span>
                                     {{/if}}
@@ -82,7 +90,7 @@
                         <i class="fa fa-window-close" title="{{../../trans.invalidRegionHelp}}"></i>
                     {{/eq}}
                     {{#eq type 'staticWidget'}}
-                        <i class="{{icon}}"></i>
+                        <i title="{{moduleName}}" class="{{icon}}"></i>
                     {{/eq}}
 
                     <span class="name" title="{{../../trans.name}}">

views/common.twig

@@ -636,7 +636,11 @@
                 },
                 widgetInfo: {
                     widgetName: "{{ "Widget Name" |trans }}",
-                }
+                },
+                elementName: "{{ "Element Name" |trans }}",
+                elementNameHelpText: "{{ "An optional name for this element" |trans }}",
+                elementGroupName: "{{ "Element Group Name" |trans }}",
+                elementGroupNameHelpText: "{{ "An optional name for this group of elements" |trans }}",
             };
 
             var toolbarTrans = {
@@ -787,6 +791,7 @@
                 group: "{{ "Group" |trans }}",
                 inGroup: "{{ "In %groupId%" |trans }}",
                 name: "{{ "Name" |trans }}",
+                template: "{{ "Template" |trans }}",
                 duration: "{{ "Duration" |trans }}",
                 emptyLayout: "{{ "Empty layout" |trans }}",
                 expand: "{{ "Expand" |trans }}",

views/layout-designer-page.twig

@@ -136,6 +136,8 @@
                     nextWidget: "{% trans "Next widget" %}",
                     previousWidget: "{% trans "Previous widget" %}",
                     widgetName: "{% trans "Widget Name" %}",
+                    elementName: "{% trans "Element Name" %}",
+                    elementGroupName: "{% trans "Element Group Name" %}",
                     regionName: "{% trans "Region Name" %}",
                     templateName: "{% trans "Template" %}",
                     objectType: {