From 24b354fdaa2d2a6505cfbfcd6f2a2ce4b8308810 Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Wed, 20 May 2020 08:55:07 -0400
Subject: [PATCH] HD images loading indicator, raycast

---
 app/static/app/js/ModelView.jsx             | 51 ++++++++++++++-------
 app/static/app/js/components/ImagePopup.jsx |  3 +-
 app/static/app/js/css/ImagePopup.scss       |  7 +++
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/app/static/app/js/ModelView.jsx b/app/static/app/js/ModelView.jsx
index 532e85ee..e5addf33 100644
--- a/app/static/app/js/ModelView.jsx
+++ b/app/static/app/js/ModelView.jsx
@@ -73,6 +73,8 @@ class ModelView extends React.Component {
     this.modelReference = null;
 
     this.toggleTexturedModel = this.toggleTexturedModel.bind(this);
+
+    this.cameraMeshes = [];
   }
 
   assetsPath(){
@@ -187,6 +189,35 @@ class ModelView extends React.Component {
           viewer.fitToScreen();
         });     
     });
+
+    viewer.renderer.domElement.addEventListener( 'mousedown', this.handleRenderClick );
+  }
+
+  componentWillUnmount(){
+    viewer.renderer.domElement.removeEventListener( 'mousedown', this.handleRenderClick );
+  }
+
+  handleRenderClick = (evt) => {
+    const raycaster = new THREE.Raycaster();
+    const rect = viewer.renderer.domElement.getBoundingClientRect();
+    const [x, y] = [evt.clientX, evt.clientY];
+    const array = [ 
+        ( x - rect.left ) / rect.width, 
+        ( y - rect.top ) / rect.height 
+    ];
+    const onClickPosition = new THREE.Vector2(...array);
+    const camera = viewer.scene.getActiveCamera();
+    const mouse = new THREE.Vector3(
+        + ( onClickPosition.x * 2 ) - 1, 
+        - ( onClickPosition.y * 2 ) + 1 );
+    raycaster.setFromCamera( mouse, camera );
+    const intersects = raycaster.intersectObjects( this.cameraMeshes );
+
+    if ( intersects.length > 0){
+        //console.log(intersects);
+        const intersection = intersects[0];
+        console.log(intersection);
+    }
   }
 
   loadCameras(){
@@ -229,7 +260,6 @@ class ModelView extends React.Component {
                 // const cameraMeshes = new THREE.InstancedMesh( cameraObj.geometry, cameraObj.material, geojson.features.length );
                 // const dummy = new THREE.Object3D();
 
-                window.meshes = [];
 
                 let i = 0;
                 geojson.features.forEach(feat => {
@@ -244,22 +274,10 @@ class ModelView extends React.Component {
                     viewer.scene.scene.add(cameraMesh);
 
                     cameraMesh._feat = feat;
-                    window.meshes.push(cameraMesh);
+                    this.cameraMeshes.push(cameraMesh);
 
                     i++;
                 });
-
-                window.rotate = (arr) => {
-                    window.meshes.forEach(m => {
-                        const rotation = rotate(arr, m._feat.properties.rotation);
-                        m.rotation.x = rotation.x;
-                        m.rotation.y = rotation.y;
-                        m.rotation.z = rotation.z;
-                        
-                    })
-                }
-
-                // viewer.scene.scene.add(cameraMeshes);
             }, undefined, console.error);
         });
     }
@@ -338,9 +356,10 @@ class ModelView extends React.Component {
     return (<div className="model-view">
           <ErrorMessage bind={[this, "error"]} />
           <div className="container potree_container" 
-             style={{height: "100%", width: "100%", position: "relative"}} 
+             style={{height: "100%", width: "100%", position: "relative"}}
              onContextMenu={(e) => {e.preventDefault();}}>
-                <div id="potree_render_area" ref={(domNode) => { this.container = domNode; }}></div>
+                <div id="potree_render_area" 
+                    ref={(domNode) => { this.container = domNode; }}></div>
                 <div id="potree_sidebar_container"> </div>
           </div>
 
diff --git a/app/static/app/js/components/ImagePopup.jsx b/app/static/app/js/components/ImagePopup.jsx
index 61178577..1d1400a4 100644
--- a/app/static/app/js/components/ImagePopup.jsx
+++ b/app/static/app/js/components/ImagePopup.jsx
@@ -51,7 +51,7 @@ class ImagePopup extends React.Component {
 
         if (!expandThumb){
             this.image.requestFullscreen();
-            this.setState({ expandThumb: true});
+            this.setState({ loading: true, expandThumb: true});
         }else{
             document.exitFullscreen();
             this.setState({ expandThumb: false });
@@ -74,6 +74,7 @@ class ImagePopup extends React.Component {
             {error !== "" ? <div style={{marginTop: "8px"}}>{error}</div>
             : [
                 <div key="image" className={`image ${expandThumb ? "fullscreen" : ""}`} style={{marginTop: "8px"}}  ref={(domNode) => { this.image = domNode;}}>
+                    {loading && expandThumb ? <div><i className="fa fa-circle-notch fa-spin fa-fw"></i></div> : ""}
                     <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">
diff --git a/app/static/app/js/css/ImagePopup.scss b/app/static/app/js/css/ImagePopup.scss
index 8d0d581f..a6751332 100644
--- a/app/static/app/js/css/ImagePopup.scss
+++ b/app/static/app/js/css/ImagePopup.scss
@@ -10,6 +10,13 @@
         &.fullscreen{
             display: flex;
             align-items: center;
+            color: white;
+            i{
+                font-size: 200%;
+                position: absolute;
+                left: 50%;
+                top: 45%;
+            }
             a{
                 cursor: zoom-out;
             }