Expand thumbnails

app/static/app/js/ModelView.jsx

@@ -158,7 +158,13 @@ class ModelView extends React.Component {
       }
     });
 
-    viewer.scene.scene.add( new THREE.AmbientLight( 0xcccccc, 1.0 ) );
+    viewer.scene.scene.add( new THREE.AmbientLight( 0x404040, 2.0 ) ); // soft white light );
+    viewer.scene.scene.add( new THREE.DirectionalLight( 0xcccccc, 0.5 ) );
+
+    const directional = new THREE.DirectionalLight( 0xcccccc, 0.5 );
+    directional.position.z = 99999999999;
+    viewer.scene.scene.add( directional );
+    
 
     this.pointCloudFilePath(pointCloudPath => {
         Potree.loadPointCloud(pointCloudPath, "Point Cloud", e => {

app/static/app/js/components/ImagePopup.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import AssetDownloads from '../classes/AssetDownloads';
+import '../css/ImagePopup.scss';
 
 class ImagePopup extends React.Component {
     static propTypes = {
@@ -14,6 +15,26 @@ class ImagePopup extends React.Component {
         this.state = {
             error: "",
             loading: true,
+            expandThumb: false,
+        }
+
+        const { feature, task } = props;
+        const imageUrl = `/api/projects/${task.project}/tasks/${task.id}/images/thumbnail/${feature.properties.filename}`;
+        this.thumbUrl = `${imageUrl}?size=320`;
+        this.highresUrl = `${imageUrl}?size=9999999`;
+    }
+
+    componentDidMount(){
+        this.image.addEventListener("fullscreenchange", this.onFullscreenChange);
+    }
+
+    componentWillUnmount(){
+        this.image.removeEventListener("fullscreenchange", this.onFullscreenChange);
+    }
+
+    onFullscreenChange = (e) => {
+        if (!document.fullscreenElement){
+            this.setState({expandThumb: false});
         }
     }
 
@@ -25,30 +46,41 @@ class ImagePopup extends React.Component {
         this.setState({loading: false});
     }
 
+    onImgClick = () => {
+        const { expandThumb } = this.state;
+
+        if (!expandThumb){
+            this.image.requestFullscreen();
+            this.setState({ expandThumb: true});
+        }else{
+            document.exitFullscreen();
+            this.setState({ expandThumb: false });
+        }
+    }
+
     render(){
-        const { error, loading } = this.state;
+        const { error, loading, expandThumb } = this.state;
         const { feature, task } = this.props;
 
         const downloadImageLink = `/api/projects/${task.project}/tasks/${task.id}/images/download/${feature.properties.filename}`;
-        const thumbUrl = `/api/projects/${task.project}/tasks/${task.id}/images/thumbnail/${feature.properties.filename}?size=320`;
         const downloadShotsLink =  `/api/projects/${task.project}/tasks/${task.id}/download/shots.geojson`;
-
+        const imageUrl = expandThumb ? this.highresUrl : this.thumbUrl;
         const assetDownload = AssetDownloads.only(["shots.geojson"])[0];
 
-        return (<div>
+        return (<div className="image-popup">
             <strong>{feature.properties.filename}</strong>
-            {loading ? <div style={{marginTop: "8px"}}><i className="fa fa-circle-notch fa-spin fa-fw"></i></div>
+            {loading ? <div><i className="fa fa-circle-notch fa-spin fa-fw"></i></div>
             : ""}
             {error !== "" ? <div style={{marginTop: "8px"}}>{error}</div>
             : [
-                <div key="image" style={{marginTop: "8px"}}>
-                    <a href={downloadImageLink} title={feature.properties.filename}><img style={{borderRadius: "4px"}} src={thumbUrl} onLoad={this.imageOnLoad} onError={this.imageOnError} /></a>
+                <div key="image" className={`image ${expandThumb ? "fullscreen" : ""}`} style={{marginTop: "8px"}}  ref={(domNode) => { this.image = domNode;}}>
+                    <a onClick={this.onImgClick} href="javascript:void(0);" title={feature.properties.filename}><img style={{borderRadius: "4px"}} src={imageUrl} onLoad={this.imageOnLoad} onError={this.imageOnError} /></a>
                 </div>,
-                <div key="download-image" style={{marginTop: "8px"}}>
+                <div key="download-image">
                     <a href={downloadImageLink}><i className="fa fa-image"></i> Download Image</a>
                 </div>
             ]}
-            <div style={{marginTop: "8px"}}>
+            <div>
                 <a href={downloadShotsLink}><i className={assetDownload.icon}></i> {assetDownload.label} </a>
             </div>
         </div>);

app/static/app/js/css/ImagePopup.scss

@@ -0,0 +1,22 @@
+.image-popup{
+    div{
+        margin-top: 8px;
+    }
+
+    div.image{
+        a{
+            cursor: zoom-in;
+        }
+        &.fullscreen{
+            display: flex;
+            align-items: center;
+            a{
+                cursor: zoom-out;
+            }
+            img{
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }   
+}