Add history changesets layer module

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
new file mode 100644 (file)
index 0000000..dc04577
--- /dev/null
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -0,0 +1,56 @@
+OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
+  _changesets: [],
+
+  updateChangesets: function (map, changesets) {
+    this._changesets = changesets;
+    this.updateChangesetShapes(map);
+  },
+
+  updateChangesetShapes: function (map) {
+    this.clearLayers();
+
+    for (const changeset of this._changesets) {
+      const bottomLeft = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
+            topRight = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
+            width = topRight.x - bottomLeft.x,
+            height = bottomLeft.y - topRight.y,
+            minSize = 20; // Min width/height of changeset in pixels
+
+      if (width < minSize) {
+        bottomLeft.x -= ((minSize - width) / 2);
+        topRight.x += ((minSize - width) / 2);
+      }
+
+      if (height < minSize) {
+        bottomLeft.y += ((minSize - height) / 2);
+        topRight.y -= ((minSize - height) / 2);
+      }
+
+      changeset.bounds = L.latLngBounds(map.unproject(bottomLeft),
+                                        map.unproject(topRight));
+    }
+
+    this._changesets.sort(function (a, b) {
+      return b.bounds.getSize() - a.bounds.getSize();
+    });
+
+    for (const changeset of this._changesets) {
+      const rect = L.rectangle(changeset.bounds,
+                               { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
+      rect.id = changeset.id;
+      rect.addTo(this);
+    }
+  },
+
+  highlightChangeset: function (id) {
+    this.getLayer(id)?.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
+  },
+
+  unHighlightChangeset: function (id) {
+    this.getLayer(id)?.setStyle({ fillOpacity: 0, color: "#FF9500", weight: 2 });
+  },
+
+  getLayerId: function (layer) {
+    return layer.id;
+  }
+});

diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index c35aaf2887c13c1390e4b5ddcbeaf07542310628..9272222cb1094868a2eed5a6aa05a22f9ae34fea 100644 (file)
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -1,4 +1,5 @@
 //= require jquery-simulate/jquery.simulate
+//= require ./history-changesets-layer
 
 OSM.History = function (map) {
   const page = {};
@@ -12,7 +13,7 @@ OSM.History = function (map) {
       unHighlightChangeset($(this).data("changeset").id);
     });
 
-  const group = L.featureGroup()
+  const group = new OSM.HistoryChangesetsLayer()
     .on("mouseover", function (e) {
       highlightChangeset(e.layer.id);
     })
@@ -23,10 +24,6 @@ OSM.History = function (map) {
       clickChangeset(e.layer.id, e.originalEvent);
     });
 
-  group.getLayerId = function (layer) {
-    return layer.id;
-  };
-
   let changesetIntersectionObserver;
 
   function disableChangesetIntersectionObserver() {
@@ -87,14 +84,12 @@ OSM.History = function (map) {
   }
 
   function highlightChangeset(id) {
-    const layer = group.getLayer(id);
-    if (layer) layer.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
+    group.highlightChangeset(id);
     $("#changeset_" + id).addClass("selected");
   }
 
   function unHighlightChangeset(id) {
-    const layer = group.getLayer(id);
-    if (layer) layer.setStyle({ fillOpacity: 0, color: "#FF9500", weight: 2 });
+    group.unHighlightChangeset(id);
     $("#changeset_" + id).removeClass("selected");
   }
 
@@ -242,52 +237,18 @@ OSM.History = function (map) {
     loadFirstChangesets();
   }
 
-  let changesets = [];
-
   function updateBounds() {
-    group.clearLayers();
-
-    for (const changeset of changesets) {
-      const bottomLeft = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
-            topRight = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
-            width = topRight.x - bottomLeft.x,
-            height = bottomLeft.y - topRight.y,
-            minSize = 20; // Min width/height of changeset in pixels
-
-      if (width < minSize) {
-        bottomLeft.x -= ((minSize - width) / 2);
-        topRight.x += ((minSize - width) / 2);
-      }
-
-      if (height < minSize) {
-        bottomLeft.y += ((minSize - height) / 2);
-        topRight.y -= ((minSize - height) / 2);
-      }
-
-      changeset.bounds = L.latLngBounds(map.unproject(bottomLeft),
-                                        map.unproject(topRight));
-    }
-
-    changesets.sort(function (a, b) {
-      return b.bounds.getSize() - a.bounds.getSize();
-    });
-
-    for (const changeset of changesets) {
-      const rect = L.rectangle(changeset.bounds,
-                               { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
-      rect.id = changeset.id;
-      rect.addTo(group);
-    }
+    group.updateChangesetShapes(map);
   }
 
   function updateMap() {
-    changesets = $("[data-changeset]").map(function (index, element) {
+    const changesets = $("[data-changeset]").map(function (index, element) {
       return $(element).data("changeset");
     }).get().filter(function (changeset) {
       return changeset.bbox;
     });
 
-    updateBounds();
+    group.updateChangesets(map, changesets);
 
     if (location.pathname !== "/history") {
       const bounds = group.getBounds();