From 2bdeefa343678a6fb14c7fec0bc80b709ccd5e6f Mon Sep 17 00:00:00 2001
From: maurofmferrao <maurofmferrao@gmail.com>
Date: Fri, 1 Mar 2024 16:33:37 +0000
Subject: [PATCH] Property Panel doesn't move target when changing between
 Elements relates to xibosignage/xibo#3352

---
 ui/src/editor-core/properties-panel.js | 32 ++++++++++----
 ui/src/layout-editor/main.js           | 61 ++++++++++++++++++--------
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/ui/src/editor-core/properties-panel.js b/ui/src/editor-core/properties-panel.js
index b3ccc50ebe..4983e1079b 100644
--- a/ui/src/editor-core/properties-panel.js
+++ b/ui/src/editor-core/properties-panel.js
@@ -63,6 +63,7 @@ const PropertiesPanel = function(parent, container) {
   this.actionForm = {};
 
   this.toSave = false;
+  this.toSaveElementCallback = null;
 };
 
 /**
@@ -388,6 +389,9 @@ PropertiesPanel.prototype.saveElement = function(
     }
   }
 
+  // Mark to save as false
+  this.toSaveElementCallback = null;
+
   // Save elements to the widget
   return parentWidget.saveElements().then((_res) => {
     // Update element position
@@ -1031,7 +1035,7 @@ PropertiesPanel.prototype.render = function(
           );
 
           // Save element
-          const saveElement = function(target) {
+          const saveElementProperty = function(target) {
             const $target = $(target);
             let containerChanged = false;
             // If the property is common, save it to the element
@@ -1073,18 +1077,26 @@ PropertiesPanel.prototype.render = function(
             }
 
             // Save the element
-            self.saveElement(
-              targetAux,
-              self.DOMObject.find(
-                '[name].element-property:not(.element-common-property)',
-              ),
-              containerChanged,
+            // only if we have form properties
+            const formProperties = self.DOMObject.find(
+              '[name].element-property:not(.element-common-property)',
             );
+            if (formProperties.length > 0) {
+              self.saveElement(
+                targetAux,
+                self.DOMObject.find(
+                  '[name].element-property:not(.element-common-property)',
+                ),
+                containerChanged,
+              );
+            }
           };
 
           const saveDebounced = _.wrap(
             _.memoize(
-              () => _.debounce(saveElement.bind(self), 250), _.property('id'),
+              () => _.debounce(
+                saveElementProperty.bind(self), 250,
+              ), _.property('id'),
             ),
             (getMemoizedFunc, obj) => getMemoizedFunc(obj)(obj),
           );
@@ -1111,7 +1123,9 @@ PropertiesPanel.prototype.render = function(
                     '.xibo-form-input.element-name-input',
                   ).length === 0
               ) {
-                self.toSave = true;
+                self.toSaveElementCallback = function() {
+                  saveElementProperty(_ev.currentTarget);
+                };
               }
             },
           });
diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
index d5d5c8a44f..8cca93e34c 100644
--- a/ui/src/layout-editor/main.js
+++ b/ui/src/layout-editor/main.js
@@ -527,26 +527,49 @@ lD.selectObject =
         (
           oldSelectedId != newSelectedId ||
           oldSelectedType != newSelectedType
-        ) && this.propertiesPanel.toSave
+        ) && (
+          this.propertiesPanel.toSave ||
+          this.propertiesPanel.toSaveElementCallback != null
+        )
       ) {
-        // Set flag back to false
-        this.propertiesPanel.toSave = false;
-
-        // Save previous element
-        this.propertiesPanel.save({
-          target: this.selectedObject, // Save previous object
-          callbackNoWait: function() {
-            // Select object again, with the same params
-            lD.selectObject({
-              target: target,
-              forceSelect: forceSelect,
-              clickPosition: clickPosition,
-              refreshEditor: refreshEditor,
-              reloadViewer: reloadViewer,
-              reloadPropertiesPanel: reloadPropertiesPanel,
-            });
-          },
-        });
+        // Select previous object
+        const selectPrevious = function() {
+          // Select object again, with the same params
+          lD.selectObject({
+            target: target,
+            forceSelect: forceSelect,
+            clickPosition: clickPosition,
+            refreshEditor: refreshEditor,
+            reloadViewer: reloadViewer,
+            reloadPropertiesPanel: reloadPropertiesPanel,
+          });
+        };
+
+        // Save elements
+        if (this.propertiesPanel.toSaveElementCallback != null) {
+          // Set flag back to false
+          this.propertiesPanel.toSaveElement = false;
+
+          // Run callback to save element property
+          this.propertiesPanel.toSaveElementCallback();
+
+          // Set callback back to null
+          this.propertiesPanel.toSaveElementCallback = null;
+
+          // Select object again
+          selectPrevious();
+        } else if (this.propertiesPanel.toSave) {
+          // Save normal form fields
+
+          // Set flag back to false
+          this.propertiesPanel.toSave = false;
+
+          // Save previous object
+          this.propertiesPanel.save({
+            target: this.selectedObject, // Save previous object
+            callbackNoWait: selectPrevious,
+          });
+        }
 
         // Prevent select to continue
         return;