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

src/registry/map/edit.tsx

@@ -25,6 +25,7 @@ import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
 import MapConfiguration from './map-configuration';
+import InteractionConfiguration from '@/registry/map/interaction-configuration';
 
 /**
  * Form to configure a Formio 'map' type component.
@@ -62,7 +63,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'interactions'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -83,6 +85,7 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <IsSensitiveData />
         <UseConfigDefaultMapSettings />
         {!values.useConfigDefaultMapSettings && <MapConfiguration />}
+        <InteractionConfiguration />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -134,6 +137,12 @@ EditForm.defaultValues = {
     lat: undefined,
     lng: undefined,
   },
+  interactions: {
+    circle: false,
+    polygon: false,
+    polyline: false,
+    marker: true,
+  },
   defaultValue: null,
   // Advanced tab
   conditional: {

src/registry/map/interaction-configuration.tsx

@@ -0,0 +1,100 @@
+import {FormattedMessage, useIntl} from 'react-intl';
+import {Checkbox, Panel} from '@/components/formio';
+
+const CircleInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.circle' builder field",
+    defaultMessage: 'Whether users are allowed to draw a circle when working with the map',
+  });
+  return (
+    <Checkbox
+      name="interactions.circle"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.circle' builder field"
+          defaultMessage="Allow circle interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const PolygonInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.polygon' builder field",
+    defaultMessage: 'Whether users are allowed to draw a polygon when working with the map',
+  });
+  return (
+    <Checkbox
+      name="interactions.polygon"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.polygon' builder field"
+          defaultMessage="Allow polygon interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const PolylineInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.polyline' builder field",
+    defaultMessage: 'Whether users are allowed to draw a polyline when working with the map',
+  });
+  return (
+    <Checkbox
+      name="interactions.polyline"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.polyline' builder field"
+          defaultMessage="Allow polyline interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const MarkerInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.marker' builder field",
+    defaultMessage: 'Whether users are allowed to set a marker when working with the map',
+  });
+  return (
+    <Checkbox
+      name="interactions.marker"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.marker' builder field"
+          defaultMessage="Allow marker interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const InteractionConfiguration: React.FC = () => (
+  <Panel
+    title={
+      <FormattedMessage
+        description="Interaction configuration panel title"
+        defaultMessage="Available map interactions"
+      />
+    }
+  >
+    <CircleInteraction />
+    <PolygonInteraction />
+    <PolylineInteraction />
+    <MarkerInteraction />
+  </Panel>
+);
+
+export default InteractionConfiguration;