Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo
This commit is contained in:
@@ -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,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|||||||
@@ -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.
Reference in New Issue
Block a user