Adjust the hover rendering

Also fix an issue with `scatter.get('filteredPoints')`

src/constants.js

@@ -97,7 +97,7 @@ export const DEFAULT_GAMMA = 1;
 // Default styles
 export const MIN_POINT_SIZE = 1;
 export const DEFAULT_POINT_SIZE = 6;
-export const DEFAULT_POINT_SIZE_SELECTED = 2;
+export const DEFAULT_POINT_SIZE_SELECTED = 0;
 export const DEFAULT_POINT_OUTLINE_WIDTH = 2;
 export const DEFAULT_SIZE_BY = null;
 export const DEFAULT_POINT_CONNECTION_SIZE = 2;

src/index.js

@@ -404,6 +404,7 @@ const createScatterplot = (
   let canvasObserver;
   let densityBasedOpacity = 1;
   let densityBasedPointSize = 1;
+  let hoveredPointExtraSize = 0;
 
   const positionBuffer = renderer.regl.buffer([
     -1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1,
@@ -1658,7 +1659,7 @@ const createScatterplot = (
     getNormalPointsIndexBuffer
   );
 
-  const drawHoveredPoint = drawPoints(
+  const drawHoveredPointBody = drawPoints(
     getNormalPointSizeExtra,
     () => 1,
     () => hoveredPointIndexBuffer,
@@ -1667,6 +1668,40 @@ const createScatterplot = (
     () => 1
   );
 
+  // Draw outer outline
+  const drawHoveredPointOutline = drawPoints(
+    () => hoveredPointExtraSize * window.devicePixelRatio,
+    () => 1,
+    () => hoveredPointIndexBuffer,
+    COLOR_ACTIVE_IDX,
+    () => 1,
+    () => 1
+  );
+
+  // Draw inner outline
+  const drawHoveredPointInnerBorder = drawPoints(
+    () => hoveredPointExtraSize * window.devicePixelRatio,
+    () => 1,
+    () => hoveredPointIndexBuffer,
+    COLOR_BG_IDX,
+    () => 1,
+    () => 1
+  );
+
+  const drawHoveredPoint = () => {
+    const pointExtraSize = selectedPointsSet.has(hoveredPoint)
+      ? pointSizeSelected
+      : 0;
+
+    const pointOutlineWidthPx = pointOutlineWidth / camera.scaling[0];
+
+    hoveredPointExtraSize = pointExtraSize + pointOutlineWidthPx * 2;
+    drawHoveredPointOutline();
+    hoveredPointExtraSize = pointExtraSize + pointOutlineWidthPx;
+    drawHoveredPointInnerBorder();
+    drawHoveredPointBody();
+  };
+
   const drawSelectedPointOutlines = drawPoints(
     () => (pointSizeSelected + pointOutlineWidth * 2) * window.devicePixelRatio,
     getSelectedNumPoints,
@@ -1786,23 +1821,6 @@ const createScatterplot = (
 
     reticleHLine.draw();
     reticleVLine.draw();
-
-    // Draw outer outline
-    drawPoints(
-      () =>
-        (pointSizeSelected + pointOutlineWidth * 2) * window.devicePixelRatio,
-      () => 1,
-      hoveredPointIndexBuffer,
-      COLOR_ACTIVE_IDX
-    )();
-
-    // Draw inner outline
-    drawPoints(
-      () => (pointSizeSelected + pointOutlineWidth) * window.devicePixelRatio,
-      () => 1,
-      hoveredPointIndexBuffer,
-      COLOR_BG_IDX
-    )();
   };
 
   const createPointIndex = (numNewPoints) => {
@@ -2993,7 +3011,7 @@ const createScatterplot = (
     if (property === 'filteredPoints')
       return isPointsFiltered
         ? Array.from(filteredPointsSet)
-        : Array.from({ length: searchIndex.points.length }, (_, i) => i);
+        : Array.from({ length: points.length }, (_, i) => i);
     if (property === 'pointsInView') return getPointsInView();
     if (property === 'pointColor')
       return pointColor.length === 1 ? pointColor[0] : pointColor;