Refactor brushing routines

breviloquia-italica · Jan 24, 2024 · 0b17f42 · 0b17f42
1 parent 203cb88
commit 0b17f42
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 49 deletions.
diff --git a/src/controllers/lexicon_controller.ts b/src/controllers/lexicon_controller.ts
@@ -16,12 +16,7 @@ export default class extends Controller {
   facet: DatasetRow[] = [];
 
   async connect() {
-    this.selectTarget.addEventListener("change", () => {
-      const wordlist = Array.from(this.selectTarget.selectedOptions).map(
-        (option) => option.value,
-      );
-      this.changeWordFilter(wordlist);
-    });
+    this.initBrush();
   }
 
   disconnect() {}
@@ -65,6 +60,23 @@ export default class extends Controller {
     this.redraw();
   }
 
+  //=[ BRUSHING ]===============================================================
+
+  // NOTE: technically not brushing, but whatever.
+
+  initBrush() {
+    this.selectTarget.addEventListener(
+      "change",
+      this.handleBrushEvent.bind(this),
+    );
+  }
+
+  handleBrushEvent() {
+    const selectedOptions = Array.from(this.selectTarget.selectedOptions);
+    const wordlist = selectedOptions.map((option) => option.value);
+    this.changeWordFilter(wordlist);
+  }
+
   //=[ FILTERING ]==============================================================
 
   landFilter: LandFilter = () => true;

diff --git a/src/controllers/map_controller.ts b/src/controllers/map_controller.ts
@@ -33,18 +33,19 @@ export default class extends Controller {
   projection!: d3.GeoProjection;
   hexbin!: Hexbin<[number, number]>;
   svg!: any;
+  extent!: [[number, number], [number, number]];
 
   facet: FacetRow[] = [];
 
   async connect() {
-    const extent: [[number, number], [number, number]] = [
+    this.extent = [
       [0, 0],
       [this.containerTarget.clientWidth, this.containerTarget.clientHeight],
     ];
 
     const bb = (await d3.json<d3.ExtendedFeatureCollection>(MAP_URL.regions))!;
     this.projection = d3.geoEqualEarth();
-    this.projection.fitExtent(extent, bb);
+    this.projection.fitExtent(this.extent, bb);
     const geoGenerator = d3.geoPath().projection(this.projection);
     this.svg = d3
       .select(this.containerTarget)
@@ -61,29 +62,9 @@ export default class extends Controller {
       .attr("d", geoGenerator);
 
     this.svg.append("g").attr("id", "hexbins");
-    this.hexbin = hexbin().radius(6).extent(extent);
+    this.hexbin = hexbin().radius(6).extent(this.extent);
 
-    const brush = d3
-      .brush()
-      .extent(extent)
-      .on("start brush end", this.handleBrush.bind(this));
-
-    this.svg
-      .append("g")
-      .attr("id", "mapBrush")
-      .call(brush)
-      .call(brush.move, null);
-  }
-
-  handleBrush(event: d3.D3BrushEvent<unknown>) {
-    const landarea: [[number, number], [number, number]] | null =
-      event.selection
-        ? [
-            this.projection.invert!(event.selection[0] as [number, number])!,
-            this.projection.invert!(event.selection[1] as [number, number])!,
-          ]
-        : null;
-    this.changeLandFilter(landarea);
+    this.initBrush();
   }
 
   disconnect() {}
@@ -146,6 +127,32 @@ export default class extends Controller {
     this.redraw();
   }
 
+  //=[ BRUSHING ]===============================================================
+
+  initBrush() {
+    const brush = d3
+      .brush()
+      .extent(this.extent)
+      .on("start brush end", this.handleBrushEvent.bind(this));
+
+    this.svg
+      .append("g")
+      .attr("id", "mapBrush")
+      .call(brush)
+      .call(brush.move, null);
+  }
+
+  handleBrushEvent(event: d3.D3BrushEvent<unknown>) {
+    const landarea: [[number, number], [number, number]] | null =
+      event.selection
+        ? [
+            this.projection.invert!(event.selection[0] as [number, number])!,
+            this.projection.invert!(event.selection[1] as [number, number])!,
+          ]
+        : null;
+    this.changeLandFilter(landarea);
+  }
+
   //=[ FILTERING ]==============================================================
 
   landFilter: LandFilter = () => true;

diff --git a/src/controllers/timeline_controller.ts b/src/controllers/timeline_controller.ts
@@ -98,25 +98,6 @@ export default class extends Controller {
     }));
   }
 
-  initBrush() {
-    const brush = d3
-      .brushX()
-      .extent(this.extent)
-      .on("start brush end", this.handleBrushEvent.bind(this));
-
-    this.svg.append("g").attr("id", "brush").call(brush).call(brush.move, null);
-  }
-
-  handleBrushEvent(event: d3.D3BrushEvent<unknown>) {
-    const timespan: [Date, Date] | null = event.selection
-      ? [
-          this.xScale.invert(event.selection[0] as d3.NumberValue),
-          this.xScale.invert(event.selection[1] as d3.NumberValue),
-        ]
-      : null;
-    this.changeTimeFilter(timespan);
-  }
-
   redraw() {
     const histogramData = this.buildHistogram();
 
@@ -151,6 +132,27 @@ export default class extends Controller {
     this.firstRedraw();
   }
 
+  //=[ BRUSHING ]===============================================================
+
+  initBrush() {
+    const brush = d3
+      .brushX()
+      .extent(this.extent)
+      .on("start brush end", this.handleBrushEvent.bind(this));
+
+    this.svg.append("g").attr("id", "brush").call(brush).call(brush.move, null);
+  }
+
+  handleBrushEvent(event: d3.D3BrushEvent<unknown>) {
+    const timespan: [Date, Date] | null = event.selection
+      ? [
+          this.xScale.invert(event.selection[0] as d3.NumberValue),
+          this.xScale.invert(event.selection[1] as d3.NumberValue),
+        ]
+      : null;
+    this.changeTimeFilter(timespan);
+  }
+
   //=[ FILTERING ]==============================================================
 
   landFilter: LandFilter = () => true;