1 files changed, 26 insertions, 4 deletions
diff --git a/client/index.js b/client/index.js
index df127e4..4ca290b 100644
--- a/client/index.js
+++ b/client/index.js
@@ -65,7 +65,7 @@ function build() {
   hs = Math.ceil(h / s);
   const scale = scales[scaleMode % scales.length];
   if (scale.reset) {
-    scale.reset(base_x, base_y, ws, hs);
+    scale.reset(Math.round(base_x), Math.round(base_y), ws, hs);
   }
   for (var i = 0; i < ws; i++) {
     notes[i] = [];
@@ -143,11 +143,18 @@ function toggle(note) {
 }
 
 function add(i, j) {
-  const ii = i + base_x;
-  const jj = j + base_y;
+  const ii = i + Math.round(base_x);
+  const jj = j + Math.round(base_y);
 
   const scale = scales[scaleMode % scales.length];
-  const [a, b] = scale.get(ii, jj, i, j, base_x, base_y);
+  const [a, b] = scale.get(
+    ii,
+    jj,
+    i,
+    j,
+    Math.round(base_x),
+    Math.round(base_y),
+  );
 
   const div = document.createElement("div");
   const interval = a / b;
@@ -299,6 +306,21 @@ function bind() {
     .addEventListener("click", () =>
       document.querySelector("#help").classList.toggle("visible"),
     );
+  grid.addEventListener("wheel", (e) => {
+    const new_base_x = Math.max(0, base_x + e.deltaX / 32);
+    const new_base_y = Math.max(0, base_y + e.deltaY / 32);
+    if (
+      Math.round(base_x) !== Math.round(new_base_x) ||
+      Math.round(base_y) !== Math.round(new_base_y)
+    ) {
+      base_x = new_base_x;
+      base_y = new_base_y;
+      rebuild();
+    } else {
+      base_x = new_base_x;
+      base_y = new_base_y;
+    }
+  });
 }
 
 let isReset = false;