Skip to content

Commit

Permalink
Rework measurement tool
Browse files Browse the repository at this point in the history
  • Loading branch information
@manisandro
manisandro committed Feb 7, 2023
1 parent 94ac5ee commit 918cb13
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 219 deletions.
16 changes: 8 additions & 8 deletions plugins/HeightProfile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';

import './style/HeightProfile.css';
import MeasureUtils from '../utils/MeasureUtils';

class HeightProfile extends React.Component {
static propTypes = {
Expand Down Expand Up @@ -80,7 +81,7 @@ class HeightProfile extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (this.props.measurement.coordinates !== prevProps.measurement.coordinates) {
if (this.props.measurement.drawing === false && this.props.measurement.geomType === "LineString" && !isEmpty(this.props.measurement.coordinates) ) {
this.queryElevations(this.props.measurement.coordinates, this.props.measurement.length, this.props.projection);
this.queryElevations(this.props.measurement.coordinates, this.props.measurement.segment_lengths, this.props.projection);
} else if (!isEmpty(this.state.data)) {
this.setState({data: [], pickPositionCallback: null});
}
Expand Down Expand Up @@ -118,7 +119,7 @@ class HeightProfile extends React.Component {
const distanceStr = LocaleUtils.tr("heightprofile.distance");
const heightStr = LocaleUtils.tr("heightprofile.height");
const aslStr = LocaleUtils.tr("heightprofile.asl");
const totLength = (this.props.measurement.length || []).reduce((tot, num) => tot + num, 0);
const totLength = this.props.measurement.length;

// Compute tick positions (so that there are approx 10 ticks on desktop and 5 ticks on mobile on the x-axis)
const base = Math.pow(10, Math.floor(Math.log10(totLength / 10))); // 10E<num_digits_totLength - 1>
Expand Down Expand Up @@ -194,7 +195,7 @@ class HeightProfile extends React.Component {
);
}
updateMarker = (x) => {
const segmentLengths = this.props.measurement.length;
const segmentLengths = this.props.measurement.segment_lengths;
const coo = this.props.measurement.coordinates;
if (isEmpty(segmentLengths) || isEmpty(coo)) {
return;
Expand Down Expand Up @@ -257,20 +258,19 @@ class HeightProfile extends React.Component {
}

// Find sample index
const segmentLengths = this.props.measurement.length;
const segmentLengths = this.props.measurement.segment_lengths;
const coo = this.props.measurement.coordinates;
let x = 0;
for (let iSegment = 0; iSegment < coo.length - 1; ++iSegment) {
if (this.pointOnSegment(pos, coo[iSegment], coo[iSegment + 1])) {
const dx = pos[0] - coo[iSegment][0];
const dy = pos[1] - coo[iSegment][1];
x += Math.sqrt(dx * dx + dy * dy);
const len = MeasureUtils.computeSegmentLengths([pos, coo[iSegment]], this.props.projection, this.props.measurement.geodesic)[0];
x += len;
break;
} else {
x += segmentLengths[iSegment];
}
}
const totLength = (this.props.measurement.length || []).reduce((tot, num) => tot + num, 0);
const totLength = this.props.measurement.length;
const k = Math.min(1, x / totLength);
const idx = Math.min(this.state.data.length - 1, Math.floor(k * this.props.samples));
this.updateTooltip(x, this.state.data[idx], path.getBoundingClientRect().left + k * path.getBoundingClientRect().width);
Expand Down
37 changes: 16 additions & 21 deletions plugins/Measure.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {createSelector} from 'reselect';
import isEmpty from 'lodash.isempty';
import CoordinatesUtils from '../utils/CoordinatesUtils';
import LocaleUtils from '../utils/LocaleUtils';
import measureUtils from '../utils/MeasureUtils';
import MeasureUtils from '../utils/MeasureUtils';
import {setSnappingConfig} from '../actions/map.js';
import {changeMeasurementState} from '../actions/measurement.js';
import displayCrsSelector from '../selectors/displaycrs';
Expand Down Expand Up @@ -73,24 +71,20 @@ class Measure extends React.Component {
renderResult = () => {
let resultBody = null;
if (this.props.measureState.geomType === "Point") {
const digits = CoordinatesUtils.getUnits(this.props.displaycrs) === 'degrees' ? 4 : 0;
let text = "0 0";
if (!isEmpty(this.props.measureState.coordinates)) {
const coo = CoordinatesUtils.reproject(this.props.measureState.coordinates, this.props.mapcrs, this.props.displaycrs);
text = LocaleUtils.toLocaleFixed(coo[0], digits) + " " + LocaleUtils.toLocaleFixed(coo[1], digits);
}
const coo = this.props.measureState.coordinates || [0, 0];
const text = MeasureUtils.getFormattedCoordinate(coo, this.props.mapcrs, this.props.displaycrs);
resultBody = (
<div className="resultbody">
<span>{text}</span>
<div className="measure-body">
<span className="measure-result">{text}</span>
<CopyButton buttonClass="copy-measure-button" text={text} />
</div>
);
} else if (this.props.measureState.geomType === "LineString") {
const length = (this.props.measureState.length || []).reduce((tot, num) => tot + num, 0);
const text = LocaleUtils.toLocaleFixed(measureUtils.getFormattedLength(this.props.measureState.lenUnit, length), 2);
const length = this.props.measureState.length || 0;
const text = MeasureUtils.formatMeasurement(length, false, this.props.measureState.lenUnit, this.props.measureState.decimals, false);
resultBody = (
<div className="resultbody">
<span>{text}</span>
<div className="measure-body">
<span className="measure-result">{text}</span>
<select onChange={this.changeLengthUnit} value={this.props.measureState.lenUnit}>
<option value="m">m</option>
<option value="ft">ft</option>
Expand All @@ -101,10 +95,11 @@ class Measure extends React.Component {
</div>
);
} else if (this.props.measureState.geomType === "Polygon") {
const text = LocaleUtils.toLocaleFixed(measureUtils.getFormattedArea(this.props.measureState.areaUnit, this.props.measureState.area), 2);
const area = this.props.measureState.area || 0;
const text = MeasureUtils.formatMeasurement(area, false, this.props.measureState.areaUnit, this.props.measureState.decimals, false);
resultBody = (
<div className="resultbody">
<span>{text}</span>
<div className="measure-body">
<span className="measure-result">{text}</span>
<select onChange={this.changeAreaUnit} value={this.props.measureState.areaUnit}>
<option value="sqm">m&#178;</option>
<option value="sqft">ft&#178;</option>
Expand All @@ -117,10 +112,10 @@ class Measure extends React.Component {
</div>
);
} else if (this.props.measureState.geomType === "Bearing") {
const text = measureUtils.getFormattedBearingValue(this.props.measureState.bearing);
const text = MeasureUtils.getFormattedBearingValue(this.props.measureState.bearing);
resultBody = (
<div className="resultbody">
<span>{text}</span>
<div className="measure-body">
<span className="measure-result">{text}</span>
<CopyButton buttonClass="copy-measure-button" text={text} />
</div>
);
Expand Down
Loading

0 comments on commit 918cb13

Please sign in to comment.