Merge pull request #2 from hoverinc/readHitmapBox-fix

Fix for invalid x or y while dragging

packages/regl-worldview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "regl-worldview",
-  "version": "0.3.1-beta1.3.6",
+  "version": "0.3.1-beta1.3.7",
   "description": "A reusable component for rendering 2D and 3D views using regl",
   "license": "Apache-2.0",
   "repository": "cruise-automation/webviz/tree/master/packages/regl-worldview",

packages/regl-worldview/src/Worldview.js

@@ -6,6 +6,7 @@
 //  found in the LICENSE file in the root directory of this source tree.
 //  You may not use this file except in compliance with the License.
 
+import clamp from "lodash/clamp";
 import mapValues from "lodash/mapValues";
 import pickBy from "lodash/pickBy";
 import * as React from "react";
@@ -239,10 +240,10 @@ export class WorldviewBase extends React.Component<BaseProps, State> {
     const { width, height, right, bottom } = boundingClientRect;
 
     // convert to normalized coordinates in the canvas
-    const normalizedX = ((clientX - (right - width)) / width) * 2 - 1;
-    const normalizedY = -(((clientY - (bottom - height)) / height) * 2) + 1;
-    const normalizedDragStartX = ((_dragStartPos.x - (right - width)) / width) * 2 - 1;
-    const normalizedDragStartY = -(((_dragStartPos.y - (bottom - height)) / height) * 2) + 1;
+    const normalizedX = clamp(((clientX - (right - width)) / width) * 2 - 1, -1, 1);
+    const normalizedY = clamp(-(((clientY - (bottom - height)) / height) * 2) + 1, -1, 1);
+    const normalizedDragStartX = clamp(((_dragStartPos.x - (right - width)) / width) * 2 - 1, -1, 1);
+    const normalizedDragStartY = clamp(-(((_dragStartPos.y - (bottom - height)) / height) * 2) + 1, -1, 1);
 
     // use normalized coordinates to calculate offset position in the canvas
     const offsetX = Math.floor(((normalizedX + 1) * clientWidth) / 2);
@@ -305,8 +306,8 @@ export class WorldviewBase extends React.Component<BaseProps, State> {
     const { width, height, right, bottom } = boundingClientRect;
 
     // convert to normalized coordinates in the canvas
-    const normalizedX = ((clientX - (right - width)) / width) * 2 - 1;
-    const normalizedY = -(((clientY - (bottom - height)) / height) * 2) + 1;
+    const normalizedX = clamp(((clientX - (right - width)) / width) * 2 - 1, -1, 1);
+    const normalizedY = clamp(-(((clientY - (bottom - height)) / height) * 2) + 1, -1, 1);
 
     // use normalized coordinates to calculate offset position in the canvas
     const offsetX = Math.floor(((normalizedX + 1) * clientWidth) / 2);

packages/regl-worldview/src/WorldviewContext.js

@@ -236,9 +236,12 @@ export class WorldviewContext {
     const { regl, camera, _fbo } = this.initializedData;
     const { width, height } = this.dimension;
 
-    const x = canvasX;
+    // prevent x to reach the canvas width, otherwise regl read pixel will error
+    const x = Math.min(canvasX, width - 1);
+
     // 0,0 corresponds to the bottom left in the webgl context, but the top left in window coordinates
-    const y = height - canvasY;
+    // prevent y to reach the canvas height, otherwise regl read pixel will error
+    const y = height - Math.max(canvasY, 1);
 
     // regl will only resize the framebuffer if the size changed
     // it uses floored whole pixel values