Merge pull request #71 from carbonplan/katamartin/region-picker-uuids

Use uuids in RegionPicker DOM elements

src/region/region-picker/circle-picker/circle-renderer.js

@@ -21,6 +21,7 @@ const abbreviations = {
 }
 
 export default function CircleRenderer({
+  id,
   map,
   onIdle = (circle) => {},
   onDrag = (circle) => {},
@@ -35,13 +36,13 @@ export default function CircleRenderer({
   let centerXY = project(map, center)
   let radius = initialRadius
 
-  const svg = select('#circle-picker').style('pointer-events', 'none')
-  const svgCircle = select('#circle').style('pointer-events', 'all')
-  const svgCircleCutout = select('#circle-cutout')
-  const svgHandle = select('#handle').style('pointer-events', 'all')
-  const svgGuideline = select('#radius-guideline')
-  const svgRadiusTextContainer = select('#radius-text-container')
-  const svgRadiusText = select('#radius-text').attr('fill-opacity', 0)
+  const svg = select(`#circle-picker-${id}`).style('pointer-events', 'none')
+  const svgCircle = select(`#circle-${id}`).style('pointer-events', 'all')
+  const svgCircleCutout = select(`#circle-cutout-${id}`)
+  const svgHandle = select(`#handle-${id}`).style('pointer-events', 'all')
+  const svgGuideline = select(`#radius-guideline-${id}`)
+  const svgRadiusTextContainer = select(`#radius-text-container-${id}`)
+  const svgRadiusText = select(`#radius-text-${id}`).attr('fill-opacity', 0)
 
   let guidelineAngle = 90
   if (!SHOW_RADIUS_GUIDELINE) {

src/region/region-picker/circle-picker/index.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useMapbox } from '../../../mapbox'
 import CircleRenderer from './circle-renderer'
 
-const RegionPicker = ({
+const CirclePicker = ({
+  id,
   backgroundColor,
   center,
   color,
@@ -20,6 +21,7 @@ const RegionPicker = ({
 
   useEffect(() => {
     const renderer = CircleRenderer({
+      id,
       map,
       onIdle,
       onDrag,
@@ -40,7 +42,7 @@ const RegionPicker = ({
 
   return (
     <svg
-      id='circle-picker'
+      id={`circle-picker-${id}`}
       style={{
         position: 'absolute',
         top: 0,
@@ -50,13 +52,13 @@ const RegionPicker = ({
       }}
     >
       <defs>
-        <clipPath id='circle-clip'>
-          <path id='circle-cutout' />
+        <clipPath id={`circle-clip-${id}`}>
+          <path id={`circle-cutout-${id}`} />
         </clipPath>
       </defs>
 
       <path
-        id='circle'
+        id={`circle-${id}`}
         stroke={color}
         strokeWidth={1}
         fill='transparent'
@@ -67,21 +69,21 @@ const RegionPicker = ({
         y='0'
         width='100%'
         height='100%'
-        clipPath='url(#circle-clip)'
+        clipPath={`url(#circle-clip-${id})`}
         fill={backgroundColor}
         fillOpacity={0.8}
       />
-      <circle id='handle' r={8} fill={color} cursor='ew-resize' />
+      <circle id={`handle-${id}`} r={8} fill={color} cursor='ew-resize' />
       <line
-        id='radius-guideline'
+        id={`radius-guideline-${id}`}
         stroke={color}
         strokeOpacity={0}
         strokeWidth={1}
         strokeDasharray='3,2'
       />
-      <g id='radius-text-container'>
+      <g id={`radius-text-container-${id}`}>
         <text
-          id='radius-text'
+          id={`radius-text-${id}`}
           textAnchor='middle'
           fontFamily={fontFamily}
           fontSize={fontSize}
@@ -92,4 +94,4 @@ const RegionPicker = ({
   )
 }
 
-export default RegionPicker
+export default CirclePicker

src/region/region-picker/index.js

@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback, useEffect } from 'react'
 import CirclePicker from './circle-picker'
 import { UPDATE_STATS_ON_DRAG } from './constants'
 import { distance } from '@turf/turf'
+import { v4 as uuidv4 } from 'uuid'
 
 import { useRegionContext } from '../context'
 import { useMapbox } from '../../mapbox'
@@ -29,6 +30,7 @@ function RegionPicker({
   maxRadius,
 }) {
   const { map } = useMapbox()
+  const id = useRef(uuidv4())
   const initialCenter = useRef(map.getCenter())
   const initialRadius = useRef(
     initialRadiusProp || getInitialRadius(map, units, minRadius, maxRadius)
@@ -57,6 +59,7 @@ function RegionPicker({
 
   return (
     <CirclePicker
+      id={id.current}
       map={map}
       center={initialCenter.current}
       radius={initialRadius.current}