Merge branch 'main' into fix/remove-pan-tooltip-during-drag-interaction

packages/clients/diplan/example/config.js

@@ -1,7 +1,8 @@
 // service id map to avoid typos, ease renames
 const basemap = 'basemapde_farbe'
-const xplanwms = '1111'
-const xplanwfs = '1112'
+const xplanwms = 'xplanwms'
+const xplanwfs = 'xplanwfs'
+const flurstuecke = 'flurstuecke'
 
 export default {
   startResolution: 264.583190458,
@@ -18,11 +19,13 @@ export default {
             [basemap]: 'BasemapDE',
             [xplanwms]: 'XPlanWMS',
             [xplanwfs]: 'XPlanSynWFS',
+            [flurstuecke]: 'Flurstücke',
           },
           attributions: {
             [basemap]: `$t(diplan.layers.${basemap}) © GeoBasis-DE / BKG <YEAR> CC BY 4.0`,
             [xplanwms]: `$t(diplan.layers.${xplanwms}) © ???`,
             [xplanwfs]: `$t(diplan.layers.${xplanwfs}) © ???`,
+            [flurstuecke]: `$t(diplan.layers.${flurstuecke}) © ???`,
           },
         },
       },
@@ -60,10 +63,18 @@ export default {
     },
     {
       id: xplanwfs,
-      visibility: true,
+      visibility: false,
       type: 'mask',
       name: `diplan.layers.${xplanwfs}`,
     },
+    {
+      id: flurstuecke,
+      visibility: false,
+      // TODO available from 7, but only starts loading from 8 - bug or skill issue?
+      minZoom: 7,
+      type: 'mask',
+      name: `diplan.layers.${flurstuecke}`,
+    },
   ],
   attributions: {
     layerAttributions: [
@@ -79,8 +90,39 @@ export default {
         id: xplanwfs,
         title: `diplan.attributions.${xplanwfs}`,
       },
+      {
+        id: flurstuecke,
+        title: `diplan.attributions.${flurstuecke}`,
+      },
     ],
   },
+  draw: {
+    enableOptions: true,
+    measureOptions: {
+      metres: true,
+      kilometres: true,
+      hectares: true,
+    },
+    selectableDrawModes: ['Point', 'LineString', 'Circle', 'Text', 'Polygon'],
+    snapTo: [xplanwfs, flurstuecke],
+    textStyle: {
+      font: {
+        size: [10, 20, 30],
+        family: 'Arial',
+      },
+    },
+    style: {
+      fill: { color: 'rgb(51 117 212 / 50%)' },
+      stroke: {
+        color: '#3375d4',
+        width: 2,
+      },
+      circle: {
+        radius: 7,
+        fillColor: 'rgb(51 117 212 / 50%)',
+      },
+    },
+  },
   export: {
     displayComponent: true,
     showJpg: false,

packages/clients/diplan/example/services.js

@@ -6,7 +6,7 @@
 export default [
   {
     visibility: true,
-    id: '1111',
+    id: 'xplanwms',
     name: 'XPlanWMS',
     url: 'https://hh-qs.xplanungsplattform.de/xplan-wms/services/wms',
     typ: 'WMS',
@@ -137,7 +137,7 @@ export default [
   },
   {
     visibility: false,
-    id: '1112',
+    id: 'xplanwfs',
     name: 'XPlanSynWFS',
     url: 'https://hh-qs.xplanungsplattform.de/xplansyn-wfs/services/xplansynwfs',
     typ: 'WFS',
@@ -442,4 +442,13 @@ export default [
     legend: true,
     featureCount: 1,
   },
+  {
+    id: 'flurstuecke',
+    typ: 'OAF',
+    name: 'Flurstueck',
+    url: 'https://api.hamburg.de/datasets/v1/alkis_vereinfacht',
+    collection: 'Flurstueck',
+    crs: 'http://www.opengis.net/def/crs/EPSG/0/25832',
+    bboxCrs: 'http://www.opengis.net/def/crs/EPSG/0/25832',
+  },
 ]

packages/clients/diplan/package.json

@@ -39,6 +39,7 @@
     "@polar/plugin-attributions": "^1.4.0",
     "@polar/plugin-draw": "^3.0.0",
     "@polar/plugin-export": "^1.2.2",
+    "@polar/plugin-fullscreen": "^1.2.3",
     "@polar/plugin-gfi": "^3.0.0",
     "@polar/plugin-icon-menu": "^1.3.1",
     "@polar/plugin-layer-chooser": "^2.0.0",

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

@@ -3,6 +3,7 @@ import AddressSearch from '@polar/plugin-address-search'
 import Attributions from '@polar/plugin-attributions'
 import Draw from '@polar/plugin-draw'
 import Export from '@polar/plugin-export'
+import Fullscreen from '@polar/plugin-fullscreen'
 import Gfi from '@polar/plugin-gfi'
 import IconMenu from '@polar/plugin-icon-menu'
 import LayerChooser from '@polar/plugin-layer-chooser'
@@ -45,6 +46,11 @@ polarCore.addPlugins([
         icon: '$vuetify.icons.ruler',
         id: 'draw',
       },
+      {
+        plugin: Fullscreen({ renderType: 'iconMenu' }),
+        // TODO icon: '$vuetify.icons.fullscreen',
+        id: 'fullscreen',
+      },
       {
         plugin: Zoom({
           renderType: 'iconMenu',

packages/core/README.md

@@ -342,6 +342,7 @@ Whitelisted and confirmed parameters include:
 - WMS:  id, name, url, typ, format, version, transparent, layers, STYLES
 - WFS:  id, name, url, typ, outputFormat, version, featureType
 - WMTS: id, name, urls, typ, capabilitiesUrl, optionsFromCapabilities, tileMatrixSet, layers, legendURL, format, coordinateSystem, origin, transparent, tileSize, minScale, maxScale, requestEncoding, resLength
+- OAF: id, name, url, typ, collection, crs, bboxCrs
 - GeoJSON: id, name, url, typ, version, minScale, maxScale, legendURL
 
 ###### Example services register
@@ -396,6 +397,16 @@ Whitelisted and confirmed parameters include:
     "layers": "layer-name",
     "legendURL": "my-legend-url"
   },
+  {
+    "id": "oaf",
+    "typ": "OAF",
+    "name": "My OAF",
+    "url": "https://api.hamburg.de/datasets/v1/stadtgruen",
+    "collection": "poi",
+    "crs": "http://www.opengis.net/def/crs/EPSG/0/25832",
+    "bboxCrs": "http://www.opengis.net/def/crs/EPSG/0/25832",
+    "gfiTheme": "default",
+  },
   {
     "id": "my-geojson",
     "name": "My GeoJSON data",

packages/plugins/Draw/CHANGELOG.md

@@ -2,7 +2,8 @@
 
 ## unpublished
 
-- Feature: Add a "Translate" mode that allows moving drawn features as they are.
+- Feature: Add a `"translate"` mode that allows moving drawn features as they are.
+- Feature: Add a `"snapTo"` key to the configuration that allows defining vector layers to snap to while drawing, editing, and translating.
 - Feature: Interactions requiring dragging are now marked with the POLAR flag `_isPolarDragLikeInteraction`.
 
 ## 3.0.0

packages/plugins/Draw/README.md

@@ -36,6 +36,7 @@ The styling of the drawn features can be configured to overwrite the default ol-
 | 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 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. |
 

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

@@ -9,9 +9,11 @@ import { createTextStyle } from '../utils/createTextStyle'
 import createDrawStyle from '../utils/createDrawStyle'
 import createInteractions from './createInteractions'
 import createModifyInteractions from './createInteractions/createModifyInteractions'
+import createTextInteractions from './createInteractions/createTextInteractions'
 import createTranslateInteractions from './createInteractions/createTranslateInteractions'
 import modifyDrawStyle from './createInteractions/modifyDrawStyle'
 import modifyTextStyle from './createInteractions/modifyTextStyle'
+import createDrawInteractions from './createInteractions/createDrawInteractions'
 
 // OK for module action set creation
 // eslint-disable-next-line max-lines-per-function
@@ -22,8 +24,10 @@ export const makeActions = () => {
 
   const actions: PolarActionTree<DrawState, DrawGetters> = {
     createInteractions,
+    createDrawInteractions,
     createModifyInteractions,
     createTranslateInteractions,
+    createTextInteractions,
     modifyDrawStyle,
     modifyTextStyle,
     setupModule({

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

@@ -0,0 +1,54 @@
+import { Draw, Snap } from 'ol/interaction'
+import Interaction from 'ol/interaction/Interaction'
+import { PolarActionContext } from '@polar/lib-custom-types'
+import { CreateInteractionsPayload, DrawGetters, DrawState } from '../../types'
+import createDrawStyle from '../../utils/createDrawStyle'
+import { getSchnaps } from './getSnaps'
+
+export default function (
+  {
+    dispatch,
+    rootGetters,
+    getters: {
+      configuration,
+      drawMode,
+      measureMode,
+      selectedStrokeColor,
+      textInput,
+      textSize,
+    },
+  }: PolarActionContext<DrawState, DrawGetters>,
+  { drawSource }: CreateInteractionsPayload
+): Promise<Interaction[]> | Interaction[] {
+  if (drawMode === 'Text') {
+    return dispatch('createTextInteractions', {
+      textInput,
+      textSize,
+      drawSource,
+      configuration,
+    })
+  }
+  const style = createDrawStyle(
+    drawMode,
+    selectedStrokeColor,
+    measureMode,
+    rootGetters.map.getView().getProjection(),
+    configuration?.style
+  )
+  const draw = new Draw({
+    source: drawSource,
+    type: drawMode,
+    style,
+  })
+  // @ts-expect-error | internal hack to detect it in @polar/plugin-pins and @polar/plugin-gfi
+  draw._isDrawPlugin = true
+  draw.on('drawend', (e) => e.feature.setStyle(style))
+  return [
+    draw,
+    ...getSchnaps(
+      rootGetters.map,
+      rootGetters.configuration?.draw?.snapTo || []
+    ),
+    new Snap({ source: drawSource }),
+  ]
+}

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

@@ -4,6 +4,7 @@ import { PolarActionContext } from '@polar/lib-custom-types'
 import { Collection, Feature, Map } from 'ol'
 import { CreateInteractionsPayload, DrawGetters, DrawState } from '../../types'
 import { makeLocalSelector } from './localSelector'
+import { getSchnaps } from './getSnaps'
 
 const createModify = (
   map: Map,
@@ -73,9 +74,12 @@ export default function (
       }
     }
   })
-
   return [
     createModify(rootGetters.map, drawLayer),
+    ...getSchnaps(
+      rootGetters.map,
+      rootGetters.configuration?.draw?.snapTo || []
+    ),
     new Snap({ source: drawSource }),
     select,
   ]

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

@@ -1,15 +1,26 @@
 import { Draw, Snap } from 'ol/interaction'
 import Interaction from 'ol/interaction/Interaction'
 import VectorSource from 'ol/source/Vector'
-import { DrawConfiguration } from '@polar/lib-custom-types'
+import { DrawConfiguration, PolarActionContext } from '@polar/lib-custom-types'
 import { DrawGetters, DrawState } from '../../types'
 import { createTextStyle } from '../../utils/createTextStyle'
+import { getSchnaps } from './getSnaps'
 
-export default function (
-  textInput: DrawState['textInput'],
-  textSize: DrawGetters['textSize'],
-  drawSource: VectorSource,
+interface CreateTextInteractionsPayload {
+  textInput: DrawState['textInput']
+  textSize: DrawGetters['textSize']
+  drawSource: VectorSource
   drawConfiguration?: DrawConfiguration
+}
+
+export default function (
+  { rootGetters }: PolarActionContext<DrawState, DrawGetters>,
+  {
+    textInput,
+    textSize,
+    drawSource,
+    drawConfiguration,
+  }: CreateTextInteractionsPayload
 ): Interaction[] {
   if (!textInput) {
     // nothing to draw yet
@@ -37,5 +48,12 @@ export default function (
       drawSource.removeFeature(event.feature)
     }
   })
-  return [draw, new Snap({ source: drawSource })]
+  return [
+    draw,
+    ...getSchnaps(
+      rootGetters.map,
+      rootGetters.configuration?.draw?.snapTo || []
+    ),
+    new Snap({ source: drawSource }),
+  ]
 }

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

@@ -4,6 +4,7 @@ import { PolarActionContext } from '@polar/lib-custom-types'
 import { Collection, Feature, Map } from 'ol'
 import { CreateInteractionsPayload, DrawGetters, DrawState } from '../../types'
 import { makeLocalSelector } from './localSelector'
+import { getSchnaps } from './getSnaps'
 
 const createTranslate = (
   map: Map,
@@ -39,6 +40,10 @@ export default function (
 ): Interaction[] {
   return [
     createTranslate(rootGetters.map, drawLayer),
+    ...getSchnaps(
+      rootGetters.map,
+      rootGetters.configuration?.draw?.snapTo || []
+    ),
     new Snap({ source: drawSource }),
   ]
 }

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

@@ -0,0 +1,22 @@
+import { Map } from 'ol'
+import { Snap } from 'ol/interaction'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+
+export const getSchnaps = (map: Map, snapIds: string[]): Snap[] =>
+  snapIds.reduce((accumulator, layerId) => {
+    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.`
+      )
+    }
+    return accumulator
+  }, [] as Snap[])