website_next: part 12

website_next/explore/block/preview/heatmap/geometry.js

@@ -21,20 +21,42 @@ function getGap(canvas, width) {
   return Math.max(1, maxGap * Math.min(1, width / GAP_REFERENCE_WIDTH));
 }
 
+/**
+ * @param {Uint16Array} lookup
+ * @param {number} columns
+ * @param {SquareCellLayout} layout
+ * @param {number} value
+ */
+function fillLookup(lookup, columns, layout, value) {
+  const endX = layout.x + layout.span;
+  const endY = layout.y + layout.span;
+
+  for (let row = layout.y; row < endY; row += 1) {
+    const offset = row * columns;
+
+    for (let column = layout.x; column < endX; column += 1) {
+      lookup[offset + column] = value;
+    }
+  }
+}
+
 /**
  * @param {SquareLayout} square
  * @param {HTMLCanvasElement} canvas
  * @param {number} width
  */
-export function createPreviewRects(square, canvas, width) {
+export function createPreviewGeometry(square, canvas, width) {
   const gap = getGap(canvas, width);
   const cell = Math.max(1, (width - gap * (square.columns - 1)) / square.columns);
   const unit = cell + gap;
+  const lookup = new Uint16Array(square.columns * square.columns);
 
-  return square.layouts.map((layout, index) => {
+  const rects = square.layouts.map((layout, index) => {
     const transaction = square.resolvedCells[index].transaction;
     const rectSize = unitsToPixels(layout.span, cell, gap);
 
+    fillLookup(lookup, square.columns, layout, index + 1);
+
     return {
       color: square.resolvedCells[index].color,
       size: rectSize,
@@ -43,25 +65,39 @@ export function createPreviewRects(square, canvas, width) {
       y: width - layout.y * unit - rectSize,
     };
   });
+
+  return { columns: square.columns, lookup, rects, unit, width };
 }
 
 /**
- * @param {PreviewRect[]} rects
+ * @param {PreviewGeometry} geometry
  * @param {number} x
  * @param {number} y
  */
-export function hitTest(rects, x, y) {
-  for (let index = rects.length - 1; index >= 0; index -= 1) {
-    const rect = rects[index];
+export function hitTest(geometry, x, y) {
+  if (x < 0 || y < 0 || x > geometry.width || y > geometry.width) {
+    return null;
+  }
 
-    if (
-      x >= rect.x &&
-      x <= rect.x + rect.size &&
-      y >= rect.y &&
-      y <= rect.y + rect.size
-    ) {
-      return rect.transaction;
-    }
+  const column = Math.min(geometry.columns - 1, Math.floor(x / geometry.unit));
+  const rowFromTop = Math.min(
+    geometry.columns - 1,
+    Math.floor(y / geometry.unit),
+  );
+  const row = geometry.columns - rowFromTop - 1;
+  const index = geometry.lookup[row * geometry.columns + column] - 1;
+
+  if (index < 0) return null;
+
+  const rect = geometry.rects[index];
+
+  if (
+    x >= rect.x &&
+    x <= rect.x + rect.size &&
+    y >= rect.y &&
+    y <= rect.y + rect.size
+  ) {
+    return rect.transaction;
   }
 
   return null;
@@ -76,6 +112,15 @@ export function hitTest(rects, x, y) {
  * @property {number} y
  */
 
+/**
+ * @typedef {Object} PreviewGeometry
+ * @property {number} columns
+ * @property {Uint16Array} lookup
+ * @property {PreviewRect[]} rects
+ * @property {number} unit
+ * @property {number} width
+ */
+
 /**
  * @typedef {Object} SquareLayout
  * @property {number} columns