Skip to content

Commit

Permalink
add lasso draft
Browse files Browse the repository at this point in the history
  • Loading branch information
warm-coolguy committed Feb 18, 2025
1 parent 521a46c commit 06bd465
Show file tree
Hide file tree
Showing 14 changed files with 155 additions and 4 deletions.
6 changes: 6 additions & 0 deletions packages/clients/diplan/example/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,11 @@ export default {
},
draw: {
enableOptions: true,
lassos: [
{
id: flurstuecke,
},
],
measureOptions: {
metres: true,
kilometres: true,
Expand All @@ -111,6 +116,7 @@ export default {
family: 'Arial',
},
},
toastAction: 'plugin/toast/addToast',
style: {
fill: { color: 'rgb(51 117 212 / 50%)' },
stroke: {
Expand Down
1 change: 1 addition & 0 deletions packages/clients/diplan/example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
1 change: 1 addition & 0 deletions packages/clients/diplan/example/prod-example.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
3 changes: 3 additions & 0 deletions packages/clients/diplan/example/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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')
Expand Down
5 changes: 4 additions & 1 deletion packages/clients/diplan/src/polar-client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
15 changes: 13 additions & 2 deletions packages/plugins/Draw/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand All @@ -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',
Expand All @@ -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 |
Expand Down
2 changes: 2 additions & 0 deletions packages/plugins/Draw/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 8 additions & 0 deletions packages/plugins/Draw/src/locales.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/plugins/Draw/src/store/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -25,6 +26,7 @@ export const makeActions = () => {
const actions: PolarActionTree<DrawState, DrawGetters> = {
createInteractions,
createDrawInteractions,
createLassoInteractions,
createModifyInteractions,
createTranslateInteractions,
createTextInteractions,
Expand Down
Original file line number Diff line number Diff line change
@@ -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

Check failure on line 44 in packages/plugins/Draw/src/store/createInteractions/createLassoInteractions.ts

View workflow job for this annotation

GitHub Actions / lint

'drawnLasso' is assigned a value but never used

Check warning on line 44 in packages/plugins/Draw/src/store/createInteractions/createLassoInteractions.ts

View workflow job for this annotation

GitHub Actions / lint

'drawnLasso' is assigned a value but never used
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 })

Check failure on line 72 in packages/plugins/Draw/src/store/createInteractions/createLassoInteractions.ts

View workflow job for this annotation

GitHub Actions / lint

'serviceDefinition' is assigned a value but never used

Check warning on line 72 in packages/plugins/Draw/src/store/createInteractions/createLassoInteractions.ts

View workflow job for this annotation

GitHub Actions / lint

'serviceDefinition' is assigned a value but never used

// 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]
}
2 changes: 2 additions & 0 deletions packages/plugins/Draw/src/store/createInteractions/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 []
}
2 changes: 1 addition & 1 deletion packages/plugins/Draw/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/types/custom/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 7 additions & 0 deletions packages/types/custom/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 06bd465

Please sign in to comment.