add lasso draft

Author: warm-coolguy

packages/clients/diplan/example/config.js

@@ -98,6 +98,11 @@ export default {
   },
   draw: {
     enableOptions: true,
+    lassos: [
+      {
+        id: flurstuecke,
+      },
+    ],
     measureOptions: {
       metres: true,
       kilometres: true,
@@ -111,6 +116,7 @@ export default {
         family: 'Arial',
       },
     },
+    toastAction: 'plugin/toast/addToast',
     style: {
       fill: { color: 'rgb(51 117 212 / 50%)' },
       stroke: {

packages/clients/diplan/example/index.html

@@ -22,6 +22,7 @@ <h3>Steuerung von außen</h3>
           <button id="action-toast">Toast</button>
           <button id="action-load-geojson">GeoJSON hinzufügen</button>
           <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <button id="action-lasso">Lasso-Funktion</button>
           <label>
             Adresssuche (erstbestes Ergebnis):
             <input id="action-address-search-filler"/>

packages/clients/diplan/example/prod-example.html

@@ -22,6 +22,7 @@ <h3>Steuerung von außen</h3>
           <button id="action-toast">Toast</button>
           <button id="action-load-geojson">GeoJSON hinzufügen</button>
           <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <button id="action-lasso">Lasso-Funktion</button>
           <label>
             Adresssuche (erstbestes Ergebnis):
             <input id="action-address-search-filler"/>

packages/clients/diplan/example/setup.js

@@ -70,6 +70,7 @@ export default (client, layerConf, config) => {
       const actionFillAddressSearch = document.getElementById(
         'action-address-search-filler'
       )
+      const actionLasso = document.getElementById('action-lasso')
 
       actionPlus.onclick = () =>
         mapInstance.$store.dispatch('plugin/zoom/increaseZoomLevel')
@@ -96,6 +97,8 @@ export default (client, layerConf, config) => {
           autoselect: 'first',
         })
       )
+      actionLasso.onclick = () =>
+        mapInstance.$store.dispatch('plugin/draw/setMode', 'lasso')
 
       const htmlZoom = document.getElementById('subscribed-zoom')
       const htmlGfi = document.getElementById('subscribed-gfi')

packages/clients/diplan/src/polar-client.ts

@@ -42,7 +42,10 @@ polarCore.addPlugins([
         id: 'layerChooser',
       },
       {
-        plugin: Draw({}),
+        plugin: Draw({
+          addLoading: 'plugin/loadingIndicator/addLoadingKey',
+          removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
+        }),
         icon: '$vuetify.icons.ruler',
         id: 'draw',
       },

packages/plugins/Draw/README.md

@@ -33,12 +33,16 @@ The styling of the drawn features can be configured to overwrite the default ol-
 
 | fieldName | type | description |
 | - | - | - |
+| addLoading | string? | Expects the path to a mutation within the store. This mutation is committed with a plugin-specific loading key as payload when starting asynchronous procedures that are intended to be communicated to the user. |
 | enableOptions | boolean? | If `true`, draw options are displayed, like choosing and changing stroke color. Not available for texts features. Defaults to `false`. |
+| lassos | lasso[]? | Allows configuring lasso options. The lasso function allows free-hand drawing a geometry on the map; features completely fitting into that geometry will be copied up to the draw layer from all configured layers. 💡 Please mind that the lasso function currently has no UI in the client, and the functionality must be triggered externally. |
+| removeLoading | string? | Expects the path to a mutation within the store. This mutation is committed with a plugin-specific loading key as payload when finishing asynchronous procedures that are intended to be communicated to the user. |
 | measureOptions | measureOptions? | If set, an additional radio is being shown to the user to be able to let the (then) drawn features display their 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. |
 | snapTo | string[]? | Accepts an array of layer IDs. If these layers are active, they are used as snapping material for geometry manipulation. The Draw layer will also always snap to its own features regardless. Please mind that used layers must provide vector data. The layers referred to must be configured in `mapConfiguration.layers`. |
 | 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. |
+| toastAction | string? | This string will be used as action to send a toast information to the user to clarify why something happened in edge cases. If this is not defined, the information will be printed to the console for debugging purposes instead. |
 
 For details on the `displayComponent` attribute, refer to the [Global Plugin Parameters](../../core/README.md#global-plugin-parameters) section of `@polar/core`.
 
@@ -55,8 +59,8 @@ draw: {
     },
   },
   style: {
-    fill: { 
-      color: 'rgba(255, 255, 255, 0.5)' 
+    fill: {
+      color: 'rgba(255, 255, 255, 0.5)'
     },
     stroke: {
       color: '#e51313',
@@ -72,6 +76,13 @@ draw: {
 
 </details>
 
+#### draw.lasso
+
+| fieldName | type | description |
+| - | - | - |
+| id | string | The layer id of a vector layer to copy up vector features from. |
+| minZoom | boolean | Defaults to `true`. If a boolean is given, the `minZoom` (if configured) of the `LayerConfiguration` in `mapConfiguration.layers` will be adhered to when copying up geometries from the source. This is to prevent the client from overly burdening feature-rich vector services on accident. |
+
 #### draw.measureOptions
 
 | fieldName | type | description |

packages/plugins/Draw/package.json

@@ -27,8 +27,10 @@
     "@turf/center-of-mass": "^7.2.0"
   },
   "peerDependencies": {
+    "@masterportal/masterportalapi": "2.45.0",
     "@polar/core": "^3.0.0",
     "@repositoryname/vuex-generators": "^1.1.2",
+    "i18next": "^23.11.5",
     "ol": "^10.3.1",
     "vue": "^2.6.14",
     "vuex": "^3.6.2"

packages/plugins/Draw/src/locales.ts

@@ -40,6 +40,10 @@ export const resourcesDe = {
       label: {
         textSize: 'Textgröße (px) wählen:',
       },
+      lasso: {
+        notInZoomRange:
+          'Der Layer "$t({{serviceName}})" wurde nicht für die Lasso-Funktion genutzt, da er auf der derzeitigen Zoomstufe nicht aktivierbar ist. Bitte zoomen Sie weiter rein.',
+      },
     },
   },
 } as const
@@ -84,6 +88,10 @@ export const resourcesEn = {
       label: {
         textSize: 'Choose text size (px):',
       },
+      lasso: {
+        notInZoomRange:
+          'The layer "$t({{serviceName}})" was not used for the lasso as it is not activatable on the current zoom level. Please zoom in further.',
+      },
     },
   },
 } as const

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

@@ -11,6 +11,7 @@ import createInteractions from './createInteractions'
 import createModifyInteractions from './createInteractions/createModifyInteractions'
 import createTextInteractions from './createInteractions/createTextInteractions'
 import createTranslateInteractions from './createInteractions/createTranslateInteractions'
+import createLassoInteractions from './createInteractions/createLassoInteractions'
 import modifyDrawStyle from './createInteractions/modifyDrawStyle'
 import modifyTextStyle from './createInteractions/modifyTextStyle'
 import createDrawInteractions from './createInteractions/createDrawInteractions'
@@ -25,6 +26,7 @@ export const makeActions = () => {
   const actions: PolarActionTree<DrawState, DrawGetters> = {
     createInteractions,
     createDrawInteractions,
+    createLassoInteractions,
     createModifyInteractions,
     createTranslateInteractions,
     createTextInteractions,

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

@@ -0,0 +1,104 @@
+import Draw from 'ol/interaction/Draw'
+import Interaction from 'ol/interaction/Interaction'
+import i18next from 'i18next'
+import { rawLayerList } from '@masterportal/masterportalapi'
+import { PolarActionContext } from '@polar/lib-custom-types'
+import { DrawGetters, DrawState } from '../../types'
+
+const loaderKey = 'drawLasso'
+
+/*
+TODO use snippet to confirm the layer type worked on
+    const source = (
+      map
+        .getLayers()
+        .getArray()
+        .find((layer) => layer.get('id') === layerId) as VectorLayer
+    )?.getSource?.()
+    if (source instanceof VectorSource) {
+      accumulator.push(new Snap({ source }))
+    } else {
+      console.warn(
+        `@polar/plugin-draw: Layer with ID "${layerId}" configured for 'snapTo', but it has no source to snap to. The layer does probably not hold any vector data.`
+      )
+    }
+      */
+
+// TODO un – refactor after done
+// eslint-disable-next-line max-lines-per-function
+export default function ({
+  rootGetters,
+  commit,
+  dispatch,
+}: PolarActionContext<DrawState, DrawGetters>): Interaction[] {
+  const draw = new Draw({
+    type: 'Polygon',
+    freehand: true,
+  })
+  const { addLoading, removeLoading } = rootGetters.configuration?.draw || {}
+  // TODO un
+  // eslint-disable-next-line max-lines-per-function
+  draw.on('drawend', (e) => {
+    dispatch('setMode', 'none')
+
+    const drawnLasso = e.feature
+    const lassos = rootGetters.configuration.draw?.lassos || []
+    const toastAction = rootGetters.configuration.draw?.toastAction || ''
+    const promises = lassos.reduce((accumulator, { id, minZoom = true }) => {
+      const layerConfig = rootGetters.configuration.layers?.find(
+        (layer) => id === layer.id
+      )
+      if (
+        minZoom &&
+        layerConfig &&
+        typeof layerConfig.minZoom !== 'undefined' &&
+        rootGetters.zoomLevel < layerConfig.minZoom
+      ) {
+        if (toastAction) {
+          dispatch(toastAction, {
+            type: 'info',
+            text: i18next.t('plugins.draw.lasso.notInZoomRange', {
+              serviceName: layerConfig.name || id,
+            }),
+            timeout: 10000,
+          })
+        } else {
+          console.warn(
+            `Lasso not used with layer with id "${id}". (minZoom not reached)`
+          )
+        }
+        return accumulator
+      }
+      const serviceDefinition = rawLayerList.getLayerWhere({ id })
+
+      // TODO implement for OAF, use existing getFeatures for WFS
+      // https://api.hamburg.de/datasets/v1/alkis_vereinfacht/collections/Flurstueck/items?f=json&limit=10&bbox=10.0872,53.5357,10.0883,53.5362
+
+      accumulator.push(new Promise(() => ({})))
+      return accumulator
+    }, [] as Promise<object>[])
+
+    Promise.all(promises)
+      .then((resolutions) => {
+        if (addLoading) {
+          commit(addLoading, loaderKey, { root: true })
+        }
+
+        // TODO parse resolutions
+        // TODO filter with drawnLasso (we're probably just loading by bbox?)
+        // TODO add as geoJSON to draw
+
+        console.warn(resolutions)
+
+        dispatch('addFeatures', { geoJSON: {} })
+      })
+      .catch(() => {
+        /* TODO at least toast something */
+      })
+      .finally(
+        () => removeLoading && commit(removeLoading, loaderKey, { root: true })
+      )
+  })
+
+  return [draw]
+}

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

@@ -15,6 +15,8 @@ export default function (
     return dispatch('createTranslateInteractions', { drawSource, drawLayer })
   } else if (mode === 'delete') {
     return createDeleteInteractions(drawSource, drawLayer)
+  } else if (mode === 'lasso') {
+    return dispatch('createLassoInteractions')
   }
   return []
 }

packages/plugins/Draw/src/types.ts

@@ -18,7 +18,7 @@ export interface PolarVectorOptions {
   style?: StyleLike
 }
 
-export type Mode = 'none' | 'draw' | 'edit' | 'translate' | 'delete'
+export type Mode = 'none' | 'draw' | 'edit' | 'translate' | 'delete' | 'lasso'
 
 export interface CreateInteractionsPayload {
   drawSource: VectorSource

packages/types/custom/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## unpublished
 
 - Feature: Add `snapTo` to `DrawConfiguration` for specification of layers to snap to.
+- Feature: Add `lassos` to `DrawConfiguration`. With this, `addLoading`, `removeLoading`, and `toastAction` have also been introduced to allow the feature to use other plugins via API calls.
 
 ## 2.0.0
 

packages/types/custom/core.ts

@@ -196,12 +196,19 @@ export interface MeasureOptions {
 }
 
 export interface DrawConfiguration extends Partial<PluginOptions> {
+  addLoading?: string
   enableOptions?: boolean
+  lassos?: {
+    id: string
+    minZoom: boolean
+  }[]
   measureOptions?: MeasureOptions
+  removeLoading?: string
   selectableDrawModes?: DrawMode[]
   snapTo?: string[]
   style?: DrawStyle
   textStyle?: TextStyle
+  toastAction?: string
 }
 
 export interface ExportConfiguration extends PluginOptions {