Feature/add measure tool

e2e/draw.spec.ts

@@ -18,7 +18,7 @@ test('clicks to the map produce a fetchable pin coordinate', async ({
   y += height / 2
 
   await page.getByLabel('Draw tools').click()
-  await page.getByText('Draw and write').click()
+  await page.getByText('Draw, write and measure').click()
   await page.getByText('Polygon').click()
 
   const moves: [number, number, string][] = [
@@ -56,7 +56,7 @@ test('two features drawn at the same coordinate can be modified separately', asy
   y += height / 2
 
   await page.getByLabel('Draw tools').click()
-  await page.getByText('Draw and write').click()
+  await page.getByText('Draw, write and measure').click()
   await page.getByText('Point').click()
 
   await page.mouse.click(x, y)

packages/clients/snowbox/src/mapConfiguration.ts

@@ -130,6 +130,11 @@ export const mapConfiguration = {
     ],
   },
   draw: {
+    measureOptions: {
+      metres: true,
+      kilometres: true,
+      hectares: true,
+    },
     selectableDrawModes: ['Circle', 'LineString', 'Point', 'Polygon', 'Text'],
     textStyle: {
       font: {

packages/core/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.0.1
 
+- Feature: Add new reusable component `RadioCard.vue` to the package.
 - Fix: Add `crossOrigin` differently to layer sources that are an instance of `ImageWMS` as they require it being set as `crossOrigin_` to be recognized.
 - Fix: Add missing `font-family` css so that tooltips are always `Arial, sans-serif`.
 

packages/plugins/Draw/src/components/RadioCard.vue → packages/core/src/components/RadioCard.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-card-title :id="`polar-draw-${id}`">{{ $t(title) }}</v-card-title>
+    <v-card-title :id="`polar-${id}`">{{ $t(title) }}</v-card-title>
     <v-card-text>
       <v-radio-group
-        :aria-labelledby="`polar-draw-${id}`"
+        :aria-labelledby="`polar-${id}`"
         dense
         hide-details
         :value="initialValue"

packages/core/src/components/index.ts

@@ -1 +1,2 @@
 export { default as MapContainer } from './MapContainer.vue'
+export { default as RadioCard } from './RadioCard.vue'

packages/core/src/index.ts

@@ -8,6 +8,7 @@ import './monkeyCrossOrigin'
 import './monkeyHeaderLoader'
 
 export { NineLayout, NineLayoutTag } from './components/layouts'
+export { RadioCard } from './components'
 export { setLayout, getLayout } from './utils/layout'
 export { default as mpapiDefaults } from './utils/createMap/defaults'
 

packages/plugins/Draw/CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## unpublished
+
+- Feature: Add new configuration parameter `measureOptions` to allow users to select a measurement mode when drawing feature. This way, a length / area in the selected unit is added to the drawn feature.
+- Fix: Update initial value of `drawMode` to a selectable value if the default `Point` is not a drawable option.
+- Fix: Adjust types `selectableDrawModes` and `selectableModes` to correctly reflect that they represent an object.
+- Chore: Add `@polar/core` as a dependency as the component `RadioCard.vue` has been moved from this package to `@polar/core`.
+
 ## 2.0.0
 
 - Breaking: Upgrade peerDependency `ol` from `^7.1.0` to `^9.2.4`.

packages/plugins/Draw/README.md

@@ -34,6 +34,7 @@ The styling of the drawn features can be configured to overwrite the default ol-
 | fieldName | type | description |
 | - | - | - |
 | enableOptions | boolean? | If `true`, draw options are displayed, like choosing and changing stroke color. Not available for texts features. Defaults to `false`. |
+| measureOptions | measureOptions? | If set, an additional radio is being shown to the user to be able to let the (then) drawn features display it's length and / or area. See [draw.measureOptions](#drawmeasureoptions) for further information. Not shown by default. |
 | selectableDrawModes | string[]? | List 'Point', 'LineString', 'Circle', 'Text' and/or 'Polygon' as desired. All besides 'Text' are selectable by default. |
 | style | style? | Please see example below for styling options. Defaults to standard OpenLayers styling. |
 | textStyle | textStyle? | Use this object with properties 'font' and 'textColor' to style text feature. |
@@ -70,6 +71,15 @@ draw: {
 
 </details>
 
+#### draw.measureOptions
+
+| fieldName | type | description |
+| - | - | - |
+| metres | boolean? | Whether to show the measure option `'m / m²'` to the user. `false` by default. |
+| kilometres | boolean? | Whether to show the measure option `'km / km²'` to the user. `false` by default. |
+| hectares | boolean? | Whether to show the measure option `'km / ha‚'` to the user. `false` by default. |
+| initialOption | 'none' \| 'meters' \| 'kilometres' \| 'hectares' | The initial measure option to be selected. Defaults to `'none'`. |
+
 #### draw.textStyle
 
 | fieldName | type | description |

packages/plugins/Draw/package.json

@@ -23,7 +23,11 @@
     "src/**/*",
     "CHANGELOG.md"
   ],
+  "dependencies": {
+    "@turf/center-of-mass": "^7.2.0"
+  },
   "peerDependencies": {
+    "@polar/core": "^2.0.0",
     "@repositoryname/vuex-generators": "^1.1.2",
     "ol": "^9.2.4",
     "vue": "^2.6.14",

packages/plugins/Draw/src/components/Draw.vue

@@ -2,21 +2,29 @@
   <v-scroll-x-reverse-transition>
     <v-card class="polar-draw-menu" :style="flexStyle">
       <RadioCard
-        id="mode"
+        id="draw-mode"
         title="common:plugins.draw.title.mode"
         :initial-value="mode"
         :values="selectableModes"
         :change-callback="setMode"
       ></RadioCard>
       <RadioCard
         v-if="mode === 'draw'"
-        id="drawMode"
+        id="draw-drawMode"
         title="common:plugins.draw.title.drawMode"
         :initial-value="drawMode"
         :values="selectableDrawModes"
         :change-callback="setDrawMode"
       ></RadioCard>
       <DrawOptions v-if="showDrawOptions" />
+      <RadioCard
+        v-if="showMeasureOptions"
+        id="draw-measure"
+        title="common:plugins.draw.title.measureMode"
+        :initial-value="measureMode"
+        :values="selectableMeasureModes"
+        :change-callback="setMeasureMode"
+      ></RadioCard>
       <v-subheader v-if="showSizeSlider" class="align-end">{{
         $t('common:plugins.draw.label.textSize')
       }}</v-subheader>
@@ -46,7 +54,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapActions, mapGetters } from 'vuex'
-import RadioCard from './RadioCard.vue'
+import { RadioCard } from '@polar/core'
 import DrawOptions from './DrawOptions.vue'
 
 export default Vue.extend({
@@ -61,16 +69,19 @@ export default Vue.extend({
   computed: {
     ...mapGetters(['hasSmallHeight', 'hasWindowSize']),
     ...mapGetters('plugin/draw', [
-      'mode',
       'drawMode',
+      'fontSizes',
+      'measureMode',
+      'mode',
       'selectableDrawModes',
+      'selectableMeasureModes',
       'selectableModes',
-      'textInput',
-      'showTextInput',
+      'showDrawOptions',
+      'showMeasureOptions',
       'selectedSize',
-      'fontSizes',
       'showSizeSlider',
-      'showDrawOptions',
+      'showTextInput',
+      'textInput',
     ]),
     flexStyle(): string {
       return `flex-direction: ${
@@ -80,10 +91,11 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions('plugin/draw', [
-      'setMode',
       'setDrawMode',
-      'setTextInput',
+      'setMeasureMode',
+      'setMode',
       'setSelectedSize',
+      'setTextInput',
     ]),
   },
 })

packages/plugins/Draw/src/language.ts

@@ -9,7 +9,9 @@ const language: LanguageOption[] = [
           mode: {
             none: 'Keine Interaktion',
             draw: 'Zeichnen',
+            measure: 'Zeichnen und Messen',
             write: 'Zeichnen und Schreiben',
+            writeAndMeasure: 'Zeichnen, Schreiben und Messen',
             edit: 'Bearbeiten',
             delete: 'Löschen',
           },
@@ -20,12 +22,19 @@ const language: LanguageOption[] = [
             polygon: 'Polygon',
             text: 'Text',
           },
+          measureMode: {
+            none: 'Keine Messung',
+            metres: 'm / m²',
+            kilometres: 'km / km²',
+            hectares: 'km / ha',
+          },
           options: {
             stroke: 'Linienfarbe',
           },
           title: {
-            mode: 'Modus',
             drawMode: 'Zeichenmodus',
+            mode: 'Modus',
+            measureMode: 'Messmodus',
             options: 'Zeichenoptionen',
           },
           label: {
@@ -43,7 +52,9 @@ const language: LanguageOption[] = [
           mode: {
             none: 'No interaction',
             draw: 'Draw',
+            measure: 'Draw and measure',
             write: 'Draw and write',
+            writeAndMeasure: 'Draw, write and measure',
             edit: 'Edit',
             delete: 'Delete',
           },
@@ -54,12 +65,19 @@ const language: LanguageOption[] = [
             polygon: 'Polygon',
             text: 'Text',
           },
+          measureMode: {
+            none: 'No measure',
+            metres: 'm / m²',
+            kilometres: 'km / km²',
+            hectares: 'km / ha',
+          },
           options: {
             stroke: 'Stroke color',
           },
           title: {
-            mode: 'Mode',
             drawMode: 'Drawing mode',
+            mode: 'Mode',
+            measureMode: 'Measure mode',
             options: 'Draw options',
           },
           label: {

packages/plugins/Draw/src/store/actions.ts

@@ -1,10 +1,10 @@
 import VectorSource from 'ol/source/Vector'
 import { Interaction, Select } from 'ol/interaction'
-import { PolarActionTree } from '@polar/lib-custom-types'
+import { DrawMode, MeasureMode, PolarActionTree } from '@polar/lib-custom-types'
 import GeoJSON from 'ol/format/GeoJSON'
 import { Circle, Point } from 'ol/geom'
 import createDrawLayer from '../utils/createDrawLayer'
-import { DrawGetters, DrawState } from '../types'
+import { DrawGetters, DrawState, Mode } from '../types'
 import { createTextStyle } from '../utils/createTextStyle'
 import createDrawStyle from '../utils/createDrawStyle'
 import createInteractions from './createInteractions'
@@ -27,7 +27,7 @@ export const makeActions = () => {
     setupModule({
       commit,
       dispatch,
-      getters: { configuration },
+      getters: { configuration, measureOptions, selectableDrawModes },
       rootGetters: { map },
     }) {
       dispatch('initializeConfigStyle')
@@ -38,13 +38,25 @@ export const makeActions = () => {
 
       map.addLayer(drawLayer)
       dispatch('updateInteractions')
+
+      const drawModes = Object.keys(selectableDrawModes)
+      if (!drawModes.includes('Point')) {
+        commit('setDrawMode', drawModes[0])
+      }
+      if (measureOptions.initialOption) {
+        commit('setMeasureMode', measureOptions.initialOption)
+      }
     },
-    setMode({ commit, dispatch }, mode) {
-      commit('setMode', mode)
+    setDrawMode({ commit, dispatch }, drawMode: DrawMode) {
+      commit('setDrawMode', drawMode)
       dispatch('updateInteractions')
     },
-    setDrawMode({ commit, dispatch }, drawMode) {
-      commit('setDrawMode', drawMode)
+    setMeasureMode({ commit, dispatch }, measureMode: MeasureMode) {
+      commit('setMeasureMode', measureMode)
+      dispatch('updateInteractions')
+    },
+    setMode({ commit, dispatch }, mode: Mode) {
+      commit('setMode', mode)
       dispatch('updateInteractions')
     },
     setTextInput(
@@ -68,7 +80,12 @@ export const makeActions = () => {
       }
     },
     setSelectedStrokeColor(
-      { commit, dispatch, getters: { configuration, selectedFeature, mode } },
+      {
+        commit,
+        dispatch,
+        getters: { configuration, measureMode, mode, selectedFeature },
+        rootGetters: { map },
+      },
       selectedStrokeColor
     ) {
       const featureStyle = selectedFeature?.getStyle()
@@ -79,6 +96,8 @@ export const makeActions = () => {
         const style = createDrawStyle(
           selectedFeature?.getGeometry()?.getType() || mode,
           selectedStrokeColor,
+          measureMode,
+          map.getView().getProjection(),
           configuration?.style
         )
         selectedFeature.setStyle(style)

packages/plugins/Draw/src/store/createInteractions/createDeleteInteractions.ts

@@ -29,7 +29,7 @@ export default function (
     selectedFeatures.clear()
   })
 
-  // @ts-expect-error | internal hack to detect it in Pins plugin
+  // @ts-expect-error | internal hack to detect it in other plugins
   selectInteraction._isDeleteSelect = true
 
   return [selectInteraction, dragBoxInteraction]

packages/plugins/Draw/src/store/createInteractions/index.ts

@@ -12,11 +12,13 @@ export default function (
     getters: {
       configuration,
       drawMode,
+      measureMode,
       mode,
+      selectedStrokeColor,
       textInput,
       textSize,
-      selectedStrokeColor,
     },
+    rootGetters: { map },
   }: PolarActionContext<DrawState, DrawGetters>,
   { drawSource, drawLayer }: CreateInteractionsPayload
 ): Interaction[] | Promise<Interaction[]> {
@@ -32,6 +34,8 @@ export default function (
     const style = createDrawStyle(
       drawMode,
       selectedStrokeColor,
+      measureMode,
+      map.getView().getProjection(),
       configuration?.style
     )