source: js/human_3d_alignment/src/widgets/similviewer.jsx @ 888

/*global Module*/
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
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';

/**
 * Component for assesing genotypes matching.
 */
class GenoViewer extends React.Component {
    /**
     * Basic constructor.
     * @param {any} props properties of Component
     */
    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            autorotate: false,
            rezoom: true,
            valid: true,
            clicked: false
        };
        this.start = this.start.bind(this);
        this.stop = this.stop.bind(this);
        this.animate = this.animate.bind(this);
    }

    /**
     * Method initializes all visualizations and binds their methods and events with SViewer.
     */
    componentDidMount() {
        let temp = ReactDOM.findDOMNode(this.mount);
        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;
        this.lasth = temp2.clientHeight;
        this.start();
    }

    /**
     * Method stops animation of Framsticks.
     */
    componentWillUnmount() {
        this.stop();
    }

    /**
     * After update of state all visualizations are refreshed
     */
    componentDidUpdate() {
        let temp = ReactDOM.findDOMNode(this.mount).parentNode;
        this.viewer.resizeView(temp.clientWidth, temp.clientHeight);
    }

    /**
     * Method starts animation process. Internal method, used by componentDidMount.
     */
    start() {
        if (!this.frameId) {
            this.frameId = requestAnimationFrame(this.animate);
        }
    }

    /**
     * Main animation loop. If any change was applied to genotype, this method loads new
     * models and brains.
     */
    animate() {
        let temp = ReactDOM.findDOMNode(this.mount).parentNode;
        if (this.lasth != temp.clientHeight || this.lastw != temp.clientWidth) {
            this.viewer.resizeView(temp.clientWidth, temp.clientHeight);
            this.lastw = temp.clientWidth;
            this.lasth = temp.clientHeight;
        }
        
        this.viewer.camera.getCameraControl().update();
        this.frameId = window.requestAnimationFrame(this.animate);
        this.viewer.scene.render(
            this.viewer.renderer, 
            this.viewer.camera.getPerspectiveCamera());
    }

    /**
     * Method cancels animation.
     */
    stop() {
        cancelAnimationFrame(this.frameId);
    }

    /**
     * Turns on/off rezoom property of viewer
     */
    switchRezoom() {
        this.setState({rezoom: !this.state.rezoom});
        this.viewer.setRezoom(!this.state.rezoom);
    }

    /**
     * Turns on/off autorotate property of viewer
     */
    switchAutorotate() {
        this.setState({autorotate: !this.state.autorotate});
        this.viewer.setAutoRotate(!this.state.autorotate);
    }

    /**
     * Gets position of mouse
     */
    getMousePosition(evt){
        let bound = this.mount.getBoundingClientRect();
        let mousePosition = {x: 0, y: 0};
        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;
    }

       /**
     * Event function for using mouse within viewer.
     * @param {any} evt object holding event data
     */
    handleMouseDown(evt) {
        evt.preventDefault();
        let mousePosition = this.getMousePosition(evt);
        this.viewer.handleMouseDown(mousePosition);
    }

           /**
     * Event function for using mouse within viewer.
     * @param {any} evt object holding event data
     */
    handleMouseUp(evt) {
        evt.preventDefault();
        let mousePosition = this.getMousePosition(evt);
        this.viewer.handleMouseUp(mousePosition);
    }

               /**
     * Event function for using mouse within viewer.
     * @param {any} evt object holding event data
     */
    handleMouseMove(evt) {
        evt.preventDefault();
        let mousePosition = this.getMousePosition(evt);
        this.viewer.handleMouseMove(mousePosition);
    }

    
     
    render() {
        return (
            <table {...this.props} style={{height: '100%', width: '100%'}}>
                <tbody>
                    <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();}}>
                                <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'}} />
                                <MdYoutubeSearchedFor onClick={() => this.switchRezoom()} style={{zIndex: 2, position: 'absolute', right: '5%', bottom: 0, width: '20%', height: '20%', maxWidth: '40px', maxHeight: '40px', minWidth: '15px', minHeight: '15px', color: this.state.rezoom ? 'green' : 'black' }} />
                            </div>
                        </td>
                    </tr>  
                </tbody>
            </table>
        );
    }
}

export default GenoViewer;