fix(stellungnahme): Mini-Map mobile square + Gebiet zentriert (fitBoundsPadding-Prop)
This commit is contained in:
@@ -12,6 +12,7 @@
|
|||||||
hiddenStatuses = [],
|
hiddenStatuses = [],
|
||||||
hiddenRings = [],
|
hiddenRings = [],
|
||||||
fitBoundsMaxZoom = 11,
|
fitBoundsMaxZoom = 11,
|
||||||
|
fitBoundsPadding = null,
|
||||||
}: {
|
}: {
|
||||||
areas: WindArea[];
|
areas: WindArea[];
|
||||||
onselect: (area: WindArea | null, center: [number, number] | null) => void;
|
onselect: (area: WindArea | null, center: [number, number] | null) => void;
|
||||||
@@ -20,6 +21,10 @@
|
|||||||
hiddenStatuses?: string[];
|
hiddenStatuses?: string[];
|
||||||
hiddenRings?: string[];
|
hiddenRings?: string[];
|
||||||
fitBoundsMaxZoom?: number;
|
fitBoundsMaxZoom?: number;
|
||||||
|
/** Wenn gesetzt: symmetrisches [x,y]-Padding für fitBounds (z.B. Mini-Map
|
||||||
|
* ohne Panel). Default null = panel-aware Padding (großer Bottom-/Side-
|
||||||
|
* Bereich für Detail-Drawer in der vollwertigen Karte). */
|
||||||
|
fitBoundsPadding?: [number, number] | null;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
const t = useTranslate();
|
const t = useTranslate();
|
||||||
@@ -166,9 +171,18 @@
|
|||||||
|
|
||||||
if (zoom && prev !== name) {
|
if (zoom && prev !== name) {
|
||||||
const desktop = window.innerWidth >= 640;
|
const desktop = window.innerWidth >= 640;
|
||||||
|
const pad: { paddingTopLeft: [number, number]; paddingBottomRight: [number, number] } =
|
||||||
|
fitBoundsPadding
|
||||||
|
? {
|
||||||
|
paddingTopLeft: fitBoundsPadding,
|
||||||
|
paddingBottomRight: fitBoundsPadding,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
paddingTopLeft: [40, 40],
|
||||||
|
paddingBottomRight: [desktop ? 320 : 40, desktop ? 40 : 300],
|
||||||
|
};
|
||||||
map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), {
|
map!.fitBounds((layer as import("leaflet").Polygon).getBounds(), {
|
||||||
paddingTopLeft: [40, 40],
|
...pad,
|
||||||
paddingBottomRight: [desktop ? 320 : 40, desktop ? 40 : 300],
|
|
||||||
maxZoom: fitBoundsMaxZoom,
|
maxZoom: fitBoundsMaxZoom,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -616,7 +616,7 @@ ${"=".repeat(64)}`;
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mini-map -->
|
<!-- Mini-map -->
|
||||||
{#if browser && MapComponent && mapReady && mapAreaData.length > 0}
|
{#if browser && MapComponent && mapReady && mapAreaData.length > 0}
|
||||||
<div class="relative mb-6 aspect-square overflow-hidden rounded-xl border border-stein-200 shadow-sm sm:aspect-auto sm:h-80">
|
<div class="relative mb-6 aspect-square overflow-hidden rounded-xl border border-stein-200 shadow-sm sm:aspect-auto sm:h-80">
|
||||||
{#await MapComponent then Map}
|
{#await MapComponent then Map}
|
||||||
<Map
|
<Map
|
||||||
@@ -624,6 +624,7 @@ ${"=".repeat(64)}`;
|
|||||||
initialGebietsNr={windArea.gebiets_nr}
|
initialGebietsNr={windArea.gebiets_nr}
|
||||||
hiddenStatuses={[]}
|
hiddenStatuses={[]}
|
||||||
hiddenRings={["2km","5km"]}
|
hiddenRings={["2km","5km"]}
|
||||||
|
fitBoundsMaxZoom={13}
|
||||||
fitBoundsPadding={[20, 20]}
|
fitBoundsPadding={[20, 20]}
|
||||||
onselect={() => {}}
|
onselect={() => {}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user