@defra/forms-engine-plugin 4.13.0 → 4.14.1

package/.server/client/javascripts/geospatial-map.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @param {boolean} allowPoint
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+export function getHelpPanelHtml(allowPoint: boolean, allowLine: boolean, allowShape: boolean): string;
 /**
  * Extract and parses the GeoJSON from the textarea
  * @param {HTMLTextAreaElement} geospatialInput - the textarea containing the geojson
@@ -45,6 +51,23 @@ export function focusFeature(feature: Feature, mapProvider: MapLibreMap): void;
  * @param {boolean} [readonly] - render the list item in readonly mode
  */
 export function createFeatureHTML(feature: Feature, index: number, mapId: string, disabled?: boolean, readonly?: boolean): string;
+/**
+ * Factory closure to manage the UI
+ * @param {GeoJSON} geojson - the features
+ * @param {InteractiveMap} map - the map
+ * @param {string} mapId - the ID of the map
+ * @param {HTMLDivElement} listEl - where to render the feature list
+ * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
+ * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ */
+export function getUIManager(geojson: GeoJSON, map: InteractiveMap, mapId: string, listEl: HTMLDivElement, geospatialInput: HTMLTextAreaElement, options: UIManagerOptions | undefined): {
+    renderList: RenderList;
+    renderValue: RenderValue;
+    listEl: HTMLDivElement;
+    toggleActionButtons: (hidden: boolean) => void;
+    focusDescriptionInput: () => void;
+    getAllowableGeometryTypes: () => string[];
+};
 export type GeoJSON = {
     /**
      * - the GeoJSON type string
@@ -99,6 +122,10 @@ export type RenderValue = () => void;
  * Toggles the action button hidden state
  */
 export type ToggleActionButtons = (hidden: boolean) => void;
+/**
+ * Returns the list of geometry types a user can create
+ */
+export type GetAllowableGeometryTypes = () => string[];
 /**
  * Set focus to the last description input
  */
@@ -160,6 +187,10 @@ export type UIManager = {
      * - function that sets focus to a description input element
      */
     focusDescriptionInput: FocusDescriptionInput;
+    /**
+     * - function that returns the array of geometry types a user can create
+     */
+    getAllowableGeometryTypes: GetAllowableGeometryTypes;
 };
 export type Context = {
     /**
@@ -196,4 +227,5 @@ import type { Feature } from '../../server/plugins/engine/types.js';
 import type { InteractiveMap } from '../../client/javascripts/map.js';
 import type { FeatureCollection } from '../../server/plugins/engine/types.js';
 import type { MapLibreMap } from '../../client/javascripts/map.js';
+import type { UIManagerOptions } from '../../client/javascripts/map.js';
 import type { Geometry } from '../../server/plugins/engine/types.js';

package/.server/client/javascripts/geospatial-map.js

@@ -1,5 +1,6 @@
 import { bbox } from '@turf/bbox';
 import { EVENTS, createMap, defaultConfig, getCentroidGridRef, getCoordinateGridRef } from "./map.js";
+import { formatDelimtedList } from "./utils.js";
 const helpPanelConfig = {
   showLabel: true,
   label: 'How to use this map',
@@ -20,9 +21,56 @@ const helpPanelConfig = {
     open: true,
     dismissible: true,
     modal: false
-  },
-  html: '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points, shapes or lines to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a line or shape</li><li>Give the location a name</li></ul>'
+  }
 };
+
+/**
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+function getLineOrShapeText(allowLine, allowShape) {
+  if (allowLine && allowShape) {
+    return 'a line or shape';
+  }
+  if (allowLine) {
+    return 'a line';
+  }
+  if (allowShape) {
+    return 'a shape';
+  }
+  return '';
+}
+
+/**
+ * @param {boolean} allowPoint
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+  const items = [];
+  if (allowPoint) {
+    items.push('points');
+  }
+  if (allowLine) {
+    items.push('lines');
+  }
+  if (allowShape) {
+    items.push('shapes');
+  }
+  return formatDelimtedList(items, ',', 'or');
+}
+
+/**
+ * @param {boolean} allowPoint
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+export function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(allowLine, allowShape);
+  const doneExtra = lineOrShapeText ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>` : '';
+  const allowedTypesText = getAllowedTypesPhrase(allowPoint, allowLine, allowShape);
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">You can add ${allowedTypesText} to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li>${doneExtra}<li>Give the location a name</li></ul>`;
+}
 const lineFeatureProperties = {
   stroke: 'rgba(0, 11, 112, 1)',
   fill: 'rgba(0, 11, 112, 0.2)',
@@ -138,7 +186,11 @@ export function processGeospatial(config, geospatial, index) {
   } = createMap(mapId, initConfig, config);
   const featuresManager = getFeaturesManager(geojson);
   const activeFeatureManager = getActiveFeatureManager();
-  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput);
+  const geometryTypes = geospatial.dataset.geometrytypes;
+  const options = {
+    geometryTypes
+  };
+  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options);
 
   /**
    * @type {Context}
@@ -454,16 +506,32 @@ function getValueRenderer(geojson, geospatialInput) {
  * @param {string} mapId - the ID of the map
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
+ * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
  */
-function getUIManager(geojson, map, mapId, listEl, geospatialInput) {
+export function getUIManager(geojson, map, mapId, listEl, geospatialInput, options) {
+  /**
+   * Get a CSV list of geometry types the user can create
+   * @returns {string[]}
+   */
+  function getAllowableGeometryTypes() {
+    return options?.geometryTypes ? options.geometryTypes.split(',') : ['point', 'line', 'shape'];
+  }
+
   /**
    * Toggle the hidden state of the action buttons
    * @type {ToggleActionButtons}
    */
   function toggleActionButtons(hidden) {
-    map.toggleButtonState('btnAddPoint', 'hidden', hidden);
-    map.toggleButtonState('btnAddPolygon', 'hidden', hidden);
-    map.toggleButtonState('btnAddLine', 'hidden', hidden);
+    const types = getAllowableGeometryTypes();
+    if (types.includes('point')) {
+      map.toggleButtonState('btnAddPoint', 'hidden', hidden);
+    }
+    if (types.includes('shape')) {
+      map.toggleButtonState('btnAddPolygon', 'hidden', hidden);
+    }
+    if (types.includes('line')) {
+      map.toggleButtonState('btnAddLine', 'hidden', hidden);
+    }
   }
 
   /**
@@ -487,7 +555,8 @@ function getUIManager(geojson, map, mapId, listEl, geospatialInput) {
     renderValue,
     listEl,
     toggleActionButtons,
-    focusDescriptionInput
+    focusDescriptionInput,
+    getAllowableGeometryTypes
   };
 }
 
@@ -539,7 +608,8 @@ function onMapReadyFactory(context) {
   } = context;
   const {
     toggleActionButtons,
-    renderList
+    renderList,
+    getAllowableGeometryTypes
   } = uiManager;
   const {
     resetActiveFeature
@@ -551,68 +621,82 @@ function onMapReadyFactory(context) {
    * @param {MapLibreMap} e.map - the map provider instance
    */
   return function onMapReady(e) {
+    const types = getAllowableGeometryTypes();
+    const allowPoint = types.includes('point');
+    const allowLine = types.includes('line');
+    const allowShape = types.includes('shape');
+
     // Add info panel
-    map.addPanel('info', helpPanelConfig);
-    map.addButton('btnAddPoint', {
-      variant: 'tertiary',
-      label: 'Add point',
-      iconSvgContent: POINT_SVG,
-      onClick: () => {
-        resetActiveFeature();
-        toggleActionButtons(true);
-        renderList(true);
-        interactPlugin.enable();
-      },
-      mobile: {
-        slot: 'actions'
-      },
-      tablet: {
-        slot: 'actions'
-      },
-      desktop: {
-        slot: 'actions'
-      }
-    });
-    map.addButton('btnAddPolygon', {
-      variant: 'tertiary',
-      label: 'Add shape',
-      iconSvgContent: POLYGON_SVG,
-      onClick: () => {
-        resetActiveFeature();
-        toggleActionButtons(true);
-        renderList(true);
-        drawPlugin.newPolygon(generateID(), polygonFeatureProperties);
-      },
-      mobile: {
-        slot: 'actions'
-      },
-      tablet: {
-        slot: 'actions'
-      },
-      desktop: {
-        slot: 'actions'
-      }
-    });
-    map.addButton('btnAddLine', {
-      variant: 'tertiary',
-      label: 'Add line',
-      iconSvgContent: LINE_SVG,
-      onClick: () => {
-        resetActiveFeature();
-        toggleActionButtons(true);
-        renderList(true);
-        drawPlugin.newLine(generateID(), lineFeatureProperties);
-      },
-      mobile: {
-        slot: 'actions'
-      },
-      tablet: {
-        slot: 'actions'
-      },
-      desktop: {
-        slot: 'actions'
-      }
+    map.addPanel('info', {
+      ...helpPanelConfig,
+      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
     });
+    if (allowPoint) {
+      map.addButton('btnAddPoint', {
+        variant: 'tertiary',
+        label: 'Add point',
+        iconSvgContent: POINT_SVG,
+        onClick: () => {
+          resetActiveFeature();
+          toggleActionButtons(true);
+          renderList(true);
+          interactPlugin.enable();
+        },
+        mobile: {
+          slot: 'actions'
+        },
+        tablet: {
+          slot: 'actions'
+        },
+        desktop: {
+          slot: 'actions'
+        }
+      });
+    }
+    if (allowShape) {
+      map.addButton('btnAddPolygon', {
+        variant: 'tertiary',
+        label: 'Add shape',
+        iconSvgContent: POLYGON_SVG,
+        onClick: () => {
+          resetActiveFeature();
+          toggleActionButtons(true);
+          renderList(true);
+          drawPlugin.newPolygon(generateID(), polygonFeatureProperties);
+        },
+        mobile: {
+          slot: 'actions'
+        },
+        tablet: {
+          slot: 'actions'
+        },
+        desktop: {
+          slot: 'actions'
+        }
+      });
+    }
+    if (allowLine) {
+      map.addButton('btnAddLine', {
+        variant: 'tertiary',
+        label: 'Add line',
+        iconSvgContent: LINE_SVG,
+        onClick: () => {
+          resetActiveFeature();
+          toggleActionButtons(true);
+          renderList(true);
+          drawPlugin.newLine(generateID(), lineFeatureProperties);
+        },
+        mobile: {
+          slot: 'actions'
+        },
+        tablet: {
+          slot: 'actions'
+        },
+        desktop: {
+          slot: 'actions'
+        }
+      });
+    }
 
     // Set the map provider on the context
     context.mapProvider = e.map;
@@ -1083,6 +1167,12 @@ function onListElKeydownFactory() {
  * @returns {void}
  */
 
+/**
+ * Returns the list of geometry types a user can create
+ * @callback GetAllowableGeometryTypes
+ * @returns {string[]}
+ */
+
 /**
  * Set focus to the last description input
  * @callback FocusDescriptionInput
@@ -1112,6 +1202,7 @@ function onListElKeydownFactory() {
  * @property {HTMLDivElement} listEl - the summary list of features
  * @property {ToggleActionButtons} toggleActionButtons - function that toggles the action buttons
  * @property {FocusDescriptionInput} focusDescriptionInput - function that sets focus to a description input element
+ * @property {GetAllowableGeometryTypes} getAllowableGeometryTypes - function that returns the array of geometry types a user can create
  */
 
 /**
@@ -1126,6 +1217,6 @@ function onListElKeydownFactory() {
  */
 
 /**
- * @import { MapLibreMap } from '../../client/javascripts/map.js'
+ * @import { MapLibreMap, UIManagerOptions } from '../../client/javascripts/map.js'
  */
 //# sourceMappingURL=geospatial-map.js.map