From 9a769493e43d694149a0f0689e6188f4cd6b3645 Mon Sep 17 00:00:00 2001 From: Friedrich Hartmann <690920+mxfh@users.noreply.github.com> Date: Mon, 25 Nov 2024 13:25:10 +0100 Subject: [PATCH] [wip] topicmap selections feature complete, cesium still has rerender issue, have newSelection/flyto flag --- .../components/GeoportalMap/GeoportalMap.tsx | 74 ++++++++++++------- libraries/appframeworks/portals/src/index.ts | 6 +- .../components/CarmaMapContextProvider.tsx | 20 +---- .../src/lib/components/SelectionProvider.tsx | 18 +++-- .../src/lib/hooks/useSelectionCesium.ts | 47 +++++++++--- .../src/lib/hooks/useSelectionTopicMap.ts | 61 ++++++++------- .../portals/src/lib/utils/carmaHitTrigger.ts | 14 ++-- libraries/commons/utils/src/index.ts | 6 +- .../cesium/src/lib/CustomViewerPlayground.tsx | 3 +- .../lib/hooks/useCameraPitchSoftLimiter.ts | 8 +- .../src/lib/hooks/useCameraRollSoftLimiter.ts | 7 +- .../cesium/src/lib/hooks/useOnSceneChange.ts | 19 +++-- .../cesium/src/lib/utils/hashHelpers.ts | 8 +- libraries/mapping/fuzzy-search/src/index.d.ts | 14 ++-- .../fuzzy-search/src/lib/lib-fuzzy-search.tsx | 17 ++--- 15 files changed, 186 insertions(+), 136 deletions(-) diff --git a/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx b/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx index 582f613bf..7e4a3d8f0 100644 --- a/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx +++ b/apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx @@ -27,6 +27,7 @@ import TopicMapComponent from "react-cismap/topicmaps/TopicMapComponent"; import GazetteerHitDisplay from "react-cismap/GazetteerHitDisplay"; import { ProjSingleGeoJson } from "react-cismap/ProjSingleGeoJson"; import GenericModalApplicationMenu from "react-cismap/topicmaps/menu/ModalApplicationMenu"; +import { TopicMapContext } from "react-cismap/contexts/TopicMapContextProvider"; import { UIDispatchContext } from "react-cismap/contexts/UIContextProvider"; import { @@ -66,7 +67,7 @@ import { useZoomControls as useZoomControlsCesium, setCurrentSceneStyle, } from "@carma-mapping/cesium-engine"; -import { LibFuzzySearch } from "@carma-mapping/fuzzy-search"; +import { LibFuzzySearch, SearchResultItem } from "@carma-mapping/fuzzy-search"; import versionData from "../../../version.json"; @@ -218,15 +219,14 @@ export const GeoportalMap = () => { ) ); - const { topicMapCtx, setShowTourOverlay } = useCarmaMapContext(); - + const { setShowTourOverlay } = useCarmaMapContext(); const { routedMapRef: routedMap, - //realRoutedMapRef: routedMapRef, + realRoutedMapRef: routeMapRef, referenceSystem, referenceSystemDefinition, maskingPolygon, - } = topicMapCtx; + } = useContext(TopicMapContext); const { setAppMenuVisible } = useContext(UIDispatchContext); @@ -258,17 +258,34 @@ export const GeoportalMap = () => { useFeatureInfoModeCursorStyle(); - const { selection, setSelection, overlayFeature, setOverlayFeature } = useSelection(); - useSelectionTopicMap(); - useSelectionCesium(!isMode2d, useMemo(() => ({ - markerAsset, - markerAnchorHeight, - isPrimaryStyle: showPrimaryTileset, - surfaceProviderRef, - terrainProviderRef, - }), - [markerAsset, markerAnchorHeight, showPrimaryTileset, surfaceProviderRef, terrainProviderRef] - )); + const { selection, setSelection, setIsNewSelection, overlayFeature } = + useSelection(); + + useSelectionTopicMap(isMode2d); + useSelectionCesium( + !isMode2d, + useMemo( + () => ({ + markerAsset, + markerAnchorHeight, + isPrimaryStyle: showPrimaryTileset, + surfaceProviderRef, + terrainProviderRef, + }), + [ + markerAsset, + markerAnchorHeight, + showPrimaryTileset, + surfaceProviderRef, + terrainProviderRef, + ] + ) + ); + + const onGazetteerSelection = (selection: SearchResultItem) => { + setSelection(selection); + setIsNewSelection(true); + }; useEffect(() => { let isSame = true; @@ -313,7 +330,6 @@ export const GeoportalMap = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [allow3d]); - const renderInfoBox = () => { if (isMode2d) { if (isModeMeasurement) { @@ -435,8 +451,9 @@ export const GeoportalMap = () => { dataTestId="measurement-control" > Measure @@ -496,11 +513,9 @@ export const GeoportalMap = () => { > @@ -560,10 +575,13 @@ export const GeoportalMap = () => { mapRef={routedMap} /> )} - + !overlayFeature &&{" "} + { + + } {focusMode && } {createCismapLayers(layers, { focusMode, diff --git a/libraries/appframeworks/portals/src/index.ts b/libraries/appframeworks/portals/src/index.ts index d74eafce6..e145b6d80 100644 --- a/libraries/appframeworks/portals/src/index.ts +++ b/libraries/appframeworks/portals/src/index.ts @@ -17,7 +17,9 @@ export { export { GazDataProvider, useGazData } from "./lib/components/GazDataProvider"; -export { SelectionProvider, useSelection } from "./lib/components/SelectionProvider"; +export { + SelectionProvider, + useSelection, +} from "./lib/components/SelectionProvider"; export { useSelectionTopicMap } from "./lib/hooks/useSelectionTopicMap"; export { useSelectionCesium } from "./lib/hooks/useSelectionCesium"; - diff --git a/libraries/appframeworks/portals/src/lib/components/CarmaMapContextProvider.tsx b/libraries/appframeworks/portals/src/lib/components/CarmaMapContextProvider.tsx index 72e949a0d..9053d147a 100644 --- a/libraries/appframeworks/portals/src/lib/components/CarmaMapContextProvider.tsx +++ b/libraries/appframeworks/portals/src/lib/components/CarmaMapContextProvider.tsx @@ -27,8 +27,6 @@ type CarmaMapProviderProps = { }; type CarmaMapContextType = { - topicMapCtx?: typeof TopicMapContext; - cesiumCtx?: CesiumContextType; setShowTourOverlay: Dispatch>; }; @@ -42,23 +40,7 @@ export const useCarmaMapContext = () => { "useCarmaMapContext must be used within a CarmaMapProvider" ); } - const { setShowTourOverlay } = context; - // forward other contexts here if needed - const topicMapContext = useContext(TopicMapContext); - const cesiumContext = useCesiumContext(); - - const combinedContext = useMemo( - () => ({ - setShowTourOverlay, - topicMapCtx: topicMapContext, - cesiumCtx: cesiumContext, - //routedMapRef: topicMapContext.realRoutedMapRef, - //realRoutedMapRef: undefined, - }), - [setShowTourOverlay, topicMapContext, cesiumContext] - ); - - return combinedContext; + return context; }; export const CarmaMapContextProvider = ({ diff --git a/libraries/appframeworks/portals/src/lib/components/SelectionProvider.tsx b/libraries/appframeworks/portals/src/lib/components/SelectionProvider.tsx index 76e2f9c16..29124a1aa 100644 --- a/libraries/appframeworks/portals/src/lib/components/SelectionProvider.tsx +++ b/libraries/appframeworks/portals/src/lib/components/SelectionProvider.tsx @@ -2,30 +2,34 @@ import { Option, SearchResultItem } from "@carma-mapping/fuzzy-search"; import { Feature } from "geojson"; import { createContext, useContext, useState } from "react"; - interface SelectionContextType { selection: SearchResultItem | null; setSelection: (selection: SearchResultItem | null) => void; + isNewSelection: boolean; + setIsNewSelection: (isNewSelection: boolean) => void; overlayFeature: Feature | null; setOverlayFeature: (feature: Feature | null) => void; } -const SelectionContext = createContext(undefined); +const SelectionContext = createContext( + undefined +); interface SelectionProviderProps { children: React.ReactNode; } -export function SelectionProvider({ - children, -}: SelectionProviderProps) { +export function SelectionProvider({ children }: SelectionProviderProps) { //const [gazetteerHit, setGazetteerHit] = useState(null); - const [selection, setSelection] = useState(null); - const [overlayFeature, setOverlayFeature] = useState(null); + const [selection, setSelection] = useState(null); + const [isNewSelection, setIsNewSelection] = useState(false); + const [overlayFeature, setOverlayFeature] = useState(null); const value = { selection, setSelection, + isNewSelection, + setIsNewSelection, overlayFeature, setOverlayFeature, }; diff --git a/libraries/appframeworks/portals/src/lib/hooks/useSelectionCesium.ts b/libraries/appframeworks/portals/src/lib/hooks/useSelectionCesium.ts index 1df612847..6b5a37798 100644 --- a/libraries/appframeworks/portals/src/lib/hooks/useSelectionCesium.ts +++ b/libraries/appframeworks/portals/src/lib/hooks/useSelectionCesium.ts @@ -6,9 +6,10 @@ import { useCesiumContext, } from "@carma-mapping/cesium-engine"; import { Viewer } from "cesium"; -import { MutableRefObject, useEffect, useState } from "react"; +import { MutableRefObject, useEffect, useMemo, useState, useRef } from "react"; import { useSelection } from "../components/SelectionProvider"; import { carmaHitTrigger } from "../utils/carmaHitTrigger"; +import { SearchResultItem } from "../../../../../mapping/fuzzy-search/src/index"; export const SELECTED_POLYGON_ID = "searchgaz-highlight-polygon"; export const INVERTED_SELECTED_POLYGON_ID = "searchgaz-inverted-polygon"; @@ -34,20 +35,34 @@ export const useSelectionCesium = ( cesiumOptions: CesiumOptions ) => { const { viewerRef } = useCesiumContext(); - const { selection, setSelection } = useSelection(); + const { selection, setSelection, isNewSelection, setIsNewSelection } = + useSelection(); const [selectedCesiumEntityData, setSelectedCesiumEntityData] = useState(null); - const options = { - cesiumOptions, - selectedCesiumEntityData, - setSelectedCesiumEntityData, - selectedPolygonId: SELECTED_POLYGON_ID, - invertedSelectedPolygonId: INVERTED_SELECTED_POLYGON_ID, - }; + // Ref to store the previous selection + const previousSelectionRef = useRef(null); useEffect(() => { + // Check if the current selection is the same as the previous one + if (areSelectionsEqual(previousSelectionRef.current, selection)) { + // If same, do not retrigger the effect + return; + } + + // Update the previous selection ref + //previousSelectionRef.current = selection; + + const options = { + cesiumOptions, + flyTo: isNewSelection, + selectedCesiumEntityData, + setSelectedCesiumEntityData, + selectedPolygonId: SELECTED_POLYGON_ID, + invertedSelectedPolygonId: INVERTED_SELECTED_POLYGON_ID, + }; + console.debug("HOOK: useSelectionCesium", selection, isActive); if (selection && isActive) { carmaHitTrigger([selection], [viewerRef], options); @@ -71,5 +86,19 @@ export const useSelectionCesium = ( isActive, cesiumOptions, setSelectedCesiumEntityData, + selectedCesiumEntityData, ]); }; + +// Utility function to compare two selections +const areSelectionsEqual = ( + prevSelection: SearchResultItem | null, + currentSelection: SearchResultItem | null +): boolean => { + // Implement your comparison logic here + // For example, if EntityData has an 'id' field: + if (prevSelection === currentSelection) return true; + if (!prevSelection || !currentSelection) return false; + console.debug("HOOK: areSelectionsEqual", prevSelection, currentSelection); + return prevSelection.more === currentSelection.more; +}; diff --git a/libraries/appframeworks/portals/src/lib/hooks/useSelectionTopicMap.ts b/libraries/appframeworks/portals/src/lib/hooks/useSelectionTopicMap.ts index 1741273ff..c11c316d5 100644 --- a/libraries/appframeworks/portals/src/lib/hooks/useSelectionTopicMap.ts +++ b/libraries/appframeworks/portals/src/lib/hooks/useSelectionTopicMap.ts @@ -1,57 +1,56 @@ -import { MutableRefObject, useEffect, useState } from "react"; +import { useContext, useEffect } from "react"; import { builtInGazetteerHitTrigger } from "react-cismap/tools/gazetteerHelper"; +import { TopicMapContext } from "react-cismap/contexts/TopicMapContextProvider"; import { useSelection } from "../components/SelectionProvider"; -import { useCarmaMapContext } from "../components/CarmaMapContextProvider"; -export const useSelectionTopicMap = () => { - const { selection, setSelection, overlayFeature, setOverlayFeature } = - useSelection(); +export const useSelectionTopicMap = (enable: boolean) => { + const { + selection, + setSelection, + overlayFeature, + setOverlayFeature, + isNewSelection, + setIsNewSelection, + } = useSelection(); + + const topicMapCtx = useContext(TopicMapContext); - const { topicMapCtx } = useCarmaMapContext(); const { - routedMapRef: routedMap, + //routedMapRef: routedMap, realRoutedMapRef: routedMapRef, referenceSystem, referenceSystemDefinition, } = topicMapCtx; + console.debug("topicMapCtx", topicMapCtx); useEffect(() => { - if (!routedMapRef.current || !selection) return; - //const routedMap = routedMapRef.current; + console.debug("HOOK: clear overlay on empty selection", selection); + if (isNewSelection && selection === null) { + setOverlayFeature(null); + } + }, [isNewSelection, selection, setOverlayFeature]); - console.debug( - "HOOK: useSelectionTopicMap selection", - selection, - routedMapRef - ); - if (selection.type === "bezirke" || selection.type === "quartiere") { - console.debug("selection is area"); - //setOverlayFeature(selection); - /* - routedMap && builtInGazetteerHitTrigger( - [selection], - routedMapRef, - referenceSystem, - referenceSystemDefinition, - setSelection, - setOverlayFeature - ); - */ - } else { + useEffect(() => { + console.debug("HOOK: useSelectionTopicMap selection LEAFLET", selection); + if (selection && isNewSelection && enable) { + const { leafletElement } = routedMapRef.current?.leafletMap; builtInGazetteerHitTrigger( - selection, - routedMapRef, + [selection], + leafletElement, referenceSystem, referenceSystemDefinition, setSelection, setOverlayFeature ); + setIsNewSelection(false); } - return () => console.info("unmounting useSelectionTopicMap"); }, [ + isNewSelection, + setIsNewSelection, + enable, selection, routedMapRef, referenceSystem, diff --git a/libraries/appframeworks/portals/src/lib/utils/carmaHitTrigger.ts b/libraries/appframeworks/portals/src/lib/utils/carmaHitTrigger.ts index 2a285e52d..7d7310029 100644 --- a/libraries/appframeworks/portals/src/lib/utils/carmaHitTrigger.ts +++ b/libraries/appframeworks/portals/src/lib/utils/carmaHitTrigger.ts @@ -172,6 +172,7 @@ const getRingInWGS84 = ( .map((coord) => PROJ4_CONVERTERS.CRS4326.forward(refSystem.inverse(coord))); export type GazetteerOptions = { + flyTo?: boolean; setGazetteerHit?: (hit: any) => void; setOverlayFeature?: (feature: any) => void; furtherGazeteerHitTrigger?: (hit: any) => void; @@ -187,6 +188,7 @@ export type GazetteerOptions = { }; const defaultGazetteerOptions = { + flyTo: true, referenceSystem: undefined, referenceSystemDefinition: PROJ4_CONVERTERS.CRS25832, suppressMarker: false, @@ -199,6 +201,7 @@ export const carmaHitTrigger = ( ) => { if (hit !== undefined && hit.length !== undefined && hit.length > 0) { const { + flyTo, setGazetteerHit, setOverlayFeature, furtherGazeteerHitTrigger, @@ -333,7 +336,7 @@ export const carmaHitTrigger = ( scene.groundPrimitives.add(invertedGroundPrimitive); viewer.entities.add(polygonEntity); //viewer.entities.add(invertedPolygonEntity); - viewer.flyTo(polygonEntity); + flyTo && viewer.flyTo(polygonEntity); } else if (defined(groundPosition)) { const updateMarkerPosition = async () => { const anchorHeightOffset = @@ -368,10 +371,11 @@ export const carmaHitTrigger = ( if (cesiumOptions.markerAsset) { updateMarkerPosition(); } - cAction.lookAt(viewer, groundPosition, zoom, cesiumOptions, { - //onComplete: delayedMarker, - durationFactor: 0.2, - }); + flyTo && + cAction.lookAt(viewer, groundPosition, zoom, cesiumOptions, { + //onComplete: delayedMarker, + durationFactor: 0.2, + }); console.debug( "GAZETTEER: [2D3D|CESIUM|CAMERA] look at Marker (Terrain Elevation)" ); diff --git a/libraries/commons/utils/src/index.ts b/libraries/commons/utils/src/index.ts index 784aa33c5..8216f6eca 100644 --- a/libraries/commons/utils/src/index.ts +++ b/libraries/commons/utils/src/index.ts @@ -4,7 +4,11 @@ export { type CarmaConfig, extractCarmaConfig } from "./lib/carmaConfig"; export { getGazData, type GazDataItem, type SourceConfig } from "./lib/gazData"; -export { PROJ4_CONVERTERS, isProj4Converter, convertBBox2Bounds } from "./lib/proj4helpers"; +export { + PROJ4_CONVERTERS, + isProj4Converter, + convertBBox2Bounds, +} from "./lib/proj4helpers"; export { generateRandomString } from "./lib/strings"; diff --git a/libraries/mapping/engines/cesium/src/lib/CustomViewerPlayground.tsx b/libraries/mapping/engines/cesium/src/lib/CustomViewerPlayground.tsx index 9dd4db3ec..a6d199220 100644 --- a/libraries/mapping/engines/cesium/src/lib/CustomViewerPlayground.tsx +++ b/libraries/mapping/engines/cesium/src/lib/CustomViewerPlayground.tsx @@ -305,7 +305,8 @@ export function CustomViewerPlayground(props: CustomViewerProps) { "HOOK: update Hash, route or style changed", isSecondaryStyle ); - onSceneChange && onSceneChange(encodeScene(viewer.scene, { isSecondaryStyle })); + onSceneChange && + onSceneChange(encodeScene(viewer.scene, { isSecondaryStyle })); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [viewerRef, location.pathname, isSecondaryStyle]); diff --git a/libraries/mapping/engines/cesium/src/lib/hooks/useCameraPitchSoftLimiter.ts b/libraries/mapping/engines/cesium/src/lib/hooks/useCameraPitchSoftLimiter.ts index 0e207ee19..4201a1544 100644 --- a/libraries/mapping/engines/cesium/src/lib/hooks/useCameraPitchSoftLimiter.ts +++ b/libraries/mapping/engines/cesium/src/lib/hooks/useCameraPitchSoftLimiter.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { BoundingSphere, Cartesian3, Math as CesiumMath } from "cesium"; +import { useCesiumViewer } from "./useCesiumViewer"; import { selectScreenSpaceCameraControllerEnableCollisionDetection, selectViewerIsMode2d, @@ -9,7 +10,6 @@ import { clearIsAnimating, } from "../slices/cesium"; import { pickViewerCanvasCenter } from "../utils/cesiumHelpers"; -import { useCesiumContext } from "./useCesiumContext"; const useCameraPitchSoftLimiter = ( options: { @@ -23,8 +23,7 @@ const useCameraPitchSoftLimiter = ( const minPitchDeg = options.minPitchDeg || 22; const resetPitchOffsetDeg = options.resetPitchOffsetDeg || 8; - const { viewerRef } = useCesiumContext(); - + const viewer = useCesiumViewer(); const dispatch = useDispatch(); const isMode2d = useSelector(selectViewerIsMode2d); const collisions = useSelector( @@ -37,7 +36,6 @@ const useCameraPitchSoftLimiter = ( ); useEffect(() => { - const viewer = viewerRef.current; if (viewer && !isMode2d && collisions && pitchLimiter) { console.debug( "HOOK [2D3D|CESIUM] viewer changed add new Cesium MoveEnd Listener to correct camera pitch" @@ -91,7 +89,7 @@ const useCameraPitchSoftLimiter = ( }; } }, [ - viewerRef, + viewer, collisions, isMode2d, pitchLimiter, diff --git a/libraries/mapping/engines/cesium/src/lib/hooks/useCameraRollSoftLimiter.ts b/libraries/mapping/engines/cesium/src/lib/hooks/useCameraRollSoftLimiter.ts index af9b62b7c..db872046d 100644 --- a/libraries/mapping/engines/cesium/src/lib/hooks/useCameraRollSoftLimiter.ts +++ b/libraries/mapping/engines/cesium/src/lib/hooks/useCameraRollSoftLimiter.ts @@ -7,12 +7,12 @@ import { selectViewerIsMode2d, setIsAnimating, } from "../slices/cesium"; -import { useCesiumContext } from "./useCesiumContext"; +import { useCesiumViewer } from "./useCesiumViewer"; const useCameraRollSoftLimiter = ({ pitchLimiter = true, }: { pitchLimiter?: boolean } = {}) => { - const { viewerRef } = useCesiumContext(); + const viewer = useCesiumViewer(); const dispatch = useDispatch(); const isMode2d = useSelector(selectViewerIsMode2d); @@ -22,7 +22,6 @@ const useCameraRollSoftLimiter = ({ ); useEffect(() => { - const viewer = viewerRef.current; if (viewer && pitchLimiter) { console.debug( "HOOK [2D3D|CESIUM] viewer changed add new Cesium MoveEnd Listener to reset rolled camera" @@ -58,7 +57,7 @@ const useCameraRollSoftLimiter = ({ viewer.camera.moveEnd.removeEventListener(moveEndListener); }; } - }, [viewerRef, isMode2d, pitchLimiter, onComplete, dispatch]); + }, [viewer, isMode2d, pitchLimiter, onComplete, dispatch]); }; export default useCameraRollSoftLimiter; diff --git a/libraries/mapping/engines/cesium/src/lib/hooks/useOnSceneChange.ts b/libraries/mapping/engines/cesium/src/lib/hooks/useOnSceneChange.ts index bb838d47d..9d6232bd0 100644 --- a/libraries/mapping/engines/cesium/src/lib/hooks/useOnSceneChange.ts +++ b/libraries/mapping/engines/cesium/src/lib/hooks/useOnSceneChange.ts @@ -32,7 +32,10 @@ export const useOnSceneChange = ( isSecondaryStyle ); - const encodedScene = encodeScene(viewer.scene, { isSecondaryStyle, isMode2d }); + const encodedScene = encodeScene(viewer.scene, { + isSecondaryStyle, + isMode2d, + }); if (onSceneChange) { onSceneChange(encodedScene); @@ -59,10 +62,12 @@ export const useOnSceneChange = ( isSecondaryStyle, camDeg ); - const encodedScene = viewer.scene && encodeScene(viewer.scene, { - isSecondaryStyle, - isMode2d, - }); + const encodedScene = + viewer.scene && + encodeScene(viewer.scene, { + isSecondaryStyle, + isMode2d, + }); if (onSceneChange) { onSceneChange(encodedScene); } else { @@ -72,7 +77,9 @@ export const useOnSceneChange = ( }; viewer.scene.camera.moveEnd.addEventListener(moveEndListener); return () => { - viewer && viewer.scene && viewer.scene.camera.moveEnd.removeEventListener(moveEndListener); + viewer && + viewer.scene && + viewer.scene.camera.moveEnd.removeEventListener(moveEndListener); }; } }, [viewerRef, isSecondaryStyle, isMode2d, onSceneChange]); diff --git a/libraries/mapping/engines/cesium/src/lib/utils/hashHelpers.ts b/libraries/mapping/engines/cesium/src/lib/utils/hashHelpers.ts index 7958195bf..4434e3f6a 100644 --- a/libraries/mapping/engines/cesium/src/lib/utils/hashHelpers.ts +++ b/libraries/mapping/engines/cesium/src/lib/utils/hashHelpers.ts @@ -1,4 +1,10 @@ -import { Cartesian3, Cartographic, Viewer, Math as CesiumMath, Scene } from "cesium"; +import { + Cartesian3, + Cartographic, + Viewer, + Math as CesiumMath, + Scene, +} from "cesium"; import { AppState, EncodedSceneParams, diff --git a/libraries/mapping/fuzzy-search/src/index.d.ts b/libraries/mapping/fuzzy-search/src/index.d.ts index e6e8e23b4..c4be07e4c 100644 --- a/libraries/mapping/fuzzy-search/src/index.d.ts +++ b/libraries/mapping/fuzzy-search/src/index.d.ts @@ -1,10 +1,10 @@ +import { GazDataItem } from "@carma-commons/utils"; + export type SearchGazetteerProps = { - gazData?: any; - setGazetteerHit: (hit: any) => void; - gazetteerHit: any; - setOverlayFeature: (feature: any) => void; - referenceSystem: any; - referenceSystemDefinition: any; + gazData?: GazDataItem[]; + onSelection: (hit: SearchResultItem | null) => void; + //referenceSystem: undefined; + //referenceSystemDefinition: undefined; stopwords?: string[]; pixelwidth?: number; ifShowCategories?: boolean; @@ -47,6 +47,6 @@ export type SearchConfig = { ifShowScore?: boolean; limit?: number; cut?: number; - distance?: number; + distance?: number; // in CRS units threshold?: number; }; diff --git a/libraries/mapping/fuzzy-search/src/lib/lib-fuzzy-search.tsx b/libraries/mapping/fuzzy-search/src/lib/lib-fuzzy-search.tsx index 5d0bec21b..0a965c5f9 100644 --- a/libraries/mapping/fuzzy-search/src/lib/lib-fuzzy-search.tsx +++ b/libraries/mapping/fuzzy-search/src/lib/lib-fuzzy-search.tsx @@ -33,10 +33,9 @@ interface FuseWithOption extends Fuse { export function LibFuzzySearch({ gazData, - setGazetteerHit, - setOverlayFeature, - referenceSystem, - referenceSystemDefinition, + onSelection, + //referenceSystem, + //referenceSystemDefinition, stopwords = stopwordsDe, pixelwidth = 300, ifShowCategories: standardSearch = false, @@ -113,8 +112,7 @@ export function LibFuzzySearch({ const handleOnSelect = (option) => { setCleanBtnDisable(false); console.info("[SEARCH] selected option", option); - - setGazetteerHit(option.sData); + onSelection(option.sData); }; useEffect(() => { @@ -194,14 +192,13 @@ export function LibFuzzySearch({ } }, [dropdownContainerRef, options, fireScrollEvent, value]); - const handleOnClickClean = () => { + const handleOnClickClear = () => { { - setGazetteerHit(null); setValue(""); setOptions([]); setSearchResult([]); - setOverlayFeature(null); setCleanBtnDisable(true); + onSelection(null); } }; @@ -232,7 +229,7 @@ export function LibFuzzySearch({ ? "clear-fuzzy-button clear-fuzzy-button__active" : "clear-fuzzy-button clear-fuzzy-button__active" } - onClick={handleOnClickClean} + onClick={handleOnClickClear} disabled={cleanBtnDisable} /> {!showCategories ? (