-
Notifications
You must be signed in to change notification settings - Fork 166
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Measure distance mode + tooltips (#299)
- Loading branch information
1 parent
8dae1f0
commit 9b60f00
Showing
14 changed files
with
639 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| // @flow | ||
|
|
||
| import turfDistance from '@turf/distance'; | ||
| import memoize from 'memoizee'; | ||
| import type { | ||
| ClickEvent, | ||
| PointerMoveEvent, | ||
| StartDraggingEvent, | ||
| StopDraggingEvent, | ||
| Tooltip, | ||
| ModeProps | ||
| } from '../types.js'; | ||
| import type { FeatureCollection, Position } from '../geojson-types.js'; | ||
| import { BaseGeoJsonEditMode } from './geojson-edit-mode.js'; | ||
|
|
||
| const DEFAULT_TOOLTIPS = []; | ||
|
|
||
| export class MeasureDistanceMode extends BaseGeoJsonEditMode { | ||
| startingPoint = null; | ||
| endingPoint = null; | ||
| endingPointLocked = false; | ||
|
|
||
| _setEndingPoint(mapCoords: Position) { | ||
| this.endingPoint = { | ||
| type: 'Feature', | ||
| properties: { | ||
| guideType: 'editHandle', | ||
| editHandleType: 'existing' | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: mapCoords | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| _getTooltips = memoize((modeConfig, startingPoint, endingPoint) => { | ||
| let tooltips = DEFAULT_TOOLTIPS; | ||
|
|
||
| if (startingPoint && endingPoint) { | ||
| const { formatTooltip, turfOptions, measurementCallback } = modeConfig || {}; | ||
| const units = (turfOptions && turfOptions.units) || 'kilometers'; | ||
|
|
||
| const distance = turfDistance(startingPoint, endingPoint, turfOptions); | ||
|
|
||
| let text; | ||
| if (formatTooltip) { | ||
| text = formatTooltip(distance); | ||
| } | ||
| if (!formatTooltip) { | ||
| // By default, round to 2 decimal places and append units | ||
| text = `${parseFloat(distance).toFixed(2)} ${units}`; | ||
| } | ||
|
|
||
| if (measurementCallback) { | ||
| measurementCallback(distance); | ||
| } | ||
|
|
||
| tooltips = [ | ||
| { | ||
| position: endingPoint.geometry.coordinates, | ||
| text | ||
| } | ||
| ]; | ||
| } | ||
|
|
||
| return tooltips; | ||
| }); | ||
|
|
||
| handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void { | ||
| if (!this.startingPoint || this.endingPointLocked) { | ||
| this.startingPoint = { | ||
| type: 'Feature', | ||
| properties: { | ||
| guideType: 'editHandle', | ||
| editHandleType: 'existing' | ||
| }, | ||
| geometry: { | ||
| type: 'Point', | ||
| coordinates: event.mapCoords | ||
| } | ||
| }; | ||
| this.endingPoint = null; | ||
| this.endingPointLocked = false; | ||
| } else if (this.startingPoint) { | ||
| this._setEndingPoint(event.mapCoords); | ||
| this.endingPointLocked = true; | ||
| } | ||
| } | ||
|
|
||
| // Called when the pointer moved, regardless of whether the pointer is down, up, and whether something was picked | ||
| handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void { | ||
| if (this.startingPoint && !this.endingPointLocked) { | ||
| this._setEndingPoint(event.mapCoords); | ||
| } | ||
|
|
||
| props.onUpdateCursor('cell'); | ||
| } | ||
|
|
||
| // Called when the pointer went down on something rendered by this layer and the pointer started to move | ||
| handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void {} | ||
|
|
||
| // Called when the pointer went down on something rendered by this layer, the pointer moved, and now the pointer is up | ||
| handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void {} | ||
|
|
||
| // Return features that can be used as a guide for editing the data | ||
| getGuides(props: ModeProps<FeatureCollection>): FeatureCollection { | ||
| const features = []; | ||
| if (this.startingPoint) { | ||
| features.push(this.startingPoint); | ||
| } | ||
| if (this.endingPoint) { | ||
| features.push(this.endingPoint); | ||
| } | ||
| if (this.startingPoint && this.endingPoint) { | ||
| features.push({ | ||
| type: 'Feature', | ||
| properties: { guideType: 'tentative' }, | ||
| geometry: { | ||
| type: 'LineString', | ||
| coordinates: [ | ||
| this.startingPoint.geometry.coordinates, | ||
| this.endingPoint.geometry.coordinates | ||
| ] | ||
| } | ||
| }); | ||
| } | ||
| return { type: 'FeatureCollection', features }; | ||
| } | ||
|
|
||
| getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] { | ||
| return this._getTooltips(props.modeConfig, this.startingPoint, this.endingPoint); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.