@mapsight/ui 7.0.0

package/src/js/components/main-panel/index.tsx

@@ -0,0 +1,46 @@
+import type {ReactNode} from "react";
+import {useRef} from "react";
+
+import FeatureList from "../feature-list";
+import FeatureSelectionInfo from "../feature-selection-info";
+import {useMainPanelContext} from "./context";
+
+function MainPanel() {
+	const {contentType, panelPosition, collapsed, feature} =
+		useMainPanelContext();
+
+	// we keep using the old content stored in contentRef.current if we do not have any new content
+	// to allow for a smooth transition when collapsing the container
+	const contentRef = useRef<ReactNode>(null);
+	const isShowingSelectionInfoRef = useRef(false);
+
+	if (contentType) {
+		isShowingSelectionInfoRef.current = contentType === "selectionInfo";
+		contentRef.current = (
+			<>
+				<FeatureList enableKeyboardControl={!collapsed} />
+
+				{isShowingSelectionInfoRef.current && (
+					<FeatureSelectionInfo
+						feature={feature}
+						enableKeyboardControl={!collapsed}
+					/>
+				)}
+			</>
+		);
+	}
+
+	return (
+		<div
+			className={`ms3-panel ms3-panel--docked-${panelPosition} ${
+				collapsed ? "ms3-panel--empty" : ""
+			} ${
+				isShowingSelectionInfoRef.current ? "ms3-panel--hide-list" : ""
+			}`}
+		>
+			<div className="ms3-panel__inner">{contentRef.current}</div>
+		</div>
+	);
+}
+
+export default MainPanel;

package/src/js/components/main-panel/list-toggle-button.jsx

@@ -0,0 +1,43 @@
+import {useCallback} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {translate} from "../../helpers/i18n";
+import {toggleUserPreferenceListVisible} from "../../store/actions.ts";
+
+import {userPreferenceListVisibleSelector} from "../../store/selectors.ts";
+
+import {useMainPanelContext} from "./context";
+
+function MainPanelListToggleButton() {
+	const {collapsible, contentType} = useMainPanelContext();
+	const dispatch = useDispatch();
+	const active = useSelector(userPreferenceListVisibleSelector);
+	const handleClick = useCallback(() => {
+		dispatch(toggleUserPreferenceListVisible());
+	}, [dispatch]);
+
+	if (collapsible && contentType === "list") {
+		return (
+			<button
+				className={`ms3-button [ ms3-list-toggle-button ${
+					active ? "ms3-list-toggle-button--active" : ""
+				} ]`}
+				type="button"
+				role="switch"
+				aria-checked={active}
+				onClick={handleClick}
+			>
+				<span className="ms3-visuallyhidden">
+					{translate(
+						active
+							? "ui.main-panel.list-toggle.close"
+							: "ui.main-panel.list-toggle.open",
+					)}
+				</span>
+			</button>
+		);
+	}
+
+	return null;
+}
+
+export default MainPanelListToggleButton;

package/src/js/components/map-overlay/area.jsx

@@ -0,0 +1,17 @@
+/**
+ * @param {object} props props
+ * @param {"top-left" | "top-right" | "bottom-right" | "bottom-left"} props.position position
+ * @param {React.ReactChildren} props.children children
+ * @returns {React.ReactElement} element
+ */
+function MapOverlayArea({position, children}) {
+	return (
+		<div
+			className={`ms3-map-overlay__area ms3-map-overlay__area--${position}`}
+		>
+			{children}
+		</div>
+	);
+}
+
+export default MapOverlayArea;

package/src/js/components/map-overlay/attribution-entries.tsx

@@ -0,0 +1,33 @@
+import {memo} from "react";
+
+import type {LayerAttributions} from "@mapsight/core/lib/map/selectors";
+
+function AttributionEntries({
+	children,
+	attributions,
+}: {
+	children?: React.ReactNode;
+	attributions?: LayerAttributions;
+}) {
+	return (
+		<div className="ms3-attribution">
+			<ul className="ms3-attribution__entries">
+				{attributions &&
+					Object.entries(attributions).map(([key, attr]) => (
+						<li
+							className="ms3-attribution__entry"
+							key={key}
+							dangerouslySetInnerHTML={{__html: attr}}
+						/>
+					))}
+				{children && (
+					<li className="ms3-attribution__entry ms3-attribution__entry--additional">
+						{children}
+					</li>
+				)}
+			</ul>
+		</div>
+	);
+}
+
+export default memo(AttributionEntries);

package/src/js/components/map-overlay/attribution.tsx

@@ -0,0 +1,25 @@
+import type {PropsWithChildren} from "react";
+import {useSelector} from "react-redux";
+
+import {visibleLayerAttributionsSelector} from "@mapsight/core/lib/map/selectors";
+import type {MapState} from "@mapsight/core/lib/map/types";
+import type {State} from "@mapsight/core/types";
+
+import {MAP} from "../../config/constants/controllers";
+import AttributionEntries from "./attribution-entries";
+
+function selectVisibleLayerAttributions(state: State) {
+	return visibleLayerAttributionsSelector(state[MAP] as MapState);
+}
+
+function Attribution({children}: PropsWithChildren) {
+	const attributions = useSelector(selectVisibleLayerAttributions);
+
+	return (
+		<AttributionEntries attributions={attributions}>
+			{children}
+		</AttributionEntries>
+	);
+}
+
+export default Attribution;

package/src/js/components/map-overlay/combined-buttons.jsx

@@ -0,0 +1,5 @@
+function CombinedButtons({children}) {
+	return <div className="ms3-map-overlay-combined-buttons">{children}</div>;
+}
+
+export default CombinedButtons;

package/src/js/components/map-overlay/index.jsx

@@ -0,0 +1,5 @@
+function MapOverlay({children}) {
+	return <div className="ms3-map-overlay">{children}</div>;
+}
+
+export default MapOverlay;

package/src/js/components/map-overlay/info-overlay-left.jsx

@@ -0,0 +1,51 @@
+import {memo, useCallback} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {translate} from "../../helpers/i18n";
+
+import {setOverlayModalVisible} from "../../store/actions.ts";
+
+import {
+	isOverlayModalVisibleSelector,
+	isViewMobileOrMapOnlySelector,
+} from "../../store/selectors.ts";
+
+import Logo from "./logo";
+
+function InfoOverlayLeft() {
+	const dispatch = useDispatch();
+
+	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
+	const isOverlayModalVisible = useSelector(isOverlayModalVisibleSelector);
+
+	const expand = useCallback(() => {
+		dispatch(setOverlayModalVisible(true));
+	}, [dispatch]);
+
+	return (
+		<div className="ms3-info-overlay__area ms3-info-overlay__area--left">
+			{/* we are already handling breakpoints in css, but im keeping this condition,
+			cause of unknown invariants in regard to *isMobileOrMapOnly* & css */}
+			{!isMobileOrMapOnly && (
+				<div className="ms3-info-overlay__logo ms3-info-overlay__desktop-content">
+					<Logo />
+				</div>
+			)}
+
+			<div className="ms3-info-overlay__mobile-content">
+				<button
+					type="button"
+					className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--info"
+					aria-expanded={isOverlayModalVisible}
+					onClick={expand}
+				>
+					<span className="ms3-map-overlay__button__label">
+						{translate("ui.map-overlay.info.open")}
+					</span>
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default memo(InfoOverlayLeft);

package/src/js/components/map-overlay/info-overlay-modal.tsx

@@ -0,0 +1,49 @@
+import type {PropsWithChildren} from "react";
+import {memo, useCallback, useEffect} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {translate} from "../../helpers/i18n";
+import {setOverlayModalVisible} from "../../store/actions";
+import {
+	isOverlayModalVisibleSelector,
+	isViewMobileOrMapOnlySelector,
+} from "../../store/selectors";
+import Modal from "../modal";
+
+const InfoOverlayModal = memo(InfoOverlayModel_);
+
+function InfoOverlayModel_({children}: PropsWithChildren) {
+	const dispatch = useDispatch();
+
+	const isExpanded = useSelector(isOverlayModalVisibleSelector);
+	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
+
+	// close modals on view-switch to something else than mobile
+	useEffect(() => {
+		if (!isMobileOrMapOnly) {
+			dispatch(setOverlayModalVisible(false));
+		}
+	}, [dispatch, isMobileOrMapOnly]);
+
+	const collapse = useCallback(() => {
+		dispatch(setOverlayModalVisible(false));
+	}, [dispatch]);
+
+	return (
+		<Modal
+			isOpen={isExpanded}
+			contentLabel={translate("ui.map-overlay.info.modal.label")}
+			closeLabel={
+				isMobileOrMapOnly
+					? translate("ui.map-overlay.info.closeSources")
+					: translate("ui.map-overlay.info.closeLegend")
+			}
+			headline={translate("ui.map-overlay.info.modal.headline")}
+			onRequestClose={collapse}
+		>
+			{children}
+		</Modal>
+	);
+}
+
+export default InfoOverlayModal;

package/src/js/components/map-overlay/info-overlay-right.jsx

@@ -0,0 +1,46 @@
+import {
+	reduceLayersToLegends,
+	visibleLayersWithLegendsSelector,
+} from "@mapsight/core/lib/map/selectors";
+import {memo, useCallback} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {createSelector} from "reselect";
+
+import {MAP} from "../../config/constants/controllers";
+
+import {translate} from "../../helpers/i18n";
+import {setOverlayModalVisible} from "../../store/actions.ts";
+
+import Attribution from "./attribution";
+
+const legendsSelector = createSelector(
+	(state) => visibleLayersWithLegendsSelector(state[MAP]),
+	// we need to run this as well, cause it's filtering stuff
+	reduceLayersToLegends,
+);
+
+function InfoOverlayRight() {
+	const dispatch = useDispatch();
+
+	const legends = useSelector(legendsSelector);
+
+	const expand = useCallback(() => {
+		dispatch(setOverlayModalVisible(true));
+	}, [dispatch]);
+
+	const hasLegend = Object.keys(legends).length > 0;
+
+	return (
+		<div className="ms3-info-overlay__desktop-content ms3-info-overlay__area ms3-info-overlay__area--right">
+			<Attribution>
+				{hasLegend && (
+					<button type="button" onClick={expand}>
+						{translate("ui.map-overlay.info.legend")}
+					</button>
+				)}
+			</Attribution>
+		</div>
+	);
+}
+
+export default memo(InfoOverlayRight);

package/src/js/components/map-overlay/layer-switcher-overlay.tsx

@@ -0,0 +1,100 @@
+import {memo, useCallback, useState} from "react";
+import {useSelector} from "react-redux";
+
+import {FocusTrap} from "focus-trap-react";
+
+import {translate} from "../../helpers/i18n";
+import {isViewMobileOrMapOnlySelector} from "../../store/selectors";
+import LayerSwitcher from "../layer-switcher";
+import Modal from "../modal";
+
+const LayerSwitcherContent = memo(function LayerSwitcherContent({
+	isExpanded,
+	closeSearch,
+}: {
+	isExpanded: boolean;
+	closeSearch: () => void;
+}) {
+	const isMobileOrMapOnly = useSelector(isViewMobileOrMapOnlySelector);
+
+	if (isMobileOrMapOnly) {
+		return (
+			<Modal
+				isOpen={isExpanded}
+				contentLabel={translate(
+					"ui.map-overlay.layer-switcher.modal.label",
+				)}
+				closeLabel={translate(
+					"ui.map-overlay.layer-switcher.closeLayers",
+				)}
+				headline={translate("ui.map-overlay.layer-switcher.layers")}
+				onRequestClose={closeSearch}
+			>
+				<LayerSwitcher onClose={closeSearch} />
+			</Modal>
+		);
+	}
+
+	if (isExpanded) {
+		return (
+			<FocusTrap
+				focusTrapOptions={{
+					clickOutsideDeactivates: true,
+					onDeactivate: closeSearch,
+				}}
+			>
+				<div>
+					<LayerSwitcher onClose={closeSearch} />
+				</div>
+			</FocusTrap>
+		);
+	}
+
+	return <div className="ms3-layer-switcher-placeholder" />;
+});
+
+function LayerSwitcherOverlay() {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	const handleOpen = useCallback(() => setIsExpanded(true), []);
+	const handleClose = useCallback(() => setIsExpanded(false), []);
+
+	return (
+		<div
+			className={`ms3-layer-switcher-overlay ${
+				isExpanded ? "ms3-layer-switcher-overlay--expanded" : ""
+			}`}
+		>
+			<button
+				type="button"
+				className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--layers"
+				onClick={handleOpen}
+				aria-expanded={isExpanded}
+			>
+				<span className="ms3-map-overlay__button__label">
+					<span aria-hidden="true">
+						{translate("ui.map-overlay.layer-switcher.layers")}
+					</span>
+
+					<span className="ms3-visuallyhidden">
+						{isExpanded &&
+							translate(
+								"ui.map-overlay.layer-switcher.closeLayers",
+							)}
+						{!isExpanded &&
+							translate(
+								"ui.map-overlay.layer-switcher.openLayers",
+							)}
+					</span>
+				</span>
+			</button>
+
+			<LayerSwitcherContent
+				isExpanded={isExpanded}
+				closeSearch={handleClose}
+			/>
+		</div>
+	);
+}
+
+export default memo(LayerSwitcherOverlay);

package/src/js/components/map-overlay/legend.tsx

@@ -0,0 +1,22 @@
+import {useSelector} from "react-redux";
+
+import {createSelector} from "reselect";
+
+import {
+	reduceLayersToLegends,
+	visibleLayersWithLegendsSelector,
+} from "@mapsight/core/lib/map/selectors";
+
+import {MAP} from "../../config/constants/controllers";
+import AttributionEntries from "./attribution-entries";
+
+// die anzuzeigenden Legenden hier selbst berechnen zusammen mit den css-Namen
+const legendsSelector = createSelector(
+	(state) => visibleLayersWithLegendsSelector(state[MAP]),
+	reduceLayersToLegends,
+);
+
+export default function Legend() {
+	const legends = useSelector(legendsSelector);
+	return <AttributionEntries attributions={legends} />;
+}

package/src/js/components/map-overlay/logo.jsx

@@ -0,0 +1,11 @@
+import {translate} from "../../helpers/i18n";
+
+export default function MapOverlayLogo() {
+	return (
+		<div className="ms3-logo">
+			<span className="ms3-visuallyhidden">
+				{translate("ui.map-overlay.logo.copyright")}
+			</span>
+		</div>
+	);
+}

package/src/js/components/map-overlay/measure-distance-button.tsx

@@ -0,0 +1,116 @@
+import {Fragment, useCallback, useEffect, useMemo} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {createSelector} from "reselect";
+
+import {removeAllFeatures} from "@mapsight/core/lib/feature-sources/actions";
+import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";
+
+import {FEATURE_SOURCES, MAP} from "../../config/constants/controllers";
+import {translate} from "../../helpers/i18n";
+import useControllableState from "../../hooks/useControllableState";
+import {
+	createActivateAction,
+	createDeactivateAction,
+} from "../../plugins/common/measure-distance";
+import MeasureDistanceInfo from "./measure-distance-overlay";
+import ToolOverlay from "./tool-overlay";
+
+/*
+ TODO: aria? abort on escape key press?
+ */
+type MeasureDistanceButtonProps = {
+	pluginName?: string;
+	opened?: boolean;
+	onOpenedChange?: (opened: boolean) => void;
+};
+
+const MeasureDistanceButton = ({
+	pluginName = "measureDistance",
+	opened,
+	onOpenedChange,
+}: MeasureDistanceButtonProps) => {
+	const [isOpened = false, setIsOpened] = useControllableState({
+		prop: opened,
+		defaultProp: false,
+		onChange: onOpenedChange,
+	});
+
+	const activate = useMemo(
+		() => createActivateAction(MAP, pluginName),
+		[pluginName],
+	);
+	const deactivate = useMemo(
+		() => createDeactivateAction(MAP, pluginName),
+		[pluginName],
+	);
+	const resetAction = useMemo(
+		() => removeAllFeatures(FEATURE_SOURCES, `${pluginName}_featureSource`),
+		[pluginName],
+	);
+	const featureSelector = useMemo(
+		() =>
+			createSelector(
+				createFilteredFeatureSourceSelector(
+					FEATURE_SOURCES,
+					`${pluginName}_featureSource`,
+					MAP,
+				),
+				(featureSourceState) => featureSourceState?.data?.features?.[0],
+			),
+		[pluginName],
+	);
+
+	const dispatch = useDispatch();
+	const feature = useSelector(featureSelector);
+
+	const toggle = useCallback(() => {
+		setIsOpened(!isOpened);
+	}, [isOpened, setIsOpened]);
+
+	const close = useCallback(() => {
+		setIsOpened(false);
+	}, [setIsOpened]);
+
+	useEffect(() => {
+		dispatch(isOpened ? activate : deactivate);
+	}, [dispatch, deactivate, isOpened, activate]);
+
+	const closeAndReset = useCallback(
+		function () {
+			dispatch(resetAction);
+			close();
+		},
+		[close, dispatch, resetAction],
+	);
+
+	return (
+		<Fragment>
+			<button
+				className="ms3-map-overlay__button ms3-map-overlay__button--with-icon ms3-map-overlay__button--measure-distance"
+				type="button"
+				onClick={toggle}
+			>
+				<span className="ms3-map-overlay__button__label">
+					{translate("ui.measure-distance.title")}
+				</span>
+			</button>
+
+			{isOpened && (
+				<ToolOverlay
+					label={translate("ui.measure-distance.title")}
+					onClose={closeAndReset}
+					text={translate(
+						feature
+							? "ui.measure-distance.instructions-done"
+							: "ui.measure-distance.instructions",
+					)}
+				>
+					{feature && <MeasureDistanceInfo feature={feature} />}
+				</ToolOverlay>
+			)}
+		</Fragment>
+	);
+};
+
+export default MeasureDistanceButton;

package/src/js/components/map-overlay/measure-distance-overlay.jsx

@@ -0,0 +1,56 @@
+import GeoJSON from "ol/format/GeoJSON";
+
+import {getLength} from "ol/sphere";
+import  {useMemo} from "react";
+
+import {translate} from "../../helpers/i18n";
+
+const geoJsonFormat = new GeoJSON();
+const meterFormat = new Intl.NumberFormat(undefined, {
+	style: "unit",
+	maximumFractionDigits: 2,
+	unit: "meter",
+});
+const kilometerFormat = new Intl.NumberFormat(undefined, {
+	style: "unit",
+	maximumFractionDigits: 2,
+	unit: "kilometer",
+});
+
+function formatLength(length) {
+	const isKilometer = length > 1000;
+	const format = isKilometer ? kilometerFormat : meterFormat;
+	const amount = isKilometer ? length / 1000 : length;
+	return format.format(amount);
+}
+
+function MeasureDistanceInfo({feature}) {
+	const fGeo = feature?.geometry;
+	const geometry = useMemo(() => {
+		if (fGeo?.type !== "LineString") {
+			return null;
+		}
+
+		return geoJsonFormat.readGeometry(fGeo, {
+			featureProjection: "EPSG:3857",
+			dataProjection: "EPSG:4326",
+		});
+	}, [fGeo]);
+
+	if (!geometry) {
+		return null;
+	}
+
+	const length = getLength(geometry);
+	const formattedValue = formatLength(length);
+
+	return (
+		<div className="ms3-measure-distance">
+			{translate("ui.measure-distance.measurement")}
+			{": "}
+			{formattedValue}
+		</div>
+	);
+}
+
+export default MeasureDistanceInfo;