From 26c161a8719b38ec282772dd29876c4aaf2c55e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Tue, 10 Oct 2023 10:39:28 +0100
Subject: [PATCH] Layer Control: Scroll position to selected element (#2143)

relates to xibosignageltd/xibo-private#518
---
 ui/src/editor-core/layer-manager.js | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/ui/src/editor-core/layer-manager.js b/ui/src/editor-core/layer-manager.js
index 2d1845e288..ee2a30a41e 100644
--- a/ui/src/editor-core/layer-manager.js
+++ b/ui/src/editor-core/layer-manager.js
@@ -342,7 +342,48 @@ LayerManager.prototype.render = function(reset) {
 
       this.firstRender = false;
     }
+
+    // Scroll to selected
+    self.scrollToSelected();
   });
 };
 
+/**
+ * Scroll to selected item
+ */
+LayerManager.prototype.scrollToSelected = function() {
+  const self = this;
+  const $selectedItem = self.DOMObject.find('.selected');
+
+  // Render to selected
+  if ($selectedItem.length > 0) {
+    // Check if the element is outside the render view
+    const $layerManagerContainer =
+      self.DOMObject.find('.layer-manager-body');
+    const headerHeight = $('.layer-manager-header').height();
+    const viewHeight = $layerManagerContainer.height();
+
+    const elemHeight = $selectedItem.height();
+    const elemTop = $selectedItem.position().top - headerHeight;
+    const elemBottom = elemTop + $selectedItem.height();
+
+    const isVisible =
+      (elemTop + elemHeight <= viewHeight) &&
+      (elemBottom >= elemHeight);
+
+    if (!isVisible) {
+      const scrollAdjust =
+        (elemTop + elemHeight > viewHeight) ?
+          ((elemTop + elemHeight) - viewHeight) :
+          (elemBottom - elemHeight);
+
+      // Scroll to element ( using deltas )
+      const viewTop = $layerManagerContainer.scrollTop();
+      $layerManagerContainer.scrollTop(
+        viewTop + scrollAdjust,
+      );
+    }
+  }
+};
+
 module.exports = LayerManager;