Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use uuids in RegionPicker DOM elements #71

Merged
merged 1 commit into from
May 26, 2022
Merged

Use uuids in RegionPicker DOM elements #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions src/region/region-picker/circle-picker/circle-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const abbreviations = {
}

export default function CircleRenderer({
id,
map,
onIdle = (circle) => {},
onDrag = (circle) => {},
Expand All @@ -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) {
Expand Down
24 changes: 13 additions & 11 deletions src/region/region-picker/circle-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -20,6 +21,7 @@ const RegionPicker = ({

useEffect(() => {
const renderer = CircleRenderer({
id,
map,
onIdle,
onDrag,
Expand All @@ -40,7 +42,7 @@ const RegionPicker = ({

return (
<svg
id='circle-picker'
id={`circle-picker-${id}`}
style={{
position: 'absolute',
top: 0,
Expand All @@ -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'
Expand All @@ -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}
Expand All @@ -92,4 +94,4 @@ const RegionPicker = ({
)
}

export default RegionPicker
export default CirclePicker
3 changes: 3 additions & 0 deletions src/region/region-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -57,6 +59,7 @@ function RegionPicker({

return (
<CirclePicker
id={id.current}
map={map}
center={initialCenter.current}
radius={initialRadius.current}
Expand Down