@defra/interactive-map 0.0.30-alpha → 0.0.32-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/assets/images/bright-ofm-thumb.jpg +0 -0
- package/assets/images/dark-ofm-thumb.jpg +0 -0
- package/assets/images/road-ofm-thumb.jpg +0 -0
- package/assets/templates/add-polygons.njk +143 -0
- package/assets/templates/add-symbols.njk +119 -0
- package/assets/templates/{map.njk → basic-map.njk} +9 -17
- package/assets/templates/button-map.njk +56 -0
- package/assets/templates/draw-tools.njk +161 -0
- package/assets/templates/marker-panel.njk +91 -0
- package/assets/templates/place-marker.njk +104 -0
- package/assets/templates/search-control.njk +98 -0
- package/assets/templates/select-feature.njk +101 -0
- package/assets/templates/style-switcher.njk +87 -0
- package/assets/templates/toggle-marker-label.njk +74 -0
- package/dist/css/index.css +1 -1
- package/dist/esm/im-core.js +1 -1
- package/dist/esm/im-shell.js +1 -1
- package/dist/umd/im-core.js +1 -1
- package/dist/umd/index.js +1 -1
- package/docs/api/context.md +4 -4
- package/docs/api.md +166 -37
- package/docs/assets/css/docusaurus.scss +36 -4
- package/docs/assets/images/add-polygons.jpg +0 -0
- package/docs/assets/images/add-symbols.jpg +0 -0
- package/docs/assets/images/basic-map.jpg +0 -0
- package/docs/assets/images/button-first.jpg +0 -0
- package/docs/assets/images/deuteranopia-ozs-map-thumb.jpg +0 -0
- package/docs/assets/images/draw.jpg +0 -0
- package/docs/assets/images/marker-panel.jpg +0 -0
- package/docs/assets/images/night-ozs-map-thumb.jpg +0 -0
- package/docs/assets/images/outdoor-ozs-map-thumb.jpg +0 -0
- package/docs/assets/images/place-marker.jpg +0 -0
- package/docs/assets/images/screenshot.jpg +0 -0
- package/docs/assets/images/search.jpg +0 -0
- package/docs/assets/images/select-feature.jpg +0 -0
- package/docs/assets/images/style-switcher.jpg +0 -0
- package/docs/assets/images/toggle-marker-label.jpg +0 -0
- package/docs/assets/images/tritanopia-ozs-map-thumb.jpg +0 -0
- package/docs/examples/add-marker-with-panel.mdx +3 -3
- package/docs/examples/add-polygons.mdx +225 -0
- package/docs/examples/add-symbols.mdx +177 -0
- package/docs/examples/basic-map.mdx +2 -2
- package/docs/examples/draw-tools.mdx +271 -0
- package/docs/examples/index.mdx +95 -11
- package/docs/examples/place-marker.mdx +151 -0
- package/docs/examples/search-control.mdx +71 -0
- package/docs/examples/select-feature.mdx +146 -0
- package/docs/examples/style-switcher.mdx +135 -0
- package/docs/examples/toggle-marker-label.mdx +3 -3
- package/docs/plugins/datasets.md +157 -122
- package/docs/plugins/interact.md +1 -4
- package/docusaurus.config.cjs +9 -2
- package/govuk-prototype-kit.config.json +52 -2
- package/package.json +1 -1
- package/plugins/beta/datasets/dist/css/index.css +5 -2
- package/plugins/beta/datasets/dist/esm/im-datasets-ml-adapter.js +1 -0
- package/plugins/beta/datasets/dist/esm/im-datasets-plugin.js +1 -1
- package/plugins/beta/datasets/dist/esm/index.js +1 -1
- package/plugins/beta/datasets/dist/umd/im-datasets-ml-adapter.js +2 -0
- package/plugins/beta/datasets/dist/umd/im-datasets-plugin.js +2 -0
- package/plugins/beta/datasets/dist/umd/index.js +2 -0
- package/plugins/beta/datasets/src/adapters/loadLayerAdapter.js +33 -0
- package/plugins/beta/datasets/src/adapters/maplibre/layerBuilders.js +44 -120
- package/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js +145 -245
- package/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.test.js +516 -0
- package/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.js +209 -0
- package/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.test.js +483 -0
- package/plugins/beta/datasets/src/api/addDataset.js +2 -5
- package/plugins/beta/datasets/src/api/addDataset.test.js +16 -0
- package/plugins/beta/datasets/src/api/getOpacity.js +14 -14
- package/plugins/beta/datasets/src/api/getOpacity.test.js +72 -0
- package/plugins/beta/datasets/src/api/getStyle.js +8 -9
- package/plugins/beta/datasets/src/api/getStyle.test.js +42 -0
- package/plugins/beta/datasets/src/api/removeDataset.js +7 -7
- package/plugins/beta/datasets/src/api/removeDataset.test.js +45 -0
- package/plugins/beta/datasets/src/api/setData.js +9 -3
- package/plugins/beta/datasets/src/api/setData.test.js +62 -0
- package/plugins/beta/datasets/src/api/setDatasetVisibility.js +5 -30
- package/plugins/beta/datasets/src/api/setDatasetVisibility.test.js +31 -0
- package/plugins/beta/datasets/src/api/setFeatureVisibility.js +9 -18
- package/plugins/beta/datasets/src/api/setFeatureVisibility.test.js +74 -0
- package/plugins/beta/datasets/src/api/setGlobals.js +20 -0
- package/plugins/beta/datasets/src/api/setGlobals.test.js +63 -0
- package/plugins/beta/datasets/src/api/setOpacity.js +8 -27
- package/plugins/beta/datasets/src/api/setOpacity.test.js +31 -0
- package/plugins/beta/datasets/src/api/setStyle.js +5 -21
- package/plugins/beta/datasets/src/api/setStyle.test.js +53 -0
- package/plugins/beta/datasets/src/components/Key/Key.jsx +51 -0
- package/plugins/beta/datasets/src/components/Key/KeyGroupItem.jsx +18 -0
- package/plugins/beta/datasets/src/components/Key/KeyItem.jsx +20 -0
- package/plugins/beta/datasets/src/components/Key/KeySvg.jsx +22 -0
- package/plugins/beta/datasets/src/components/Key/KeySvg.test.jsx +87 -0
- package/plugins/beta/datasets/src/components/Key/KeySvgLine.jsx +19 -0
- package/plugins/beta/datasets/src/components/Key/KeySvgLine.test.jsx +71 -0
- package/plugins/beta/datasets/src/components/{KeySvgPattern.jsx → Key/KeySvgPattern.jsx} +3 -4
- package/plugins/beta/datasets/src/components/Key/KeySvgPattern.test.jsx +55 -0
- package/plugins/beta/datasets/src/components/Key/KeySvgRect.jsx +22 -0
- package/plugins/beta/datasets/src/components/Key/KeySvgRect.test.jsx +85 -0
- package/plugins/beta/datasets/src/components/{KeySvgSymbol.jsx → Key/KeySvgSymbol.jsx} +5 -5
- package/plugins/beta/datasets/src/components/Key/KeySvgSymbol.test.jsx +80 -0
- package/plugins/beta/datasets/src/components/Key/svgProperties.test.js +61 -0
- package/plugins/beta/datasets/src/{panels → components/LayersMenu}/Layers.module.scss +15 -11
- package/plugins/beta/datasets/src/components/LayersMenu/LayersMenu.jsx +33 -0
- package/plugins/beta/datasets/src/components/LayersMenu/LayersMenuCheckbox.jsx +31 -0
- package/plugins/beta/datasets/src/components/LayersMenu/LayersMenuGroupWrapper.jsx +19 -0
- package/plugins/beta/datasets/src/datasets.scss +2 -2
- package/plugins/beta/datasets/src/fetch/createDynamicSource.js +8 -8
- package/plugins/beta/datasets/src/{DatasetsInit.jsx → initialise/DatasetsInit.jsx} +19 -21
- package/plugins/beta/datasets/src/{defaults.js → initialise/defaults.js} +17 -2
- package/plugins/beta/datasets/src/initialise/defaults.test.js +127 -0
- package/plugins/beta/datasets/src/{datasets.js → initialise/initialiseDatasets.js} +30 -26
- package/plugins/beta/datasets/src/initialise/initialiseDatasets.test.js +273 -0
- package/plugins/beta/datasets/src/manifest.js +8 -6
- package/plugins/beta/datasets/src/reducers/__data__/demoDatasets.js +253 -0
- package/plugins/beta/datasets/src/reducers/datasetsToMenu.js +83 -0
- package/plugins/beta/datasets/src/reducers/datasetsToMenu.test.js +84 -0
- package/plugins/beta/datasets/src/reducers/mappedDatasetsReducer.js +41 -0
- package/plugins/beta/datasets/src/reducers/mappedDatasetsReducer.test.js +117 -0
- package/plugins/beta/datasets/src/reducers/pluginState.js +206 -0
- package/plugins/beta/datasets/src/reducers/pluginState.test.js +386 -0
- package/plugins/beta/datasets/src/registry/__mocks__/datasetRegistry.js +29 -0
- package/plugins/beta/datasets/src/registry/createDataset.js +5 -0
- package/plugins/beta/datasets/src/registry/dataset.js +176 -0
- package/plugins/beta/datasets/src/registry/dataset.test.js +497 -0
- package/plugins/beta/datasets/src/registry/datasetDefinitionCache.js +35 -0
- package/plugins/beta/datasets/src/registry/datasetRegistry.js +116 -0
- package/plugins/beta/datasets/src/registry/datasetRegistry.test.js +335 -0
- package/plugins/beta/datasets/src/registry/dynamicGeoJson.js +17 -0
- package/plugins/beta/datasets/src/registry/globalDataset.js +36 -0
- package/plugins/beta/draw-es/dist/esm/im-draw-es-plugin.js +1 -1
- package/plugins/beta/draw-es/src/api/addFeature.js +12 -3
- package/plugins/beta/draw-es/src/events.js +8 -3
- package/plugins/beta/draw-es/src/events.test.js +2 -0
- package/plugins/beta/draw-es/src/graphic.js +26 -2
- package/plugins/beta/draw-ml/dist/esm/im-draw-ml-plugin.js +1 -1
- package/plugins/beta/draw-ml/dist/umd/im-draw-ml-plugin.js +1 -1
- package/plugins/beta/draw-ml/src/DrawInit.jsx +8 -0
- package/plugins/beta/draw-ml/src/api/newLine.js +1 -0
- package/plugins/beta/draw-ml/src/api/newPolygon.js +1 -0
- package/plugins/beta/draw-ml/src/events.js +13 -1
- package/plugins/beta/draw-ml/src/index.js +1 -1
- package/plugins/beta/draw-ml/src/manifest.js +3 -0
- package/plugins/beta/draw-ml/src/modes/createDrawMode.js +21 -12
- package/plugins/beta/draw-ml/src/modes/editVertexMode.js +4 -0
- package/plugins/beta/draw-ol/dist/esm/EditMode.js +1 -1
- package/plugins/beta/draw-ol/dist/esm/im-draw-ol-plugin.js +1 -1
- package/plugins/beta/draw-ol/src/edit/keyboardHandler.js +4 -2
- package/plugins/beta/map-styles/src/mapStyles.scss +41 -41
- package/plugins/interact/dist/esm/im-interact-plugin.js +1 -1
- package/plugins/interact/dist/umd/im-interact-plugin.js +1 -1
- package/plugins/interact/dist/umd/index.js +1 -1
- package/plugins/interact/src/InteractInit.jsx +3 -5
- package/plugins/interact/src/InteractInit.test.js +1 -3
- package/plugins/interact/src/events.js +2 -29
- package/plugins/interact/src/events.test.js +4 -102
- package/plugins/interact/src/hooks/useAttachEvents.js +3 -4
- package/plugins/interact/src/hooks/useAttachEvents.test.js +1 -3
- package/plugins/interact/src/hooks/useCrossHairVisibility.js +4 -10
- package/plugins/interact/src/hooks/useCrossHairVisibility.test.js +5 -10
- package/plugins/interact/src/hooks/useHighlightSync.js +1 -10
- package/plugins/interact/src/hooks/useHighlightSync.test.js +2 -21
- package/plugins/interact/src/hooks/useInteractionHandlers.js +15 -12
- package/plugins/interact/src/hooks/useInteractionHandlers.test.js +28 -29
- package/plugins/interact/src/manifest.js +0 -35
- package/plugins/interact/src/manifest.test.js +3 -43
- package/plugins/interact/src/reducer.js +4 -22
- package/plugins/interact/src/reducer.test.js +11 -39
- package/plugins/search/dist/css/index.css +5 -2
- package/plugins/search/src/components/Form/Form.module.scss +5 -2
- package/plugins/search/src/search.scss +4 -4
- package/providers/beta/esri/dist/esm/im-esri-provider.js +1 -1
- package/providers/beta/esri/src/esriProvider.js +4 -0
- package/providers/beta/openlayers/dist/esm/im-openlayers-provider.js +1 -1
- package/providers/beta/openlayers/dist/umd/im-openlayers-provider.js +1 -1
- package/providers/beta/openlayers/src/openlayersProvider.js +4 -0
- package/providers/beta/openlayers/src/openlayersProvider.test.js +5 -0
- package/providers/maplibre/dist/esm/im-maplibre-provider.js +1 -1
- package/providers/maplibre/dist/umd/im-maplibre-provider.js +1 -1
- package/providers/maplibre/src/maplibreProvider.js +6 -4
- package/providers/maplibre/src/maplibreProvider.test.js +5 -0
- package/providers/maplibre/src/utils/highlightFeatures.js +74 -25
- package/providers/maplibre/src/utils/highlightFeatures.test.js +132 -0
- package/providers/maplibre/src/utils/patternImages.js +2 -4
- package/providers/maplibre/src/utils/symbolImages.js +1 -4
- package/rollup.esm.mjs +2 -8
- package/src/App/components/CrossHair/CrossHair.module.scss +8 -8
- package/src/App/components/MapButton/MapButton.jsx +16 -1
- package/src/App/components/MapButton/MapButton.module.scss +12 -1
- package/src/App/components/MapButton/MapButton.test.jsx +40 -1
- package/src/App/hooks/useContinueEnabledEvaluator.js +31 -0
- package/src/App/hooks/useContinueEnabledEvaluator.test.js +118 -0
- package/src/App/hooks/useEvaluateProp.js +15 -15
- package/src/App/hooks/useEvaluateProp.test.js +80 -76
- package/src/App/hooks/useLayoutMeasurements.js +11 -5
- package/src/App/hooks/useResizeObserver.js +15 -2
- package/src/App/hooks/useResizeObserver.test.js +1 -0
- package/src/App/renderer/PluginInits.jsx +2 -0
- package/src/App/renderer/mapButtons.js +21 -1
- package/src/App/renderer/mapButtons.test.js +46 -1
- package/src/App/store/appReducer.js +1 -1
- package/src/App/store/appReducer.test.js +37 -0
- package/src/InteractiveMap/InteractiveMap.js +14 -4
- package/src/InteractiveMap/InteractiveMap.test.js +11 -3
- package/src/InteractiveMap/behaviourController.js +3 -1
- package/src/InteractiveMap/behaviourController.test.js +6 -3
- package/src/InteractiveMap/domStateManager.js +2 -0
- package/src/config/appConfig.js +25 -0
- package/src/config/appConfig.test.js +50 -0
- package/src/config/defaults.js +1 -0
- package/src/config/events.js +21 -3
- package/src/scss/settings/_dimensions.scss +1 -0
- package/src/services/patternRegistry.js +8 -4
- package/src/types.js +7 -0
- package/src/utils/patternUtils.js +1 -2
- package/src/utils/patternUtils.test.js +9 -0
- package/webpack.dev.mjs +10 -0
- package/webpack.umd.mjs +1 -1
- package/docs/assets/images/screens-blue.jpg +0 -0
- package/docs/assets/images/screens-white.jpg +0 -0
- package/plugins/beta/datasets/dist/adapters/maplibre/esm/im-datasets-ml-adapter.js +0 -1
- package/plugins/beta/datasets/dist/adapters/maplibre/esm/index.js +0 -1
- package/plugins/beta/datasets/dist/umd/maplibre/im-datasets-maplibre-adapter.js +0 -2
- package/plugins/beta/datasets/dist/umd/maplibre/im-datasets-plugin.js +0 -2
- package/plugins/beta/datasets/dist/umd/maplibre/index.js +0 -2
- package/plugins/beta/datasets/src/adapters/maplibre/index.js +0 -18
- package/plugins/beta/datasets/src/adapters/maplibre/layerIds.js +0 -75
- package/plugins/beta/datasets/src/adapters/maplibre/patternImages.js +0 -27
- package/plugins/beta/datasets/src/adapters/maplibre/symbolImages.js +0 -31
- package/plugins/beta/datasets/src/components/KeySvg.jsx +0 -24
- package/plugins/beta/datasets/src/components/KeySvgLine.jsx +0 -19
- package/plugins/beta/datasets/src/components/KeySvgRect.jsx +0 -22
- package/plugins/beta/datasets/src/index.maplibre.umd.js +0 -23
- package/plugins/beta/datasets/src/panels/Key.jsx +0 -62
- package/plugins/beta/datasets/src/panels/Layers.jsx +0 -141
- package/plugins/beta/datasets/src/reducer.js +0 -219
- package/plugins/beta/datasets/src/reducers/keyReducer.js +0 -34
- package/plugins/beta/datasets/src/utils/filters.js +0 -34
- package/plugins/beta/datasets/src/utils/mergeSublayer.js +0 -86
- package/plugins/beta/draw-ml/dist/css/index.css +0 -21
- /package/plugins/beta/datasets/dist/umd/{maplibre/im-datasets-maplibre-adapter.js.LICENSE.txt → im-datasets-ml-adapter.js.LICENSE.txt} +0 -0
- /package/plugins/beta/datasets/dist/umd/{maplibre/im-datasets-plugin.js.LICENSE.txt → im-datasets-plugin.js.LICENSE.txt} +0 -0
- /package/plugins/beta/datasets/dist/umd/{maplibre/index.js.LICENSE.txt → index.js.LICENSE.txt} +0 -0
- /package/plugins/beta/datasets/src/components/{EmptyKey.jsx → Key/EmptyKey.jsx} +0 -0
- /package/plugins/beta/datasets/src/components/{EmptyKey.test.jsx → Key/EmptyKey.test.jsx} +0 -0
- /package/plugins/beta/datasets/src/{panels → components/Key}/Key.module.scss +0 -0
- /package/plugins/beta/datasets/src/components/{svgProperties.js → Key/svgProperties.js} +0 -0
|
@@ -35,6 +35,14 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
|
|
|
35
35
|
return () => remove()
|
|
36
36
|
}, [mapState.isMapReady, appState.mode])
|
|
37
37
|
|
|
38
|
+
// Keep draw instance aware of the crossHair API so draw modes can use show/hide
|
|
39
|
+
// (rather than direct DOM manipulation which conflicts with React's controlled display style)
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (mapProvider.draw) {
|
|
42
|
+
mapProvider.draw._crossHair = crossHair
|
|
43
|
+
}
|
|
44
|
+
}, [mapProvider.draw, crossHair])
|
|
45
|
+
|
|
38
46
|
// Show crosshair immediately on touch/keyboard when entering draw mode
|
|
39
47
|
useEffect(() => {
|
|
40
48
|
if (['draw_polygon', 'draw_line'].includes(pluginState.mode) && isTouchOrKeyboard) {
|
|
@@ -56,6 +56,7 @@ export const newLine = ({ appState, appConfig, pluginConfig, pluginState, mapPro
|
|
|
56
56
|
vertexMarkerId: `${appConfig.id}-cross-hair`,
|
|
57
57
|
addVertexButtonId: `${appConfig.id}-draw-add-point`,
|
|
58
58
|
interfaceType: appState.interfaceType,
|
|
59
|
+
crossHair: draw._crossHair,
|
|
59
60
|
getSnapEnabled: () => mapProvider.snapEnabled === true,
|
|
60
61
|
featureId,
|
|
61
62
|
...modeOptions,
|
|
@@ -56,6 +56,7 @@ export const newPolygon = ({ appState, appConfig, pluginConfig, pluginState, map
|
|
|
56
56
|
vertexMarkerId: `${appConfig.id}-cross-hair`,
|
|
57
57
|
addVertexButtonId: `${appConfig.id}-draw-add-point`,
|
|
58
58
|
interfaceType: appState.interfaceType,
|
|
59
|
+
crossHair: draw._crossHair,
|
|
59
60
|
getSnapEnabled: () => mapProvider.snapEnabled === true,
|
|
60
61
|
featureId,
|
|
61
62
|
...modeOptions,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { clearSnapState, getSnapInstance } from './utils/snapHelpers.js'
|
|
1
|
+
import { clearSnapState, clearSnapIndicator, getSnapInstance } from './utils/snapHelpers.js'
|
|
2
2
|
|
|
3
3
|
export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus }) {
|
|
4
4
|
const { drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel } = buttonConfig
|
|
@@ -101,6 +101,15 @@ export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
+
// --- Ensure snap indicator is hidden whenever not in a drawing mode
|
|
105
|
+
const DRAWING_MODES = ['draw_polygon', 'draw_line']
|
|
106
|
+
const handleModeChange = (e) => {
|
|
107
|
+
if (!DRAWING_MODES.includes(e.mode)) {
|
|
108
|
+
const snap = getSnapInstance(map)
|
|
109
|
+
clearSnapIndicator(snap, map)
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
104
113
|
// --- Map style update
|
|
105
114
|
const handleStyleData = () => {
|
|
106
115
|
const layers = map.getStyle().layers || []
|
|
@@ -113,6 +122,7 @@ export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus
|
|
|
113
122
|
// --- Draw completion handlers (create / edit)
|
|
114
123
|
const handleDrawCompletion = (eventName) => (e) => {
|
|
115
124
|
const newFeature = e.features[0]
|
|
125
|
+
disableSnap()
|
|
116
126
|
resetDrawModeAndFeature()
|
|
117
127
|
setTimeout(() => draw.changeMode('disabled'), 0)
|
|
118
128
|
eventBus.emit(eventName, newFeature)
|
|
@@ -148,6 +158,7 @@ export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus
|
|
|
148
158
|
map.on('styledata', handleStyleData)
|
|
149
159
|
map.on('draw.cancel', handleCancel)
|
|
150
160
|
map.on('draw.create', onCreate)
|
|
161
|
+
map.on('draw.modechange', handleModeChange)
|
|
151
162
|
map.on('draw.editfinish', onEditFinish)
|
|
152
163
|
map.on('draw.update', handleUpdate)
|
|
153
164
|
map.on('draw.vertexselection', onVertexSelection)
|
|
@@ -166,6 +177,7 @@ export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus
|
|
|
166
177
|
map.off('draw.create', onCreate)
|
|
167
178
|
map.off('draw.editfinish', onEditFinish)
|
|
168
179
|
map.off('draw.update', handleUpdate)
|
|
180
|
+
map.off('draw.modechange', handleModeChange)
|
|
169
181
|
map.off('draw.vertexselection', onVertexSelection)
|
|
170
182
|
map.off('draw.vertexchange', onVertexChange)
|
|
171
183
|
map.off('draw.undochange', onUndoChange)
|
|
@@ -27,18 +27,21 @@ export const manifest = {
|
|
|
27
27
|
id: 'drawCancel',
|
|
28
28
|
label: 'Cancel',
|
|
29
29
|
variant: 'tertiary',
|
|
30
|
+
exclusiveSlot: true,
|
|
30
31
|
hiddenWhen: ({ pluginState }) => !pluginState.mode,
|
|
31
32
|
...createButtonSlots(true)
|
|
32
33
|
}, {
|
|
33
34
|
id: 'drawAddPoint',
|
|
34
35
|
label: 'Add point',
|
|
35
36
|
variant: 'primary',
|
|
37
|
+
exclusiveSlot: true,
|
|
36
38
|
hiddenWhen: ({ appState, pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType !== 'touch',
|
|
37
39
|
...createButtonSlots(true)
|
|
38
40
|
}, {
|
|
39
41
|
id: 'drawDone',
|
|
40
42
|
label: 'Done',
|
|
41
43
|
variant: 'primary',
|
|
44
|
+
exclusiveSlot: true,
|
|
42
45
|
hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
|
|
43
46
|
enableWhen: ({ pluginState }) => pluginState.numVertecies >= (pluginState.mode === 'draw_polygon' ? 3 : 2),
|
|
44
47
|
...createButtonSlots(true)
|
|
@@ -56,17 +56,22 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
56
56
|
// Add initial props
|
|
57
57
|
state[featureProp].properties = options.properties
|
|
58
58
|
|
|
59
|
-
const { container,
|
|
59
|
+
const { container, vertexMarkerId, getInterfaceType } = state
|
|
60
|
+
const currentInterfaceType = getInterfaceType ? getInterfaceType() : state.interfaceType
|
|
61
|
+
state.interfaceType = currentInterfaceType
|
|
60
62
|
const vertexMarker = container.querySelector(`#${vertexMarkerId}`)
|
|
61
|
-
vertexMarker.style.display = ['touch', 'keyboard'].includes(interfaceType) ? 'block' : 'none'
|
|
62
63
|
state.vertexMarker = vertexMarker
|
|
64
|
+
if (['touch', 'keyboard'].includes(currentInterfaceType)) {
|
|
65
|
+
this._showCrossHair(state)
|
|
66
|
+
} else {
|
|
67
|
+
this._hideCrossHair(state)
|
|
68
|
+
}
|
|
63
69
|
|
|
64
70
|
// Bind all handlers once
|
|
65
71
|
const bind = (name, fn) => (this[name] = fn.bind(this, state))
|
|
66
72
|
const handlers = {
|
|
67
73
|
keydownHandler: this.onKeydown,
|
|
68
74
|
keyupHandler: this.onKeyup,
|
|
69
|
-
focusHandler: this.onFocus,
|
|
70
75
|
blurHandler: this.onBlur,
|
|
71
76
|
createHandler: this.onCreate,
|
|
72
77
|
moveHandler: this.onMove,
|
|
@@ -83,7 +88,6 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
83
88
|
[window, 'keydown', this.keydownHandler],
|
|
84
89
|
[window, 'keyup', this.keyupHandler],
|
|
85
90
|
[window, 'click', this.vertexButtonClickHandler],
|
|
86
|
-
[container, 'focus', this.focusHandler],
|
|
87
91
|
[container, 'blur', this.blurHandler],
|
|
88
92
|
[container, 'pointermove', this.pointermoveHandler],
|
|
89
93
|
[container, 'pointerup', this.pointerupHandler],
|
|
@@ -230,6 +234,7 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
230
234
|
featureId,
|
|
231
235
|
container: state.container,
|
|
232
236
|
interfaceType: state.interfaceType,
|
|
237
|
+
crossHair: state.crossHair,
|
|
233
238
|
vertexMarkerId: state.vertexMarkerId,
|
|
234
239
|
addVertexButtonId: state.addVertexButtonId,
|
|
235
240
|
getSnapEnabled: state.getSnapEnabled,
|
|
@@ -338,10 +343,18 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
338
343
|
this.map.fire('draw.geometrychange', state.polygon || state.line)
|
|
339
344
|
},
|
|
340
345
|
|
|
346
|
+
_showCrossHair (state) {
|
|
347
|
+
if (state.crossHair) { state.crossHair.show() } else { state.vertexMarker.style.display = 'block' }
|
|
348
|
+
},
|
|
349
|
+
|
|
350
|
+
_hideCrossHair (state) {
|
|
351
|
+
if (state.crossHair) { state.crossHair.hide() } else { state.vertexMarker.style.display = 'none' }
|
|
352
|
+
},
|
|
353
|
+
|
|
341
354
|
_setInterface (state, type, show = true) {
|
|
342
355
|
state.interfaceType = type
|
|
343
356
|
if (show) {
|
|
344
|
-
state
|
|
357
|
+
this._showCrossHair(state)
|
|
345
358
|
}
|
|
346
359
|
},
|
|
347
360
|
|
|
@@ -449,13 +462,9 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
449
462
|
}
|
|
450
463
|
},
|
|
451
464
|
|
|
452
|
-
onFocus (state) {
|
|
453
|
-
state.vertexMarker.style.display = ['touch', 'keyboard'].includes(state.interfaceType) ? 'block' : 'none'
|
|
454
|
-
},
|
|
455
|
-
|
|
456
465
|
onBlur (state, e) {
|
|
457
466
|
if (e.target !== state.container) {
|
|
458
|
-
state
|
|
467
|
+
this._hideCrossHair(state)
|
|
459
468
|
}
|
|
460
469
|
},
|
|
461
470
|
|
|
@@ -511,7 +520,7 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
511
520
|
|
|
512
521
|
onPointermove (state, e) {
|
|
513
522
|
if (e.pointerType !== 'touch') {
|
|
514
|
-
state
|
|
523
|
+
this._hideCrossHair(state)
|
|
515
524
|
}
|
|
516
525
|
},
|
|
517
526
|
|
|
@@ -531,7 +540,7 @@ export const createDrawMode = (ParentMode, config) => {
|
|
|
531
540
|
onStop (state) {
|
|
532
541
|
ParentMode.onStop.call(this, state)
|
|
533
542
|
this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
|
|
534
|
-
state
|
|
543
|
+
this._hideCrossHair(state)
|
|
535
544
|
}
|
|
536
545
|
}
|
|
537
546
|
}
|
|
@@ -168,6 +168,10 @@ export const EditVertexMode = {
|
|
|
168
168
|
state.interfaceType = 'keyboard'
|
|
169
169
|
this.hideTouchVertexIndicator(state)
|
|
170
170
|
|
|
171
|
+
if (e.key === ' ') {
|
|
172
|
+
e.preventDefault()
|
|
173
|
+
}
|
|
174
|
+
|
|
171
175
|
if (e.key === ' ' && state.selectedVertexIndex < 0) {
|
|
172
176
|
// Clear snap indicator when starting keyboard selection
|
|
173
177
|
const snap = getSnapInstance(this.map)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"ol/interaction/Modify.js";import t from"ol/Collection.js";import r from"ol/source/Vector.js";import n from"ol/layer/Vector.js";import o from"ol/Feature.js";import a from"ol/geom/Point.js";import{a as i,g as d,b as l,d as s,e as c,c as v,p,f as x,n as u}from"./geometryHelpers.js";var y=(e,t)=>{e&&(e.style.setProperty("--draw-halo",t.editActive),e.style.setProperty("--draw-bg",t.editHalo),e.style.setProperty("--draw-primary",t.editVertex))},g=(e,t)=>{t&&e&&(e.style.left="".concat(t.x,"px"),e.style.top="".concat(t.y,"px"),e.style.display="block")},f=e=>{e&&(e.style.display="none")},m=e=>{if(!e)return!1;var t=e.parentNode;return t instanceof globalThis.SVGElement||null!=(null==t?void 0:t.ownerSVGElement)},h=(e,t,r,n)=>{var o=r-n,a=t[o];if(!a)return null;var i=e.getGeometry(),d={type:i.getType(),coordinates:i.getCoordinates()},s=l(d),v=0;for(var p of s){var x=p.closed?p.length:p.length-1;if(o<v+x){var u=o-v+1,y=p.start+u;return c(d,p.path).splice(u,0,[...a]),i.setCoordinates(d.coordinates),{insertedIndex:y}}v+=x}return null},I=(e,t,r)=>{var n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,t);if(i){var d=c(o,i.segment.path);d[i.localIdx]=[...r],i.segment.closed&&0===i.localIdx&&(d[d.length-1]=[...r]),n.setCoordinates(o.coordinates)}},T=function(e,t,r,n){var o,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return null!==(o=function(e,t,r){var n=-1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:12;return t.forEach((t,a)=>{var i=v(e,t);if(i){var d=p(i,r);d<o&&(o=d,n=a)}}),n>=0?{index:n,type:"vertex"}:null}(e,t,n,a))&&void 0!==o?o:function(e,t,r,n){var o=-1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return t.forEach((t,n)=>{var i=v(e,t);if(i){var d=p(i,r);d<a&&(a=d,o=n)}}),o>=0?{index:n+o,type:"midpoint"}:null}(e,r,n,t.length,a)},V=e=>{var{map:t,container:r,getState:n,setState:o,onVertexMoved:a,onTap:i,colors:d,snap:l}=e,s=(e=>{var t=e.querySelector("[data-im-draw-touch-target]");return t||(e.insertAdjacentHTML("beforeend","\n <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd'\n style='display:none;position:absolute;top:0;left:0;margin:24px 0 0 -24px;cursor:grab'\n class='im-draw-touch-target' data-im-draw-touch-target>\n <circle cx='24' cy='24' r='24' fill='var(--draw-halo, #000)'/>\n <path d=\"M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z\" fill='var(--draw-bg, #fff)'/>\n </svg>\n"),t=e.querySelector("[data-im-draw-touch-target]")),t})(r);y(s,d);var c={scale:1,ox:0,oy:0},p=e=>({x:e.x*c.scale+c.ox,y:e.y*c.scale+c.oy}),u=()=>{var e=t.getViewport(),n=e.getBoundingClientRect(),o=r.getBoundingClientRect(),a=e.offsetWidth>0?n.width/e.offsetWidth:1,i=r.offsetWidth>0?o.width/r.offsetWidth:1;Object.assign(c,{scale:a/i,ox:(n.left-o.left)/i,oy:(n.top-o.top)/i})},h=(e=>{var{container:t,map:r,targetEl:n,olToCSS:o,cssToOl:a,getState:i,setState:d,onVertexMoved:l,onTap:s,snap:c}=e,p=null,u=null,y=null,f=null,h=null,V=e=>{var t=e.touches[0],o=m(e.target);if(h={x:t.clientX,y:t.clientY,time:Date.now(),onTarget:o},o){var{selectedVertexIndex:d,vertices:l}=i(),s=l[d];if(s){var c=r.getEventPixel({clientX:t.clientX,clientY:t.clientY}),x=v(r,s),g=getComputedStyle(n),I=a({x:Number.parseFloat(g.left),y:Number.parseFloat(g.top)});p=[...s],u=d,y={x:c[0]-x.x,y:c[1]-x.y},f={x:c[0]-I.x,y:c[1]-I.y},e.preventDefault()}}},w=e=>{if(m(e.target)&&null!=u){e.preventDefault();var t=r.getEventPixel({clientX:e.touches[0].clientX,clientY:e.touches[0].clientY}),a=x(r,{x:t[0]-y.x,y:t[1]-y.y}),l=c?c.apply(a):a;null==c||c.hideIndicator();var{olFeature:s,vertices:v}=i();s&&(I(s,u,l),d({vertices:v.map((e,t)=>t===u?l:e)}),g(n,o({x:t[0]-f.x,y:t[1]-f.y})))}},S=e=>{if(null!=u){h=null;var{vertices:t}=i();t[u]&&p&&l({vertexIndex:u,previousCoord:p}),null==c||c.hideIndicator(),p=null,u=null,y=null,f=null,e.preventDefault()}else{if(h&&!h.onTarget&&e.changedTouches.length>0){var n=e.changedTouches[0],o=Date.now()-h.time;if(Math.hypot(n.clientX-h.x,n.clientY-h.y)<10&&o<400){var a=r.getEventPixel({clientX:n.clientX,clientY:n.clientY}),d=i();null==s||s(T(r,d.vertices,d.midpoints,{x:a[0],y:a[1]},24)),e.preventDefault()}}h=null}};return t.addEventListener("touchstart",V,{passive:!1}),t.addEventListener("touchmove",w,{passive:!1}),t.addEventListener("touchend",S,{passive:!1}),{isDragging:()=>null!=u,destroy(){t.removeEventListener("touchstart",V),t.removeEventListener("touchmove",w),t.removeEventListener("touchend",S)}}})({container:r,map:t,targetEl:s,olToCSS:p,cssToOl:e=>({x:(e.x-c.ox)/c.scale,y:(e.y-c.oy)/c.scale}),getState:n,setState:o,onVertexMoved:a,onTap:i,snap:l}),V=()=>{var{selectedVertexIndex:e,vertices:r,interfaceType:o}=n();if(e<0||!r[e]||"touch"!==o)f(s);else{var a=v(t,r[e]);a?g(s,p(a)):f(s)}},w=()=>{var{selectedVertexIndex:e,interfaceType:t}=n();e>=0&&!h.isDragging()&&"touch"===t&&V()};t.on("postrender",w);var S=()=>{u(),t.once("postrender",V)};return t.on("change:size",S),u(),{updateTargetPosition:V,updateColors(e){y(s,e)},hide(){f(s)},destroy(){t.un("change:size",S),t.un("postrender",w),h.destroy(),f(s)}}},w=(e,t,r)=>{var n=t.filter(t=>{var n=Math.abs(t[0]-e[0]),o=Math.abs(t[1]-e[1]);return("ArrowUp"===r?t[1]<=e[1]&&o>=n:"ArrowDown"===r?t[1]>e[1]&&o>=n:"ArrowLeft"===r?t[0]<=e[0]&&o<n:"ArrowRight"!==r||t[0]>e[0]&&o<n)&&JSON.stringify(t)!==JSON.stringify(e)});n.length||n.push(e);var o=t=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),a=n.reduce((e,t)=>o(t)<o(e)?t:e);return t.findIndex(e=>JSON.stringify(e)===JSON.stringify(a))},S=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),C=new Set(["INPUT","TEXTAREA","BUTTON","SELECT","A"]),E=e=>{var{map:t,snap:r,getState:n,setState:o,onInserted:a}=e,i={start:null,index:null};return{nudge:e=>{var{selectedVertexIndex:d,selectedVertexType:l,vertices:s,midpoints:c,olFeature:v}=n();if(v){var p=e.shiftKey?1:5,x={ArrowUp:[0,-p],ArrowDown:[0,p],ArrowLeft:[-p,0],ArrowRight:[p,0]},[y,g]=x[e.key];if("midpoint"!==l){if(!(d<0)&&s[d]){var f=s[d];i.start||(i.start=[...f],i.index=d);var m=u(t,f,y,g),T=r?r.apply(m):m;null==r||r.hideIndicator();var V=((e,t,r,n,o,a,i)=>{if(!e)return o;var d=[n[0]-r[0],n[1]-r[1]],l=[o[0]-r[0],o[1]-r[1]],s=d[0]**2+d[1]**2;if(s>0&&(l[0]*d[0]+l[1]*d[1])/s<.5){var c=e.snapRadius+1;return u(t,r,0===a?0:Math.sign(a)*c,0===i?0:Math.sign(i)*c)}return o})(r,t,f,m,T,y,g);I(v,d,V),o({vertices:s.map((e,t)=>t===d?V:e)})}}else((e,d,l,s,c,v)=>{var p=h(e,d,l,s.length);if(p){a({insertedIndex:p.insertedIndex});var x=n().vertices,y=x[p.insertedIndex];if(y){i.start=[...y],i.index=p.insertedIndex;var g=u(t,y,c,v),f=r?r.apply(g):g;I(e,p.insertedIndex,f),o({selectedVertexIndex:p.insertedIndex,selectedVertexType:"vertex",vertices:x.map((e,t)=>t===p.insertedIndex?f:e)})}}})(v,c,d,s,y,g)}},keyMove:i}},L=e=>{var t,{map:r,snap:n,getState:o,setState:a,onVertexMoved:i,onInserted:d,onDeleted:l,onUndo:s,onKeyboardActive:c}=e,{nudge:p,keyMove:x}=E({map:r,snap:n,getState:o,setState:a,onInserted:d}),u=null!==(t=r.getViewport().closest('[role="application"]'))&&void 0!==t?t:r.getViewport(),y=()=>(e=>{var t=document.activeElement;if(!t||t===document.body)return!1;if(e.contains(t))return!1;var r=t.tagName;return C.has(r)||t.isContentEditable||t.hasAttribute("tabindex")})(u),g=e=>{e.altKey?(e.preventDefault(),e.stopPropagation(),((e,t,r,n)=>{var{selectedVertexIndex:o,vertices:a,midpoints:i}=r();if(a.length){var d,l=[...a,...i].map(e=>v(t,e)).filter(Boolean).map(e=>[e.x,e.y]),s=o>=0?l[o]:(d=v(t,t.getView().getCenter()))?[d.x,d.y]:null;if(s){var c=w(s,l,e);n({selectedVertexIndex:c,selectedVertexType:c<a.length?"vertex":"midpoint"})}}})(e.key,r,o,a)):o().selectedVertexIndex>=0&&(e.preventDefault(),e.stopPropagation(),p(e))},f=e=>{if(null==c||c()," "===e.key&&o().selectedVertexIndex<0)e.preventDefault(),((e,t,r)=>{var{vertices:n,midpoints:o}=t();if(n.length){var a=e.getView().getCenter(),i=v(e,a);if(i){var d=[...n.map(t=>v(e,t)),...o.map(t=>v(e,t))].filter(Boolean).map(e=>[e.x,e.y]),l=w([i.x,i.y],d,void 0);r({selectedVertexIndex:l,selectedVertexType:l<n.length?"vertex":"midpoint"})}}})(r,o,a);else if(S.has(e.key))g(e);else if("z"===e.key&&(e.metaKey||e.ctrlKey)){var t,n=null===(t=document.activeElement)||void 0===t?void 0:t.tagName;C.has(n)||(e.preventDefault(),e.stopPropagation(),s())}},m=e=>{y()||("Escape"===e.key&&o().selectedVertexIndex>=0?(e.preventDefault(),x.start=null,x.index=null,a({selectedVertexIndex:-1,selectedVertexType:null})):f(e))},h=e=>{y()||(S.has(e.key)&&x.start&&null!=x.index&&(null==n||n.hideIndicator(),i({vertexIndex:x.index,previousCoord:x.start}),x.start=null,x.index=null),"Delete"===e.key&&l())};return window.addEventListener("keydown",m,{capture:!0}),window.addEventListener("keyup",h,{capture:!0}),{destroy(){window.removeEventListener("keydown",m,{capture:!0}),window.removeEventListener("keyup",h,{capture:!0})}}},b=(e,t)=>{switch(t.type){case"move_vertex":return((e,t)=>{var{vertexIndex:r,previousCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)return-1;var v=c(a,d.segment.path);return v[d.localIdx]=[...n],d.segment.closed&&0===d.localIdx&&(v[v.length-1]=[...n]),o.setCoordinates(a.coordinates),r})(e,t);case"insert_vertex":return((e,t)=>{var{vertexIndex:r}=t,n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,r);if(!i)return-1;var d=c(o,i.segment.path);return d.splice(i.localIdx,1),i.segment.closed&&(d[d.length-1]=[...d[0]]),n.setCoordinates(o.coordinates),-1})(e,t);case"delete_vertex":return((e,t)=>{var{vertexIndex:r,deletedCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)for(var v of i)if(r===v.start+v.length){d={segment:v,localIdx:v.length};break}if(!d)return-1;var p=c(a,d.segment.path);return p.splice(d.localIdx,0,[...n]),d.segment.closed&&(p[p.length-1]=[...p[0]]),o.setCoordinates(a.coordinates),r})(e,t);default:return-1}},k=v=>{var{map:p,manager:x,options:u}=v,{featureId:y,container:g,interfaceType:f,deleteVertexButtonId:m,snap:I}=u,{store:w,undoStack:S}=x,C=w.getOL(y);if(!C)return null;var E=C.getStyle();C.setStyle(x.styles.editFeatureStyle);var k={olFeature:C,selectedVertexIndex:-1,selectedVertexType:null,vertices:[],midpoints:[],interfaceType:null!=f?f:"pointer"},A=()=>k,M=null,P=null,D=e=>{if(Object.assign(k,e),void 0!==e.selectedVertexIndex){var t;if(X.setSelected("vertex"===k.selectedVertexType?k.selectedVertexIndex:-1),_.setSelected("midpoint"===k.selectedVertexType?k.selectedVertexIndex-k.vertices.length:-1),k.selectedVertexIndex<0)null===(t=M)||void 0===t||t();R(),x.emit("vertexselection",{index:"vertex"===k.selectedVertexType?k.selectedVertexIndex:-1,numVertices:k.vertices.length})}if(void 0!==e.vertices){var r,n={type:C.getGeometry().getType(),coordinates:C.getGeometry().getCoordinates()};_.update(n),X.update(n),k.midpoints=_.getCoords(),R(),null===(r=P)||void 0===r||r(),p.render()}},G=()=>{var e=C.getGeometry(),t={type:e.getType(),coordinates:e.getCoordinates()};k.vertices=d(t),k.midpoints=i(t),_.update(t),X.update(t),R()},z=()=>{G(),x.emit("vertexchange",{numVertices:k.vertices.length}),x.emit("update",w.toGeoJSON(C))},N=()=>G();C.getGeometry().on("change",N);var F=new t([C]),O=new e({features:F,style:()=>[],pixelTolerance:12,condition:e=>{if("touch"===k.interfaceType)return!1;var t=p.getEventPixel(e.originalEvent);return null!==T(p,k.vertices,k.midpoints,{x:t[0],y:t[1]})}});p.addInteraction(O);var j=null;O.on("modifystart",()=>{"touch"!==k.interfaceType&&(j=k.vertices.map(e=>[...e]))}),O.on("modifyend",()=>{if("touch"!==k.interfaceType){var e=j;if(z(),e){var t=k.vertices;if(t.length>e.length){var r=t.findIndex((t,r)=>!e[r]||t[0]!==e[r][0]),n=Math.max(0,r);S.push({type:"insert_vertex",vertexIndex:n}),D({selectedVertexIndex:n,selectedVertexType:"vertex"})}else if(t.length===e.length){var o=t.findIndex((t,r)=>t[0]!==e[r][0]||t[1]!==e[r][1]);o>=0&&(S.push({type:"move_vertex",vertexIndex:o,previousCoord:e[o]}),D({selectedVertexIndex:o,selectedVertexType:"vertex"}))}j=null}}});var _=((e,t)=>{var d=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("midpointIndex")===l?null:[d],zIndex:101});return e.addLayer(c),{update(e){s.clear();var t=i(e).map((e,t)=>{var r=new o({geometry:new a(e)});return r.set("midpointIndex",t),r});s.addFeatures(t)},setSelected(e){l=e,s.changed()},updateStyle(e){d=e,s.changed()},getCoords:()=>s.getFeatures().sort((e,t)=>e.get("midpointIndex")-t.get("midpointIndex")).map(e=>e.getGeometry().getCoordinates()),remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.midpointStyle),X=((e,t)=>{var i=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("vertexIndex")===l?null:[i],zIndex:102});return e.addLayer(c),{update(e){s.clear(),d(e).forEach((e,t)=>{var r=new o({geometry:new a(e)});r.set("vertexIndex",t),s.addFeature(r)})},setSelected(e){l=e,s.changed()},updateStyle(e){i=e,s.changed()},remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.vertexStyle),Y=new r,B=new n({source:Y,zIndex:103});p.addLayer(B);var R=()=>{Y.clear();var{selectedVertexIndex:e,selectedVertexType:t,vertices:r,midpoints:n}=k;if(!(e<0)){var i,d;if("vertex"===t)i=r[e],d=x.styles.selectedVertexStyle;else{if("midpoint"!==t)return;i=n[e-r.length],d=x.styles.selectedMidpointStyle}if(i){var l=new o({geometry:new a(i)});l.setStyle(d),Y.addFeature(l)}}};z();var U=e=>{C.setStyle(e.editFeatureStyle),X.updateStyle(e.vertexStyle),_.updateStyle(e.midpointStyle),R(),Z.updateColors(x.colors)};x.on("styleschanged",U);var J=e=>{if("touch"===e.pointerType)return k.interfaceType="touch",void Z.updateTargetPosition();k.interfaceType="pointer";var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)&&D({selectedVertexIndex:n.index,selectedVertexType:"vertex"})},K=e=>{if("touch"!==k.interfaceType){var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)?D({selectedVertexIndex:n.index,selectedVertexType:"vertex"}):"midpoint"===(null==n?void 0:n.type)||D({selectedVertexIndex:-1,selectedVertexType:null})}},H=e=>{"mouse"===e.pointerType&&"pointer"!==k.interfaceType&&(k.interfaceType="pointer",Z.hide())};g.addEventListener("pointerdown",J),g.addEventListener("pointerenter",H),g.addEventListener("pointermove",H),g.addEventListener("click",K);var W=e=>{m&&e.target.closest("#".concat(m))&&q()};globalThis.addEventListener("click",W);var q=()=>{if(!("vertex"!==k.selectedVertexType||k.selectedVertexIndex<0)){var e=((e,t)=>{var r=e.getGeometry(),n={type:r.getType(),coordinates:r.getCoordinates()},o=d(n),a=l(n),i=s(a,t);if(!i)return null;var{segment:v}=i,p=v.closed?3:2;if(v.length<=p)return null;var x=[...o[t]],u=c(n,v.path);return u.splice(i.localIdx,1),v.closed&&(u[u.length-1]=[...u[0]]),r.setCoordinates(n.coordinates),{deletedIndex:t,deletedCoord:x}})(C,k.selectedVertexIndex);e&&(S.push({type:"delete_vertex",vertexIndex:e.deletedIndex,deletedCoord:e.deletedCoord}),z(),D({selectedVertexIndex:-1,selectedVertexType:null}))}},Q=()=>{var e=S.pop();if(e){var t=k.selectedVertexIndex,r=b(C,e);z();var n,o=t>=0?r:-1;if(D({selectedVertexIndex:o,selectedVertexType:o>=0?"vertex":null}),t>=0&&o>=0)null===(n=P)||void 0===n||n()}},Z=V({map:p,container:g,getState:A,setState:D,colors:x.colors,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"}),Z.updateTargetPosition()},onTap(e){if(e){if("vertex"===e.type)return D({selectedVertexIndex:e.index,selectedVertexType:"vertex"}),void Z.updateTargetPosition();if("midpoint"===e.type){var t=h(C,k.midpoints,e.index,k.vertices.length);if(!t)return;S.push({type:"insert_vertex",vertexIndex:t.insertedIndex}),z(),D({selectedVertexIndex:t.insertedIndex,selectedVertexType:"vertex"}),Z.updateTargetPosition()}}else D({selectedVertexIndex:-1,selectedVertexType:null})}});M=()=>Z.hide(),P=()=>{"touch"===k.interfaceType&&Z.updateTargetPosition()};var $=()=>{"touch"!==k.interfaceType||k.selectedVertexIndex<0||p.once("postrender",()=>Z.updateTargetPosition())};p.on("change:size",$);var ee=(e=>L(e))({map:p,getState:A,setState:D,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"})},onInserted(e){var{insertedIndex:t}=e;S.push({type:"insert_vertex",vertexIndex:t}),z()},onDeleted:q,onUndo:Q,onKeyboardActive(){"keyboard"!==k.interfaceType&&(k.interfaceType="keyboard",Z.hide(),g.focus({preventScroll:!0}))}});return{setInterfaceType(e){e!==k.interfaceType&&(k.interfaceType=e,"touch"===e?Z.updateTargetPosition():Z.hide())},done(){x.emit("editfinish",w.toGeoJSON(C))},cancel(){},undo:Q,deleteVertex:q,destroy(){C.setStyle(E),C.getGeometry().un("change",N),x.off("styleschanged",U),g.removeEventListener("pointerdown",J),g.removeEventListener("pointerenter",H),g.removeEventListener("pointermove",H),g.removeEventListener("click",K),globalThis.removeEventListener("click",W),p.un("change:size",$),p.removeInteraction(O),Y.clear(),p.removeLayer(B),_.remove(),X.remove(),Z.destroy(),ee.destroy()}}};export{k as createEditMode};
|
|
1
|
+
import e from"ol/interaction/Modify.js";import t from"ol/Collection.js";import r from"ol/source/Vector.js";import n from"ol/layer/Vector.js";import o from"ol/Feature.js";import a from"ol/geom/Point.js";import{a as i,g as d,b as l,d as s,e as c,c as v,p,f as x,n as u}from"./geometryHelpers.js";var y=(e,t)=>{e&&(e.style.setProperty("--draw-halo",t.editActive),e.style.setProperty("--draw-bg",t.editHalo),e.style.setProperty("--draw-primary",t.editVertex))},g=(e,t)=>{t&&e&&(e.style.left="".concat(t.x,"px"),e.style.top="".concat(t.y,"px"),e.style.display="block")},f=e=>{e&&(e.style.display="none")},m=e=>{if(!e)return!1;var t=e.parentNode;return t instanceof globalThis.SVGElement||null!=(null==t?void 0:t.ownerSVGElement)},h=(e,t,r,n)=>{var o=r-n,a=t[o];if(!a)return null;var i=e.getGeometry(),d={type:i.getType(),coordinates:i.getCoordinates()},s=l(d),v=0;for(var p of s){var x=p.closed?p.length:p.length-1;if(o<v+x){var u=o-v+1,y=p.start+u;return c(d,p.path).splice(u,0,[...a]),i.setCoordinates(d.coordinates),{insertedIndex:y}}v+=x}return null},I=(e,t,r)=>{var n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,t);if(i){var d=c(o,i.segment.path);d[i.localIdx]=[...r],i.segment.closed&&0===i.localIdx&&(d[d.length-1]=[...r]),n.setCoordinates(o.coordinates)}},T=function(e,t,r,n){var o,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return null!==(o=function(e,t,r){var n=-1,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:12;return t.forEach((t,a)=>{var i=v(e,t);if(i){var d=p(i,r);d<o&&(o=d,n=a)}}),n>=0?{index:n,type:"vertex"}:null}(e,t,n,a))&&void 0!==o?o:function(e,t,r,n){var o=-1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:12;return t.forEach((t,n)=>{var i=v(e,t);if(i){var d=p(i,r);d<a&&(a=d,o=n)}}),o>=0?{index:n+o,type:"midpoint"}:null}(e,r,n,t.length,a)},V=e=>{var{map:t,container:r,getState:n,setState:o,onVertexMoved:a,onTap:i,colors:d,snap:l}=e,s=(e=>{var t=e.querySelector("[data-im-draw-touch-target]");return t||(e.insertAdjacentHTML("beforeend","\n <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd'\n style='display:none;position:absolute;top:0;left:0;margin:24px 0 0 -24px;cursor:grab'\n class='im-draw-touch-target' data-im-draw-touch-target>\n <circle cx='24' cy='24' r='24' fill='var(--draw-halo, #000)'/>\n <path d=\"M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z\" fill='var(--draw-bg, #fff)'/>\n </svg>\n"),t=e.querySelector("[data-im-draw-touch-target]")),t})(r);y(s,d);var c={scale:1,ox:0,oy:0},p=e=>({x:e.x*c.scale+c.ox,y:e.y*c.scale+c.oy}),u=()=>{var e=t.getViewport(),n=e.getBoundingClientRect(),o=r.getBoundingClientRect(),a=e.offsetWidth>0?n.width/e.offsetWidth:1,i=r.offsetWidth>0?o.width/r.offsetWidth:1;Object.assign(c,{scale:a/i,ox:(n.left-o.left)/i,oy:(n.top-o.top)/i})},h=(e=>{var{container:t,map:r,targetEl:n,olToCSS:o,cssToOl:a,getState:i,setState:d,onVertexMoved:l,onTap:s,snap:c}=e,p=null,u=null,y=null,f=null,h=null,V=e=>{var t=e.touches[0],o=m(e.target);if(h={x:t.clientX,y:t.clientY,time:Date.now(),onTarget:o},o){var{selectedVertexIndex:d,vertices:l}=i(),s=l[d];if(s){var c=r.getEventPixel({clientX:t.clientX,clientY:t.clientY}),x=v(r,s),g=getComputedStyle(n),I=a({x:Number.parseFloat(g.left),y:Number.parseFloat(g.top)});p=[...s],u=d,y={x:c[0]-x.x,y:c[1]-x.y},f={x:c[0]-I.x,y:c[1]-I.y},e.preventDefault()}}},w=e=>{if(m(e.target)&&null!=u){e.preventDefault();var t=r.getEventPixel({clientX:e.touches[0].clientX,clientY:e.touches[0].clientY}),a=x(r,{x:t[0]-y.x,y:t[1]-y.y}),l=c?c.apply(a):a;null==c||c.hideIndicator();var{olFeature:s,vertices:v}=i();s&&(I(s,u,l),d({vertices:v.map((e,t)=>t===u?l:e)}),g(n,o({x:t[0]-f.x,y:t[1]-f.y})))}},S=e=>{if(null!=u){h=null;var{vertices:t}=i();t[u]&&p&&l({vertexIndex:u,previousCoord:p}),null==c||c.hideIndicator(),p=null,u=null,y=null,f=null,e.preventDefault()}else{if(h&&!h.onTarget&&e.changedTouches.length>0){var n=e.changedTouches[0],o=Date.now()-h.time;if(Math.hypot(n.clientX-h.x,n.clientY-h.y)<10&&o<400){var a=r.getEventPixel({clientX:n.clientX,clientY:n.clientY}),d=i();null==s||s(T(r,d.vertices,d.midpoints,{x:a[0],y:a[1]},24)),e.preventDefault()}}h=null}};return t.addEventListener("touchstart",V,{passive:!1}),t.addEventListener("touchmove",w,{passive:!1}),t.addEventListener("touchend",S,{passive:!1}),{isDragging:()=>null!=u,destroy(){t.removeEventListener("touchstart",V),t.removeEventListener("touchmove",w),t.removeEventListener("touchend",S)}}})({container:r,map:t,targetEl:s,olToCSS:p,cssToOl:e=>({x:(e.x-c.ox)/c.scale,y:(e.y-c.oy)/c.scale}),getState:n,setState:o,onVertexMoved:a,onTap:i,snap:l}),V=()=>{var{selectedVertexIndex:e,vertices:r,interfaceType:o}=n();if(e<0||!r[e]||"touch"!==o)f(s);else{var a=v(t,r[e]);a?g(s,p(a)):f(s)}},w=()=>{var{selectedVertexIndex:e,interfaceType:t}=n();e>=0&&!h.isDragging()&&"touch"===t&&V()};t.on("postrender",w);var S=()=>{u(),t.once("postrender",V)};return t.on("change:size",S),u(),{updateTargetPosition:V,updateColors(e){y(s,e)},hide(){f(s)},destroy(){t.un("change:size",S),t.un("postrender",w),h.destroy(),f(s)}}},w=(e,t,r)=>{var n=t.filter(t=>{var n=Math.abs(t[0]-e[0]),o=Math.abs(t[1]-e[1]);return("ArrowUp"===r?t[1]<=e[1]&&o>=n:"ArrowDown"===r?t[1]>e[1]&&o>=n:"ArrowLeft"===r?t[0]<=e[0]&&o<n:"ArrowRight"!==r||t[0]>e[0]&&o<n)&&JSON.stringify(t)!==JSON.stringify(e)});n.length||n.push(e);var o=t=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),a=n.reduce((e,t)=>o(t)<o(e)?t:e);return t.findIndex(e=>JSON.stringify(e)===JSON.stringify(a))},S=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),C=new Set(["INPUT","TEXTAREA","BUTTON","SELECT","A"]),E=e=>{var{map:t,snap:r,getState:n,setState:o,onInserted:a}=e,i={start:null,index:null};return{nudge:e=>{var{selectedVertexIndex:d,selectedVertexType:l,vertices:s,midpoints:c,olFeature:v}=n();if(v){var p=e.shiftKey?1:5,x={ArrowUp:[0,-p],ArrowDown:[0,p],ArrowLeft:[-p,0],ArrowRight:[p,0]},[y,g]=x[e.key];if("midpoint"!==l){if(!(d<0)&&s[d]){var f=s[d];i.start||(i.start=[...f],i.index=d);var m=u(t,f,y,g),T=r?r.apply(m):m;null==r||r.hideIndicator();var V=((e,t,r,n,o,a,i)=>{if(!e)return o;var d=[n[0]-r[0],n[1]-r[1]],l=[o[0]-r[0],o[1]-r[1]],s=d[0]**2+d[1]**2;if(s>0&&(l[0]*d[0]+l[1]*d[1])/s<.5){var c=e.snapRadius+1;return u(t,r,0===a?0:Math.sign(a)*c,0===i?0:Math.sign(i)*c)}return o})(r,t,f,m,T,y,g);I(v,d,V),o({vertices:s.map((e,t)=>t===d?V:e)})}}else((e,d,l,s,c,v)=>{var p=h(e,d,l,s.length);if(p){a({insertedIndex:p.insertedIndex});var x=n().vertices,y=x[p.insertedIndex];if(y){i.start=[...y],i.index=p.insertedIndex;var g=u(t,y,c,v),f=r?r.apply(g):g;I(e,p.insertedIndex,f),o({selectedVertexIndex:p.insertedIndex,selectedVertexType:"vertex",vertices:x.map((e,t)=>t===p.insertedIndex?f:e)})}}})(v,c,d,s,y,g)}},keyMove:i}},L=e=>{var t,{map:r,snap:n,getState:o,setState:a,onVertexMoved:i,onInserted:d,onDeleted:l,onUndo:s,onKeyboardActive:c}=e,{nudge:p,keyMove:x}=E({map:r,snap:n,getState:o,setState:a,onInserted:d}),u=null!==(t=r.getViewport().closest('[role="application"]'))&&void 0!==t?t:r.getViewport(),y=()=>(e=>{var t=document.activeElement;if(!t||t===document.body)return!1;if(e.contains(t))return!1;var r=t.tagName;return C.has(r)||t.isContentEditable||t.hasAttribute("tabindex")})(u),g=e=>{e.altKey?(e.preventDefault(),e.stopPropagation(),((e,t,r,n)=>{var{selectedVertexIndex:o,vertices:a,midpoints:i}=r();if(a.length){var d,l=[...a,...i].map(e=>v(t,e)).filter(Boolean).map(e=>[e.x,e.y]),s=o>=0?l[o]:(d=v(t,t.getView().getCenter()))?[d.x,d.y]:null;if(s){var c=w(s,l,e);n({selectedVertexIndex:c,selectedVertexType:c<a.length?"vertex":"midpoint"})}}})(e.key,r,o,a)):o().selectedVertexIndex>=0&&(e.preventDefault(),e.stopPropagation(),p(e))},f=e=>{if(null==c||c()," "===e.key)e.preventDefault(),o().selectedVertexIndex<0&&((e,t,r)=>{var{vertices:n,midpoints:o}=t();if(n.length){var a=e.getView().getCenter(),i=v(e,a);if(i){var d=[...n.map(t=>v(e,t)),...o.map(t=>v(e,t))].filter(Boolean).map(e=>[e.x,e.y]),l=w([i.x,i.y],d,void 0);r({selectedVertexIndex:l,selectedVertexType:l<n.length?"vertex":"midpoint"})}}})(r,o,a);else if(S.has(e.key))g(e);else if("z"===e.key&&(e.metaKey||e.ctrlKey)){var t,n=null===(t=document.activeElement)||void 0===t?void 0:t.tagName;C.has(n)||(e.preventDefault(),e.stopPropagation(),s())}},m=e=>{y()||("Escape"===e.key&&o().selectedVertexIndex>=0?(e.preventDefault(),x.start=null,x.index=null,a({selectedVertexIndex:-1,selectedVertexType:null})):f(e))},h=e=>{y()||(S.has(e.key)&&x.start&&null!=x.index&&(null==n||n.hideIndicator(),i({vertexIndex:x.index,previousCoord:x.start}),x.start=null,x.index=null),"Delete"===e.key&&l())};return window.addEventListener("keydown",m,{capture:!0}),window.addEventListener("keyup",h,{capture:!0}),{destroy(){window.removeEventListener("keydown",m,{capture:!0}),window.removeEventListener("keyup",h,{capture:!0})}}},b=(e,t)=>{switch(t.type){case"move_vertex":return((e,t)=>{var{vertexIndex:r,previousCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)return-1;var v=c(a,d.segment.path);return v[d.localIdx]=[...n],d.segment.closed&&0===d.localIdx&&(v[v.length-1]=[...n]),o.setCoordinates(a.coordinates),r})(e,t);case"insert_vertex":return((e,t)=>{var{vertexIndex:r}=t,n=e.getGeometry(),o={type:n.getType(),coordinates:n.getCoordinates()},a=l(o),i=s(a,r);if(!i)return-1;var d=c(o,i.segment.path);return d.splice(i.localIdx,1),i.segment.closed&&(d[d.length-1]=[...d[0]]),n.setCoordinates(o.coordinates),-1})(e,t);case"delete_vertex":return((e,t)=>{var{vertexIndex:r,deletedCoord:n}=t,o=e.getGeometry(),a={type:o.getType(),coordinates:o.getCoordinates()},i=l(a),d=s(i,r);if(!d)for(var v of i)if(r===v.start+v.length){d={segment:v,localIdx:v.length};break}if(!d)return-1;var p=c(a,d.segment.path);return p.splice(d.localIdx,0,[...n]),d.segment.closed&&(p[p.length-1]=[...p[0]]),o.setCoordinates(a.coordinates),r})(e,t);default:return-1}},k=v=>{var{map:p,manager:x,options:u}=v,{featureId:y,container:g,interfaceType:f,deleteVertexButtonId:m,snap:I}=u,{store:w,undoStack:S}=x,C=w.getOL(y);if(!C)return null;var E=C.getStyle();C.setStyle(x.styles.editFeatureStyle);var k={olFeature:C,selectedVertexIndex:-1,selectedVertexType:null,vertices:[],midpoints:[],interfaceType:null!=f?f:"pointer"},A=()=>k,M=null,P=null,D=e=>{if(Object.assign(k,e),void 0!==e.selectedVertexIndex){var t;if(X.setSelected("vertex"===k.selectedVertexType?k.selectedVertexIndex:-1),_.setSelected("midpoint"===k.selectedVertexType?k.selectedVertexIndex-k.vertices.length:-1),k.selectedVertexIndex<0)null===(t=M)||void 0===t||t();R(),x.emit("vertexselection",{index:"vertex"===k.selectedVertexType?k.selectedVertexIndex:-1,numVertices:k.vertices.length})}if(void 0!==e.vertices){var r,n={type:C.getGeometry().getType(),coordinates:C.getGeometry().getCoordinates()};_.update(n),X.update(n),k.midpoints=_.getCoords(),R(),null===(r=P)||void 0===r||r(),p.render()}},G=()=>{var e=C.getGeometry(),t={type:e.getType(),coordinates:e.getCoordinates()};k.vertices=d(t),k.midpoints=i(t),_.update(t),X.update(t),R()},z=()=>{G(),x.emit("vertexchange",{numVertices:k.vertices.length}),x.emit("update",w.toGeoJSON(C))},N=()=>G();C.getGeometry().on("change",N);var F=new t([C]),O=new e({features:F,style:()=>[],pixelTolerance:12,condition:e=>{if("touch"===k.interfaceType)return!1;var t=p.getEventPixel(e.originalEvent);return null!==T(p,k.vertices,k.midpoints,{x:t[0],y:t[1]})}});p.addInteraction(O);var j=null;O.on("modifystart",()=>{"touch"!==k.interfaceType&&(j=k.vertices.map(e=>[...e]))}),O.on("modifyend",()=>{if("touch"!==k.interfaceType){var e=j;if(z(),e){var t=k.vertices;if(t.length>e.length){var r=t.findIndex((t,r)=>!e[r]||t[0]!==e[r][0]),n=Math.max(0,r);S.push({type:"insert_vertex",vertexIndex:n}),D({selectedVertexIndex:n,selectedVertexType:"vertex"})}else if(t.length===e.length){var o=t.findIndex((t,r)=>t[0]!==e[r][0]||t[1]!==e[r][1]);o>=0&&(S.push({type:"move_vertex",vertexIndex:o,previousCoord:e[o]}),D({selectedVertexIndex:o,selectedVertexType:"vertex"}))}j=null}}});var _=((e,t)=>{var d=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("midpointIndex")===l?null:[d],zIndex:101});return e.addLayer(c),{update(e){s.clear();var t=i(e).map((e,t)=>{var r=new o({geometry:new a(e)});return r.set("midpointIndex",t),r});s.addFeatures(t)},setSelected(e){l=e,s.changed()},updateStyle(e){d=e,s.changed()},getCoords:()=>s.getFeatures().sort((e,t)=>e.get("midpointIndex")-t.get("midpointIndex")).map(e=>e.getGeometry().getCoordinates()),remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.midpointStyle),X=((e,t)=>{var i=t,l=-1,s=new r,c=new n({source:s,style:e=>e.get("vertexIndex")===l?null:[i],zIndex:102});return e.addLayer(c),{update(e){s.clear(),d(e).forEach((e,t)=>{var r=new o({geometry:new a(e)});r.set("vertexIndex",t),s.addFeature(r)})},setSelected(e){l=e,s.changed()},updateStyle(e){i=e,s.changed()},remove(){s.clear(),e.removeLayer(c)}}})(p,x.styles.vertexStyle),Y=new r,B=new n({source:Y,zIndex:103});p.addLayer(B);var R=()=>{Y.clear();var{selectedVertexIndex:e,selectedVertexType:t,vertices:r,midpoints:n}=k;if(!(e<0)){var i,d;if("vertex"===t)i=r[e],d=x.styles.selectedVertexStyle;else{if("midpoint"!==t)return;i=n[e-r.length],d=x.styles.selectedMidpointStyle}if(i){var l=new o({geometry:new a(i)});l.setStyle(d),Y.addFeature(l)}}};z();var U=e=>{C.setStyle(e.editFeatureStyle),X.updateStyle(e.vertexStyle),_.updateStyle(e.midpointStyle),R(),Z.updateColors(x.colors)};x.on("styleschanged",U);var J=e=>{if("touch"===e.pointerType)return k.interfaceType="touch",void Z.updateTargetPosition();k.interfaceType="pointer";var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)&&D({selectedVertexIndex:n.index,selectedVertexType:"vertex"})},K=e=>{if("touch"!==k.interfaceType){var t=p.getEventPixel(e),r={x:t[0],y:t[1]},n=T(p,k.vertices,k.midpoints,r);"vertex"===(null==n?void 0:n.type)?D({selectedVertexIndex:n.index,selectedVertexType:"vertex"}):"midpoint"===(null==n?void 0:n.type)||D({selectedVertexIndex:-1,selectedVertexType:null})}},H=e=>{"mouse"===e.pointerType&&"pointer"!==k.interfaceType&&(k.interfaceType="pointer",Z.hide())};g.addEventListener("pointerdown",J),g.addEventListener("pointerenter",H),g.addEventListener("pointermove",H),g.addEventListener("click",K);var W=e=>{m&&e.target.closest("#".concat(m))&&q()};globalThis.addEventListener("click",W);var q=()=>{if(!("vertex"!==k.selectedVertexType||k.selectedVertexIndex<0)){var e=((e,t)=>{var r=e.getGeometry(),n={type:r.getType(),coordinates:r.getCoordinates()},o=d(n),a=l(n),i=s(a,t);if(!i)return null;var{segment:v}=i,p=v.closed?3:2;if(v.length<=p)return null;var x=[...o[t]],u=c(n,v.path);return u.splice(i.localIdx,1),v.closed&&(u[u.length-1]=[...u[0]]),r.setCoordinates(n.coordinates),{deletedIndex:t,deletedCoord:x}})(C,k.selectedVertexIndex);e&&(S.push({type:"delete_vertex",vertexIndex:e.deletedIndex,deletedCoord:e.deletedCoord}),z(),D({selectedVertexIndex:-1,selectedVertexType:null}))}},Q=()=>{var e=S.pop();if(e){var t=k.selectedVertexIndex,r=b(C,e);z();var n,o=t>=0?r:-1;if(D({selectedVertexIndex:o,selectedVertexType:o>=0?"vertex":null}),t>=0&&o>=0)null===(n=P)||void 0===n||n()}},Z=V({map:p,container:g,getState:A,setState:D,colors:x.colors,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"}),Z.updateTargetPosition()},onTap(e){if(e){if("vertex"===e.type)return D({selectedVertexIndex:e.index,selectedVertexType:"vertex"}),void Z.updateTargetPosition();if("midpoint"===e.type){var t=h(C,k.midpoints,e.index,k.vertices.length);if(!t)return;S.push({type:"insert_vertex",vertexIndex:t.insertedIndex}),z(),D({selectedVertexIndex:t.insertedIndex,selectedVertexType:"vertex"}),Z.updateTargetPosition()}}else D({selectedVertexIndex:-1,selectedVertexType:null})}});M=()=>Z.hide(),P=()=>{"touch"===k.interfaceType&&Z.updateTargetPosition()};var $=()=>{"touch"!==k.interfaceType||k.selectedVertexIndex<0||p.once("postrender",()=>Z.updateTargetPosition())};p.on("change:size",$);var ee=(e=>L(e))({map:p,getState:A,setState:D,snap:I,onVertexMoved(e){var{vertexIndex:t,previousCoord:r}=e;S.push({type:"move_vertex",vertexIndex:t,previousCoord:r}),z(),D({selectedVertexIndex:t,selectedVertexType:"vertex"})},onInserted(e){var{insertedIndex:t}=e;S.push({type:"insert_vertex",vertexIndex:t}),z()},onDeleted:q,onUndo:Q,onKeyboardActive(){"keyboard"!==k.interfaceType&&(k.interfaceType="keyboard",Z.hide(),g.focus({preventScroll:!0}))}});return{setInterfaceType(e){e!==k.interfaceType&&(k.interfaceType=e,"touch"===e?Z.updateTargetPosition():Z.hide())},done(){x.emit("editfinish",w.toGeoJSON(C))},cancel(){},undo:Q,deleteVertex:q,destroy(){C.setStyle(E),C.getGeometry().un("change",N),x.off("styleschanged",U),g.removeEventListener("pointerdown",J),g.removeEventListener("pointerenter",H),g.removeEventListener("pointermove",H),g.removeEventListener("click",K),globalThis.removeEventListener("click",W),p.un("change:size",$),p.removeInteraction(O),Y.clear(),p.removeLayer(B),_.remove(),X.remove(),Z.destroy(),ee.destroy()}}};export{k as createEditMode};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@babel/runtime/helpers/asyncToGenerator";import n from"ol/layer/Vector.js";import a from"ol/source/Vector.js";import o from"ol/format/GeoJSON.js";import i from"ol/style/Style.js";import l from"ol/style/Fill.js";import d from"ol/style/Stroke.js";import s from"ol/style/Circle.js";import p from"ol/layer/VectorTile.js";import c from"ol/Feature.js";import u from"ol/geom/Point.js";import{Style as v}from"ol/style.js";import f from"ol/interaction/Interaction.js";import h from"@babel/runtime/helpers/objectWithoutProperties";function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function m(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?y(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var g={SET_MODE:(e,t)=>m(m({},e),{},{mode:t}),SET_FEATURE:(e,t)=>m(m({},e),{},{feature:void 0===t.feature?e.feature:t.feature,tempFeature:void 0===t.tempFeature?e.tempFeature:t.tempFeature}),SET_SELECTED_VERTEX_INDEX:(e,t)=>m(m({},e),{},{selectedVertexIndex:t.index,numVertices:t.numVertices}),SET_UNDO_STACK_LENGTH:(e,t)=>m(m({},e),{},{undoStackLength:t}),TOGGLE_SNAP:e=>m(m({},e),{},{snap:!e.snap}),SET_HAS_SNAP_LAYERS:(e,t)=>m(m({},e),{},{hasSnapLayers:!!t})},_={APP_ADD_MARKER:"app:addmarker",APP_UPDATE_MARKER:"app:updatemarker",APP_REMOVE_MARKER:"app:removemarker",APP_SET_MODE:"app:setmode",APP_REVERT_MODE:"app:revertmode",APP_ADD_BUTTON:"app:addbutton",APP_TOGGLE_BUTTON_STATE:"app:togglebuttonstate",APP_ADD_PANEL:"app:addpanel",APP_REMOVE_PANEL:"app:removepanel",APP_SHOW_PANEL:"app:showpanel",APP_HIDE_PANEL:"app:hidepanel",APP_ADD_CONTROL:"app:addcontrol",APP_READY:"app:ready",APP_OPENED:"app:opened",APP_CLOSED:"app:closed",APP_PANEL_OPENED:"app:panelopened",APP_PANEL_CLOSED:"app:panelclosed",MAP_SET_STYLE:"map:setstyle",MAP_SET_SIZE:"map:setsize",MAP_SET_FEATURES:"map:setfeatures",MAP_SET_ACTIVE_FEATURE:"map:setactivefeature",MAP_SELECT_FEATURE:"map:selectfeature",MAP_SET_PIXEL_RATIO:"map:setpixelratio",MAP_FIT_TO_BOUNDS:"map:fittobounds",MAP_SET_VIEW:"map:setview",MAP_INIT_MAP_STYLES:"map:initmapstyles",MAP_STYLE_CHANGE:"map:stylechange",MAP_LOADED:"map:loaded",MAP_READY:"map:ready",MAP_SIZE_CHANGE:"map:sizechange",MAP_FIRST_IDLE:"map:firstidle",MAP_MOVE_START:"map:movestart",MAP_MOVE:"map:move",MAP_MOVE_END:"map:moveend",MAP_STATE_UPDATED:"map:stateupdated",MAP_DATA_CHANGE:"map:datachange",MAP_RENDER:"map:render",MAP_CLICK:"map:click",MAP_DESTROY:"map:destroy"},S="EPSG:27700",P=new o({dataProjection:S,featureProjection:S}),w=()=>{var e=new a;return{source:e,getOL(t){var r;return null!==(r=e.getFeatureById(String(t)))&&void 0!==r?r:null},add(t){var r=this.getOL(t.id);r&&e.removeFeature(r);var n=P.readFeature(t);return e.addFeature(n),n},get(e){var t=this.getOL(e);return t?P.writeFeatureObject(t):null},remove(t){var r=this.getOL(t);r&&e.removeFeature(r)},clear(){e.clear()},toGeoJSON:e=>P.writeFeatureObject(e),fromGeoJSON:e=>P.readFeature(e)}},E={outer:11,mid:8,inner:6},O={outer:9,mid:6,inner:4},b=(e,t,r,n,a)=>{e.beginPath(),e.arc(t,r,n,0,2*Math.PI),e.fillStyle=a,e.fill()},A=(e,t,r)=>{var{outer:n,mid:a,inner:o}=e;return(e,i)=>{var l=i.context,d=i.pixelRatio,[s,p]=e;l.save(),b(l,s,p,n*d,t.editActive),b(l,s,p,a*d,t.editHalo),b(l,s,p,o*d,t[r]),l.restore()}},T=e=>e.charAt(0).toUpperCase()+e.slice(1),j=e=>{var t=new i({image:new s({radius:6,fill:new l({color:e.editVertex})})}),r=new i({renderer:A(E,e,"editVertex")}),n=new i({image:new s({radius:4,fill:new l({color:e.editMidpoint})})}),a=new i({renderer:A(O,e,"editMidpoint")}),o=new i({stroke:new d({color:e.editStroke,width:2}),fill:new l({color:e.shapeFill})}),p=new i({stroke:new d({color:e.editStroke,width:2}),fill:new l({color:e.shapeFill})}),c=new i({image:new s({radius:5,fill:new l({color:e.editVertex})})});return{vertexStyle:t,selectedVertexStyle:r,midpointStyle:n,selectedMidpointStyle:a,editFeatureStyle:o,createSketchStyle:()=>e=>"Point"===e.getGeometry().getType()?[c]:[p],createFeatureStyle:()=>t=>{var r=t.getProperties(),n=e.mapStyleId,a=n&&r["stroke".concat(T(n))]||r.stroke||e.shapeStroke,o=n&&r["fill".concat(T(n))]||r.fill||e.shapeFill,s=r.strokeWidth||e.strokeWidth;return[new i({stroke:new d({color:a,width:s}),fill:new l({color:o})})]}}},M={editStroke:{light:"#1a65a6",dark:"#ffffff"},editVertex:{light:"#1a65a6",dark:"#ffffff"},editMidpoint:{light:"#1a65a6",dark:"#ffffff"},editHalo:{light:"#ffffff",dark:"rgba(11,12,12,1)"},editActive:{light:"#000000",dark:"#ffffff"},splitInvalid:{light:"rgba(29,112,184,1)",dark:"rgba(29,112,184,1)"},splitValid:{light:"rgba(29,112,184,1)",dark:"rgba(29,112,184,1)"},shapeStroke:"#1a65a6",shapeFill:"rgba(26,101,166,0.1)",strokeWidth:2,snapVertex:"rgba(212,53,28,0.5)",snapMidpoint:"rgba(40,161,151,1)",snapEdge:"rgba(29,112,184,0.5)",snapRadius:10},k=function(e){var t,r,n,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=null!==(t=null==e?void 0:e.mapColorScheme)&&void 0!==t?t:"light",i=null!==(r=null==e?void 0:e.id)&&void 0!==r?r:null,l=e=>{var t;return((e,t,r)=>"object"!=typeof e||null===e?e:r&&void 0!==e[r]?e[r]:void 0!==e[t]?e[t]:void 0!==e.light?e.light:Object.values(e)[0])(null!==(t=a[e])&&void 0!==t?t:M[e],o,i)};return{editStroke:l("editStroke"),editVertex:l("editVertex"),editMidpoint:l("editMidpoint"),editActive:l("editActive"),editHalo:l("editHalo"),shapeStroke:l("shapeStroke"),strokeWidth:null!==(n=a.strokeWidth)&&void 0!==n?n:M.strokeWidth,shapeFill:l("shapeFill"),snapVertex:l("snapVertex"),snapEdge:l("snapEdge"),mapStyleId:i}},D=(e,t)=>{var r=e[0]-t[0],n=e[1]-t[1];return r*r+n*n},x=(e,t,r)=>{var n=r[0]-t[0],a=r[1]-t[1],o=n*n+a*a;if(0===o)return[t[0],t[1]];var i=Math.max(0,Math.min(1,((e[0]-t[0])*n+(e[1]-t[1])*a)/o));return[t[0]+i*n,t[1]+i*a]},I=(e,t)=>L(e,t)?t:e,L=(e,t)=>e?!!t&&("edge"===e.type&&"vertex"===t.type||("vertex"!==e.type||"edge"!==t.type)&&t.distSq<e.distSq):!!t,C=(e,t,r,n)=>{for(var a=null,o=n&&e.length>1?e.length-1:e.length,i=n?o:o-1,l=0;l<o;l++){var d=e[l],s=D(t,d);s<=r&&(a=I(a,{type:"vertex",coord:[d[0],d[1]],distSq:s}))}for(var p=0;p<i;p++){var c=e[p],u=e[(p+1)%o],v=x(t,c,u),f=D(t,v);f<=r&&(a=I(a,{type:"edge",coord:v,distSq:f}))}return a},V=(e,t,r,n,a,o)=>{for(var i=null,l=0;l<r;l++){var d=t+2*l,s=[e[d],e[d+1]],p=D(a,s);p<=o&&(i=I(i,{type:"vertex",coord:s,distSq:p}))}return I(i,((e,t,r,n,a,o)=>{for(var i=null,l=0;l<n;l++){var d=t+2*l,s=t+(l+1)%r*2,p=[e[d],e[d+1]],c=[e[s],e[s+1]],u=x(a,p,c),v=D(a,u);v<=o&&(i=I(i,{type:"edge",coord:u,distSq:v}))}return i})(e,t,r,n,a,o))},R=(e,t,r,n,a,o)=>{var i=(r-t)/2;return V(e,t,i,o?i:i-1,n,a)},F={Point(e,t,r){var n=e.getCoordinates(),a=D(t,n);return a<=r?{type:"vertex",coord:[n[0],n[1]],distSq:a}:null},LineString:(e,t,r)=>C(e.getCoordinates(),t,r,!1),LinearRing:(e,t,r)=>C(e.getCoordinates(),t,r,!0),Polygon(e,t,r){var n=null;for(var a of e.getCoordinates())n=I(n,C(a,t,r,!0));return n},MultiLineString(e,t,r){var n=null;for(var a of e.getCoordinates())n=I(n,C(a,t,r,!1));return n},MultiPolygon(e,t,r){var n=null;for(var a of e.getCoordinates())for(var o of a)n=I(n,C(o,t,r,!0));return n}},N=(e,t,r)=>{var n=e.getGeometry();if(!n)return null;var a=F[n.getType()];return a?a(n,t,r):null},W=(e,t)=>t?e?"vertex"===e.type&&"edge"===t.type?e:"edge"===e.type&&"vertex"===t.type||t.distSq<e.distSq?t:e:t:e,H=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=new Set,a=[],o=e=>{for(var t of(r=new Set,a=[],null!=e?e:[]))"string"==typeof t?r.add(t):t instanceof n&&a.push(t)};o(t);return{query:(t,n)=>{var o=e.getView().getResolution();if(!o)return null;var i=n*o,l=i*i,d=[t[0]-i,t[1]-i,t[0]+i,t[1]+i],s=null;for(var c of a){var u=c.getSource();if(u)for(var v of u.getFeaturesInExtent(d))s=W(s,N(v,t,l))}if(r.size>0){var f=(e=>{var t=[];return e.getLayers().forEach(e=>{e instanceof p&&t.push(e)}),t})(e),h=f.length>0?e.getPixelFromCoordinate(t):null;h&&e.forEachFeatureAtPixel(h,(e,n)=>{var a;r.has(null===(a=e.get("mapbox-layer"))||void 0===a?void 0:a.id)&&(s=W(s,((e,t,r)=>{var n=e.getType(),a=e.getFlatCoordinates(),o=null;if("Point"===n){var i=D(t,a);i<=r&&(o=I(o,{type:"vertex",coord:[a[0],a[1]],distSq:i}))}else if("LineString"===n)o=I(o,R(a,0,a.length,t,r,!1));else if("Polygon"===n||"MultiLineString"===n){var l=e.getEnds(),d=0,s="Polygon"===n;for(var p of l)o=I(o,R(a,d,p,t,r,s)),d=p}return o})(e,t,l)))},{hitTolerance:n,layerFilter:e=>f.includes(e)})}return s?{type:s.type,coord:s.coord}:null},setLayers:o}},G=e=>(t,r)=>{var n=r.context,[a,o]=t;n.beginPath(),n.arc(a,o,10*r.pixelRatio,0,2*Math.PI),n.fillStyle=e,n.fill()},U=e=>({vertex:new v({renderer:G(e.snapVertex)}),edge:new v({renderer:G(e.snapEdge)})}),B=new Set(["pointermove","pointerdrag","pointerdown","pointerup","singleclick","click"]),q=(e,t,r,o)=>{if(null==t||!t.length)return null;var i=H(e,t),l=((e,t)=>{var r=U(t),o=new a,i=new n({source:o,style:e=>{var t;return null!==(t=r[e.get("snapType")])&&void 0!==t?t:null},zIndex:200,updateWhileAnimating:!0,updateWhileInteracting:!0});e.addLayer(i);var l=new c,d=!1;return{show(e,t){l.setGeometry(new u(e)),l.set("snapType",t,!0),d?o.changed():(o.addFeature(l),d=!0)},hide(){d&&(o.clear(),d=!1)},updateColors(e){r=U(e),d&&o.changed()},remove(){o.clear(),e.removeLayer(i)}}})(e,r),d=((e,t,r)=>{var n=new f({handleEvent(a){if(!n.getActive())return!0;var{type:o}=a;if("pointerout"===o||"pointerleave"===o)return t.hide(),!0;if(!B.has(o))return!0;var i=e.query(a.coordinate,r);return i&&(a.coordinate=i.coord.slice()),"pointermove"===o?i?t.show(i.coord,i.type):t.hide():"pointerdrag"===o&&t.hide(),!0}});return n})(i,l,o);e.addInteraction(d),d.setActive(!1);var s=!1;return{snapRadius:o,apply(e){if(!s)return e;var t=i.query(e,o);return t?(l.show(t.coord,t.type),t.coord):(l.hide(),e)},hideIndicator(){l.hide()},setActive(e){s=e,d.setActive(e),e||l.hide()},setSnapLayers(e){i.setLayers(null==e?null!=t?t:[]:e)},reattach(){e.removeInteraction(d),e.addInteraction(d)},updateColors(e){l.updateColors(e)},destroy(){e.removeInteraction(d),l.remove()}}};function Y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function X(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?Y(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Y(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}class z{constructor(e){var t,r,a,o,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._map=e,this._pluginConfig=i,this._mode="disabled",this._modeInstance=null,this._listeners=new Map,this.store=w(),this.undoStack=(a=e=>this.emit("undochange",e),o=[],{push(e){o.push(e),a(o.length)},pop(){var e=o.pop();return a(o.length),e},clear(){o.length=0,a(o.length)},get length(){return o.length}}),this.colors=k(null,i),this.styles=j(this.colors),this.snap=q(e,null!==(t=i.snapLayers)&&void 0!==t?t:null,this.colors,null!==(r=i.snapRadius)&&void 0!==r?r:M.snapRadius),this._layer=new n({source:this.store.source,style:this.styles.createFeatureStyle(),zIndex:100}),this._layer.set("layerId","draw"),e.addLayer(this._layer)}setMapStyle(e){var t;this.colors=k(e,this._pluginConfig),this.styles=j(this.colors),this._layer.setStyle(this.styles.createFeatureStyle()),this.store.source.changed(),null===(t=this.snap)||void 0===t||t.updateColors(this.colors),this.emit("styleschanged",this.styles)}on(e,t){this._listeners.has(e)||this._listeners.set(e,new Set),this._listeners.get(e).add(t)}off(e,t){var r;null===(r=this._listeners.get(e))||void 0===r||r.delete(t)}emit(e,t){var r;null===(r=this._listeners.get(e))||void 0===r||r.forEach(e=>e(t))}changeMode(e){var t=arguments,n=this;return r(function*(){var r,a,o=t.length>1&&void 0!==t[1]?t[1]:{};null===(r=n._modeInstance)||void 0===r||r.destroy(),n._modeInstance=null,n._mode=e;var i=X(X({},o),{},{snap:n.snap});if("draw_polygon"===e||"draw_line"===e){var{createDrawMode:l}=yield import(/* webpackChunkName: "DrawMode" */ "./DrawMode.js");n._modeInstance=l({map:n._map,manager:n,options:i})}else if("edit_vertex"===e){var{createEditMode:d}=yield import(/* webpackChunkName: "EditMode" */ "./EditMode.js");n._modeInstance=d({map:n._map,manager:n,options:i})}null===(a=n.snap)||void 0===a||a.reattach()})()}getMode(){return this._mode}done(){var e;null===(e=this._modeInstance)||void 0===e||e.done()}cancel(){var e;null===(e=this._modeInstance)||void 0===e||e.cancel(),this.changeMode("disabled")}undo(){var e;null===(e=this._modeInstance)||void 0===e||e.undo()}deleteVertex(){var e;null===(e=this._modeInstance)||void 0===e||e.deleteVertex()}setInterfaceType(e){var t,r;null===(t=this._modeInstance)||void 0===t||null===(r=t.setInterfaceType)||void 0===r||r.call(t,e)}get(e){return this.store.get(e)}add(e){return this.store.add(e)}delete(e){return this.store.remove(e)}deleteAll(){return this.store.clear()}remove(){var e,t;null===(e=this._modeInstance)||void 0===e||e.destroy(),this._modeInstance=null,null===(t=this.snap)||void 0===t||t.destroy(),this.snap=null,this.store.clear(),this._map.removeLayer(this._layer),this._listeners.clear()}}var K=["stroke","fill","strokeWidth"],Z=e=>{if(!e)return{};var t={};for(var[r,n]of Object.entries(e))if(K.includes(r)&&"object"==typeof n&&null!==n){var a=Object.entries(n);for(var[o,i]of(a.length>0&&(t[r]=a[0][1]),a))t["".concat(r).concat(o.charAt(0).toUpperCase()+o.slice(1))]=i}else t[r]=n;return t},J=["stroke","fill","strokeWidth","properties"];function Q(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function $(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?Q(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Q(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var ee=["stroke","fill","strokeWidth","properties"];function te(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function re(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?te(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):te(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var ne=["stroke","fill","strokeWidth","properties"];function ae(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function oe(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?ae(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ae(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function ie(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function le(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?ie(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ie(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var de=e=>({mobile:{slot:"actions",showLabel:e},tablet:{slot:"actions",showLabel:e},desktop:{slot:"actions",showLabel:e}}),se={reducer:{initialState:{mode:null,feature:null,tempFeature:null,selectedVertexIndex:-1,numVertices:null,undoStackLength:0,snap:!1,hasSnapLayers:!1},actions:g},InitComponent:e=>{var{appState:r,appConfig:n,mapState:a,pluginConfig:o,pluginState:i,services:l,mapProvider:d,buttonConfig:s}=e,{eventBus:p}=l,{crossHair:c}=a,u=["touch","keyboard"].includes(r.interfaceType);t(()=>{var e,t,n,l,s,c=null===(e=null===(t=o.includeModes)||void 0===t?void 0:t.includes(r.mode))||void 0===e||e,u=null!==(n=null===(l=o.excludeModes)||void 0===l?void 0:l.includes(r.mode))&&void 0!==n&&n;if(a.isMapReady&&c&&!u){var{remove:v}=(e=>{var{mapProvider:t,events:r,eventBus:n,pluginConfig:a={},mapStyle:o=null}=e,{map:i}=t,l=new z(i,a);o&&l.setMapStyle(o),t.draw=l;var d=e=>{var r;t.drawScale=null!==(r={small:1,medium:1.5,large:2}[e])&&void 0!==r?r:1};n.on(r.MAP_SET_SIZE,d);var s=e=>{l.setMapStyle(e)};return n.on(r.MAP_SET_STYLE,s),{remove(){n.off(r.MAP_SET_SIZE,d),n.off(r.MAP_SET_STYLE,s),l.remove(),t.draw=null}}})({mapProvider:d,events:_,eventBus:p,pluginConfig:o,mapStyle:a.mapStyle});return i.dispatch({type:"SET_MODE",payload:null}),i.dispatch({type:"SET_HAS_SNAP_LAYERS",payload:(null===(s=o.snapLayers)||void 0===s?void 0:s.length)>0}),p.emit("draw:ready"),()=>v()}},[a.isMapReady,r.mode]),t(()=>{if(["draw_polygon","draw_line"].includes(i.mode)&&u){var e=c.isVisible;return c.fixAtCenter(),()=>{e||c.hide()}}},[i.mode,r.interfaceType]),t(()=>{"edit_vertex"===i.mode&&d.draw&&d.draw.setInterfaceType(r.interfaceType)},[r.interfaceType,i.mode]),t(()=>{if(d.draw)return function(e){var{pluginState:t,mapProvider:r,buttonConfig:n,eventBus:a}=e,{drawDone:o,drawCancel:i,drawUndo:l,drawDeletePoint:d,drawSnap:s}=n,{draw:p}=r,{dispatch:c,feature:u,tempFeature:v}=t,f=()=>{p.undoStack.clear(),c({type:"SET_MODE",payload:null}),c({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}})},h=e=>{f(),p.changeMode("disabled"),a.emit("draw:created",e)},y=e=>{f(),p.changeMode("disabled"),a.emit("draw:edited",e)},m=()=>{},g=e=>{c({type:"SET_SELECTED_VERTEX_INDEX",payload:e}),a.emit("draw:vertexselection",e)},_=e=>{c({type:"SET_SELECTED_VERTEX_INDEX",payload:{index:-1,numVertices:e.numVertices}})},S=e=>{c({type:"SET_UNDO_STACK_LENGTH",payload:e})},P=e=>{a.emit("draw:updated",e)};return o.onClick=()=>{p.undoStack.clear(),p.done()},i.onClick=()=>{"edit_vertex"===p.getMode()&&null!=v&&v.id&&p.add(u),p.cancel(),f(),a.emit("draw:cancelled",u)},l.onClick=()=>{p.undo()},d&&(d.onClick=()=>{p.deleteVertex()}),s&&(s.onClick=()=>{var e,r=!t.snap;c({type:"TOGGLE_SNAP"}),null===(e=p.snap)||void 0===e||e.setActive(r)}),p.on("create",h),p.on("editfinish",y),p.on("cancel",m),p.on("vertexselection",g),p.on("vertexchange",_),p.on("undochange",S),p.on("update",P),()=>{o.onClick=null,i.onClick=null,l.onClick=null,d&&(d.onClick=null),s&&(s.onClick=null),p.off("create",h),p.off("editfinish",y),p.off("cancel",m),p.off("vertexselection",g),p.off("vertexchange",_),p.off("undochange",S),p.off("update",P)}}({mapProvider:d,buttonConfig:s,pluginState:i,eventBus:p})},[d,r,i])},buttons:[le({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},de(!0)),le({id:"drawAddPoint",label:"Add point",variant:"primary",hiddenWhen:e=>{var{appState:t,pluginState:r}=e;return!["draw_polygon","draw_line"].includes(r.mode)||"touch"!==t.interfaceType}},de(!0)),le({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},enableWhen:e=>{var{pluginState:t}=e;return"draw_polygon"===t.mode?t.numVertices>=3:"draw_line"===t.mode?t.numVertices>=2:"edit_vertex"===t.mode}},de(!0)),{id:"drawMenu",label:"Menu",iconId:"menu",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},menuItems:[{id:"drawUndo",label:"Undo",iconId:"undo",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},enableWhen:e=>{var{pluginState:t}=e;return["draw_polygon","draw_line"].includes(t.mode)?t.numVertices>0:t.undoStackLength>0}},{id:"drawSnap",label:"Snap to feature",iconId:"magnet",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode||!t.hasSnapLayers},pressedWhen:e=>{var{pluginState:t}=e;return!!t.snap}},{id:"drawDeletePoint",label:"Delete point",iconId:"trash",enableWhen:e=>{var{pluginState:t}=e;return t.selectedVertexIndex>=0&&t.numVertices>2},hiddenWhen:e=>{var{pluginState:t}=e;return"edit_vertex"!==t.mode}}],mobile:{slot:"bottom-right"},tablet:{slot:"top-middle"},desktop:{slot:"top-middle"}}],keyboardShortcuts:[{id:"drawStart",group:"Drawing",title:"Edit vertex",command:"<kbd>Spacebar</kbd></dd>"}],icons:[{id:"menu",svgContent:'<path d="m6 9 6 6 6-6"/>'},{id:"undo",svgContent:'<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>'},{id:"magnet",svgContent:'<path d="m12 15 4 4"/><path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z"/><path d="m5 8 4 4"/>'},{id:"trash",svgContent:'<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'}],api:{newPolygon:function(e,t){var{appState:r,appConfig:n,mapState:a,pluginState:o,mapProvider:i,services:l}=e,d=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:s}=o,{draw:p}=i,{eventBus:c}=l;if(p){c.emit("draw:started",{mode:"draw_polygon"});var{stroke:u,fill:v,strokeWidth:f,properties:y}=d,m=h(d,J),g=$($({},y),Z({stroke:u,fill:v,strokeWidth:f}));p.changeMode("draw_polygon",$({container:r.layoutRefs.viewportRef.current,interfaceType:r.interfaceType,addVertexButtonId:"".concat(n.id,"-draw-add-point"),featureId:t,geometryType:"Polygon",properties:g,mapProvider:i,crossHair:a.crossHair},m)),s({type:"SET_MODE",payload:"draw_polygon"})}},newLine:function(e,t){var{appState:r,appConfig:n,mapState:a,pluginState:o,mapProvider:i,services:l}=e,d=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:s}=o,{draw:p}=i,{eventBus:c}=l;if(p){c.emit("draw:started",{mode:"draw_line"});var{stroke:u,fill:v,strokeWidth:f,properties:y}=d,m=h(d,ee),g=re(re({},y),Z({stroke:u,fill:v,strokeWidth:f}));p.changeMode("draw_line",re({container:r.layoutRefs.viewportRef.current,interfaceType:r.interfaceType,addVertexButtonId:"".concat(n.id,"-draw-add-point"),featureId:t,geometryType:"LineString",properties:g,mapProvider:i,crossHair:a.crossHair},m)),s({type:"SET_MODE",payload:"draw_line"})}},editFeature:function(e,t){var r,n,{appState:a,appConfig:o,pluginConfig:i,pluginState:l,mapProvider:d,services:s}=e,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:c}=l,{draw:u}=d,{eventBus:v}=s;if(!u)return!1;var f=u.get(t);if(!f)return!1;v.emit("draw:editstart",{mode:"edit_vertex"});var h=void 0===p.snapLayers?null!==(r=i.snapLayers)&&void 0!==r?r:null:p.snapLayers;return null===(n=u.snap)||void 0===n||n.setSnapLayers(h),c({type:"SET_HAS_SNAP_LAYERS",payload:(null==h?void 0:h.length)>0}),u.changeMode("edit_vertex",{container:a.layoutRefs.viewportRef.current,deleteVertexButtonId:"".concat(o.id,"-draw-delete-point"),interfaceType:a.interfaceType,featureId:t}),c({type:"SET_FEATURE",payload:{feature:f,tempFeature:f}}),c({type:"SET_MODE",payload:"edit_vertex"}),!0},addFeature:(e,t)=>{var{mapProvider:r,services:n}=e,{draw:a}=r,{eventBus:o}=n;if(a){var{stroke:i,fill:l,strokeWidth:d,properties:s}=t,p=oe(oe({},h(t,ne)),{},{properties:oe(oe({},s),Z({stroke:i,fill:l,strokeWidth:d}))});a.add(p),o.emit("draw:add",p)}},deleteFeature:(e,t)=>{var{mapProvider:r}=e,{draw:n}=r;n&&n.delete(t)}}};export{se as manifest};
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@babel/runtime/helpers/asyncToGenerator";import n from"ol/layer/Vector.js";import a from"ol/source/Vector.js";import o from"ol/format/GeoJSON.js";import i from"ol/style/Style.js";import l from"ol/style/Fill.js";import d from"ol/style/Stroke.js";import s from"ol/style/Circle.js";import p from"ol/layer/VectorTile.js";import c from"ol/Feature.js";import u from"ol/geom/Point.js";import{Style as v}from"ol/style.js";import f from"ol/interaction/Interaction.js";import h from"@babel/runtime/helpers/objectWithoutProperties";function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function m(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?y(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var g={SET_MODE:(e,t)=>m(m({},e),{},{mode:t}),SET_FEATURE:(e,t)=>m(m({},e),{},{feature:void 0===t.feature?e.feature:t.feature,tempFeature:void 0===t.tempFeature?e.tempFeature:t.tempFeature}),SET_SELECTED_VERTEX_INDEX:(e,t)=>m(m({},e),{},{selectedVertexIndex:t.index,numVertices:t.numVertices}),SET_UNDO_STACK_LENGTH:(e,t)=>m(m({},e),{},{undoStackLength:t}),TOGGLE_SNAP:e=>m(m({},e),{},{snap:!e.snap}),SET_HAS_SNAP_LAYERS:(e,t)=>m(m({},e),{},{hasSnapLayers:!!t})},_={APP_ADD_MARKER:"app:addmarker",APP_UPDATE_MARKER:"app:updatemarker",APP_REMOVE_MARKER:"app:removemarker",APP_SET_MODE:"app:setmode",APP_REVERT_MODE:"app:revertmode",APP_ADD_BUTTON:"app:addbutton",APP_TOGGLE_BUTTON_STATE:"app:togglebuttonstate",APP_ADD_PANEL:"app:addpanel",APP_REMOVE_PANEL:"app:removepanel",APP_SHOW_PANEL:"app:showpanel",APP_HIDE_PANEL:"app:hidepanel",APP_ADD_CONTROL:"app:addcontrol",APP_READY:"app:ready",APP_OPENED:"app:opened",APP_CLOSED:"app:closed",APP_FULLSCREEN_CHANGE:"app:fullscreenchange",APP_PANEL_OPENED:"app:panelopened",APP_PANEL_CLOSED:"app:panelclosed",MAP_SET_STYLE:"map:setstyle",MAP_SET_SIZE:"map:setsize",MAP_SET_FEATURES:"map:setfeatures",MAP_SET_ACTIVE_FEATURE:"map:setactivefeature",MAP_SELECT_FEATURE:"map:selectfeature",MAP_SET_PIXEL_RATIO:"map:setpixelratio",MAP_FIT_TO_BOUNDS:"map:fittobounds",MAP_SET_VIEW:"map:setview",MAP_INIT_MAP_STYLES:"map:initmapstyles",MAP_STYLE_CHANGE:"map:stylechange",MAP_LOADED:"map:loaded",MAP_READY:"map:ready",MAP_SIZE_CHANGE:"map:sizechange",MAP_FIRST_IDLE:"map:firstidle",MAP_MOVE_START:"map:movestart",MAP_MOVE:"map:move",MAP_MOVE_END:"map:moveend",MAP_STATE_UPDATED:"map:stateupdated",MAP_DATA_CHANGE:"map:datachange",MAP_RENDER:"map:render",MAP_CLICK:"map:click",MAP_DESTROY:"map:destroy"},S="EPSG:27700",P=new o({dataProjection:S,featureProjection:S}),E=()=>{var e=new a;return{source:e,getOL(t){var r;return null!==(r=e.getFeatureById(String(t)))&&void 0!==r?r:null},add(t){var r=this.getOL(t.id);r&&e.removeFeature(r);var n=P.readFeature(t);return e.addFeature(n),n},get(e){var t=this.getOL(e);return t?P.writeFeatureObject(t):null},remove(t){var r=this.getOL(t);r&&e.removeFeature(r)},clear(){e.clear()},toGeoJSON:e=>P.writeFeatureObject(e),fromGeoJSON:e=>P.readFeature(e)}},w={outer:11,mid:8,inner:6},O={outer:9,mid:6,inner:4},b=(e,t,r,n,a)=>{e.beginPath(),e.arc(t,r,n,0,2*Math.PI),e.fillStyle=a,e.fill()},A=(e,t,r)=>{var{outer:n,mid:a,inner:o}=e;return(e,i)=>{var l=i.context,d=i.pixelRatio,[s,p]=e;l.save(),b(l,s,p,n*d,t.editActive),b(l,s,p,a*d,t.editHalo),b(l,s,p,o*d,t[r]),l.restore()}},T=e=>e.charAt(0).toUpperCase()+e.slice(1),j=e=>{var t=new i({image:new s({radius:6,fill:new l({color:e.editVertex})})}),r=new i({renderer:A(w,e,"editVertex")}),n=new i({image:new s({radius:4,fill:new l({color:e.editMidpoint})})}),a=new i({renderer:A(O,e,"editMidpoint")}),o=new i({stroke:new d({color:e.editStroke,width:2}),fill:new l({color:e.shapeFill})}),p=new i({stroke:new d({color:e.editStroke,width:2}),fill:new l({color:e.shapeFill})}),c=new i({image:new s({radius:5,fill:new l({color:e.editVertex})})});return{vertexStyle:t,selectedVertexStyle:r,midpointStyle:n,selectedMidpointStyle:a,editFeatureStyle:o,createSketchStyle:()=>e=>"Point"===e.getGeometry().getType()?[c]:[p],createFeatureStyle:()=>t=>{var r=t.getProperties(),n=e.mapStyleId,a=n&&r["stroke".concat(T(n))]||r.stroke||e.shapeStroke,o=n&&r["fill".concat(T(n))]||r.fill||e.shapeFill,s=r.strokeWidth||e.strokeWidth;return[new i({stroke:new d({color:a,width:s}),fill:new l({color:o})})]}}},M={editStroke:{light:"#1a65a6",dark:"#ffffff"},editVertex:{light:"#1a65a6",dark:"#ffffff"},editMidpoint:{light:"#1a65a6",dark:"#ffffff"},editHalo:{light:"#ffffff",dark:"rgba(11,12,12,1)"},editActive:{light:"#000000",dark:"#ffffff"},splitInvalid:{light:"rgba(29,112,184,1)",dark:"rgba(29,112,184,1)"},splitValid:{light:"rgba(29,112,184,1)",dark:"rgba(29,112,184,1)"},shapeStroke:"#1a65a6",shapeFill:"rgba(26,101,166,0.1)",strokeWidth:2,snapVertex:"rgba(212,53,28,0.5)",snapMidpoint:"rgba(40,161,151,1)",snapEdge:"rgba(29,112,184,0.5)",snapRadius:10},k=function(e){var t,r,n,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=null!==(t=null==e?void 0:e.mapColorScheme)&&void 0!==t?t:"light",i=null!==(r=null==e?void 0:e.id)&&void 0!==r?r:null,l=e=>{var t;return((e,t,r)=>"object"!=typeof e||null===e?e:r&&void 0!==e[r]?e[r]:void 0!==e[t]?e[t]:void 0!==e.light?e.light:Object.values(e)[0])(null!==(t=a[e])&&void 0!==t?t:M[e],o,i)};return{editStroke:l("editStroke"),editVertex:l("editVertex"),editMidpoint:l("editMidpoint"),editActive:l("editActive"),editHalo:l("editHalo"),shapeStroke:l("shapeStroke"),strokeWidth:null!==(n=a.strokeWidth)&&void 0!==n?n:M.strokeWidth,shapeFill:l("shapeFill"),snapVertex:l("snapVertex"),snapEdge:l("snapEdge"),mapStyleId:i}},D=(e,t)=>{var r=e[0]-t[0],n=e[1]-t[1];return r*r+n*n},x=(e,t,r)=>{var n=r[0]-t[0],a=r[1]-t[1],o=n*n+a*a;if(0===o)return[t[0],t[1]];var i=Math.max(0,Math.min(1,((e[0]-t[0])*n+(e[1]-t[1])*a)/o));return[t[0]+i*n,t[1]+i*a]},L=(e,t)=>C(e,t)?t:e,C=(e,t)=>e?!!t&&("edge"===e.type&&"vertex"===t.type||("vertex"!==e.type||"edge"!==t.type)&&t.distSq<e.distSq):!!t,I=(e,t,r,n)=>{for(var a=null,o=n&&e.length>1?e.length-1:e.length,i=n?o:o-1,l=0;l<o;l++){var d=e[l],s=D(t,d);s<=r&&(a=L(a,{type:"vertex",coord:[d[0],d[1]],distSq:s}))}for(var p=0;p<i;p++){var c=e[p],u=e[(p+1)%o],v=x(t,c,u),f=D(t,v);f<=r&&(a=L(a,{type:"edge",coord:v,distSq:f}))}return a},R=(e,t,r,n,a,o)=>{for(var i=null,l=0;l<r;l++){var d=t+2*l,s=[e[d],e[d+1]],p=D(a,s);p<=o&&(i=L(i,{type:"vertex",coord:s,distSq:p}))}return L(i,((e,t,r,n,a,o)=>{for(var i=null,l=0;l<n;l++){var d=t+2*l,s=t+(l+1)%r*2,p=[e[d],e[d+1]],c=[e[s],e[s+1]],u=x(a,p,c),v=D(a,u);v<=o&&(i=L(i,{type:"edge",coord:u,distSq:v}))}return i})(e,t,r,n,a,o))},V=(e,t,r,n,a,o)=>{var i=(r-t)/2;return R(e,t,i,o?i:i-1,n,a)},F={Point(e,t,r){var n=e.getCoordinates(),a=D(t,n);return a<=r?{type:"vertex",coord:[n[0],n[1]],distSq:a}:null},LineString:(e,t,r)=>I(e.getCoordinates(),t,r,!1),LinearRing:(e,t,r)=>I(e.getCoordinates(),t,r,!0),Polygon(e,t,r){var n=null;for(var a of e.getCoordinates())n=L(n,I(a,t,r,!0));return n},MultiLineString(e,t,r){var n=null;for(var a of e.getCoordinates())n=L(n,I(a,t,r,!1));return n},MultiPolygon(e,t,r){var n=null;for(var a of e.getCoordinates())for(var o of a)n=L(n,I(o,t,r,!0));return n}},N=(e,t,r)=>{var n=e.getGeometry();if(!n)return null;var a=F[n.getType()];return a?a(n,t,r):null},W=(e,t)=>t?e?"vertex"===e.type&&"edge"===t.type?e:"edge"===e.type&&"vertex"===t.type||t.distSq<e.distSq?t:e:t:e,H=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=new Set,a=[],o=e=>{for(var t of(r=new Set,a=[],null!=e?e:[]))"string"==typeof t?r.add(t):t instanceof n&&a.push(t)};o(t);return{query:(t,n)=>{var o=e.getView().getResolution();if(!o)return null;var i=n*o,l=i*i,d=[t[0]-i,t[1]-i,t[0]+i,t[1]+i],s=null;for(var c of a){var u=c.getSource();if(u)for(var v of u.getFeaturesInExtent(d))s=W(s,N(v,t,l))}if(r.size>0){var f=(e=>{var t=[];return e.getLayers().forEach(e=>{e instanceof p&&t.push(e)}),t})(e),h=f.length>0?e.getPixelFromCoordinate(t):null;h&&e.forEachFeatureAtPixel(h,(e,n)=>{var a;r.has(null===(a=e.get("mapbox-layer"))||void 0===a?void 0:a.id)&&(s=W(s,((e,t,r)=>{var n=e.getType(),a=e.getFlatCoordinates(),o=null;if("Point"===n){var i=D(t,a);i<=r&&(o=L(o,{type:"vertex",coord:[a[0],a[1]],distSq:i}))}else if("LineString"===n)o=L(o,V(a,0,a.length,t,r,!1));else if("Polygon"===n||"MultiLineString"===n){var l=e.getEnds(),d=0,s="Polygon"===n;for(var p of l)o=L(o,V(a,d,p,t,r,s)),d=p}return o})(e,t,l)))},{hitTolerance:n,layerFilter:e=>f.includes(e)})}return s?{type:s.type,coord:s.coord}:null},setLayers:o}},G=e=>(t,r)=>{var n=r.context,[a,o]=t;n.beginPath(),n.arc(a,o,10*r.pixelRatio,0,2*Math.PI),n.fillStyle=e,n.fill()},U=e=>({vertex:new v({renderer:G(e.snapVertex)}),edge:new v({renderer:G(e.snapEdge)})}),B=new Set(["pointermove","pointerdrag","pointerdown","pointerup","singleclick","click"]),q=(e,t,r,o)=>{if(null==t||!t.length)return null;var i=H(e,t),l=((e,t)=>{var r=U(t),o=new a,i=new n({source:o,style:e=>{var t;return null!==(t=r[e.get("snapType")])&&void 0!==t?t:null},zIndex:200,updateWhileAnimating:!0,updateWhileInteracting:!0});e.addLayer(i);var l=new c,d=!1;return{show(e,t){l.setGeometry(new u(e)),l.set("snapType",t,!0),d?o.changed():(o.addFeature(l),d=!0)},hide(){d&&(o.clear(),d=!1)},updateColors(e){r=U(e),d&&o.changed()},remove(){o.clear(),e.removeLayer(i)}}})(e,r),d=((e,t,r)=>{var n=new f({handleEvent(a){if(!n.getActive())return!0;var{type:o}=a;if("pointerout"===o||"pointerleave"===o)return t.hide(),!0;if(!B.has(o))return!0;var i=e.query(a.coordinate,r);return i&&(a.coordinate=i.coord.slice()),"pointermove"===o?i?t.show(i.coord,i.type):t.hide():"pointerdrag"===o&&t.hide(),!0}});return n})(i,l,o);e.addInteraction(d),d.setActive(!1);var s=!1;return{snapRadius:o,apply(e){if(!s)return e;var t=i.query(e,o);return t?(l.show(t.coord,t.type),t.coord):(l.hide(),e)},hideIndicator(){l.hide()},setActive(e){s=e,d.setActive(e),e||l.hide()},setSnapLayers(e){i.setLayers(null==e?null!=t?t:[]:e)},reattach(){e.removeInteraction(d),e.addInteraction(d)},updateColors(e){l.updateColors(e)},destroy(){e.removeInteraction(d),l.remove()}}};function Y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function X(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?Y(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Y(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}class z{constructor(e){var t,r,a,o,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._map=e,this._pluginConfig=i,this._mode="disabled",this._modeInstance=null,this._listeners=new Map,this.store=E(),this.undoStack=(a=e=>this.emit("undochange",e),o=[],{push(e){o.push(e),a(o.length)},pop(){var e=o.pop();return a(o.length),e},clear(){o.length=0,a(o.length)},get length(){return o.length}}),this.colors=k(null,i),this.styles=j(this.colors),this.snap=q(e,null!==(t=i.snapLayers)&&void 0!==t?t:null,this.colors,null!==(r=i.snapRadius)&&void 0!==r?r:M.snapRadius),this._layer=new n({source:this.store.source,style:this.styles.createFeatureStyle(),zIndex:100}),this._layer.set("layerId","draw"),e.addLayer(this._layer)}setMapStyle(e){var t;this.colors=k(e,this._pluginConfig),this.styles=j(this.colors),this._layer.setStyle(this.styles.createFeatureStyle()),this.store.source.changed(),null===(t=this.snap)||void 0===t||t.updateColors(this.colors),this.emit("styleschanged",this.styles)}on(e,t){this._listeners.has(e)||this._listeners.set(e,new Set),this._listeners.get(e).add(t)}off(e,t){var r;null===(r=this._listeners.get(e))||void 0===r||r.delete(t)}emit(e,t){var r;null===(r=this._listeners.get(e))||void 0===r||r.forEach(e=>e(t))}changeMode(e){var t=arguments,n=this;return r(function*(){var r,a,o=t.length>1&&void 0!==t[1]?t[1]:{};null===(r=n._modeInstance)||void 0===r||r.destroy(),n._modeInstance=null,n._mode=e;var i=X(X({},o),{},{snap:n.snap});if("draw_polygon"===e||"draw_line"===e){var{createDrawMode:l}=yield import(/* webpackChunkName: "DrawMode" */ "./DrawMode.js");n._modeInstance=l({map:n._map,manager:n,options:i})}else if("edit_vertex"===e){var{createEditMode:d}=yield import(/* webpackChunkName: "EditMode" */ "./EditMode.js");n._modeInstance=d({map:n._map,manager:n,options:i})}null===(a=n.snap)||void 0===a||a.reattach()})()}getMode(){return this._mode}done(){var e;null===(e=this._modeInstance)||void 0===e||e.done()}cancel(){var e;null===(e=this._modeInstance)||void 0===e||e.cancel(),this.changeMode("disabled")}undo(){var e;null===(e=this._modeInstance)||void 0===e||e.undo()}deleteVertex(){var e;null===(e=this._modeInstance)||void 0===e||e.deleteVertex()}setInterfaceType(e){var t,r;null===(t=this._modeInstance)||void 0===t||null===(r=t.setInterfaceType)||void 0===r||r.call(t,e)}get(e){return this.store.get(e)}add(e){return this.store.add(e)}delete(e){return this.store.remove(e)}deleteAll(){return this.store.clear()}remove(){var e,t;null===(e=this._modeInstance)||void 0===e||e.destroy(),this._modeInstance=null,null===(t=this.snap)||void 0===t||t.destroy(),this.snap=null,this.store.clear(),this._map.removeLayer(this._layer),this._listeners.clear()}}var K=["stroke","fill","strokeWidth"],Z=e=>{if(!e)return{};var t={};for(var[r,n]of Object.entries(e))if(K.includes(r)&&"object"==typeof n&&null!==n){var a=Object.entries(n);for(var[o,i]of(a.length>0&&(t[r]=a[0][1]),a))t["".concat(r).concat(o.charAt(0).toUpperCase()+o.slice(1))]=i}else t[r]=n;return t},J=["stroke","fill","strokeWidth","properties"];function Q(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function $(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?Q(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):Q(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var ee=["stroke","fill","strokeWidth","properties"];function te(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function re(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?te(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):te(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var ne=["stroke","fill","strokeWidth","properties"];function ae(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function oe(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?ae(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ae(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function ie(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function le(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?ie(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ie(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}var de=e=>({mobile:{slot:"actions",showLabel:e},tablet:{slot:"actions",showLabel:e},desktop:{slot:"actions",showLabel:e}}),se={reducer:{initialState:{mode:null,feature:null,tempFeature:null,selectedVertexIndex:-1,numVertices:null,undoStackLength:0,snap:!1,hasSnapLayers:!1},actions:g},InitComponent:e=>{var{appState:r,appConfig:n,mapState:a,pluginConfig:o,pluginState:i,services:l,mapProvider:d,buttonConfig:s}=e,{eventBus:p}=l,{crossHair:c}=a,u=["touch","keyboard"].includes(r.interfaceType);t(()=>{var e,t,n,l,s,c=null===(e=null===(t=o.includeModes)||void 0===t?void 0:t.includes(r.mode))||void 0===e||e,u=null!==(n=null===(l=o.excludeModes)||void 0===l?void 0:l.includes(r.mode))&&void 0!==n&&n;if(a.isMapReady&&c&&!u){var{remove:v}=(e=>{var{mapProvider:t,events:r,eventBus:n,pluginConfig:a={},mapStyle:o=null}=e,{map:i}=t,l=new z(i,a);o&&l.setMapStyle(o),t.draw=l;var d=e=>{var r;t.drawScale=null!==(r={small:1,medium:1.5,large:2}[e])&&void 0!==r?r:1};n.on(r.MAP_SET_SIZE,d);var s=e=>{l.setMapStyle(e)};return n.on(r.MAP_SET_STYLE,s),{remove(){n.off(r.MAP_SET_SIZE,d),n.off(r.MAP_SET_STYLE,s),l.remove(),t.draw=null}}})({mapProvider:d,events:_,eventBus:p,pluginConfig:o,mapStyle:a.mapStyle});return i.dispatch({type:"SET_MODE",payload:null}),i.dispatch({type:"SET_HAS_SNAP_LAYERS",payload:(null===(s=o.snapLayers)||void 0===s?void 0:s.length)>0}),p.emit("draw:ready"),()=>v()}},[a.isMapReady,r.mode]),t(()=>{if(["draw_polygon","draw_line"].includes(i.mode)&&u){var e=c.isVisible;return c.fixAtCenter(),()=>{e||c.hide()}}},[i.mode,r.interfaceType]),t(()=>{"edit_vertex"===i.mode&&d.draw&&d.draw.setInterfaceType(r.interfaceType)},[r.interfaceType,i.mode]),t(()=>{if(d.draw)return function(e){var{pluginState:t,mapProvider:r,buttonConfig:n,eventBus:a}=e,{drawDone:o,drawCancel:i,drawUndo:l,drawDeletePoint:d,drawSnap:s}=n,{draw:p}=r,{dispatch:c,feature:u,tempFeature:v}=t,f=()=>{p.undoStack.clear(),c({type:"SET_MODE",payload:null}),c({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}})},h=e=>{f(),p.changeMode("disabled"),a.emit("draw:created",e)},y=e=>{f(),p.changeMode("disabled"),a.emit("draw:edited",e)},m=()=>{},g=e=>{c({type:"SET_SELECTED_VERTEX_INDEX",payload:e}),a.emit("draw:vertexselection",e)},_=e=>{c({type:"SET_SELECTED_VERTEX_INDEX",payload:{index:-1,numVertices:e.numVertices}})},S=e=>{c({type:"SET_UNDO_STACK_LENGTH",payload:e})},P=e=>{a.emit("draw:updated",e)};return o.onClick=()=>{p.undoStack.clear(),p.done()},i.onClick=()=>{"edit_vertex"===p.getMode()&&null!=v&&v.id&&p.add(u),p.cancel(),f(),a.emit("draw:cancelled",u)},l.onClick=()=>{p.undo()},d&&(d.onClick=()=>{p.deleteVertex()}),s&&(s.onClick=()=>{var e,r=!t.snap;c({type:"TOGGLE_SNAP"}),null===(e=p.snap)||void 0===e||e.setActive(r)}),p.on("create",h),p.on("editfinish",y),p.on("cancel",m),p.on("vertexselection",g),p.on("vertexchange",_),p.on("undochange",S),p.on("update",P),()=>{o.onClick=null,i.onClick=null,l.onClick=null,d&&(d.onClick=null),s&&(s.onClick=null),p.off("create",h),p.off("editfinish",y),p.off("cancel",m),p.off("vertexselection",g),p.off("vertexchange",_),p.off("undochange",S),p.off("update",P)}}({mapProvider:d,buttonConfig:s,pluginState:i,eventBus:p})},[d,r,i])},buttons:[le({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},de(!0)),le({id:"drawAddPoint",label:"Add point",variant:"primary",hiddenWhen:e=>{var{appState:t,pluginState:r}=e;return!["draw_polygon","draw_line"].includes(r.mode)||"touch"!==t.interfaceType}},de(!0)),le({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},enableWhen:e=>{var{pluginState:t}=e;return"draw_polygon"===t.mode?t.numVertices>=3:"draw_line"===t.mode?t.numVertices>=2:"edit_vertex"===t.mode}},de(!0)),{id:"drawMenu",label:"Menu",iconId:"menu",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},menuItems:[{id:"drawUndo",label:"Undo",iconId:"undo",hiddenWhen:e=>{var{pluginState:t}=e;return!["draw_polygon","draw_line","edit_vertex"].includes(t.mode)},enableWhen:e=>{var{pluginState:t}=e;return["draw_polygon","draw_line"].includes(t.mode)?t.numVertices>0:t.undoStackLength>0}},{id:"drawSnap",label:"Snap to feature",iconId:"magnet",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode||!t.hasSnapLayers},pressedWhen:e=>{var{pluginState:t}=e;return!!t.snap}},{id:"drawDeletePoint",label:"Delete point",iconId:"trash",enableWhen:e=>{var{pluginState:t}=e;return t.selectedVertexIndex>=0&&t.numVertices>2},hiddenWhen:e=>{var{pluginState:t}=e;return"edit_vertex"!==t.mode}}],mobile:{slot:"bottom-right"},tablet:{slot:"top-middle"},desktop:{slot:"top-middle"}}],keyboardShortcuts:[{id:"drawStart",group:"Drawing",title:"Edit vertex",command:"<kbd>Spacebar</kbd></dd>"}],icons:[{id:"menu",svgContent:'<path d="m6 9 6 6 6-6"/>'},{id:"undo",svgContent:'<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>'},{id:"magnet",svgContent:'<path d="m12 15 4 4"/><path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z"/><path d="m5 8 4 4"/>'},{id:"trash",svgContent:'<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'}],api:{newPolygon:function(e,t){var{appState:r,appConfig:n,mapState:a,pluginState:o,mapProvider:i,services:l}=e,d=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:s}=o,{draw:p}=i,{eventBus:c}=l;if(p){c.emit("draw:started",{mode:"draw_polygon"});var{stroke:u,fill:v,strokeWidth:f,properties:y}=d,m=h(d,J),g=$($({},y),Z({stroke:u,fill:v,strokeWidth:f}));p.changeMode("draw_polygon",$({container:r.layoutRefs.viewportRef.current,interfaceType:r.interfaceType,addVertexButtonId:"".concat(n.id,"-draw-add-point"),featureId:t,geometryType:"Polygon",properties:g,mapProvider:i,crossHair:a.crossHair},m)),s({type:"SET_MODE",payload:"draw_polygon"})}},newLine:function(e,t){var{appState:r,appConfig:n,mapState:a,pluginState:o,mapProvider:i,services:l}=e,d=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:s}=o,{draw:p}=i,{eventBus:c}=l;if(p){c.emit("draw:started",{mode:"draw_line"});var{stroke:u,fill:v,strokeWidth:f,properties:y}=d,m=h(d,ee),g=re(re({},y),Z({stroke:u,fill:v,strokeWidth:f}));p.changeMode("draw_line",re({container:r.layoutRefs.viewportRef.current,interfaceType:r.interfaceType,addVertexButtonId:"".concat(n.id,"-draw-add-point"),featureId:t,geometryType:"LineString",properties:g,mapProvider:i,crossHair:a.crossHair},m)),s({type:"SET_MODE",payload:"draw_line"})}},editFeature:function(e,t){var r,n,{appState:a,appConfig:o,pluginConfig:i,pluginState:l,mapProvider:d,services:s}=e,p=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:c}=l,{draw:u}=d,{eventBus:v}=s;if(!u)return!1;var f=u.get(t);if(!f)return!1;v.emit("draw:editstart",{mode:"edit_vertex"});var h=void 0===p.snapLayers?null!==(r=i.snapLayers)&&void 0!==r?r:null:p.snapLayers;return null===(n=u.snap)||void 0===n||n.setSnapLayers(h),c({type:"SET_HAS_SNAP_LAYERS",payload:(null==h?void 0:h.length)>0}),u.changeMode("edit_vertex",{container:a.layoutRefs.viewportRef.current,deleteVertexButtonId:"".concat(o.id,"-draw-delete-point"),interfaceType:a.interfaceType,featureId:t}),c({type:"SET_FEATURE",payload:{feature:f,tempFeature:f}}),c({type:"SET_MODE",payload:"edit_vertex"}),!0},addFeature:(e,t)=>{var{mapProvider:r,services:n}=e,{draw:a}=r,{eventBus:o}=n;if(a){var{stroke:i,fill:l,strokeWidth:d,properties:s}=t,p=oe(oe({},h(t,ne)),{},{properties:oe(oe({},s),Z({stroke:i,fill:l,strokeWidth:d}))});a.add(p),o.emit("draw:add",p)}},deleteFeature:(e,t)=>{var{mapProvider:r}=e,{draw:n}=r;n&&n.delete(t)}}};export{se as manifest};
|
|
@@ -153,9 +153,11 @@ const wireKeyboardEvents = ({ map, snap, getState, setState, onVertexMoved, onIn
|
|
|
153
153
|
|
|
154
154
|
const handleKey = (e) => {
|
|
155
155
|
onKeyboardActive?.()
|
|
156
|
-
if (e.key === ' '
|
|
156
|
+
if (e.key === ' ') {
|
|
157
157
|
e.preventDefault()
|
|
158
|
-
|
|
158
|
+
if (getState().selectedVertexIndex < 0) {
|
|
159
|
+
selectNearest(map, getState, setState)
|
|
160
|
+
}
|
|
159
161
|
} else if (ARROW_KEYS.has(e.key)) {
|
|
160
162
|
handleArrowKey(e)
|
|
161
163
|
} else if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
|
|
@@ -1,84 +1,84 @@
|
|
|
1
1
|
.im-c-map-styles {
|
|
2
|
-
|
|
2
|
+
display: block;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.im-c-map-styles__inner {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.im-c-map-styles__heading {
|
|
11
|
-
|
|
11
|
+
padding: var(--primary-gap) 0;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.im-c-map-styles__item {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
display: flex;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
padding: calc(var(--divider-gap) / 2);
|
|
18
|
+
flex: 0 0 33.3333%;
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
min-width: 90px;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.im-c-map-styles__button {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
align-items: center;
|
|
27
|
+
border: 0;
|
|
28
|
+
margin: 0;
|
|
29
|
+
color: var(--foreground-color);
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
cursor: pointer;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.im-c-map-styles__image {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
position: relative;
|
|
36
|
+
padding: 2px;
|
|
37
|
+
border: 3px solid transparent;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.im-c-map-styles__image svg {
|
|
41
|
-
|
|
41
|
+
fill: currentColor;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.im-c-map-styles__image-bg {
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
fill: none;
|
|
46
|
+
stroke: var(--image-placeholder-color);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.im-c-map-styles img {
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
display: block;
|
|
51
|
+
// border: 1px solid var(--image-placeholder-color);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
// Text size
|
|
55
55
|
.im-c-map-styles__group:not(:first-child) {
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
margin-top: var(--divider-gap);
|
|
57
|
+
border-top: 1px solid var(--content-border-color);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// State
|
|
61
61
|
.im-c-map-styles__button[aria-pressed="true"] .im-c-map-styles__image {
|
|
62
|
-
|
|
62
|
+
border-color: var(--foreground-color);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.im-c-map-styles__button:focus {
|
|
66
|
-
|
|
66
|
+
outline: 0;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.im-c-map-styles__button[data-focus-visible="true"] {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
.im-c-map-styles__image::after {
|
|
71
|
+
content: '';
|
|
72
|
+
position: absolute;
|
|
73
|
+
top: -3px;
|
|
74
|
+
right: -3px;
|
|
75
|
+
bottom: -3px;
|
|
76
|
+
left: -3px;
|
|
77
|
+
outline: 3px solid var(--focus-outline-color);
|
|
78
|
+
border: 3px solid var(--focus-border-color);
|
|
79
|
+
}
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.im-c-map-styles__button:hover:not([aria-pressed="true"]) .im-c-map-styles__image {
|
|
83
|
-
|
|
83
|
+
border-color: var(--button-hover-color);
|
|
84
84
|
}
|