Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding map interaction config #198

Merged
merged 10 commits into from
Jan 15, 2025
Merged

Adding map interaction config #198

merged 10 commits into from
Jan 15, 2025

Conversation

robinmolen
Copy link
Contributor

@robinmolen robinmolen commented Dec 11, 2024 •
edited
Loading

Part of open-formulieren/open-forms#2177

This relies on a update to the types repo: open-formulieren/types#62

@robinmolen robinmolen linked an issue Dec 11, 2024 that may be closed by this pull request
Kaartmateriaal - Verschillende types kaart-interactie (Point, Polygon en Line) open-formulieren/open-forms#2177
Open
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 2 times, most recently from 1644d74 to e7254fd Compare December 16, 2024 08:53
@robinmolen robinmolen marked this pull request as ready for review December 16, 2024 08:54
@robinmolen robinmolen requested a review from vaszig December 16, 2024 08:55
@robinmolen robinmolen marked this pull request as draft December 16, 2024 10:55
@robinmolen
Copy link
Contributor Author

Because this feature will be added after 3.0, this PR is moved to draft.

This PR is still ready to be reviewed, it just shouldn't be merged just yet

vaszig
vaszig reviewed Dec 17, 2024
View reviewed changes
Copy link
Contributor

@vaszig vaszig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can say, it seems good to me. I would add though some stories for the interactions (not necessarily tests, but just to have the appearance).

@robinmolen
Copy link
Contributor Author

As far as I can say, it seems good to me. I would add though some stories for the interactions (not necessarily tests, but just to have the appearance).

The map component stories do show the configuration, but the choice doesn't have a visual representation.
But yeah, it would probably be nice to show/test the interaction options in the builder..

@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 2 times, most recently from 56ca3aa to 72b3cc2 Compare December 18, 2024 14:56
@robinmolen robinmolen marked this pull request as ready for review January 6, 2025 10:40
@robinmolen
Copy link
Contributor Author

This PR can be reviewed (this includes some chromatic changes that also have to be reviewed)

In the formio-builder a new map component configuration option was added: interactions. "Interactions" is a group of checkboxes, allowing different user interactions in the map. To keep the logic close to what we already have, the pointer interaction is activated by default.

In the form builder map component preview you can test/use the active interactions.

@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 2 times, most recently from ff16d26 to d6949a6 Compare January 7, 2025 10:55
sergei-maertens
sergei-maertens requested changes Jan 8, 2025
View reviewed changes
Copy link
Member

@sergei-maertens sergei-maertens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move all of the map settings to a separate tab? Tab title can be "Map settings" or just "Settings", and would come after the "Validation" tab. I think the "Basic" tab is getting too clutter.

Specifically, this means the fields:

  • Use globally configured map component settings
  • Map configuration (and re-label this to "Initial focus" or something like that)
  • Tile layer
  • Available interactions

i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
src/jsonEditor.scss Outdated Show resolved Hide resolved
src/registry/map/preview.tsx Outdated Show resolved Hide resolved
tsconfig.json Outdated Show resolved Hide resolved
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 3 times, most recently from faf26ff to 9118592 Compare January 13, 2025 14:43
@robinmolen robinmolen mentioned this pull request Jan 14, 2025
Closed
sergei-maertens
sergei-maertens reviewed Jan 14, 2025
View reviewed changes
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
i18n/messages/nl.json Outdated Show resolved Hide resolved
src/registry/map/edit.tsx Show resolved Hide resolved
src/registry/map/interaction-configuration.tsx Outdated Show resolved Hide resolved
src/registry/map/map-configuration.tsx Outdated Show resolved Hide resolved
tsconfig.json Outdated Show resolved Hide resolved
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 2 times, most recently from d8aaa90 to bbd232a Compare January 14, 2025 15:38
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from bbd232a to a684b73 Compare January 14, 2025 16:05
@robinmolen
✨ [open-formulieren/open-forms#2177] added interaction configuration
af1517e
@robinmolen
⬆️ [open-formulieren/open-forms#2177] Upgraded open-forms types
09258d6
@robinmolen
➕ [open-formulieren/open-forms#2177] Add leaflet-draw dependencies
0ba853a
@robinmolen
✨ [open-formulieren/open-forms#2177] Add map component interaction to…
d8bd500 
… preview
@robinmolen
👷 [open-formulieren/open-forms#2177] Update build scripts
c5ea84c 
Both changes are needed for the leaflet-draw and react-leaflet-draw dependencies.

leaflet-draw uses images for the different markers, which are included in the css. For this to work with the scss build, .png and .svg files use the dataurl loader https://esbuild.github.io/content-types/#data-url

Typescript errors in the react-leaflet-draw dependency caused a typescript validation/error, which shouldn't happen. Using `skipLibCheck` in the tsconfig.json type issues in the node_modules folder are ignored
@robinmolen
🚚 [open-formulieren/open-forms#2177] Moving map settings to separate tab
60f860f
@robinmolen
🌐 [open-formulieren/open-forms#2177] Translations
ba12ad7
@robinmolen
✨ [open-formulieren/open-forms#2177] Added delete button
01e610c
@robinmolen
🚨 [open-formulieren/open-forms#2177] Patching react-leaflet-draw
fe989d7 
The React-leaflet-draw package seems abandoned. As such, a fix for the typescript issue (alex3165/react-leaflet-draw#188) probably won't happen anytime soon

The .patch file, in `/patches`, contains the fix needed for the react-leaflet-draw index.d.ts file.

The problem with this solution, is that this only solves it for this project. If we introduce typescript to the SDK (or any other project using `react-leaflet-draw`), this problem will need to be solved again
@robinmolen
💄 [open-formulieren/open-forms#2177] Hide map edit controls if all in…
f570ae1 
…teractions are disabled
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from 6856d22 to f570ae1 Compare January 15, 2025 08:11
@robinmolen robinmolen merged commit d93adda into main Jan 15, 2025
13 checks passed
@robinmolen robinmolen deleted the feature/2177-map-interactions branch January 15, 2025 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vaszig vaszig vaszig left review comments

@sergei-maertens sergei-maertens sergei-maertens approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Kaartmateriaal - Verschillende types kaart-interactie (Point, Polygon en Line)
3 participants
@robinmolen @sergei-maertens @vaszig