Color picker sorta working again.

package.json

@@ -8,7 +8,8 @@
     "react": "^16.10.2",
     "react-bulma-components": "3.1.3",
     "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.2.0",
+    "transformation-matrix": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -15,7 +15,7 @@ const MAX_ZOOM_FACTOR = 32;
 
 const Sidebar = (props) => {
   let {
-    renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, x, y,
+    renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, mouseX, mouseY,
     onZoom,
   } = props;
   let samples = imageMetadata.map((md) => {
@@ -23,9 +23,10 @@ const Sidebar = (props) => {
     if (pix === undefined) { return <p key={md.name}>Loading...</p>; }
     let max = binaryMax[md.name];
     let [w, h] = md.size;
-    let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
+    let xOff = mouseX; // Math.min(w, Math.max(0, Math.round(x*w)));
-    let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
+    let yOff = mouseY; // Math.min(h, Math.max(0, Math.round(y*h)));
     let v = pix[xOff+yOff*w];
+    //console.log(`xOff ${xOff} yOff ${yOff} v ${v}`);
     let color = "#fff";
     let rgb = "";
     let value = "";
@@ -121,7 +122,7 @@ class App extends React.Component {
       isFrozen: false,
       isMouseDown: false,
       isZoomed: true,
-      zoomFactor: 4,
+      zoomFactor: 2,
       mouseX: 0,
       mouseY: 0,
       offsetX: 0,
@@ -220,7 +221,7 @@ class App extends React.Component {
       });
 
       images = imageMetadata.map((metadata) => {
-        let {name, ratio, image} = metadata;
+        let {name, ratio, image, size} = metadata;
         let width = 384;
         let height = (ratio * width).toFixed();
         let url = ROOT + image + '?t=' + timestamp;
@@ -248,9 +249,13 @@ class App extends React.Component {
 
           } else {
             let rect = e.currentTarget.getBoundingClientRect();
-            let x = e.clientX - rect.left;
+            let screenX = e.clientX - rect.left;
-            let y = e.clientY - rect.top;
+            let screenY = e.clientY - rect.top;
-            this.setState({mouseX: x/width, mouseY: y/height});
+            let viewW = size[0] / zoomFactor;
+            let viewH = size[1] / zoomFactor;
+            let xOff = (-offsetX*size[0])/(zoomFactor * width) + (screenX / width) * viewW;
+            let yOff = (-offsetY*size[1])/(zoomFactor * height) + (screenY / height) * viewH;
+            this.setState({mouseX: Math.round(xOff), mouseY: Math.round(yOff)});
           }
           e.preventDefault();
         };
@@ -281,7 +286,6 @@ class App extends React.Component {
             //onClick={mouseClick}
             onMouseDown={mouseDown}
             onMouseUp={mouseUp}
-            //onMouseMove={mouseMove}
             onMouseMove={mouseMove}
             //onMouseEnter={mouseEnter}
             //onMouseLeave={mouseLeave}
@@ -307,7 +311,8 @@ class App extends React.Component {
         renderTimeSeconds={renderTimeSeconds}
         imageMetadata={imageMetadata}
         zoomFactor={zoomFactor}
-        x={mouseX} y={mouseY}
+        mouseX={mouseX}
+        mouseY={mouseY}
         binary={binary}
         binaryMax={binaryMax}
         onZoom={onZoom} />;

yarn.lock

@@ -8268,6 +8268,10 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+transformation-matrix@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/transformation-matrix/-/transformation-matrix-2.1.1.tgz#50c1cf4049ac9a2c778eda62bb404e158723657d"
+
 ts-pnp@1.1.4, ts-pnp@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"