Refactor

Author: kishikawakatsumi

Public/index.html

@@ -109,7 +109,7 @@
             <div id="statistics-tab-pane" class="tab-pane" role="tabpanel" aria-labelledby="statistics-tab"
               tabindex="0">
               <div id="statistics-container" class="" role="document">
-                <table id="statistics" class="table table-borderless table-striped table-hover table-sm">
+                <table class="table table-borderless table-striped table-hover table-sm">
                   <thead>
                     <tr>
                       <th scope="col" style="width: 60%;">Syntax</th>

Public/js/app.js

@@ -2,16 +2,14 @@
 
 import { Tooltip } from "bootstrap";
 import { TreeView } from "./tree_view.js";
+import { StatisticsView } from "./statistics.js";
 import { Popover } from "./popover.js";
 import { WebSocketClient } from "./websocket.js";
 import { debounce } from "./debounce.js";
 
 import "../css/editor.css";
 import "../css/syntax.css";
 
-import DataTable from "datatables.net";
-import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
-
 import "ace-builds/src-min-noconflict/ace";
 import "ace-builds/src-min-noconflict/ext-language_tools";
 import "ace-builds/src-min-noconflict/mode-swift";
@@ -55,7 +53,9 @@ export class App {
     this.popover = new Popover();
 
     this.syntaxMapContainer = document.getElementById("syntax-map");
-    this.statisticsContainer = document.getElementById("statistics");
+    this.statisticsView = new StatisticsView(
+      document.getElementById("statistics-container")
+    );
 
     this.init();
   }
@@ -476,51 +476,28 @@ export class App {
   }
 
   updateStatistics(statistics) {
-    const tbody = this.statisticsContainer.querySelector(":scope > tbody");
-    tbody.innerHTML = "";
-
-    for (const row of statistics) {
-      const tr = document.createElement("tr");
-      tr.innerHTML = `<td style="font-family: 'Menlo', sans-serif, monospace;">${row.text}</td><td><div>${row.ranges.length}</div></td>`;
-      tbody.appendChild(tr);
-
-      tr.addEventListener("mouseover", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        for (const range of row.ranges) {
-          this.editor.session.addMarker(
-            new Range(
-              range.startRow,
-              range.startColumn,
-              range.endRow,
-              range.endColumn
-            ),
-            "editor-marker",
-            "text"
-          );
-        }
-      });
-      tr.addEventListener("mouseout", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const markers = this.editor.session.getMarkers();
-        for (const [key, value] of Object.entries(markers)) {
-          this.editor.session.removeMarker(value.id);
-        }
-      });
-    }
-
-    if (this.dataTable) {
-      this.dataTable.destroy();
-    }
-    this.dataTable = new DataTable("#statistics", {
-      autoWidth: false,
-      info: false,
-      paging: false,
-      searching: false,
-    });
+    this.statisticsView.update(statistics);
+
+    this.statisticsView.onmouseover = (event, target, ranges) => {
+      for (const range of ranges) {
+        this.editor.session.addMarker(
+          new Range(
+            range.startRow,
+            range.startColumn,
+            range.endRow,
+            range.endColumn
+          ),
+          "editor-marker",
+          "text"
+        );
+      }
+    };
+    this.statisticsView.onmouseout = (event, target) => {
+      const markers = this.editor.session.getMarkers();
+      for (const [key, value] of Object.entries(markers)) {
+        this.editor.session.removeMarker(value.id);
+      }
+    };
   }
 }
 

Public/js/statistics.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import DataTable from "datatables.net";
+import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
+
+export class StatisticsView {
+  constructor(container) {
+    this.container = container;
+
+    this.onmouseover = () => {};
+    this.onmouseout = () => {};
+
+    this.init();
+  }
+
+  init() {
+    this.body = this.container.querySelector(":scope > table > tbody");
+  }
+
+  update(statistics) {
+    this.body.innerHTML = "";
+
+    for (const row of statistics) {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `<td style="font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', monospace;">${row.text}</td><td><div>${row.ranges.length}</div></td>`;
+      this.body.appendChild(tr);
+
+      tr.addEventListener("mouseover", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.onmouseover(event, tr, row.ranges);
+      });
+      tr.addEventListener("mouseout", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.onmouseout(event, tr);
+      });
+    }
+
+    if (this.dataTable) {
+      this.dataTable.destroy();
+    }
+    this.dataTable = new DataTable(
+      this.container.querySelector(":scope > table"),
+      {
+        autoWidth: false,
+        info: false,
+        paging: false,
+        searching: false,
+      }
+    );
+  }
+}