Layout Editor: Avoid too many viewer refreshes (#2220)

* Layout Editor: Avoid too many viewer refreshes
relates to xibosignageltd/xibo-private#547

* Fix to delete canvas widget
relates to xibosignageltd/xibo-private#547

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

@@ -294,7 +294,7 @@ LayerManager.prototype.render = function(reset) {
                 $viewerObject;
 
               // Select in viewer
-              lD.viewer.selectElement($auxTarget);
+              lD.viewer.selectObject($auxTarget);
 
               // Mark object with selected from manager class
               $auxTarget.addClass('selected-from-layer-manager');

ui/src/editor-core/widget.js

@@ -762,13 +762,32 @@ Widget.prototype.saveElements = function(
       // Remove region
       app.layout.deleteObject('region', this.parent.regionId)
         .then(() => {
-          reloadLayout(true);
+          // Remove object from structure
+          app.layout.removeFromStructure(
+            'region',
+            this.parent.regionId,
+            'canvas',
+          );
+
+          // Refresh layer manager
+          app.viewer.layerManager.render();
+
+          // Remove canvas from viewer
+          app.viewer.DOMObject.find('.designer-region-canvas').remove();
         });
     } else if (removeCurrentWidget) {
       // Remove widget
       app.layout.deleteObject('widget', this.widgetId)
         .then(() => {
-          reloadLayout(true);
+          // Remove object from structure
+          app.layout.removeFromStructure(
+            'widget',
+            this.widgetId,
+            'canvas',
+          );
+
+          // Refresh layer manager
+          app.viewer.layerManager.render();
         });
     }
 
@@ -1083,7 +1102,7 @@ Widget.prototype.removeElement = function(
     lD.selectObject({
       reloadViewer: false,
     });
-    lD.viewer.selectElement(null, false, false);
+    lD.viewer.selectObject(null, false, false);
   } else if (lD.selectedObject.type != 'layout' && save) {
     // If we have a selected object other than layout, reload properties panel
     lD.propertiesPanel.render(lD.selectedObject);

ui/src/layout-editor/layout.js

@@ -293,6 +293,31 @@ Layout.prototype.createDataStructure = function(data) {
   this.durationFormatted = lD.common.timeFormat(layoutDuration);
 };
 
+/**
+ * Remove object from data structure
+ * @param {string} objectType - Object type
+ * @param {string} objectId - Object ID
+ * @param {string} auxId - Object sub type or parent region (if widget)
+ */
+Layout.prototype.removeFromStructure = function(objectType, objectId, auxId) {
+  const self = this;
+
+  if (objectType === 'region' && auxId === 'canvas') {
+    // Set canvas as empty object
+    self.canvas = {};
+  } else if (objectType === 'region') {
+    delete self.regions[objectId];
+  } else if (objectType === 'widget' && auxId === 'canvas') {
+    delete self.canvas.widgets[
+      'widget' + '_' + self.canvas.regionId + '_' + objectId
+    ];
+  } else if (objectType === 'widget') {
+    delete self.regions[auxId].widgets[
+      'widget' + '_' + auxId + '_' + objectId
+    ];
+  }
+};
+
 /**
  * Calculate timeline values ( duration, loops )
  * based on widget and region duration

ui/src/layout-editor/main.js

@@ -618,13 +618,15 @@ lD.selectObject =
  * Refresh designer
  * @param {boolean} [reloadToolbar=false] - Update toolbar
  * @param {boolean} [reloadViewer=false] - Reload viewer
+ * @param {object} [reloadViewerTarget={}] - Reload viewer target
  * @param {boolean} [reloadPropertiesPanel=false] - Reload properties panel
  * @param {boolean} [reloadLayerManager=true] - Reload layer manager
  */
 lD.refreshEditor = function(
   {
     reloadToolbar = false,
     reloadViewer = false,
+    reloadViewerTarget = {},
     reloadPropertiesPanel = false,
     reloadLayerManager = true,
   } = {},
@@ -642,7 +644,7 @@ lD.refreshEditor = function(
 
   // Properties panel and viewer
   (reloadPropertiesPanel) && this.propertiesPanel.render(this.selectedObject);
-  (reloadViewer) && this.viewer.render(reloadViewer);
+  (reloadViewer) && this.viewer.render(reloadViewer, reloadViewerTarget);
   (reloadLayerManager) && this.viewer.layerManager.render();
 };
 
@@ -685,18 +687,26 @@ lD.reloadData = function(
       // get Layout folder id
       lD.folderId = lD.layout.folderId;
 
-      // Select the same object ( that will refresh the layout too )
+      // Select the same object
       const selectObjectId = (lD.selectedObject.type === 'element') ?
         lD.selectedObject.elementId :
         lD.selectedObject.id;
 
+      const $selectedDOMTarget = $('#' + selectObjectId);
+
       lD.selectObject({
-        target: $('#' + selectObjectId),
+        target: $selectedDOMTarget,
         forceSelect: true,
         refreshEditor: false, // Don't refresh the editor here
         reloadPropertiesPanel: false,
       });
 
+      // Check if the selected object is a temporary one
+      const targetToRender =
+        $selectedDOMTarget.hasClass('viewer-temporary-object') ?
+          lD.selectedObject :
+          {};
+
       // Reload the form helper connection
       formHelpers.setup(lD, lD.layout);
 
@@ -722,6 +732,7 @@ lD.reloadData = function(
       refreshEditor && lD.refreshEditor({
         reloadToolbar: reloadToolbar,
         reloadViewer: reloadViewer,
+        reloadViewerTarget: targetToRender,
         reloadPropertiesPanel: reloadPropertiesPanel,
       });
 
@@ -1219,6 +1230,13 @@ lD.deleteObject = function(
   } else {
     lD.common.showLoadingScreen('deleteObject');
 
+    // Hide in viewer
+    lD.viewer.toggleObject(
+      objectType,
+      objectId,
+      true,
+    );
+
     lD.layout.deleteObject(
       objectType,
       objectId,
@@ -1253,7 +1271,7 @@ lD.deleteObject = function(
           reloadViewer: false,
           reloadPropertiesPanel: false,
         });
-        lD.viewer.selectElement();
+        lD.viewer.selectObject();
 
         // Render properties panel with action tab
         lD.propertiesPanel.render(
@@ -1262,10 +1280,16 @@ lD.deleteObject = function(
           true, // Open action tab
         );
       } else {
+        // Remove widget from viewer
+        lD.viewer.removeObject(
+          objectType,
+          objectId,
+        );
+
         // Reload data ( if not a drawer widget)
         lD.reloadData(lD.layout,
           {
-            refreshEditor: true,
+            refreshEditor: false,
           });
       }
 
@@ -1276,6 +1300,13 @@ lD.deleteObject = function(
       // Show error returned or custom message to the user
       let errorMessage = '';
 
+      // Show back in viewer
+      lD.viewer.toggleObject(
+        objectType,
+        objectId,
+        false,
+      );
+
       if (typeof error == 'string') {
         errorMessage = error;
       } else {
@@ -2723,7 +2754,7 @@ lD.openPlaylistEditor = function(playlistId, region) {
     .removeClass('hidden');
 
   // Deselect viewer element
-  lD.viewer.selectElement();
+  lD.viewer.selectObject();
 
   // Show playlist editor
   $playlistEditorPanel.removeClass('hidden');
@@ -3074,7 +3105,7 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
       lD.selectObject({
         target: lD.viewer.DOMObject.find('#' + layoutObject.id),
       });
-      lD.viewer.selectElement($viewerRegion);
+      lD.viewer.selectObject($viewerRegion);
     } else if (target.data('action') == 'Ungroup') {
       // Get widget
       const elementsWidget =
@@ -3390,7 +3421,7 @@ lD.openGroupContextMenu = function(objs, position = {x: 0, y: 0}) {
 
             if (deletedIndex == $regionsToBeDeleted.length) {
               // Stop deleting and deselect all elements
-              lD.viewer.selectElement();
+              lD.viewer.selectObject();
 
               // Hide loader
               lD.common.hideLoadingScreen('deleteMultiObject');
@@ -3410,7 +3441,7 @@ lD.openGroupContextMenu = function(objs, position = {x: 0, y: 0}) {
         deleteNext();
       } else {
         // If we're not deleting any region, deselect elements now
-        lD.viewer.selectElement();
+        lD.viewer.selectObject();
       }
     } else if (target.data('action') == 'Group') {
       // Group elements
@@ -4766,7 +4797,7 @@ lD.editDrawerWidget = function(actionData, actionEditMode = true) {
   });
 
   // Select element in viewer
-  lD.viewer.selectElement($target);
+  lD.viewer.selectObject($target);
 
   // 4. Open property panel with drawer widget or same object
   lD.propertiesPanel.render(