Revize 48690561
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
| frontend/src/features/TrackingTool/Map/MapPath.tsx | ||
|---|---|---|
| 1 |
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
|
|
| 1 |
import { Fragment, useEffect, useState } from 'react'
|
|
| 2 | 2 |
import { useDispatch, useSelector } from 'react-redux'
|
| 3 | 3 |
import { RootState } from '../../redux/store'
|
| 4 |
import { PathVariant, MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
|
|
| 4 |
import { MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
|
|
| 5 | 5 |
import TextPath from 'react-leaflet-textpath' |
| 6 |
import {
|
|
| 7 |
setPrimaryIdx, |
|
| 8 |
updateMapMarker, |
|
| 9 |
updateMapMarkerWithId, |
|
| 10 |
} from '../trackingToolSlice' |
|
| 6 |
import { updateMapMarker } from '../trackingToolSlice'
|
|
| 11 | 7 |
import MapMarker from './MapMarker' |
| 12 | 8 |
import { LatLngTuple } from 'leaflet'
|
| 13 | 9 |
import { Popup, Tooltip } from 'react-leaflet'
|
| ... | ... | |
| 15 | 11 |
import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
|
| 16 | 12 |
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../../Catalog/CatalogItemDetail'
|
| 17 | 13 |
|
| 18 |
export interface MapPathProps {
|
|
| 19 |
idx: number // index of the path in the list |
|
| 20 |
} |
|
| 21 |
|
|
| 22 | 14 |
type EdgeElement = any |
| 23 |
|
|
| 24 |
// Blue |
|
| 25 |
export const primaryPathColor = '#346eeb' |
|
| 26 |
|
|
| 27 |
// Grey |
|
| 28 |
export const secondaryPathColor = '#878e9c' |
|
| 29 |
|
|
| 30 |
const MapPath: FunctionComponent<MapPathProps> = ({ idx }) => {
|
|
| 15 |
const MapPath = () => {
|
|
| 31 | 16 |
const dispatch = useDispatch() |
| 32 |
|
|
| 33 |
// Get list of all paths from the store |
|
| 34 |
// And extract path from them |
|
| 35 |
const paths = useSelector( |
|
| 36 |
(state: RootState) => state.trackingTool.pathVariants |
|
| 37 |
) |
|
| 38 |
const [path, setPath] = useState<PathVariant>([]) |
|
| 39 |
useEffect(() => {
|
|
| 40 |
// Either set the path if it exists or set it to an empty array |
|
| 41 |
setPath(paths && paths.length > idx ? paths[idx] : []) |
|
| 42 |
}, [idx, paths]) |
|
| 43 |
|
|
| 44 |
// Primary path index to set the correct color |
|
| 45 |
const primaryPathIdx = useSelector( |
|
| 46 |
(state: RootState) => state.trackingTool.primaryPathIdx |
|
| 17 |
const path = useSelector( |
|
| 18 |
(state: RootState) => state.trackingTool.displayedPath |
|
| 47 | 19 |
) |
| 20 |
// Color of the path |
|
| 21 |
const pathColor = '#346eeb' |
|
| 48 | 22 |
|
| 49 | 23 |
// List of all active map points |
| 50 | 24 |
const [displayableMapPoints, setDisplayableMapPoints] = useState< |
| 51 | 25 |
MapPoint[] |
| 52 | 26 |
>([]) |
| 53 | 27 |
useEffect(() => {
|
| 28 |
if (!path) {
|
|
| 29 |
setDisplayableMapPoints([]) |
|
| 30 |
return |
|
| 31 |
} |
|
| 32 |
|
|
| 54 | 33 |
// Set all displayable vertices |
| 55 | 34 |
setDisplayableMapPoints( |
| 56 | 35 |
path.filter((mapPoint) => isMapPointDisplayable(mapPoint)) |
| ... | ... | |
| 78 | 57 |
] |
| 79 | 58 |
edges.push( |
| 80 | 59 |
<TextPath |
| 81 |
// Somehow this refuses to work so let it rerender everything ... |
|
| 82 | 60 |
key={`${activeMapPoints[i].id}-${
|
| 83 | 61 |
activeMapPoints[i + 1].id |
| 84 | 62 |
}`} |
| ... | ... | |
| 87 | 65 |
[end.latitude, end.longitude], |
| 88 | 66 |
]} |
| 89 | 67 |
text="►" |
| 90 |
// text=" > > > > " |
|
| 91 | 68 |
attributes={{
|
| 92 | 69 |
'font-size': 19, |
| 93 |
// Set to primaryPathColor if primary index in the tracking tool is equal to this index |
|
| 94 |
fill: |
|
| 95 |
primaryPathIdx === idx |
|
| 96 |
? primaryPathColor |
|
| 97 |
: secondaryPathColor, |
|
| 70 |
fill: pathColor, |
|
| 98 | 71 |
}} |
| 99 |
onClick={() => dispatch(setPrimaryIdx(idx))}
|
|
| 100 | 72 |
repeat |
| 101 | 73 |
center |
| 102 | 74 |
weight={0}
|
| ... | ... | |
| 104 | 76 |
) |
| 105 | 77 |
} |
| 106 | 78 |
setEdges(edges) |
| 107 |
}, [dispatch, displayableMapPoints, idx, primaryPathIdx])
|
|
| 79 |
}, [dispatch, displayableMapPoints]) |
|
| 108 | 80 |
|
| 109 | 81 |
// List of vertices to display |
| 110 | 82 |
const [vertices, setVertices] = useState<JSX.Element[]>([]) |
| ... | ... | |
| 121 | 93 |
mapPoint={item}
|
| 122 | 94 |
updatePositionCallbackFn={(position: LatLngTuple) => {
|
| 123 | 95 |
dispatch( |
| 124 |
updateMapMarkerWithId({
|
|
| 125 |
item: {
|
|
| 126 |
...item, |
|
| 127 |
catalogItem: {
|
|
| 128 |
...item.catalogItem, |
|
| 129 |
latitude: position[0], |
|
| 130 |
longitude: position[1], |
|
| 131 |
}, |
|
| 96 |
updateMapMarker({
|
|
| 97 |
...item, |
|
| 98 |
catalogItem: {
|
|
| 99 |
...item.catalogItem, |
|
| 100 |
latitude: position[0], |
|
| 101 |
longitude: position[1], |
|
| 132 | 102 |
}, |
| 133 |
id: item.id, |
|
| 134 | 103 |
}) |
| 135 | 104 |
) |
| 136 | 105 |
}} |
| ... | ... | |
| 161 | 130 |
dispatch( |
| 162 | 131 |
updateMapMarker({
|
| 163 | 132 |
...item, |
| 164 |
addToPath: !item.addToPath, |
|
| 133 |
addToPath: |
|
| 134 |
!item.addToPath, |
|
| 165 | 135 |
}) |
| 166 | 136 |
) |
| 167 | 137 |
}} |
| ... | ... | |
| 180 | 150 |
</MapMarker> |
| 181 | 151 |
)) |
| 182 | 152 |
) |
| 183 |
}, [dispatch, displayableMapPoints, idx])
|
|
| 153 |
}, [dispatch, displayableMapPoints]) |
|
| 184 | 154 |
|
| 185 | 155 |
return ( |
| 186 | 156 |
<Fragment> |
Také k dispozici: Unified diff
smol refactor
re #9741