Switch mouse->pointer, remove some logging.

src/App.js

@@ -26,7 +26,6 @@ const Sidebar = (props) => {
     let xOff = mouseX; // Math.min(w, Math.max(0, Math.round(x*w)));
     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 = "";
@@ -111,6 +110,7 @@ const Sidebar = (props) => {
   </aside>;
 }
 
+const ELEMENT_WIDTH = 384;
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -122,11 +122,11 @@ class App extends React.Component {
       isFrozen: false,
       isMouseDown: false,
       isZoomed: true,
-      zoomFactor: 2,
+      zoomFactor: 4,
       mouseX: 0,
       mouseY: 0,
-      offsetX: 0,
+      offsetX: -1.5*ELEMENT_WIDTH,
-      offsetY: 0,
+      offsetY: -1.5*ELEMENT_WIDTH,
     };
   }
   componentDidMount() {
@@ -139,7 +139,6 @@ class App extends React.Component {
   fetchTracerData() {
     this.setState({...this.state, isFetching: true})
     const max = (acc, cur) => Math.max(acc, cur);
-    // console.log(array1.reduce(max));
     fetch(DATA_URL)
       .then(response => response.json())
       .then(result => {
@@ -155,7 +154,6 @@ class App extends React.Component {
                 let curBinary = this.state.binary;
                 let curBinaryMax = this.state.binaryMax;
                 let binaryMax = result.reduce(max);
-                console.log(`${md.name} ${binaryMax}`);
                 this.setState({
                   binary: {
                     [md.name]: result,
@@ -194,27 +192,14 @@ class App extends React.Component {
     let sidebarContent = <h1>Loading</h1>;
     if (data !== null) {
       let {timestamp, renderTimeSeconds, imageMetadata, scene} = data;
-      const mouseClick = (e) => {
-        console.log('isFrozen', isFrozen, 'this.state.isFrozen', this.state.isFrozen);
-        this.setState({isFrozen: !this.state.isFrozen});
-      };
       const mouseEnter = (e) => {
         if (isFrozen) {
           return;
         }
         this.setState({isZoomed: true});
       };
-      const mouseDown = (e) => {
-        this.setState({isMouseDown: true});
-      };
-      const mouseUp = (e) => {
-        this.setState({isMouseDown: false});
-      };
       const mouseLeave = (e) => {
-        if (isFrozen) {
+        this.setState({isMouseDown: false});
-          return;
-        }
-        this.setState({isZoomed: false});
       };
       const onZoom = (e) => this.setState({
           zoomFactor: Number(e.target.value)
@@ -222,7 +207,7 @@ class App extends React.Component {
 
       images = imageMetadata.map((metadata) => {
         let {name, ratio, image, size} = metadata;
-        let width = 384;
+        let width = ELEMENT_WIDTH;
         let height = (ratio * width).toFixed();
         let url = ROOT + image + '?t=' + timestamp;
 
@@ -233,15 +218,24 @@ class App extends React.Component {
           let maxY = 0;//height * zoomFactor - height;
           offsetX = Math.max(minX, Math.min(maxX, offsetX));
           offsetY = Math.max(minY, Math.min(maxY, offsetY));
-          console.log('minX', minX, 'minY', minY);
+          this.setState({offsetX, offsetY});
-          console.log('maxX', maxX, 'maxY', maxY);
-          console.log('offsetX', offsetX, 'offsetY', offsetY);
-          this.setState({
-            offsetX: offsetX,
-            offsetY: offsetY});
         };
 
-        const mouseMove = (e) => {
+        const pointerDown = (e) => {
+          // TODO(wathiede): figure out how to grab a ref and
+          // setPointerCapture on that.
+          //this.setPointerCapture(e.pointerId);
+          this.setState({isMouseDown: true});
+        };
+
+        const pointerUp = (e) => {
+          // TODO(wathiede): figure out how to grab a ref and
+          // releasePointerCapture on that.
+          //this.releasePointerCapture(e.pointerId);
+          this.setState({isMouseDown: false});
+        };
+
+        const pointerMove = (e) => {
           if (isMouseDown) {
             offsetX += e.movementX;
             offsetY += e.movementY;
@@ -261,6 +255,8 @@ class App extends React.Component {
         };
 
         const mouseScroll = (e) => {
+          let localOffsetX = this.state.offsetX;
+          let localOffsetY = this.state.offsetY;
           let delta = parseFloat(-e.deltaY/100.0);
           let zoomFactor = delta + this.state.zoomFactor;
           if (zoomFactor < 1) { zoomFactor = 1; }
@@ -271,6 +267,7 @@ class App extends React.Component {
             zoomFactor: zoomFactor,
             isZoomed: true
           });
+
           clamp(offsetX, offsetY);
         };
         let style = {
@@ -279,16 +276,15 @@ class App extends React.Component {
           imageRendering: isZoomed ? 'pixelated' : 'auto',
           backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
           backgroundPosition: isZoomed ? offsetX + 'px ' + offsetY + 'px' : 'center center',
-          //backgroundPosition: isZoomed ? 100*offsetX + '% ' + 100*offsetY + '%' : 'center center',
         };
+        console.log('offset', offsetX, offsetY);
         return (
           <div key={name}
-            //onClick={mouseClick}
+            onPointerDown={pointerDown}
-            onMouseDown={mouseDown}
+            onPointerUp={pointerUp}
-            onMouseUp={mouseUp}
+            onPointerMove={pointerMove}
-            onMouseMove={mouseMove}
             //onMouseEnter={mouseEnter}
-            //onMouseLeave={mouseLeave}
+            onMouseLeave={mouseLeave}
             onWheel={mouseScroll}
             className="frame"
              style={{backgroundImage: 'url("' + url + '")', ...style}}>