@defra/interactive-map 0.0.9-alpha → 0.0.10-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/DOCS_README.md +39 -0
- package/docs/api.md +1 -1
- package/docs/architecture/architecture-diagrams.md +1 -3
- package/docs/architecture/diagrams-viewer.mdx +12 -0
- package/docs/govuk-prototype.md +23 -0
- package/docs/index.md +23 -0
- package/docusaurus.config.cjs +106 -0
- package/mise.toml +2 -0
- package/package.json +21 -4
- package/plugins/beta/draw-es/dist/esm/im-draw-es-plugin.js +1 -1
- package/plugins/beta/draw-es/src/api/newPolygon.js +1 -3
- package/plugins/beta/draw-es/src/events.js +2 -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/api/newLine.js +2 -2
- package/plugins/beta/draw-ml/src/api/newPolygon.js +2 -2
- package/plugins/beta/draw-ml/src/events.js +18 -10
- package/plugins/search/src/Search.test.jsx +170 -0
- package/plugins/search/src/components/CloseButton/CloseButton.test.jsx +67 -0
- package/plugins/search/src/components/Form/Form.test.jsx +158 -0
- package/plugins/search/src/components/OpenButton/OpenButton.test.jsx +47 -0
- package/plugins/search/src/components/Suggestions/Suggestions.test.jsx +79 -0
- package/plugins/search/src/datasets.test.js +46 -0
- package/plugins/search/src/events/fetchSuggestions.test.js +212 -0
- package/plugins/search/src/events/formHandlers.test.js +232 -0
- package/plugins/search/src/events/index.test.js +118 -0
- package/plugins/search/src/events/inputHandlers.test.js +104 -0
- package/plugins/search/src/events/suggestionHandlers.test.js +166 -0
- package/plugins/search/src/index.test.js +47 -0
- package/plugins/search/src/reducer.test.js +80 -0
- package/plugins/search/src/utils/parseOsNamesResults.js +2 -1
- package/plugins/search/src/utils/parseOsNamesResults.test.js +140 -0
- package/plugins/search/src/utils/updateMap.test.js +52 -0
package/DOCS_README.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Docusaurus Documentation Setup
|
|
2
|
+
|
|
3
|
+
This project uses [Docusaurus](https://docusaurus.io/) to generate interactive documentation that can be browsed on GitHub Pages.
|
|
4
|
+
|
|
5
|
+
## Prerequisites
|
|
6
|
+
|
|
7
|
+
- Node.js 20.x (use `nvm use` to switch to the correct version)
|
|
8
|
+
- npm
|
|
9
|
+
|
|
10
|
+
## Local Development
|
|
11
|
+
|
|
12
|
+
1. **Switch to the correct Node version** (if using nvm):
|
|
13
|
+
```bash
|
|
14
|
+
nvm use
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
2. **Install dependencies** (if not already installed):
|
|
18
|
+
```bash
|
|
19
|
+
npm install
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
3. **Start the development server**:
|
|
23
|
+
```bash
|
|
24
|
+
npm run docs:dev
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command starts a local development server at `http://localhost:3000` and opens up a browser window. Most changes are reflected live without having to restart the server.
|
|
28
|
+
|
|
29
|
+
4. **Build the documentation**:
|
|
30
|
+
```bash
|
|
31
|
+
npm run docs:build
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
This command generates static content into the `build` directory and can be served using any static hosting service.
|
|
35
|
+
|
|
36
|
+
5. **Serve the built documentation locally**:
|
|
37
|
+
```bash
|
|
38
|
+
npm run docs:serve
|
|
39
|
+
```
|
package/docs/api.md
CHANGED
|
@@ -17,7 +17,7 @@ const interactiveMap = new InteractiveMap(container, options)
|
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
> [!NOTE]
|
|
20
|
-
> UMD Usage: Replace InteractiveMap with defra.InteractiveMap if using pre-built scripts in the
|
|
20
|
+
> UMD Usage: Replace InteractiveMap with defra.InteractiveMap if using pre-built scripts in the `<head>` tag. The rest of the code is identical.
|
|
21
21
|
|
|
22
22
|
Parameters:
|
|
23
23
|
|
|
@@ -4,9 +4,7 @@ Interactive C4 architecture diagrams for the Interactive Map component.
|
|
|
4
4
|
|
|
5
5
|
## View Online
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
**[View Architecture Diagrams](https://defra.github.io/interactive-map/)**
|
|
7
|
+
**[View Architecture Diagrams](/interactive-map/architecture/diagrams-viewer)**
|
|
10
8
|
|
|
11
9
|
## Available Views
|
|
12
10
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Diagram Viewer
|
|
2
|
+
|
|
3
|
+
<a href="/interactive-map/likec4/" target="_blank" rel="noopener noreferrer" className="govuk-link">Open diagrams in a new tab</a>
|
|
4
|
+
|
|
5
|
+
<iframe
|
|
6
|
+
src="/interactive-map/likec4/"
|
|
7
|
+
title="Interactive Map Architecture Diagrams"
|
|
8
|
+
width="100%"
|
|
9
|
+
style={{ height: '80vh', border: 'none', borderRadius: '4px', marginTop: '20px' }}
|
|
10
|
+
/>
|
|
11
|
+
|
|
12
|
+
> Diagrams are defined in [`interactive-map.likec4`](./interactive-map.likec4) and built alongside this site.
|
package/docs/govuk-prototype.md
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# GOV.UK Prototype Kit
|
|
2
|
+
|
|
3
|
+
This guide explains how to use the Interactive Map component in a GOV.UK Prototype Kit project.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install the package in your prototype kit project:
|
|
8
|
+
|
|
9
|
+
```shell
|
|
10
|
+
npm install @defra/interactive-map
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
The InteractiveMap plugin will be automatically added to your prototype.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
For detailed usage instructions, see the [GOV.UK Prototype Kit documentation](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins).
|
|
18
|
+
|
|
19
|
+
## Next Steps
|
|
20
|
+
|
|
21
|
+
- [Getting Started](./getting-started.md) - Learn the basics
|
|
22
|
+
- [API Reference](./api.md) - Explore the full API
|
|
23
|
+
- [Plugins](./plugins.md) - Extend functionality
|
package/docs/index.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# InteractiveMap documentation
|
|
2
|
+
|
|
3
|
+
InteractiveMap is a lightweight map component designed for public-facing government services, and available for anyone to use. Built to GOV.UK standards, with accessibility at its core, Interactive Map supports a wide range of users across abilities, devices and input methods. It is open source and works with multiple mapping engines. The component can be extended through plugins to meet the specific needs of a service.
|
|
4
|
+
|
|
5
|
+
## What's Inside
|
|
6
|
+
|
|
7
|
+
- **[Getting Started](getting-started)** - Installation and basic usage
|
|
8
|
+
- **[API Reference](api)** - Complete API documentation
|
|
9
|
+
- **[Plugins](plugins)** - Extend functionality with plugins
|
|
10
|
+
- **[Architecture](architecture)** - Learn about the design and structure
|
|
11
|
+
- **[GOV.UK Prototype](govuk-prototype)** - Use with GOV.UK Prototype Kit
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- ✅ Accessible and keyboard navigable
|
|
16
|
+
- 🗺️ Multiple map provider support (MapLibre, ESRI)
|
|
17
|
+
- 🔌 Extensible plugin system
|
|
18
|
+
- 🎨 Customizable styling and behaviors
|
|
19
|
+
- 📱 Responsive design
|
|
20
|
+
|
|
21
|
+
## Support
|
|
22
|
+
|
|
23
|
+
For issues and feature requests, visit our [GitHub repository](https://github.com/DEFRA/interactive-map).
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
// @ts-check
|
|
2
|
+
|
|
3
|
+
/** @type {import('@docusaurus/types').Config} */
|
|
4
|
+
const config = {
|
|
5
|
+
title: 'Interactive Map',
|
|
6
|
+
tagline: 'Accessibility-first interactive map component for government frontends ',
|
|
7
|
+
favicon: 'img/favicon.ico',
|
|
8
|
+
|
|
9
|
+
url: 'https://defra.github.io',
|
|
10
|
+
baseUrl: '/interactive-map/',
|
|
11
|
+
|
|
12
|
+
organizationName: 'defra',
|
|
13
|
+
projectName: 'interactive-map',
|
|
14
|
+
deploymentBranch: 'main',
|
|
15
|
+
trailingSlash: false,
|
|
16
|
+
|
|
17
|
+
onBrokenLinks: 'warn',
|
|
18
|
+
onBrokenMarkdownLinks: 'warn',
|
|
19
|
+
|
|
20
|
+
i18n: {
|
|
21
|
+
defaultLocale: 'en',
|
|
22
|
+
locales: ['en'],
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
presets: [],
|
|
26
|
+
|
|
27
|
+
themes: ['@defra/docusaurus-theme-govuk'],
|
|
28
|
+
|
|
29
|
+
plugins: [
|
|
30
|
+
[
|
|
31
|
+
'@docusaurus/plugin-content-docs',
|
|
32
|
+
{
|
|
33
|
+
routeBasePath: '/',
|
|
34
|
+
editUrl: 'https://github.com/DEFRA/interactive-map/tree/main/',
|
|
35
|
+
},
|
|
36
|
+
],
|
|
37
|
+
],
|
|
38
|
+
|
|
39
|
+
themeConfig: {
|
|
40
|
+
govuk: {
|
|
41
|
+
header: {
|
|
42
|
+
serviceName: 'Interactive Map',
|
|
43
|
+
serviceHref: '/',
|
|
44
|
+
organisationText: 'Defra DDTS',
|
|
45
|
+
organisationHref: 'https://github.com/defra',
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
navigation: [
|
|
49
|
+
{ text: 'Getting Started', href: '/getting-started' },
|
|
50
|
+
{
|
|
51
|
+
text: 'Architecture',
|
|
52
|
+
href: '/architecture',
|
|
53
|
+
sidebar: [
|
|
54
|
+
{ text: 'Overview', href: '/architecture' },
|
|
55
|
+
{ text: 'Diagrams', href: 'architecture-diagrams' },
|
|
56
|
+
{ text: 'Diagram Viewer', href: 'diagrams-viewer' },
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
{ text: 'GOV.UK Prototype', href: '/govuk-prototype' },
|
|
60
|
+
{
|
|
61
|
+
text: 'API',
|
|
62
|
+
href: '/api',
|
|
63
|
+
sidebar: [
|
|
64
|
+
{ text: 'Overview', href: '/api' },
|
|
65
|
+
{ text: 'Button Definition', href: 'button-definition' },
|
|
66
|
+
{ text: 'Context', href: 'context' },
|
|
67
|
+
{ text: 'Control Definition', href: 'control-definition' },
|
|
68
|
+
{ text: 'Icon Definition', href: 'icon-definition' },
|
|
69
|
+
{ text: 'Map Style Config', href: 'map-style-config' },
|
|
70
|
+
{ text: 'Marker Config', href: 'marker-config' },
|
|
71
|
+
{ text: 'Panel Definition', href: 'panel-definition' },
|
|
72
|
+
{ text: 'Slots', href: 'slots' },
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
text: 'Plugins',
|
|
77
|
+
href: '/plugins',
|
|
78
|
+
sidebar: [
|
|
79
|
+
{ text: 'Overview', href: '/plugins' },
|
|
80
|
+
{ text: 'Building a Plugin', href: '/building-a-plugin' },
|
|
81
|
+
{ text: 'Interact', href: 'interact' },
|
|
82
|
+
{ text: 'Map Styles', href: 'map-styles' },
|
|
83
|
+
{ text: 'Plugin Context', href: 'plugin-context' },
|
|
84
|
+
{ text: 'Plugin Descriptor', href: 'plugin-descriptor' },
|
|
85
|
+
{ text: 'Plugin Manifest', href: 'plugin-manifest' },
|
|
86
|
+
{ text: 'Scale Bar', href: 'scale-bar' },
|
|
87
|
+
{ text: 'Search', href: 'search' },
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
|
|
92
|
+
phaseBanner: {
|
|
93
|
+
phase: 'alpha',
|
|
94
|
+
text: 'This is a new frontend component. Help us improve it and give your feedback on Slack.',
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
footer: {
|
|
98
|
+
meta: [
|
|
99
|
+
{ text: 'GitHub', href: 'https://github.com/DEFRA/interactive-map' },
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
module.exports = config;
|
package/mise.toml
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@defra/interactive-map",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10-alpha",
|
|
4
4
|
"description": "An accessible map component",
|
|
5
5
|
"main": "dist/umd/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -89,6 +89,12 @@
|
|
|
89
89
|
"lint:scss:fix": "stylelint \"src/**/*.{css,scss}\" --fix",
|
|
90
90
|
"test": "jest --color --coverage --verbose",
|
|
91
91
|
"report": "webpack --profile --json --config webpack.prod.mjs > stats.json && webpack-bundle-analyzer --host 0.0.0.0 --port 8888 ./stats.json ./public",
|
|
92
|
+
"docs:dev": "docusaurus start --host 0.0.0.0",
|
|
93
|
+
"docs:build": "docusaurus build",
|
|
94
|
+
"docs:build:likec4": "likec4 build --output dist --base /interactive-map/likec4/ docs/architecture",
|
|
95
|
+
"docs:build:all": "npm run docs:build && npm run docs:build:likec4 && mkdir -p build/likec4 && cp -r dist/. build/likec4/",
|
|
96
|
+
"docs:serve": "docusaurus serve --host 0.0.0.0",
|
|
97
|
+
"docs:clear": "docusaurus clear",
|
|
92
98
|
"report:esm": "ANALYZE=1 rollup --config rollup.esm.mjs"
|
|
93
99
|
},
|
|
94
100
|
"standard": {
|
|
@@ -117,14 +123,21 @@
|
|
|
117
123
|
"@babel/plugin-transform-runtime": "^7.29.0",
|
|
118
124
|
"@babel/preset-env": "^7.28.0",
|
|
119
125
|
"@babel/preset-react": "^7.27.1",
|
|
126
|
+
"@defra/docusaurus-theme-govuk": "^0.0.5-alpha",
|
|
127
|
+
"@docusaurus/core": "3.4.0",
|
|
128
|
+
"@docusaurus/module-type-aliases": "3.4.0",
|
|
129
|
+
"@docusaurus/plugin-content-docs": "3.4.0",
|
|
130
|
+
"@docusaurus/tsconfig": "3.4.0",
|
|
120
131
|
"@esri/arcgis-rest-request": "^4.7.3",
|
|
121
132
|
"@mapbox/mapbox-gl-draw": "^1.5.0",
|
|
133
|
+
"@mdx-js/react": "^3.1.1",
|
|
122
134
|
"@rollup/plugin-alias": "^6.0.0",
|
|
123
135
|
"@rollup/plugin-babel": "^6.1.0",
|
|
124
136
|
"@rollup/plugin-commonjs": "^29.0.0",
|
|
125
137
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
126
138
|
"@rollup/plugin-replace": "^6.0.3",
|
|
127
139
|
"@rollup/plugin-terser": "^0.4.4",
|
|
140
|
+
"@testing-library/dom": "^10.4.1",
|
|
128
141
|
"@testing-library/jest-dom": "^6.6.3",
|
|
129
142
|
"@testing-library/react": "^16.3.0",
|
|
130
143
|
"@types/geojson": "^7946.0.16",
|
|
@@ -139,13 +152,14 @@
|
|
|
139
152
|
"geodesy": "^2.4.0",
|
|
140
153
|
"jest": "^29.7.0",
|
|
141
154
|
"jest-environment-jsdom": "^30.0.4",
|
|
155
|
+
"likec4": "^1.50.0",
|
|
142
156
|
"mapbox-gl-snap": "^1.1.9",
|
|
143
157
|
"mini-css-extract-plugin": "^2.9.2",
|
|
144
158
|
"node-fetch": "^3.3.2",
|
|
145
159
|
"npm": "^11.8.0",
|
|
146
160
|
"npm-run-all": "^4.1.5",
|
|
147
|
-
"react": "^19.2.
|
|
148
|
-
"react-dom": "^19.2.
|
|
161
|
+
"react": "^19.2.4",
|
|
162
|
+
"react-dom": "^19.2.4",
|
|
149
163
|
"remove-files-webpack-plugin": "^1.5.0",
|
|
150
164
|
"rimraf": "^6.1.0",
|
|
151
165
|
"rollup": "^4.59.0",
|
|
@@ -173,7 +187,10 @@
|
|
|
173
187
|
"author": "",
|
|
174
188
|
"license": "",
|
|
175
189
|
"overrides": {
|
|
176
|
-
"@turf/bearing": "^7.3.3"
|
|
190
|
+
"@turf/bearing": "^7.3.3",
|
|
191
|
+
"@react-foundry/router": {
|
|
192
|
+
"react-router": "$react-router"
|
|
193
|
+
}
|
|
177
194
|
},
|
|
178
195
|
"dependencies": {
|
|
179
196
|
"@babel/runtime": "^7.28.6",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@arcgis/core/widgets/Sketch/SketchViewModel.js";import o from"@arcgis/core/layers/GraphicsLayer.js";import a from"@babel/runtime/helpers/asyncToGenerator";import*as n from"@arcgis/core/geometry/operators/simplifyOperator.js";import i from"@arcgis/core/Graphic.js";function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function p(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?l(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):l(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function s(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?c(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):c(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function u(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function d(e,t,r){return new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:u(r)})}function y(e){if(null==e||!e.geometry)throw new Error("Invalid graphic");var{geometry:t,attributes:r={}}=e;switch(t.type){case"point":return{type:"Feature",geometry:{type:"Point",coordinates:[t.x,t.y]},properties:s({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:s({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:s({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@arcgis/core/widgets/Sketch/SketchViewModel.js";import o from"@arcgis/core/layers/GraphicsLayer.js";import a from"@babel/runtime/helpers/asyncToGenerator";import*as n from"@arcgis/core/geometry/operators/simplifyOperator.js";import i from"@arcgis/core/Graphic.js";function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function p(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?l(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):l(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function s(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?c(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):c(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function u(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function d(e,t,r){return new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:u(r)})}function y(e){if(null==e||!e.geometry)throw new Error("Invalid graphic");var{geometry:t,attributes:r={}}=e;switch(t.type){case"point":return{type:"Feature",geometry:{type:"Point",coordinates:[t.x,t.y]},properties:s({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:s({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:s({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function f(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?m(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):m(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}var h={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},v={reducer:{initialState:{mode:null,feature:null,tempFeature:null},actions:{SET_MODE:(e,t)=>p(p({},e),{},{mode:t}),SET_FEATURE:(e,t)=>p(p({},e),{},{feature:void 0===t.feature?e.feature:t.feature,tempFeature:void 0===t.tempFeature?e.tempFeature:t.tempFeature})}},InitComponent:e=>{var i,l,p,c,{appState:s,mapState:m,pluginConfig:f,pluginState:h,services:v,mapProvider:g,buttonConfig:b}=e,{events:O,eventBus:w}=v,{mapColorScheme:S}=m.mapStyle||{},E=null===(i=null===(l=f.includeModes)||void 0===l?void 0:l.includes(s.mode))||void 0===i||i,k=null!==(p=null===(c=f.excludeModes)||void 0===c?void 0:c.includes(s.mode))&&void 0!==p&&p,P=m.isMapReady&&E&&!k;t(()=>{if(P&&!g.sketchViewModel){var{sketchViewModel:e,sketchLayer:t,emptySketchLayer:a}=(e=>{var{mapProvider:t}=e,{view:a}=t,n=new o({id:"sketchLayer"});a.map.add(n);var i=new o({id:"emptySketchLayer"});return a.map.add(i),{sketchViewModel:new r({view:a,layer:i,defaultUpdateOptions:{tool:"reshape",updateOnGraphicClick:!1,multipleSelectionEnabled:!1,toggleToolOnClick:!1,highlightOptions:{enabled:!1}}}),emptySketchLayer:i,sketchLayer:n}})({mapProvider:g});return g.sketchViewModel=e,g.sketchLayer=t,g.emptySketchLayer=a,w.emit("draw:ready"),()=>{g.sketchViewModel=null,g.sketchLayer=null,g.emptySketchLayer=null}}},[m.isMapReady,s.mode]),t(()=>{if(P&&g.sketchViewModel){var e=function(e){var{pluginState:t,mapProvider:r,events:o,eventBus:i,buttonConfig:l,mapColorScheme:p}=e,{view:c,sketchViewModel:s,sketchLayer:m,emptySketchLayer:f}=r;if(!s)return null;var{drawDone:h,drawCancel:v}=l,{dispatch:g,mode:b,feature:O}=t,w=function(){var e=a(function*(){var e,r=null===(e=t.feature)||void 0===e||null===(e=e.properties)||void 0===e?void 0:e.id,o=null,a="active"===s.state&&!r;if("active"===s.state&&r&&(s.cancel(),yield new Promise(e=>setTimeout(e,50))),s.polygonSymbol=u(p),null==m||m.graphics.items.forEach(e=>{var t=d(e.attributes.id,e.geometry.rings,p);e.symbol=t.symbol,r===e.attributes.id&&(o=e)}),o&&!a&&s.layer===m)try{yield s.update(o,{tool:"reshape",toggleToolOnClick:!1})}catch(e){"AbortError"!==e.name&&console.error("Error updating sketch:",e)}});return function(){return e.apply(this,arguments)}}(),S=()=>{var e,t,r=null!==(e=null===(t=m.graphics)||void 0===t||null===(t=t.items)||void 0===t?void 0:t[0])&&void 0!==e?e:null;r&&setTimeout(()=>s.update(r),0)},E=()=>w(),k=function(){var e=a(function*(){b&&((s.updateGraphics||[]).length||S())});return function(){return e.apply(this,arguments)}}();i.on(o.MAP_STYLE_CHANGE,E);var P=s.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,o=e.graphics[0];if("move-start"===r&&(s.cancel(),S()),"reshape"===r&&(n.isSimple(o.geometry)||s.undo()),"reshape-stop"===r){var a=y(o);i.emit("draw:updated",a),g({type:"SET_FEATURE",payload:{tempFeature:a}})}}),j=c.on("click",k),T=h.onClick,C=v.onClick;return h.onClick=()=>{s.cancel(),s.layer=f,g({type:"SET_MODE",payload:null}),g({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},v.onClick=()=>{if(s.cancel(),m.removeAll(),O){var e=d(O.id||O.properties.id,O.geometry.coordinates,p);m.add(e)}s.layer=f,g({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(o.MAP_STYLE_CHANGE,E),P.remove(),j.remove(),h.onClick=T,v.onClick=C}}({pluginState:h,mapProvider:g,events:O,eventBus:w,buttonConfig:b,mapColorScheme:S});return()=>{e()}}},[P,S,h])},buttons:[f({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},h),f({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},h)],api:{newPolygon:(e,t)=>{var{mapState:r,pluginState:o,mapProvider:a,services:n}=e,{dispatch:i}=o,{sketchViewModel:l,sketchLayer:p}=a,{eventBus:c}=n;l.layer=p;var s=l.on("create",e=>{if("complete"===e.state){e.graphic.attributes={id:t},requestAnimationFrame(()=>{l.update(e.graphic,{tool:"reshape",toggleToolOnClick:!1})});var r=y(e.graphic);c.emit("draw:created",r),i({type:"SET_FEATURE",payload:{tempFeature:r}}),s.remove()}});l.polygonSymbol=u(r.mapStyle.mapColorScheme),l.create("polygon"),i({type:"SET_MODE",payload:"new-polygon"})},editFeature:(e,t)=>{var{pluginState:r,mapProvider:o}=e,{dispatch:a}=r,{sketchViewModel:n,sketchLayer:i}=o,l=i.graphics.items.find(e=>e.attributes.id===t),p=l.geometry.extent,c=[p.xmin,p.ymin,p.xmax,p.ymax];o.fitToBounds(c),n.layer=i,n.update(l,{tool:"reshape",toggleToolOnClick:!1,enableRotation:!1,enableScaling:!1}),a({type:"SET_FEATURE",payload:{feature:y(l)}}),a({type:"SET_MODE",payload:"edit-feature"})},addFeature:(e,t)=>{var{pluginState:r,mapState:o,mapProvider:a,services:n}=e,{dispatch:i}=r,{mapStyle:l}=o,{sketchViewModel:p,sketchLayer:c,emptySketchLayer:s}=a,{eventBus:u}=n,y=d(t.id,t.geometry.coordinates,l.mapColorScheme);c.add(y),p.layer=s,i({type:"SET_FEATURE",payload:{feature:t}}),u.emit("draw:add",t)},deleteFeature:(e,t)=>{var{pluginState:r,mapProvider:o,services:a}=e,{dispatch:n}=r,{sketchViewModel:i,sketchLayer:l,emptySketchLayer:p}=o,{eventBus:c}=a,s=l.graphics.items.find(e=>e.attributes.id===t);i.cancel(),l.remove(s),i.layer=p,n({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),c.emit("draw:delete",{featureId:t}),n({type:"SET_MODE",payload:null})}}};export{v as manifest};
|
|
@@ -12,8 +12,6 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
|
|
|
12
12
|
const handleCreateComplete = sketchViewModel.on('create', (e) => {
|
|
13
13
|
if (e.state === 'complete') {
|
|
14
14
|
e.graphic.attributes = { id: featureId }
|
|
15
|
-
|
|
16
|
-
console.log('create-complete', mapProvider.sketchLayer.graphics.items.length)
|
|
17
15
|
|
|
18
16
|
// Fix: to address calling some sketchViewModel methods syncronously
|
|
19
17
|
requestAnimationFrame(() => {
|
|
@@ -25,7 +23,7 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
|
|
|
25
23
|
|
|
26
24
|
// Store temp feature in state and emit create
|
|
27
25
|
const tempFeature = graphicToGeoJSON(e.graphic)
|
|
28
|
-
eventBus.emit('draw:
|
|
26
|
+
eventBus.emit('draw:created', tempFeature)
|
|
29
27
|
dispatch({ type: 'SET_FEATURE', payload: { tempFeature }})
|
|
30
28
|
|
|
31
29
|
handleCreateComplete.remove()
|
|
@@ -89,7 +89,7 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
|
|
|
89
89
|
// Emit event on update
|
|
90
90
|
if (toolInfoType === 'reshape-stop') {
|
|
91
91
|
const tempFeature = graphicToGeoJSON(graphic)
|
|
92
|
-
eventBus.emit('draw:
|
|
92
|
+
eventBus.emit('draw:updated', tempFeature)
|
|
93
93
|
dispatch({ type: 'SET_FEATURE', payload: { tempFeature }})
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -136,7 +136,7 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
|
|
|
136
136
|
sketchViewModel.layer = emptySketchLayer
|
|
137
137
|
|
|
138
138
|
dispatch({ type: 'SET_MODE', payload: null })
|
|
139
|
-
eventBus.emit('draw:
|
|
139
|
+
eventBus.emit('draw:cancelled')
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
// Attach all event listeners
|