Single draw plugin

assets/templates/draw-tools.njk

@@ -33,7 +33,7 @@
   <script src="/plugin-assets/%40defra%2Finteractive-map/dist/umd/index.js"></script>
   <script src="/plugin-assets/%40defra%2Finteractive-map/providers/maplibre/dist/umd/index.js"></script>
   <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/interact/dist/umd/index.js"></script>
-  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/draw-ml/dist/umd/index.js"></script>
+  <script src="/plugin-assets/%40defra%2Finteractive-map/plugins/draw/dist/umd/index.js"></script>
 
   <script>
     const DRAW_LAYERS = ['fill-inactive.cold', 'stroke-inactive.cold']
@@ -48,7 +48,7 @@
       deselectOnClickOutside: true
     })
 
-    const drawPlugin = defra.drawMLPlugin({
+    const drawPlugin = defra.drawPlugin({
       snapLayers: ['building-3d']
     })
 
@@ -75,7 +75,7 @@
 
       interactiveMap.addButton('drawTools', {
         label: 'Draw tools',
-        mobile: { slot: 'bottom-right' },
+        mobile: { slot: 'top-middle' },
         tablet: { slot: 'top-middle' },
         desktop: { slot: 'top-middle' },
         menuItems: [
@@ -150,6 +150,7 @@
       var singleFeature = e.selectedFeatures.length === 1
       var anyFeature = e.selectedFeatures.length > 0
       var isDrawFeature = singleFeature && DRAW_LAYERS.includes(e.selectedFeatures[0].layerId)
+      var isPolygon = singleFeature && e.selectedFeatures[0].geometryType === 'Polygon'
       var allDrawFeatures = anyFeature && e.selectedFeatures.every(function (f) { return DRAW_LAYERS.includes(f.layerId) })
       selectedFeatureIds = e.selectedFeatures.map(function (f) { return f.featureId })
       interactiveMap.toggleButtonState('drawPolygon', 'disabled', singleFeature)

demo/DemoMapDrawTools.js

@@ -29,7 +29,7 @@ function MapInner () {
       import('../src/index.js'),
       import('../providers/maplibre/src/index.js'),
       import('../plugins/interact/src/index.js'),
-      import('../plugins/beta/draw-ml/src/index.js')
+      import('../plugins/draw/src/index.js')
     ]).then(([
       { default: InteractiveMap },
       { default: maplibreProvider },
@@ -70,7 +70,7 @@ function MapInner () {
 
         interactiveMap.addButton('drawTools', {
           label: 'Draw tools',
-          mobile: { slot: 'bottom-right' },
+          mobile: { slot: 'top-middle' },
           tablet: { slot: 'top-middle' },
           desktop: { slot: 'top-middle' },
           menuItems: [

demo/DemoMapSelectFeature.js

@@ -43,7 +43,7 @@ function MapInner () {
       import('../src/index.js'),
       import('../providers/maplibre/src/index.js'),
       import('../plugins/interact/src/index.js'),
-      import('../plugins/beta/datasets/src/index.js')
+      import('../plugins/datasets/src/index.js')
     ]).then(([
       { default: InteractiveMap },
       { default: maplibreProvider },

demo/js/draw-ol.js

@@ -7,7 +7,7 @@ import openLayersProvider from '/providers/beta/openlayers/src/index.js'
 import openNamesProvider from '/providers/beta/open-names/src/index.js'
 // Plugins
 import mapStylesPlugin from '/plugins/beta/map-styles/src/index.js'
-import createDrawPlugin from '/plugins/beta/draw-ol/src/index.js'
+import createDrawPlugin from '/plugins/draw/src/index.js'
 import searchPlugin from '/plugins/search/src/index.js'
 import createInteractPlugin from '/plugins/interact/src/index.js'
 
@@ -28,9 +28,22 @@ const interactPlugin = createInteractPlugin({
   // debug: true
 })
 
+// Rough approximation of the England/Wales border as a line of easting —
+// good enough for a demo, not for anything that actually needs to be accurate.
+const WALES_BORDER_EASTING = 337300
+
+const getAllCoordinates = (coordinates) =>
+  Array.isArray(coordinates[0][0]) ? coordinates.flatMap(getAllCoordinates) : coordinates
+
+const isEastOfWalesBorder = (geometry) =>
+  getAllCoordinates(geometry.coordinates).every(([lng]) => lng > WALES_BORDER_EASTING)
+
 const drawPlugin = createDrawPlugin({
-  // snapLayers: ['OS/NGD/lnd_fts_land/Arable Or Grazing Land']
-  snapLayers: ['OS/TopographicArea_1/Agricultural Land', 'OS/TopographicLine/Building Outline']
+  snapLayers: ['OS/TopographicArea_1/Agricultural Land', 'OS/TopographicLine/Building Outline'],
+  onGeometryChange: (event) => { console.log(event.phase); return {
+    valid: isEastOfWalesBorder(event.feature.geometry),
+    reason: 'Points must be placed east of the England/Wales border'
+  }}
 })
 
 const interactiveMap = new InteractiveMap('map', {
@@ -75,7 +88,7 @@ interactiveMap.on('map:ready', function (e) {
   interactPlugin.enable()
   interactiveMap.addButton('geometryActions', {
     label: 'Draw tools',
-    mobile: { slot: 'bottom-right', order: 3 },
+    mobile: { slot: 'top-middle', order: 3 },
     tablet: { slot: 'top-middle', order: 3 },
     desktop: { slot: 'top-middle', order: 3 },
     menuItems: [{
@@ -101,8 +114,8 @@ interactiveMap.on('map:ready', function (e) {
         })
       }
     },{
-      id: 'editFeature',
-      label: 'Edit feature',
+      id: 'editShape',
+      label: 'Edit shape',
       iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
       isDisabled: true,
       onClick: function (e) {
@@ -113,6 +126,25 @@ interactiveMap.on('map:ready', function (e) {
         interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
         interactPlugin.disable()
       }
+    },{
+      id: 'splitShape',
+      label: 'Split shape',
+      iconSvgContent: '<path d="M8 19H5c-1 0-2-1-2-2V7c0-1 1-2 2-2h3"/><path d="M16 5h3c1 0 2 1 2 2v10c0 1-1 2-2 2h-3"/><line x1="12" x2="12" y1="4" y2="20"/>',
+      isDisabled: true,
+      onClick: function (e) {
+        drawPlugin.split(selectedFeatureIds[0])
+        interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
+        interactPlugin.disable()
+      }
+    },{
+      id: 'mergeShapes',
+      label: 'Merge shapes',
+      iconSvgContent: '<path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 0 1 1h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-3a1 1 0 0 0-1-1z"/>',
+      isDisabled: true,
+      onClick: function (e) {
+        drawPlugin.merge(selectedFeatureIds)
+        interactPlugin.clear()
+      }
     },{
       id: 'deleteFeature',
       label: 'Delete feature',
@@ -124,7 +156,9 @@ interactiveMap.on('map:ready', function (e) {
         interactPlugin.clear()
         interactiveMap.toggleButtonState('drawPolygon', 'disabled', false)
         interactiveMap.toggleButtonState('drawLine', 'disabled', false)
-        interactiveMap.toggleButtonState('editFeature', 'disabled', true)
+        interactiveMap.toggleButtonState('editShape', 'disabled', true)
+        interactiveMap.toggleButtonState('splitShape', 'disabled', true)
+        interactiveMap.toggleButtonState('mergeShapes', 'disabled', true)
         interactiveMap.toggleButtonState('deleteFeature', 'disabled', true)
       }
     }]
@@ -146,13 +180,12 @@ interactiveMap.on('draw:ready', function () {
 })
 
 interactiveMap.on('draw:started', function (e) {
-  interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
+  // console.log('draw:started')
   interactPlugin.disable()
 })
 
 interactiveMap.on('draw:editstart', function (e) {
-  interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
-  interactPlugin.disable()
+  console.log('draw:editstart', e)
 })
 
 interactiveMap.on('draw:created', function (e) {
@@ -177,16 +210,51 @@ interactiveMap.on('draw:cancelled', function (e) {
   interactPlugin.enable()
 })
 
+interactiveMap.on('draw:split', function (e) {
+  // Delete the original polygon
+  drawPlugin.deleteFeature([e.originalFeatureId])
+
+  // Add the two new split features with IDs based on the original
+  e.featureCollection.features.forEach(function (feature, index) {
+    const newId = e.originalFeatureId + (index === 0 ? '-a' : '-b')
+    drawPlugin.addFeature({
+      id: newId,
+      type: feature.type,
+      geometry: feature.geometry,
+      properties: feature.properties
+    })
+  })
+
+  interactPlugin.clear()
+})
+
+interactiveMap.on('draw:merge', function (e) {
+  // Delete the original polygons
+  drawPlugin.deleteFeature(e.originalFeatureIds)
+
+  // Add the single merged feature, keeping the first original's id
+  drawPlugin.addFeature({
+    id: e.originalFeatureIds[0],
+    type: e.feature.type,
+    geometry: e.feature.geometry,
+    properties: e.feature.properties
+  })
+})
+
 
 interactiveMap.on('interact:selectionchange', function (e) {
   const singleFeature = e.selectedFeatures.length === 1
   const anyFeature = e.selectedFeatures.length > 0
   const isDrawFeature = singleFeature && e.selectedFeatures[0].layerId === 'draw'
+  const isPolygon = singleFeature && e.selectedFeatures[0].geometryType === 'Polygon'
   const allDrawFeatures = anyFeature && e.selectedFeatures.every(function (f) { return f.layerId === 'draw' })
+  const canMerge = allDrawFeatures && e.contiguous && e.selectedFeatures.length > 1
   selectedFeatureIds = e.selectedFeatures.map(function (f) { return f.featureId })
   interactiveMap.toggleButtonState('drawPolygon', 'disabled', !!singleFeature)
   interactiveMap.toggleButtonState('drawLine', 'disabled', !!singleFeature)
-  interactiveMap.toggleButtonState('editFeature', 'disabled', !isDrawFeature)
+  interactiveMap.toggleButtonState('editShape', 'disabled', !isDrawFeature)
+  interactiveMap.toggleButtonState('splitShape', 'disabled', !isPolygon)
+  interactiveMap.toggleButtonState('mergeShapes', 'disabled', !canMerge)
   interactiveMap.toggleButtonState('deleteFeature', 'disabled', !allDrawFeatures)
 })
 

demo/js/draw.js

@@ -9,7 +9,7 @@ import openNamesProvider from '/providers/beta/open-names/src/index.js'
 // Plugins
 import mapStylesPlugin from '/plugins/beta/map-styles/src/index.js'
 import createDatasetsPlugin from '/plugins/datasets/src/index.js'
-import createDrawPlugin from '/plugins/beta/draw-ml/src/index.js'
+import createDrawPlugin from '/plugins/draw/src/index.js'
 import scaleBarPlugin from '/plugins/beta/scale-bar/src/index.js'
 import searchPlugin from '/plugins/search/src/index.js'
 import createInteractPlugin from '/plugins/interact/src/index.js'
@@ -40,8 +40,26 @@ const interactPlugin = createInteractPlugin({
   deselectOnClickOutside: true
 })
 
+// Rough approximation of the England/Wales border as a line of longitude —
+// good enough for a demo, not for anything that actually needs to be accurate.
+const WALES_BORDER_LONGITUDE = -3.0
+
+const getAllCoordinates = (coordinates) =>
+  Array.isArray(coordinates[0][0]) ? coordinates.flatMap(getAllCoordinates) : coordinates
+
+const isEastOfWalesBorder = (geometry) =>
+  getAllCoordinates(geometry.coordinates).every(([lng]) => lng > WALES_BORDER_LONGITUDE)
+
 const drawPlugin = createDrawPlugin({
-  snapLayers: ['OS/TopographicArea_1/Agricultural Land', 'OS/TopographicLine/Building Outline']
+  snapLayers: ['OS/TopographicArea_1/Agricultural Land', 'OS/TopographicLine/Building Outline'],
+  // onGeometryChange: (event) => ({
+  //   valid: isEastOfWalesBorder(event.feature.geometry),
+  //   reason: 'Points must be placed east of the England/Wales border'
+  // })
+  onGeometryChange: (event) => { console.log(event.phase); return {
+    valid: isEastOfWalesBorder(event.feature.geometry),
+    reason: 'Points must be placed east of the England/Wales border'
+  }}
 })
 
 const datasetsPlugin = createDatasetsPlugin({
@@ -182,8 +200,8 @@ interactiveMap.on('map:ready', function (e) {
         })
       }
     },{
-      id: 'editFeature',
-      label: 'Edit feature',
+      id: 'editShape',
+      label: 'Edit shape',
       iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
       isDisabled: true,
       onClick: function (e) {
@@ -194,6 +212,25 @@ interactiveMap.on('map:ready', function (e) {
         interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
         interactPlugin.disable()
       }
+    },{
+      id: 'splitShape',
+      label: 'Split shape',
+      iconSvgContent: '<path d="M8 19H5c-1 0-2-1-2-2V7c0-1 1-2 2-2h3"/><path d="M16 5h3c1 0 2 1 2 2v10c0 1-1 2-2 2h-3"/><line x1="12" x2="12" y1="4" y2="20"/>',
+      isDisabled: true,
+      onClick: function (e) {
+        drawPlugin.split(selectedFeatureIds[0])
+        interactiveMap.toggleButtonState('geometryActions', 'hidden', true)
+        interactPlugin.disable()
+      }
+    },{
+      id: 'mergeShapes',
+      label: 'Merge shapes',
+      iconSvgContent: '<path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 0 1 1h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-3a1 1 0 0 0-1-1z"/>',
+      isDisabled: true,
+      onClick: function (e) {
+        drawPlugin.merge(selectedFeatureIds)
+        interactPlugin.clear()
+      }
     },{
       id: 'deleteFeature',
       label: 'Delete feature',
@@ -205,7 +242,9 @@ interactiveMap.on('map:ready', function (e) {
         interactPlugin.clear()
         interactiveMap.toggleButtonState('drawPolygon', 'disabled', false)
         interactiveMap.toggleButtonState('drawLine', 'disabled', false)
-        interactiveMap.toggleButtonState('editFeature', 'disabled', true)
+        interactiveMap.toggleButtonState('editShape', 'disabled', true)
+        interactiveMap.toggleButtonState('splitShape', 'disabled', true)
+        interactiveMap.toggleButtonState('mergeShapes', 'disabled', true)
         interactiveMap.toggleButtonState('deleteFeature', 'disabled', true)
       }
     }]
@@ -242,7 +281,7 @@ interactiveMap.on('draw:ready', function () {
 })
 
 interactiveMap.on('draw:started', function (e) {
-  console.log('draw:started')
+  // console.log('draw:started')
   interactPlugin.disable()
 })
 
@@ -251,7 +290,7 @@ interactiveMap.on('draw:editstart', function (e) {
 })
 
 interactiveMap.on('draw:created', function (e) {
-  console.log('draw:created', e)
+  // console.log('draw:created', e)
   interactiveMap.toggleButtonState('geometryActions', 'hidden', false)
   interactPlugin.enable()
 })
@@ -261,7 +300,7 @@ interactiveMap.on('draw:updated', function (e) {
 })
 
 interactiveMap.on('draw:edited', function (e) {
-  console.log('draw:edited', e) // Should be editcomplete
+  // console.log('draw:edited', e)
   interactiveMap.toggleButtonState('geometryActions', 'hidden', false)
   interactPlugin.enable()
 })
@@ -278,14 +317,53 @@ interactiveMap.on('interact:selectionchange', function (e) {
   const singleFeature = e.selectedFeatures.length === 1
   const anyFeature = e.selectedFeatures.length > 0
   const isDrawFeature = singleFeature && drawLayers.includes(e.selectedFeatures[0].layerId)
+  const isPolygon = singleFeature && e.selectedFeatures[0].geometryType === 'Polygon'
   const allDrawFeatures = anyFeature && e.selectedFeatures.every(function (f) { return drawLayers.includes(f.layerId) })
+  const canMerge = allDrawFeatures && e.contiguous && e.selectedFeatures.length > 1
   selectedFeatureIds = e.selectedFeatures.map(function (f) { return f.featureId })
   interactiveMap.toggleButtonState('drawPolygon', 'disabled', !!singleFeature)
   interactiveMap.toggleButtonState('drawLine', 'disabled', !!singleFeature)
-  interactiveMap.toggleButtonState('editFeature', 'disabled', !isDrawFeature)
+  interactiveMap.toggleButtonState('editShape', 'disabled', !isDrawFeature)
+  interactiveMap.toggleButtonState('splitShape', 'disabled', !isPolygon)
+  interactiveMap.toggleButtonState('mergeShapes', 'disabled', !canMerge)
   interactiveMap.toggleButtonState('deleteFeature', 'disabled', !allDrawFeatures)
 })
 
+interactiveMap.on('draw:split', function (e) {
+  // console.log('draw:split', { originalFeatureId: e.originalFeatureId, newFeatures: e.featureCollection.features })
+
+  // Delete the original polygon
+  drawPlugin.deleteFeature([e.originalFeatureId])
+
+  // Add the two new split features with IDs based on the original
+  e.featureCollection.features.forEach(function (feature, index) {
+    const newId = e.originalFeatureId + (index === 0 ? '-a' : '-b')
+    drawPlugin.addFeature({
+      id: newId,
+      type: feature.type,
+      geometry: feature.geometry,
+      properties: feature.properties
+    })
+  })
+
+  interactPlugin.clear()
+})
+
+interactiveMap.on('draw:merge', function (e) {
+  // console.log('draw:merge', { originalFeatureIds: e.originalFeatureIds, feature: e.feature })
+
+  // Delete the original polygons
+  drawPlugin.deleteFeature(e.originalFeatureIds)
+
+  // Add the single merged feature, keeping the first original's id
+  drawPlugin.addFeature({
+    id: e.originalFeatureIds[0],
+    type: e.feature.type,
+    geometry: e.feature.geometry,
+    properties: e.feature.properties
+  })
+})
+
 interactiveMap.on('interact:markerchange', function (e) {
   // console.log('interact:markerchange', e)
 })