Changeset 911 for js/human_3d_alignment/src/widgets/similviewer.jsx

Timestamp:

04/18/20 20:18:36 (4 years ago)

Author:

Maciej Komosinski

Message:

Added the actual functionality of the app in place of previous draft

File:

• js/human_3d_alignment/src/widgets/similviewer.jsx (modified) (11 diffs)

js/human_3d_alignment/src/widgets/similviewer.jsx

@@ -3 +3 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import * as THREE from 'three';
 import Sviewer from '../visualization/sviewer';
 import { Md3dRotation, MdYoutubeSearchedFor } from 'react-icons/lib/md';
-import GenotypeParser from '../utils/genotypeparser';
-import _ from 'lodash';
-import * as THREE from 'three';
 
 /**
@@ -24 +22 @@
             rezoom: true,
             valid: true,
-            clicked: false
+            clicked: false,
+            controlMode: 'translate',
+            round: 0
         };
         this.start = this.start.bind(this);
@@ -38 +38 @@
         let temp2 = ReactDOM.findDOMNode(this.mount).parentNode;
         this.viewer = new Sviewer(temp2.clientWidth, temp2.clientHeight, temp);
-        if (this.model) {
-            //Module.destroy(this.model);
-        }
-        this.model = GenotypeParser.getModelFromGenotype("X(X,X)");
-        this.model2 = GenotypeParser.getModelFromGenotype("XX");
-        this.viewer.loadMeshesFromModel(this.model, this.model2);
         this.viewer.setAutoRotate(this.state.autorotate);
         this.viewer.setRezoom(this.state.rezoom);
-        //this.elementspicker = new ElementsPicker(this.viewer.scene, this.viewer.camera.getPerspectiveCamera());
+
         this.renderScene = this.viewer.renderScene.bind(this.viewer);
         this.lastw = temp2.clientWidth;
@@ -94 +88 @@
             this.viewer.renderer, 
             this.viewer.camera.getPerspectiveCamera());
+            
+        if (!this.props.blockView) {
+
+            if (this.props.round != this.state.round) {
+                this.setState({ round: this.props.round }, function() {
+                    console.log(`Round in sim: `, this.state.round);
+                });
+                this.viewer.add2Genotypes(this.props.genotype1, this.props.genotype2);
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            }
+            if (this.props.controlMode != this.state.controlMode) {
+                this.setState({ controlMode: this.props.controlMode }, function() {
+                    console.log('Control mode: ', this.state.controlMode);
+                    this.viewer.setMode(this.state.controlMode);
+                })
+            }
+            if (this.viewer.selected1 != this.props.selected1) {
+                this.viewer.selected1 = [];
+                this.viewer.selected1 = this.props.selected1;
+            }
+            if (this.viewer.selected2 != this.props.selected2) {
+                this.viewer.selected2 = [];
+                this.viewer.selected2 = this.props.selected2;
+            }
+            if (this.props.round == this.state.round) {
+                this.viewer.addText();
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            } else {
+                this.viewer.clearView();
+            }
+        }
     }
 
@@ -107 +132 @@
      */
     switchRezoom() {
-        this.setState({rezoom: !this.state.rezoom});
-        this.viewer.setRezoom(!this.state.rezoom);
+        this.setState({rezoom: !this.state.rezoom}, function() {
+            this.viewer.setRezoom(this.state.rezoom);
+        });
     }
 
@@ -115 +141 @@
      */
     switchAutorotate() {
-        this.setState({autorotate: !this.state.autorotate});
-        this.viewer.setAutoRotate(!this.state.autorotate);
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+        this.setState({autorotate: !this.state.autorotate}, function() {
+            console.log(this.state.autorotate);
+            this.viewer.setAutoRotate(this.state.autorotate);
+        });
     }
 
@@ -127 +158 @@
         mousePosition.x = ((evt.clientX - bound.left) / bound.width) * 2 - 1;
         mousePosition.y = -((evt.clientY - bound.top) / bound.height) * 2 + 1;
-        //let vector = new THREE.Vector3(mousePosition.x, mousePosition.y, 0.5);
         let vector = new THREE.Vector2(mousePosition.x, mousePosition.y);
         return vector;
@@ -137 +167 @@
      */
     handleMouseDown(evt) {
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+
+        if (this.state.autorotate) {
+            this.switchAutorotate();
+        }
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -147 +185 @@
      */
     handleMouseUp(evt) {
+
+        let position1 = [];
+        let position2 = [];
+        let rotation1 = [];
+        let rotation2 = [];
+        this.viewer.framstick1.mesh.position.toArray(position1);
+        this.viewer.framstick2.mesh.position.toArray(position2);
+        this.viewer.framstick1.mesh.rotation.toArray(rotation1);
+        this.viewer.framstick2.mesh.rotation.toArray(rotation2);
+
+        this.props.handleChangePosition1(position1);
+        this.props.handleChangePosition2(position2);
+        this.props.handleChangeRotation1(rotation1);
+        this.props.handleChangeRotation2(rotation2);
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -160 +213 @@
         let mousePosition = this.getMousePosition(evt);
         this.viewer.handleMouseMove(mousePosition);
-    }
-
-    
+    }    
      
     render() {
@@ -170 +221 @@
                     <tr onMouseDown={ev => {if (ev) ev.stopPropagation();}}>
                         <td rowSpan={2} style={{position:'relative', verticalAlign: 'top', alignContent: 'left'}}>
-                            <div style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
+                            <div id="simcontainer" style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
                                 <canvas ref={(mount) => {this.mount = mount;}} onMouseDown={(evt) => this.handleMouseDown(evt)} onMouseUp={(evt) => this.handleMouseUp(evt)} onMouseMove={(evt) => this.handleMouseMove(evt)} style={{position: 'absolute', zIndex: 1}}></canvas>
                                 <Md3dRotation onClick={() => this.switchAutorotate()}  style={{zIndex: 2, position: 'absolute', left: '5%', bottom: 0, width: '20%', height: '20%', maxWidth: '40px', maxHeight: '40px', minWidth: '15px', minHeight: '15px', color: this.state.autorotate ? 'green' : 'black'}} />