|
@@ -1,26 +1,77 @@
|
|
|
import React, {Profiler} from "react";
|
|
|
import Google from "./../maps/Google";
|
|
|
import {measureTime} from './../helpers/measureTime';
|
|
|
+import {CustomInput, Input} from "reactstrap";
|
|
|
+import {
|
|
|
+ createRandomMarkers,
|
|
|
+ calcMarkerPosition,
|
|
|
+ changeSwitch,
|
|
|
+ setNoOfMarkers
|
|
|
+} from "./../helpers/randomMarkers";
|
|
|
+import {mapTestState} from "./../config/variables"
|
|
|
|
|
|
export default class Googles extends React.Component{
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
- this.metricsRef = React.createRef()
|
|
|
- this.state = {
|
|
|
- noOfMaps: 100
|
|
|
+ this.state = mapTestState
|
|
|
+
|
|
|
+ this.measurementsDiv = React.createRef()
|
|
|
+ this.markerInfoDiv = React.createRef()
|
|
|
+
|
|
|
+ this.createRandomMarkers = createRandomMarkers.bind(this)
|
|
|
+ this.calcMarkerPosition = calcMarkerPosition.bind(this)
|
|
|
+ this.changeSwitch = changeSwitch.bind(this)
|
|
|
+ this.setNoOfMarkers = setNoOfMarkers.bind(this)
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this.createRandomMarkers();
|
|
|
+ this.setState({startTime: performance.now()});
|
|
|
+ if(this.state.moveMarkers){
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.setState({currStep: this.state.currStep + 1});
|
|
|
+ this.calcMarkerPosition()
|
|
|
+ }, this.state.interval);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidUpdate() {
|
|
|
+ if(this.state.currStep===this.state.noOfSteps){
|
|
|
+ let endTime = performance.now();
|
|
|
+ let duration = endTime - this.state.startTime
|
|
|
+ let msg = "Duration " + duration.toFixed(3) + " for " + this.state.noOfSteps + " steps"
|
|
|
+ console.log(msg)
|
|
|
+ this.markerInfoDiv.current.innerHTML = msg
|
|
|
+ this.setState({currStep: this.state.currStep + 1});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ componentWillUnmount() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+
|
|
|
render(){
|
|
|
return (
|
|
|
- <div>
|
|
|
- <div ref={this.metricsRef} className="mapTime" >
|
|
|
+ <div className="mapTestContainer">
|
|
|
+
|
|
|
+ <div className="mapTime">
|
|
|
+ <CustomInput type="switch" onChange={this.changeSwitch} id="exampleCustomSwitch" name="customSwitch" label="Move markers" />
|
|
|
+ <div ref={this.markerInfoDiv}>
|
|
|
+ <span>{this.state.currStep} steps</span>
|
|
|
+ </div>
|
|
|
+ <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
|
|
|
+ <Input type="text" onChange={this.setNoOfMarkers} value={this.state.noOfMarkers}/>
|
|
|
+
|
|
|
+ <div ref={this.measurementsDiv}>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <Profiler id="google" onRender={measureTime(this)}>
|
|
|
- { Array.from({length: this.state.noOfMaps}, (_, index) =>
|
|
|
- <Google key={index}/>
|
|
|
- )}
|
|
|
- </Profiler>
|
|
|
+
|
|
|
+ <div className="mapTest">
|
|
|
+ <Profiler id="google" onRender={measureTime(this)}>
|
|
|
+ <Google markers={this.state.markers}/>
|
|
|
+ </Profiler>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
);
|
|
|
}
|