muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-24 18:46:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

changing gpx color

Browse source
This commit is contained in:
Fedor Katurov 2020-01-24 17:37:49 +07:00
parent 871f9bb8a2
commit c4aede5833
3 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/dialogs/GpxDialog.tsx
View file

@ -66,6 +66,16 @@ const GpxDialogUnconnected: FC<Props> = ({
[gpx, editorSetGpx]
);
const onRouteColor = useCallback(
index => {
if (!gpx.enabled) return;
editorSetGpx({
list: gpx.list.map((el, i) => (i !== index ? el : { ...el, color: getRandomColor() })),
});
},
[gpx, editorSetGpx]
);
const toggleGpx = useCallback(() => {
editorSetGpx({ enabled: !gpx.enabled });
}, [gpx, editorSetGpx]);
@ -83,7 +93,7 @@ const GpxDialogUnconnected: FC<Props> = ({
const addCurrent = useCallback(() => {
if (!route.length) return;
const { path } = getUrlData()
const { path } = getUrlData();
editorSetGpx({
list: [
@ -115,6 +125,7 @@ const GpxDialogUnconnected: FC<Props> = ({
onRouteDrop={onRouteDrop}
onFocusRoute={onFocusRoute}
onRouteToggle={onRouteToggle}
onRouteColor={onRouteColor}
/>
))}

5
src/components/gpx/GpxDialogRow.tsx
View file

@ -12,12 +12,13 @@ interface IProps {
onFocusRoute: (i: number) => void
onRouteDrop: (i: number) => void
onRouteToggle: (i: number) => void
onRouteColor: (i: number) => void
}
const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocusRoute, onRouteDrop }) => {
const GpxDialogRow: FC<IProps> = ({ item, index, enabled, onRouteToggle, onFocusRoute, onRouteDrop, onRouteColor }) => {
return (
<div className={classnames("gpx-row", { 'gpx-row_disabled': !enabled || !item.enabled })}>
<div className="gpx-row__color" style={{ backgroundColor: item.color }}/>
<div className="gpx-row__color" style={{ backgroundColor: item.color }} onClick={() => onRouteColor(index)}/>
<div className="gpx-row__title" onClick={() => onFocusRoute(index)}>
{item.name}

2
src/map/GpxPolyline/index.tsx
View file

@ -20,7 +20,7 @@ const GpxPolyline: FC<IProps> = ({ latlngs, color }) => {
setLayer(item);
return () => MainMap.removeLayer(item);
}, [MainMap]);
}, [MainMap, color, latlngs]);
useEffect(() => {
if (!layer) return;