This commit is contained in:
nocnico
2025-04-21 03:18:53 +02:00
4 changed files with 15 additions and 5 deletions

View File

@@ -2,7 +2,7 @@ import { cn } from "helpers/cn";
import { RefAttributes, useEffect, useImperativeHandle } from "react"; import { RefAttributes, useEffect, useImperativeHandle } from "react";
import { createContext, Ref, useContext, useState } from "react"; import { createContext, Ref, useContext, useState } from "react";
import { Popup, PopupProps, useMap } from "react-leaflet"; import { Popup, PopupProps, useMap } from "react-leaflet";
import { Popup as LPopup } from "leaflet"; import { Popup as LPopup, popup } from "leaflet";
const PopupContext = createContext({ const PopupContext = createContext({
anchor: "topleft", anchor: "topleft",
@@ -97,6 +97,7 @@ export const SmartPopup = (
wrapperClassName?: string; wrapperClassName?: string;
}, },
) => { ) => {
const [showContent, setShowContent] = useState(false);
const { smartPopupRef, id, className, wrapperClassName } = props; const { smartPopupRef, id, className, wrapperClassName } = props;
const [anchor, setAnchor] = useState< const [anchor, setAnchor] = useState<
@@ -115,7 +116,10 @@ export const SmartPopup = (
const map = useMap(); const map = useMap();
useEffect(() => { useEffect(() => {
setTimeout(handleConflict, 50); setTimeout(() => {
handleConflict();
setShowContent(true);
}, 50); // wait for marker to be positioned by leaflet, then check for conflicts, for now no better solution
map.on("zoom", handleConflict); map.on("zoom", handleConflict);
return () => { return () => {
@@ -124,12 +128,13 @@ export const SmartPopup = (
}, [map, anchor]); }, [map, anchor]);
return ( return (
<Popup {...props} className={cn("relative", wrapperClassName)}> <Popup {...props} className={cn("relative", wrapperClassName)} interactive>
<div <div
className={cn( className={cn(
"pointer-events-auto bg-base-100 relative", "pointer-events-auto bg-base-100 relative",
anchor.includes("right") && "-translate-x-full", anchor.includes("right") && "-translate-x-full",
anchor.includes("bottom") && "-translate-y-full", anchor.includes("bottom") && "-translate-y-full",
!showContent && "opacity-0 pointer-events-none",
className, className,
)} )}
> >

View File

@@ -12,7 +12,12 @@ export default ({}) => {
const { map } = useMapStore(); const { map } = useMapStore();
return ( return (
<MapContainer className="flex-1" center={map.center} zoom={map.zoom}> <MapContainer
className="flex-1"
center={map.center}
zoom={map.zoom}
fadeAnimation={false}
>
<BaseMaps /> <BaseMaps />
<SearchElements /> <SearchElements />
<ContextMenu /> <ContextMenu />

View File

@@ -75,7 +75,7 @@ export const ListInput = <T extends FieldValues>({
field.onChange(value); field.onChange(value);
}} }}
> >
Remove Entfernen
</button> </button>
</div> </div>
))} ))}

Binary file not shown.