Add scene info, broke zoom, add theme.

src/App.css

@@ -13,14 +13,6 @@
   text-align: center;
 }
 
-.title {
-  color: #fff;
-}
-
-.subtitle {
-  color: #aaa;
-}
-
 .value {
   text-align: center;
   border: 1px solid #888;

src/App.js

@@ -3,7 +3,9 @@ import moment from 'moment';
 import './App.css';
 import {
   Columns,
+  Footer,
   Heading,
+  Table,
 } from 'react-bulma-components';
 
 
@@ -13,7 +15,7 @@ const MAX_ZOOM_FACTOR = 32;
 
 const Sidebar = (props) => {
   let {
-    binary, binaryMax, imageMetadata, zoomFactor, x, y,
+    renderTimeSeconds, binary, binaryMax, scene, imageMetadata, zoomFactor, x, y,
     onZoom,
   } = props;
   let samples = imageMetadata.map((md) => {
@@ -24,10 +26,6 @@ const Sidebar = (props) => {
     let xOff = Math.min(w, Math.max(0, Math.round(x*w)));
     let yOff = Math.min(h, Math.max(0, Math.round(y*h)));
     let v = pix[xOff+yOff*w];
-    if (v === undefined) {
-      console.log(`${x} ${y} ${w} ${h} ${xOff} ${yOff} ${v} ${pix.length}`);
-      return <p key={md.name}>Loading...</p>;
-    }
     let color = "#fff";
     let rgb = "";
     let value = "";
@@ -35,23 +33,53 @@ const Sidebar = (props) => {
       let r = Math.round(v[0]*255);
       let g = Math.round(v[1]*255);
       let b = Math.round(v[2]*255);
-      rgb = `rgb(${r}, ${g}, ${b})`;
+      value = `${r}, ${g}, ${b}`;
+      rgb = `rgb(${value})`;
       color = `rgb(${255^r}, ${255^g}, ${255^b})`;
-      value = rgb;
     } else {
       let c = 255*v/max;
       rgb = `rgb(${c}, ${c}, ${c})`;
       color = `rgb(${255^c}, ${255^c}, ${255^c})`;
       value = v;
     }
-    return <div className="sample" key={md.name}>
+    return <li className="sample" key={md.name}>
       <p>{md.name}</p>
       <p className="value" style={{
         color,
         backgroundColor: rgb,
       }}>{value}</p>
-    </div>
+    </li>
   });
+  let sceneInfo = <ul className="menu-list">
+    <Table>
+      <tbody>
+        <tr>
+          <td>render time</td>
+          <td>{renderTimeSeconds}s</td>
+        </tr>
+        <tr>
+          <td>subsamples</td>
+          <td>{scene.subsamples || "default"}</td>
+        </tr>
+        <tr>
+          <td>adaptive subsampling</td>
+          <td>{scene.adaptiveSubsampling || "default"}</td>
+        </tr>
+        <tr>
+          <td>numThreads</td>
+          <td>{scene.numThreads || "default"}</td>
+        </tr>
+        <tr>
+          <td>width</td>
+          <td>{scene.width}</td>
+        </tr>
+        <tr>
+          <td>height</td>
+          <td>{scene.height}</td>
+        </tr>
+      </tbody>
+    </Table>
+  </ul>;
   return <aside className="menu">
     <p className="menu-label">
       Controls
@@ -72,7 +100,13 @@ const Sidebar = (props) => {
     <p className="menu-label">
       Samples
     </p>
+    <ul className="menu-list">
       {samples}
+    </ul>
+    <p className="menu-label">
+      Scene
+    </p>
+    {sceneInfo}
   </aside>;
 }
 
@@ -85,10 +119,13 @@ class App extends React.Component {
       binaryMax: {},
       isFetching: false,
       isFrozen: false,
-      isZoomed: false,
+      isMouseDown: false,
+      isZoomed: true,
       zoomFactor: 4,
-      x: 0,
+      mouseX: 0,
-      y: 0,
+      mouseY: 0,
+      offsetX: 0,
+      offsetY: 0,
     };
   }
   componentDidMount() {
@@ -144,15 +181,18 @@ class App extends React.Component {
       binaryMax,
       data,
       isFrozen,
+      isMouseDown,
       isZoomed,
-      x,
+      mouseX,
-      y,
+      mouseY,
+      offsetX,
+      offsetY,
       zoomFactor,
     } = this.state;
     let mainContent = <h1>Loading</h1>;
     let sidebarContent = <h1>Loading</h1>;
     if (data !== null) {
-      let {timestamp, imageMetadata} = data;
+      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});
@@ -163,17 +203,11 @@ class App extends React.Component {
         }
         this.setState({isZoomed: true});
       };
-      const mouseScroll = (e) => {
+      const mouseDown = (e) => {
-        let delta = parseFloat(-e.deltaY/100.0);
+        this.setState({isMouseDown: true});
-        let zoomFactor = delta + this.state.zoomFactor;
+      };
-        if (zoomFactor < 1) { zoomFactor = 1; }
+      const mouseUp = (e) => {
-        if (zoomFactor > MAX_ZOOM_FACTOR) {
+        this.setState({isMouseDown: false});
-          zoomFactor = MAX_ZOOM_FACTOR;
-        }
-        this.setState({
-          zoomFactor: zoomFactor,
-          isZoomed: true
-        });
       };
       const mouseLeave = (e) => {
         if (isFrozen) {
@@ -190,28 +224,67 @@ class App extends React.Component {
         let width = 384;
         let height = (ratio * width).toFixed();
         let url = ROOT + image + '?t=' + timestamp;
+
+        const clamp = (offsetX, offsetY) => {
+          let minX = width - width * zoomFactor;
+          let minY = height - height * zoomFactor;
+          let maxX = 0;//width * zoomFactor - width;
+          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);
+          console.log('maxX', maxX, 'maxY', maxY);
+          console.log('offsetX', offsetX, 'offsetY', offsetY);
+          this.setState({
+            offsetX: offsetX,
+            offsetY: offsetY});
+        };
+
         const mouseMove = (e) => {
-          if (isFrozen) {
+          if (isMouseDown) {
-            return;
+            offsetX += e.movementX;
-          }
+            offsetY += e.movementY;
+            clamp(offsetX, offsetY);
+
+          } else {
             let rect = e.currentTarget.getBoundingClientRect();
             let x = e.clientX - rect.left;
             let y = e.clientY - rect.top;
-          this.setState({x: x/width, y: y/height});
+            this.setState({mouseX: x/width, mouseY: y/height});
+          }
+          e.preventDefault();
+        };
+
+        const mouseScroll = (e) => {
+          let delta = parseFloat(-e.deltaY/100.0);
+          let zoomFactor = delta + this.state.zoomFactor;
+          if (zoomFactor < 1) { zoomFactor = 1; }
+          if (zoomFactor > MAX_ZOOM_FACTOR) {
+            zoomFactor = MAX_ZOOM_FACTOR;
+          }
+          this.setState({
+            zoomFactor: zoomFactor,
+            isZoomed: true
+          });
+          clamp(offsetX, offsetY);
         };
         let style = {
           width: width + 'px',
           height: height + 'px',
           imageRendering: isZoomed ? 'pixelated' : 'auto',
           backgroundSize: isZoomed ? zoomFactor * width + 'px ' + zoomFactor * height + 'px' : 'contain',
-          backgroundPosition: isZoomed ? 100*x + '% ' + 100*y + '%' : 'center center',
+          backgroundPosition: isZoomed ? offsetX + 'px ' + offsetY + 'px' : 'center center',
+          //backgroundPosition: isZoomed ? 100*offsetX + '% ' + 100*offsetY + '%' : 'center center',
         };
         return (
           <div key={name}
-            onClick={mouseClick}
+            //onClick={mouseClick}
+            onMouseDown={mouseDown}
+            onMouseUp={mouseUp}
+            //onMouseMove={mouseMove}
             onMouseMove={mouseMove}
-            onMouseEnter={mouseEnter}
+            //onMouseEnter={mouseEnter}
-            onMouseLeave={mouseLeave}
+            //onMouseLeave={mouseLeave}
             onWheel={mouseScroll}
             className="frame"
              style={{backgroundImage: 'url("' + url + '")', ...style}}>
@@ -230,16 +303,18 @@ class App extends React.Component {
       </div>;
 
       sidebarContent = <Sidebar
+        scene={scene}
+        renderTimeSeconds={renderTimeSeconds}
         imageMetadata={imageMetadata}
         zoomFactor={zoomFactor}
-        x={x} y={y}
+        x={mouseX} y={mouseY}
         binary={binary}
         binaryMax={binaryMax}
         onZoom={onZoom} />;
     }
     return (
       <Columns>
-        <Columns.Column size="one-fifth">
+        <Columns.Column size="one-quarter">
           {sidebarContent}
         </Columns.Column>
         <Columns.Column>

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'react-bulma-components/dist/react-bulma-components.min.css';
+import './bulmaswatch.min.css';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';