Follow the selection of the wagon on the main page

Author: sweiland-openrails

Source/RunActivity/Viewer3D/Cameras.cs

@@ -1079,8 +1079,12 @@ protected override void OnActivate(bool sameCamera)
                     }
                     else if (isVisibleTrainCarViewerOrWebpage && carPosition >= 0)
                     {
-                        SetCameraCar(trainCars[carPosition]);
-                        oldCarPosition = carPosition;
+                        if (carPosition < trainCars.Count)
+                        {
+                            // sometimes when decoupling cars the carPosition is out-of-range
+                            SetCameraCar(trainCars[carPosition]);
+                            oldCarPosition = carPosition;
+                        }
                     }
                     else
                         SetCameraCar(GetCameraCars().First());

Source/RunActivity/Viewer3D/WebServices/TrainCarOperationsWebpage.cs

@@ -428,6 +428,13 @@ private void fillStatusArrowLeft(int carPosition)
         {
             string filename;
 
+            if (Viewer.TrainCarOperationsWindow.CarIdClicked) {
+                // on the train operations window wagon has been clicked
+                // wagon on webpage gets selected also
+                TrainCarSelected = true;
+                TrainCarSelectedPosition = Viewer.TrainCarOperationsWindow.SelectedCarPosition;
+            }
+
             if (TrainCarSelected && (carPosition == TrainCarSelectedPosition))
             {
                 filename = "TrainOperationsArrowRight32.png";

Source/RunActivity/Viewer3D/WebServices/Web/TrainCarOperations/index.js

@@ -130,6 +130,12 @@ function handleMessage(json) {
         let id = "button:" + row + ":" + column;
         let button = document.getElementById(id);
         button.innerHTML = "<img src='" + json.Operations[i].Filename + "' />";
+        if (json.Operations[i].Filename.includes("Arrow")) {
+            if (!isInView(button)) {
+                console.log("scrollTo");
+                button.scrollIntoView({ behavior: "smooth" });
+            }
+        }
         button.disabled = !json.Operations[i].Enabled;
         button.style.cursor = json.Operations[i].Enabled ? "pointer" : "";
     }
@@ -157,6 +163,27 @@ function sleep(time) {
     return new Promise((resolve) => setTimeout(resolve, time));
 }
 
+function isInView(el) {
+
+    var rect = el.getBoundingClientRect(),
+        vWidth = window.innerWidth || document.documentElement.clientWidth,
+        vHeight = window.innerHeight || document.documentElement.clientHeight,
+        efp = function (x, y) { return document.elementFromPoint(x, y) };
+
+    // Return false if it's not in the viewport
+    if (rect.right < 0 || rect.bottom < 0
+        || rect.left > vWidth || rect.top > vHeight)
+        return false;
+
+    // Return true if any of its four corners are visible
+    return (
+        el.contains(efp(rect.left, rect.top))
+        || el.contains(efp(rect.right, rect.top))
+        || el.contains(efp(rect.right, rect.bottom))
+        || el.contains(efp(rect.left, rect.bottom))
+    );
+}
+
 //
 // main
 //