diff --git a/src/registry/map/edit.tsx b/src/registry/map/edit.tsx index 4ce73b1..2c69a25 100644 --- a/src/registry/map/edit.tsx +++ b/src/registry/map/edit.tsx @@ -27,6 +27,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. @@ -65,7 +66,8 @@ const EditForm: EditFormDefinition = () => { 'useConfigDefaultMapSettings', 'defaultZoom', 'initialCenter', - 'tileLayerIdentifier' + 'tileLayerIdentifier', + 'interactions' )} /> @@ -87,6 +89,7 @@ const EditForm: EditFormDefinition = () => { {!values.useConfigDefaultMapSettings && } + {/* Advanced tab */} @@ -139,6 +142,12 @@ EditForm.defaultValues = { lng: undefined, }, tileLayerIdentifier: undefined, + interactions: { + circle: false, + polygon: false, + polyline: false, + marker: true, + }, defaultValue: null, // Advanced tab conditional: { diff --git a/src/registry/map/interaction-configuration.tsx b/src/registry/map/interaction-configuration.tsx new file mode 100644 index 0000000..5354485 --- /dev/null +++ b/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 ( + + } + 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 ( + + } + 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 ( + + } + 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 ( + + } + tooltip={tooltip} + /> + ); +}; + +const InteractionConfiguration: React.FC = () => ( + + } + > + + + + + +); + +export default InteractionConfiguration;