Take viewport intersection into account when sorting changesets

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index 3f3514c538d3c15e2dedea18377e344085ea90e3..eafa2f71502bdeb63612a4488ae032bdfb753aec 100644 (file)
--- a/app/assets/javascripts/index/history-changesets-layer.js
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -41,8 +41,6 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
   },
 
   updateChangesetShapes: function (map) {
-    this.clearLayers();
-
     for (const changeset of this._changesets.values()) {
       const bottomLeft = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
             topRight = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
@@ -64,20 +62,8 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
                                         map.unproject(topRight));
     }
 
-    const changesetEntries = [...this._changesets];
-    changesetEntries.sort(([, a], [, b]) => {
-      return b.bounds.getSize() - a.bounds.getSize();
-    });
-    this._changesets = new Map(changesetEntries);
-
     this.updateChangesetLocations(map);
-
-    for (const changeset of this._changesets.values()) {
-      delete changeset.isHighlighted;
-      const rect = L.rectangle(changeset.bounds, this._getChangesetStyle(changeset));
-      rect.id = changeset.id;
-      rect.addTo(this);
-    }
+    this.reorderChangesets();
   },
 
   updateChangesetLocations: function (map) {
@@ -98,6 +84,26 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     }
   },
 
+  reorderChangesets: function () {
+    const changesetEntries = [...this._changesets];
+    changesetEntries.sort(([, a], [, b]) => {
+      const aInViewport = !a.sidebarRelativePosition;
+      const bInViewport = !b.sidebarRelativePosition;
+      if (aInViewport !== bInViewport) return aInViewport - bInViewport;
+      return b.bounds.getSize() - a.bounds.getSize();
+    });
+    this._changesets = new Map(changesetEntries);
+
+    this.clearLayers();
+
+    for (const changeset of this._changesets.values()) {
+      delete changeset.isHighlighted;
+      const rect = L.rectangle(changeset.bounds, this._getChangesetStyle(changeset));
+      rect.id = changeset.id;
+      rect.addTo(this);
+    }
+  },
+
   toggleChangesetHighlight: function (id, state) {
     const changeset = this._changesets.get(id);
     if (!changeset) return;

diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index afa46c460530badae9c0027c1c18ce6909090865..74b9a4e248b53288f71beeca225936659a45f934 100644 (file)
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -68,6 +68,8 @@ OSM.History = function (map) {
         }
       }
 
+      changesetsLayer.reorderChangesets();
+
       if (keepInitialLocation) {
         keepInitialLocation = false;
         return;