diff --git a/frontend/react/src/ui/panels/drawingmenu.tsx b/frontend/react/src/ui/panels/drawingmenu.tsx index b9a6a7e1..3ad03667 100644 --- a/frontend/react/src/ui/panels/drawingmenu.tsx +++ b/frontend/react/src/ui/panels/drawingmenu.tsx @@ -3,7 +3,7 @@ import { Menu } from "./components/menu"; import { FaArrowDown, FaArrowUp, FaChevronRight, FaTrash } from "react-icons/fa"; import { getApp } from "../../olympusapp"; import { OlStateButton } from "../components/olstatebutton"; -import { faDrawPolygon, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; +import { faDrawPolygon, faEye, faEyeSlash, faMapLocation } from "@fortawesome/free-solid-svg-icons"; import { faCircle } from "@fortawesome/free-regular-svg-icons"; import { CoalitionPolygon } from "../../map/coalitionarea/coalitionpolygon"; import { OlCoalitionToggle } from "../components/olcoalitiontoggle"; @@ -37,6 +37,7 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) { const [mainDrawingsContainer, setDrawingsContainer] = useState({ container: null } as { container: null | DCSDrawingsContainer }); const [navpointsContainer, setNavpointsContainer] = useState({ container: null } as { container: null | DCSDrawingsContainer }); const [searchString, setSearchString] = useState(""); + const [navpointSearchString, setNavpointSearchString] = useState(""); useEffect(() => { AppStateChangedEvent.on((state, subState) => { @@ -66,8 +67,8 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) { CoalitionAreasChangedEvent.on((coalitionAreas) => setCoalitionAreas([...coalitionAreas])); }, []); - function renderDrawingsContainerControls(container: DCSDrawingsContainer) { - if (container.hasSearchString(searchString)) { + function renderDrawingsContainerControls(container: DCSDrawingsContainer, containerSearchString: string) { + if (container.hasSearchString(containerSearchString)) { return (
@@ -121,10 +122,12 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) { >
- {openContainers.includes(container) && container.getSubContainers().map((container) => renderDrawingsContainerControls(container))} + {openContainers.includes(container) && + container.getSubContainers().map((container) => renderDrawingsContainerControls(container, containerSearchString))} {openContainers.includes(container) && container.getDrawings().map((drawing, index) => { if (drawing instanceof DCSEmptyLayer) return <>; + if (!drawing.getName().includes(containerSearchString)) return <>; return (
void }) { }} />
{drawing.getName()}
+ { + const latLng = drawing.getLayer()['getLatLng'] && drawing.getLayer()['getLatLng'](); + const bounds = drawing.getLayer()['getBounds'] && drawing.getLayer()['getBounds'](); + latLng && getApp().getMap().setView(latLng, 14); + bounds && getApp().getMap().fitBounds(bounds); + }} + />
); })} @@ -290,8 +306,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) { Mission drawings - setSearchString(search)} text={searchString || ""}> -
{mainDrawingsContainer.container && renderDrawingsContainerControls(mainDrawingsContainer.container)}
+ setSearchString(search)} text={searchString || ""}> +
+ {mainDrawingsContainer.container && renderDrawingsContainerControls(mainDrawingsContainer.container, searchString)} +
@@ -308,8 +326,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) { Navpoints
- {/* setSearchString(search)} text={searchString || ""}> */} -
{navpointsContainer.container && renderDrawingsContainerControls(navpointsContainer.container)}
+ setNavpointSearchString(search)} text={navpointSearchString || ""}> +
+ {navpointsContainer.container && renderDrawingsContainerControls(navpointsContainer.container, navpointSearchString)} +