pigeon test: moving markers

src/maps/Pigeon.js

@@ -75,7 +75,25 @@ export default class Pigeon extends React.Component{
   }
 
   render(){
-    const mapConfig = this.props.mapConfig;
+    let testMarkers = this.props.markers
+    let markers = <></>
+    if (testMarkers){
+      markers = this.props.markers.map((pos, idx) =>
+        <Marker anchor={pos} key={idx}/>
+      )
+    }else{
+      markers = this.state.path.map((pos, idx) =>
+        <Draggable
+          anchor={pos}
+          key={idx}
+          offset={[15, 32]}
+          onDragEnd={(event) => this.updateMarker(event, idx)}
+        >
+          <Marker anchor={pos} key={idx}/>
+        </Draggable>
+      )
+    }
+
     return (
       <div>
         <div className="map">
@@ -92,16 +110,7 @@ export default class Pigeon extends React.Component{
             dprs={[1, 2]}
             onClick={(event) => this.addMarker(event)}
           >
-              {mapConfig.path.map((pos, idx) =>
-                <Draggable
-                  anchor={pos}
-                  key={idx}
-                  offset={[15, 32]}
-                  onDragEnd={(event) => this.updateMarker(event, idx)}
-                >
-                  <Marker anchor={pos} key={idx}/>
-                </Draggable>
-              )}
+            {markers}
 
               <Overlay anchor={[latitude, longitude]} offset={[120, 79]}>
                 {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}

src/test/Pigeons.js

@@ -1,54 +1,73 @@
 import React, {Profiler} from "react";
 import Pigeon from "./../maps/Pigeon";
-
-import {calcDistance} from './../helpers/distance';
 import {measureTime} from './../helpers/measureTime';
-import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
-
+import {CustomInput, Input} from "reactstrap";
+import {
+  createRandomMarkers,
+  calcMarkerPosition,
+  changeSwitch,
+  setNoOfMarkers
+} from "./../helpers/randomMarkers";
+import {mapTestState} from "./../config/variables"
 
 export default class Pigeons extends React.Component{
   constructor(props) {
     super(props)
-    this.metricsRef = React.createRef()
-
-    this.state = {
-      noOfMaps: 100,
-      mapConfig: {
-        zoom: 15,
-        path: [],
-        coords: [latitude, longitude],
-        width: mapWidth,
-        height: mapHeight,
-        defaultZoom: 15,
-        distance: 0,
-      }
+    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);
     }
   }
 
-  updateMapState = (key, value) => {
-    let mapConfigCopy = JSON.parse(JSON.stringify(this.state.mapConfig));
-    mapConfigCopy[key] = value;
-    this.setState({mapConfig: mapConfigCopy})
+  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});
+    }
   }
 
-  getDistance = () => {
-    let dst = calcDistance(this.state.mapConfig.path)
-    this.updateMapState("distance", dst)
+  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>
-        <div>
+
+        <div className="mapTest">
           <Profiler id="pigeons" onRender={measureTime(this)}>
-            { Array.from({length: this.state.noOfMaps}, (_, index) => <Pigeon
-              mapConfig={this.state.mapConfig}
-              updateMapState={this.updateMapState}
-              getDistance={this.getDistance}
-              key={index}
-            />) }
+            <Pigeon markers={this.state.markers}/>
           </Profiler>
         </div>
       </div>