From 33bb925eeb3136c5e8c23a2ac97db3ac58d9bff4 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Tue, 29 Apr 2025 16:56:58 +0300
Subject: [PATCH] Split interactive history layer into areas and borders above
 areas

The goal is to have the following z-order:
1. areas of changeset bboxes outside the sidebar viewport
2. areas of changeset bboxes inside the sidebar viewport
3. borders of changeset bboxes outside the sidebar viewport
4. borders of changeset bboxes inside the sidebar viewport
---
 .../index/history-changesets-layer.js         | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index 51faffbf3..65e5c2706 100644
--- a/app/assets/javascripts/index/history-changesets-layer.js
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -9,11 +9,19 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     }
   },
 
-  _getInteractiveStyle: function (changeset) {
+  _getAreaStyle: function (changeset) {
+    return {
+      weight: 0,
+      fillOpacity: 0,
+      className: this._getSidebarRelativeClassName(changeset)
+    };
+  },
+
+  _getBorderStyle: function (changeset) {
     return {
       weight: 2,
       color: "var(--changeset-border-color)",
-      fillOpacity: 0,
+      fill: false,
       className: this._getSidebarRelativeClassName(changeset)
     };
   },
@@ -73,7 +81,8 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
         changesetSouthWest.lng -= shiftInWorldCircumferences * 360;
         changesetNorthEast.lng -= shiftInWorldCircumferences * 360;
 
-        this._interactiveLayer.getLayer(changeset.id)?.setBounds(changeset.bounds);
+        this._areaLayer.getLayer(changeset.id)?.setBounds(changeset.bounds);
+        this._borderLayer.getLayer(changeset.id)?.setBounds(changeset.bounds);
         this._highlightLayer.getLayer(changeset.id)?.setBounds(changeset.bounds);
       }
     }
@@ -89,13 +98,20 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     });
     this._changesets = new Map(changesetEntries);
 
-    this._interactiveLayer.clearLayers();
+    this._areaLayer.clearLayers();
+    this._borderLayer.clearLayers();
     this._highlightLayer.clearLayers();
 
     for (const changeset of this._changesets.values()) {
-      const rect = L.rectangle(changeset.bounds, this._getInteractiveStyle(changeset));
+      const rect = L.rectangle(changeset.bounds, this._getAreaStyle(changeset));
+      rect.id = changeset.id;
+      rect.addTo(this._areaLayer);
+    }
+
+    for (const changeset of this._changesets.values()) {
+      const rect = L.rectangle(changeset.bounds, this._getBorderStyle(changeset));
       rect.id = changeset.id;
-      rect.addTo(this._interactiveLayer);
+      rect.addTo(this._borderLayer);
     }
   },
 
@@ -124,9 +140,11 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
 OSM.HistoryChangesetsLayer.addInitHook(function () {
   this._changesets = new Map;
 
-  this._interactiveLayer = L.featureGroup();
-  this._highlightLayer = L.featureGroup();
+  this._areaLayer = L.featureGroup().addTo(this);
+  this._borderLayer = L.featureGroup().addTo(this);
+  this._highlightLayer = L.featureGroup().addTo(this);
 
-  this._interactiveLayer.getLayerId = this._highlightLayer.getLayerId = (layer) => layer.id;
-  this.addLayer(this._interactiveLayer).addLayer(this._highlightLayer);
+  this._areaLayer.getLayerId = (layer) => layer.id;
+  this._borderLayer.getLayerId = (layer) => layer.id;
+  this._highlightLayer.getLayerId = (layer) => layer.id;
 });
-- 
2.39.5