Adding map interaction config #198

robinmolen · 2024-12-11T14:10:31Z

Part of open-formulieren/open-forms#2177

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

robinmolen · 2024-12-16T10:57:43Z

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

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 · 2024-12-18T13:09:07Z

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 · 2025-01-06T10:48:25Z

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.

sergei-maertens

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

sergei-maertens · 2025-01-08T11:01:26Z

i18n/messages/nl.json

@@ -151,6 +151,11 @@
    "isTranslated": true,
    "originalDefault": "CSS class"
  },
+  "3xnsUT": {
+    "defaultMessage": "Lijn interacties",


Suggested change

"defaultMessage": "Lijn interacties",

"defaultMessage": "Lijn",

I feel like "interactions" is repeated way too much. I'm also inclined to rephrase this as "available drawing shapes" to make it simpler?

sergei-maertens · 2025-01-08T11:01:58Z

i18n/messages/nl.json

@@ -572,6 +577,11 @@
    "description": "Label for 'disableAddingRemovingRows' builder field",
    "originalDefault": "Disable adding or removing groups"
  },
+  "NbDr3m": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een lijn te tekenen, wanneer ze met het kaartmateriaal werken",


Suggested change

"defaultMessage": "Geeft gebruikers de mogelijkheid een lijn te tekenen, wanneer ze met het kaartmateriaal werken",

"defaultMessage": "Gebruikers kunnen rechte lijnen tekenen op de kaart.",

is it one or more lines, or just one? Probably good to clarify that in the tooltip.

sergei-maertens · 2025-01-08T11:02:37Z

i18n/messages/nl.json

@@ -598,6 +608,11 @@
    "isTranslated": true,
    "originalDefault": "Label"
  },
+  "POkaFQ": {
+    "defaultMessage": "Polygoon interacties",


Suggested change

"defaultMessage": "Polygoon interacties",

"defaultMessage": "Veelhoek (polygoon)",

sergei-maertens · 2025-01-08T11:03:14Z

i18n/messages/nl.json

@@ -885,6 +900,11 @@
    "description": "Tooltip for 'includePartners' builder field",
    "originalDefault": "Whether to add partners information to the component."
  },
+  "ZRM6J8": {
+    "defaultMessage": "Mogelijke kaartmateriaal interacties",


Suggested change

"defaultMessage": "Mogelijke kaartmateriaal interacties",

"defaultMessage": "Mogelijke kaartmateriaalinteracties",

single samengesteld woord

sergei-maertens · 2025-01-08T11:04:50Z

i18n/messages/nl.json

@@ -1158,6 +1178,11 @@
    "description": "Label for 'ClearOnHide' builder field",
    "originalDefault": "Clear on hide"
  },
+  "iyWQAt": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een polygoon te tekenen, wanneer ze met het kaartmateriaal werken",


Suggested change

"defaultMessage": "Geeft gebruikers de mogelijkheid een polygoon te tekenen, wanneer ze met het kaartmateriaal werken",

"defaultMessage": "Gebruikers kunnen een veelhoek (gesloten vorm die uit rechte lijnen bestaat) tekenen.",

sergei-maertens · 2025-01-08T11:05:54Z

i18n/messages/nl.json

@@ -1199,6 +1224,11 @@
    "description": "Label for translation message for validation error code",
    "originalDefault": "Error message"
  },
+  "kIX7bm": {
+    "defaultMessage": "Pin interacties",


Suggested change

"defaultMessage": "Pin interacties",

"defaultMessage": "Pin/punt",

sergei-maertens · 2025-01-08T11:06:24Z

i18n/messages/nl.json

@@ -1464,6 +1494,11 @@
    "description": "Tooltip for 'hideHeader' builder field",
    "originalDefault": "Do not display the configured label and top line as the header in the fieldset."
  },
+  "vFydxX": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een pin te plaatsen, wanneer ze met het kaartmateriaal werken",


Suggested change

"defaultMessage": "Geeft gebruikers de mogelijkheid een pin te plaatsen, wanneer ze met het kaartmateriaal werken",

"defaultMessage": "Gebruikers kunnen een punt aanduiden op de kaart.",

sergei-maertens · 2025-01-08T11:12:09Z

src/jsonEditor.scss

+@import 'leaflet-draw/dist/leaflet.draw.css';
+@import 'leaflet/dist/leaflet.css';


why are these imports in an unrelated scss file? Can't you just import them close to where they're used (https://github.com/open-formulieren/formio-builder/blob/main/src/registry/map/index.ts)? And preferably a preview.scss file that loads these libraries, so we have a consistent pattern of loading stylesheets for a given context:

formio-builder/src/registry/email/preview.tsx

Line 7 in 2d64b61

import './previews.scss';

sergei-maertens · 2025-01-08T11:14:23Z

src/registry/map/preview.tsx

+            edit={{
+              edit: false,
+              remove: false,
+            }}


what do these control? Does it mean once I've drawn something, I can't remove it anymore from the map?

Yeah they add delete and edit buttons to the map. They are a bit cumbersome when using, so i opted to remove them..
At the moment only 1 shape is allowed. So when you create a new one, the old shape is removed. This does mean that once you have added a shape, you cannot clear it..

Im taking a look if we can change the behavior of these buttons (i.e. remove all shapes when you click the button, instead of having to click to shape and then save the deletion). For reference, this is how it normally looks https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

Yeah not being able to make corrections is a problem. I think it's probably best to enable the delete, but leave the edit disabled and I'm sure there will be accessibility feedback about this in the future.

sergei-maertens · 2025-01-08T11:16:03Z

tsconfig.json

@@ -18,6 +18,7 @@
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "noErrorTruncation": true,
+    "skipLibCheck": true,


what's the impact of this? I don't like this part from the documentation:

...at the expense of type-system accuracy

This skips type checking of *.d.ts files. With this, only the *.d.ts files that we directly use are type checked.

This is a 'solution' for a typescript error originating from node_modules/react-leaflet-draw/src/index.d.ts.

As we discussed in the office, maybe better to isolate this, or to solve this another way. I've gone trough the repo/issues of react-leaflet-draw, but i haven't found anything related to this.. So i created a ticket, asking their advice about using typescript alex3165/react-leaflet-draw#188

… preview

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 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 force-pushed the feature/2177-map-interactions branch 2 times, most recently from 1644d74 to e7254fd Compare December 16, 2024 08:53

robinmolen marked this pull request as ready for review December 16, 2024 08:54

robinmolen requested a review from vaszig December 16, 2024 08:55

robinmolen marked this pull request as draft December 16, 2024 10:55

vaszig reviewed Dec 17, 2024

View reviewed changes

robinmolen force-pushed the feature/2177-map-interactions branch 2 times, most recently from 56ca3aa to 72b3cc2 Compare December 18, 2024 14:56

robinmolen marked this pull request as ready for review January 6, 2025 10:40

✨ [open-formulieren/open-forms#2177] added interaction configuration

0f8a233

robinmolen force-pushed the feature/2177-map-interactions branch from 72b3cc2 to ff16d26 Compare January 6, 2025 15:22

⬆️ [open-formulieren/open-forms#2177] Upgraded open-forms types

fd0ce97

robinmolen force-pushed the feature/2177-map-interactions branch from ff16d26 to d6949a6 Compare January 7, 2025 10:55

sergei-maertens requested changes Jan 8, 2025

View reviewed changes

robinmolen added 3 commits January 8, 2025 18:05

➕ [open-formulieren/open-forms#2177] Add leaflet-draw dependencies

81f8be3

✨ [open-formulieren/open-forms#2177] Add map component interaction to…

d7d5be8

… preview

robinmolen force-pushed the feature/2177-map-interactions branch from d6949a6 to d27c01b Compare January 8, 2025 17:08

robinmolen added 3 commits January 9, 2025 09:52

🚚 [open-formulieren/open-forms#2177] Moving map settings to separate tab

42ab5a7

🌐 [open-formulieren/open-forms#2177] Translations

12ae06d

✨ [open-formulieren/open-forms#2177] Added delete button

faf26ff

robinmolen force-pushed the feature/2177-map-interactions branch from d27c01b to faf26ff Compare January 9, 2025 11:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding map interaction config #198

Adding map interaction config #198

robinmolen commented Dec 11, 2024 •

edited

Loading

robinmolen commented Dec 16, 2024

vaszig left a comment

robinmolen commented Dec 18, 2024

robinmolen commented Jan 6, 2025

sergei-maertens left a comment

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

robinmolen Jan 8, 2025

sergei-maertens Jan 8, 2025

sergei-maertens Jan 8, 2025

robinmolen Jan 9, 2025

	"defaultMessage": "Lijn interacties",
	"defaultMessage": "Lijn",

	"defaultMessage": "Geeft gebruikers de mogelijkheid een lijn te tekenen, wanneer ze met het kaartmateriaal werken",
	"defaultMessage": "Gebruikers kunnen rechte lijnen tekenen op de kaart.",

	"defaultMessage": "Polygoon interacties",
	"defaultMessage": "Veelhoek (polygoon)",

	"defaultMessage": "Mogelijke kaartmateriaal interacties",
	"defaultMessage": "Mogelijke kaartmateriaalinteracties",

	"defaultMessage": "Geeft gebruikers de mogelijkheid een polygoon te tekenen, wanneer ze met het kaartmateriaal werken",
	"defaultMessage": "Gebruikers kunnen een veelhoek (gesloten vorm die uit rechte lijnen bestaat) tekenen.",

	"defaultMessage": "Pin interacties",
	"defaultMessage": "Pin/punt",

		@import 'leaflet-draw/dist/leaflet.draw.css';
		@import 'leaflet/dist/leaflet.css';

Adding map interaction config #198

Are you sure you want to change the base?

Adding map interaction config #198

Conversation

robinmolen commented Dec 11, 2024 • edited Loading

robinmolen commented Dec 16, 2024

vaszig left a comment

Choose a reason for hiding this comment

robinmolen commented Dec 18, 2024

robinmolen commented Jan 6, 2025

sergei-maertens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robinmolen commented Dec 11, 2024 •

edited

Loading