@mapsight/ui 7.0.0

package/src/js/components/helping/visibility-wrapper.jsx

@@ -0,0 +1,23 @@
+import  {Fragment, memo} from "react";
+import {useSelector} from "react-redux";
+
+/**
+ * VisibilityWrapper
+ *
+ * @param {{
+ *   visibleSelector: (state: any) => boolean,
+ *   children: React.ReactNode
+ * }} props props
+ * @returns {React.ReactElement | null} element
+ */
+function VisibilityWrapper({children, visibleSelector}) {
+	const visible = useSelector(visibleSelector);
+	if (visible) {
+		// we're using `Fragment` here to convert `ReactNode` to a `ReactElement`
+		return <Fragment>{children}</Fragment>;
+	}
+
+	return null;
+}
+
+export default memo(VisibilityWrapper);

package/src/js/components/instance.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type {PropsWithChildren} from "react";
+import {useMemo} from "react";
+
+import type {EnhancedStore, State} from "@mapsight/core/types";
+
+import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
+
+import {create} from "../index";
+import type {CreateOptions} from "../types";
+import AppContext from "./helping/app-context";
+
+function MapsightUi({
+	children,
+	styleFunction,
+	baseMapsightConfig,
+	createOptions,
+}: PropsWithChildren<{
+	styleFunction: MapsightStyleFunction;
+	baseMapsightConfig: Partial<State>;
+	createOptions: CreateOptions;
+}>) {
+	const context = useMemo(
+		() =>
+			create(
+				null, // FIXME allow passing null?!
+				styleFunction,
+				baseMapsightConfig,
+				createOptions,
+			),
+		[baseMapsightConfig, createOptions, styleFunction],
+	);
+	const {components = {}, appChannelListeners = []} = createOptions;
+	const {store} = context;
+
+	return (
+		<AppContext
+			components={components}
+			store={store as EnhancedStore}
+			appChannelListeners={appChannelListeners}
+		>
+			{children}
+		</AppContext>
+	);
+}
+
+export default MapsightUi;

package/src/js/components/layer-switcher/GroupedLayerSwitcher.js

@@ -0,0 +1,47 @@
+import {connect, shallowEqual} from "react-redux";
+
+import {createSelector} from "reselect";
+
+import {MAP} from "../../config/constants/controllers";
+import GroupedSwitcher from "../switcher/GroupedSwitcher";
+
+function getGroupedIdsForIds(ids, layersState) {
+	const groupedLayerIds = {};
+	const withoutGroupLayerIds = [];
+	ids.forEach((layerId) => {
+		const group = layersState[layerId].metaData.group;
+
+		if (!group) {
+			withoutGroupLayerIds.push(layerId);
+			return;
+		}
+
+		groupedLayerIds[group] = groupedLayerIds[group] || [];
+		groupedLayerIds[group].push(layerId);
+	});
+
+	return {
+		ungroupedIds: withoutGroupLayerIds,
+		groupedIds: groupedLayerIds,
+	};
+}
+
+const GroupedLayerSwitcher = connect(
+	createSelector(
+		(state, {layerIdsSelector}) => layerIdsSelector(state[MAP]),
+		(state) => state[MAP].layers,
+		getGroupedIdsForIds,
+	),
+	null,
+	(
+		stateProps,
+		dispatchProps,
+		{layerIdsSelector: _layerIdsSelector, ...ownProps},
+	) => ({
+		...ownProps,
+		...stateProps,
+	}),
+	{areStatesEqual: shallowEqual},
+)(GroupedSwitcher);
+
+export default GroupedLayerSwitcher;

package/src/js/components/layer-switcher/LayerSwitcher.js

@@ -0,0 +1,27 @@
+import {connect} from "react-redux";
+
+import {MAP} from "../../config/constants/controllers";
+import Switcher from "../switcher/Switcher";
+
+const selector = (state, {layerIdsSelector}) => ({
+	ids: layerIdsSelector(state[MAP]),
+});
+
+export default connect(
+	selector,
+	null,
+	(
+		stateProps,
+		dispatchProps,
+		{
+			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
+			layerIdsSelector: _layerIdsSelector,
+
+			...attributes
+		},
+	) => ({
+		// We do not want to pass dispatch to the switcher, so we explicitly do not map it!
+		...stateProps,
+		...attributes,
+	}),
+)(Switcher);

package/src/js/components/layer-switcher/LayerSwitcherEntry.js

@@ -0,0 +1,132 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {set as makeSetAction} from "@mapsight/core/lib/base/actions";
+import {getFeatureSourceStatus} from "@mapsight/core/lib/feature-sources/selectors";
+import {setLayerVisibility} from "@mapsight/core/lib/map/actions";
+
+import getPath from "@mapsight/lib-js/object/getPath";
+
+import {MAP} from "../../config/constants/controllers";
+import SwitcherEntry from "../switcher/SwitcherEntry";
+
+function getActiveProps({
+	setFeatureSourceIdPath,
+	currentlySetFeatureSourceId,
+	featureSourceId,
+	dispatch,
+	layerId,
+	visibility,
+	locked,
+}) {
+	if (setFeatureSourceIdPath) {
+		const isCurrentFeatureSource =
+			currentlySetFeatureSourceId === featureSourceId;
+
+		// this will match in intermediate state; use batching?
+		//if (!visibility && isFeatureSourceCurrent) {
+		//	throw new Error('illegal state');
+		//}
+
+		return {
+			activeCheckbox: !!visibility,
+			activeText: isCurrentFeatureSource,
+			toggleActiveCheckbox: function toggleActiveCheckbox() {
+				dispatch(setLayerVisibility(MAP, layerId, !visibility));
+				if (isCurrentFeatureSource) {
+					dispatch(makeSetAction(setFeatureSourceIdPath, undefined));
+				}
+			},
+			toggleActiveText: function toggleActiveText() {
+				dispatch(
+					makeSetAction(setFeatureSourceIdPath, featureSourceId),
+				);
+				dispatch(setLayerVisibility(MAP, layerId, true));
+			},
+		};
+	}
+
+	return {
+		active: !!visibility,
+		toggleActive: function toggleActive() {
+			if (!locked) {
+				dispatch(setLayerVisibility(MAP, layerId, !visibility));
+			}
+		},
+	};
+}
+
+const LayerSwitcherEntry = connect(
+	// mapStateToProps:
+	(
+		state,
+		{
+			titleSelector,
+			lockedSelector,
+			layerVisibilitySelector,
+			featureSourceSelector,
+			featureSourceIdSelector,
+			setFeatureSourceIdPath,
+		},
+	) =>
+		createStructuredSelector({
+			title: (myState) => titleSelector(myState[MAP]),
+			locked: (myState) => lockedSelector(myState[MAP]),
+			visibility: (myState) => layerVisibilitySelector(myState[MAP]),
+			featureSource: (myState) =>
+				featureSourceSelector(myState[MAP], myState),
+			featureSourceId: (myState) =>
+				featureSourceIdSelector(myState[MAP], myState),
+			currentlySetFeatureSourceId: (myState) =>
+				Array.isArray(setFeatureSourceIdPath) &&
+				getPath(myState, setFeatureSourceIdPath),
+		}),
+	// mapDispatchToProps:
+	null,
+	// mergeProps:
+	(
+		// state props
+		{
+			visibility,
+			title,
+			locked,
+			featureSource,
+			featureSourceId,
+			currentlySetFeatureSourceId,
+		},
+		// dispatch props
+		{dispatch},
+		// own props
+		{
+			// used for active props:
+			layerId,
+			setFeatureSourceIdPath,
+
+			// Need to list the selectors here so they do not get passed as attribute props to the element but get filtered:
+			lockedSelector: _lockedSelector,
+			titleSelector: _titleSelector,
+			layerVisibilitySelector: _layerVisibilitySelector,
+			featureSourceSelector: _featureSourceSelector,
+			featureSourceIdSelector: _featureSourceIdSelector,
+
+			...attributes
+		},
+	) => ({
+		title: title,
+		status: getFeatureSourceStatus(featureSource),
+		locked: locked,
+		...getActiveProps({
+			visibility: visibility,
+			featureSourceId: featureSourceId,
+			currentlySetFeatureSourceId: currentlySetFeatureSourceId,
+			locked: locked,
+			dispatch: dispatch,
+			layerId: layerId,
+			setFeatureSourceIdPath: setFeatureSourceIdPath,
+		}),
+		...attributes,
+	}),
+)(SwitcherEntry);
+
+export default LayerSwitcherEntry;

package/src/js/components/layer-switcher/LayerSwticherContainer.jsx

@@ -0,0 +1,80 @@
+import {
+	layerIdsIntegratedSwitcherSelector,
+	makeFeatureSourceFromLayerIdSelector,
+	makeFeatureSourceIdFromLayerIdSelector,
+	makeLayerLockedInLayerSwitcherSelector,
+	makeLayerTitleSelector,
+	makeLayerVisibleSelector,
+} from "@mapsight/core/lib/map/selectors";
+import {memo, useCallback} from "react";
+
+import {translate} from "../../helpers/i18n";
+
+import GroupedLayerSwitcher from "./GroupedLayerSwitcher";
+import LayerSwitcher from "./LayerSwitcher";
+import LayerSwitcherEntry from "./LayerSwitcherEntry";
+
+// TODO das berechnen der LayerListen (abhängig von grouped und layerIdSelector) in einen Selector packen,
+//  damit diese Berechnung nur bei Änderungen am store berechnet neu wird
+// TODO für das visible eine eigenes connect, damit der Tree nicht dauernd neu berechnet wird
+
+function LayerSwitcherContainer(props) {
+	const {
+		as: T = "div",
+		baseClassName = "ms3-layer-switcher-container", // TODO: Use generic class name
+		onClose,
+		layerIdsSelector = layerIdsIntegratedSwitcherSelector,
+		setFeatureSourceIdPath,
+		grouped = false,
+		...attributes
+	} = props;
+
+	const renderLayerEntry = useCallback(
+		(id) => (
+			// TODO: memo comp instance & selectors
+			<LayerSwitcherEntry
+				key={id}
+				layerId={id}
+				titleSelector={makeLayerTitleSelector(id)}
+				lockedSelector={makeLayerLockedInLayerSwitcherSelector(id)}
+				layerVisibilitySelector={makeLayerVisibleSelector(id)}
+				featureSourceSelector={makeFeatureSourceFromLayerIdSelector(id)}
+				featureSourceIdSelector={makeFeatureSourceIdFromLayerIdSelector(
+					id,
+				)}
+				setFeatureSourceIdPath={setFeatureSourceIdPath}
+			/>
+		),
+		[setFeatureSourceIdPath],
+	);
+
+	const Switcher = grouped ? GroupedLayerSwitcher : LayerSwitcher;
+
+	return (
+		<T
+			className={`${baseClassName} ${baseClassName}--${
+				grouped ? "grouped" : "ungrouped"
+			}`}
+		>
+			<Switcher
+				layerIdsSelector={layerIdsSelector}
+				renderEntry={renderLayerEntry}
+				{...attributes}
+			/>
+
+			{onClose && (
+				<button
+					className="ms3-layer-switcher__close-button [ ms3-dialog-close-button ]"
+					type="button"
+					onClick={onClose}
+				>
+					<span className="ms3-visuallyhidden">
+						{translate("ui.map-overlay.layer-switcher.closeLayers")}
+					</span>
+				</button>
+			)}
+		</T>
+	);
+}
+
+export default memo(LayerSwitcherContainer);

package/src/js/components/layer-switcher/index.js

@@ -0,0 +1,47 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {FEATURE_LIST} from "../../config/constants/controllers";
+import {layerSwitcherConfigInternalSelector} from "../../store/selectors.ts";
+import LayerSwitcherContainer from "./LayerSwticherContainer";
+
+const TRUE_SET_FEATURE_SOURCE_PATH = [FEATURE_LIST, "featureSource"];
+
+/**
+ * @param {object} props properties
+ * @param {Function} props.onClose callback when closed
+ * @param {(state: object) => object} [props.configSelector] config selector, default = layerSwitcherConfigInternalSelector
+ */
+export default connect(
+	createStructuredSelector({
+		layerIdsSelector: (
+			state,
+			{configSelector = layerSwitcherConfigInternalSelector},
+		) => configSelector(state).layerIdsSelector,
+		grouped: (
+			state,
+			{configSelector = layerSwitcherConfigInternalSelector},
+		) => configSelector(state).grouped,
+		setFeatureSourceIdPath: function setFeatureSourceIdPath(
+			state,
+			{configSelector = layerSwitcherConfigInternalSelector},
+		) {
+			const config = configSelector(state);
+			if (config.setFeatureSourceId === true) {
+				return TRUE_SET_FEATURE_SOURCE_PATH;
+			} else {
+				return config.setFeatureSourceId;
+			}
+		},
+	}),
+	null,
+	(
+		stateProps,
+		dispatchProps,
+		{configSelector: _configSelector, ...ownProps},
+	) => ({
+		...ownProps,
+		...stateProps,
+	}),
+)(LayerSwitcherContainer);

package/src/js/components/layout/additional-container/content.jsx

@@ -0,0 +1,10 @@
+function AdditionalContent({as: T = "div", className = "", ...attrs}) {
+	return (
+		<T
+			className={`ms3-additional-container__content ${className}`}
+			{...attrs}
+		/>
+	);
+}
+
+export default AdditionalContent;

package/src/js/components/layout/additional-container/index.jsx

@@ -0,0 +1,5 @@
+function AdditionalContainer({as: T = "div", className = "", ...attrs}) {
+	return <T className={`ms3-additional-container ${className}`} {...attrs} />;
+}
+
+export default AdditionalContainer;

package/src/js/components/layout/additional-container/marginal.jsx

@@ -0,0 +1,10 @@
+function Marginal({as: T = "div", position, className = "", ...attrs}) {
+	return (
+		<T
+			className={`ms3-marginal ms3-marginal--${position} ${className}`}
+			{...attrs}
+		/>
+	);
+}
+
+export default Marginal;

package/src/js/components/layout/main-container.jsx

@@ -0,0 +1,5 @@
+function MainContainer({as: T = "div", ...props}) {
+	return <T className="ms3-main-container" {...props} />;
+}
+
+export default MainContainer;

package/src/js/components/layout/map-row.jsx

@@ -0,0 +1,5 @@
+function MapRow({as: T = "div", ...props}) {
+	return <T className="ms3-map-row" {...props} />;
+}
+
+export default MapRow;

package/src/js/components/layout/title-bar.tsx

@@ -0,0 +1,25 @@
+import {useSelector} from "react-redux";
+
+import {makeReplaceableComponent} from "../../helpers/components";
+import {titleSelector} from "../../store/selectors";
+
+function TitleBar() {
+	const title = useSelector(titleSelector);
+
+	return (
+		<div className="ms3-flex ms3-flex--row ms3-flex-no-shrink">
+			<div className="ms3-page-title ms3-flex-grow">
+				<h2>{title || ""}</h2>
+			</div>
+		</div>
+	);
+}
+
+export default makeReplaceableComponent("TitleBar", TitleBar);
+export {TitleBar as NonReplaceableTitleBar};
+
+declare module "../../helpers/components" {
+	interface ComponentProps {
+		TitleBar: unknown;
+	}
+}

package/src/js/components/layout/wrapper.jsx

@@ -0,0 +1,28 @@
+import  {memo} from "react";
+import {useSelector} from "react-redux";
+
+import {
+	isEmbeddedMapSelector,
+	mapVisible,
+	viewSelector,
+} from "../../store/selectors.ts";
+
+function AppWrapper({children, ...attributes}) {
+	const view = useSelector(viewSelector);
+	const isEmbeddedMap = useSelector(isEmbeddedMapSelector);
+	const isMapVisible = useSelector(mapVisible);
+
+	const className = `ms3-wrapper ms3-wrapper--${view} ${
+		isEmbeddedMap ? "ms3-wrapper--embedded" : ""
+	} ${isMapVisible ? "" : "ms3-wrapper--withoutmap"} ${
+		attributes.className || ""
+	}`;
+
+	return (
+		<div className={className} {...attributes}>
+			{children}
+		</div>
+	);
+}
+
+export default memo(AppWrapper);

package/src/js/components/link-share.jsx

@@ -0,0 +1,78 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
+import {useCallback} from "react";
+
+import {translate} from "../helpers/i18n";
+
+const selectInputContent = (e) =>
+	e.target.setSelectionRange(0, e.target.value.length);
+
+function LinkShare({
+	buttonLabel = translate("shareLink"),
+	title = translate("shareLink"),
+	url,
+	onFinished,
+	onError,
+}) {
+	const share = useCallback(
+		function () {
+			if (navigator?.share) {
+				navigator
+					.share({
+						title: title,
+						url: url,
+					})
+					.then(() => {
+						if (onFinished) {
+							onFinished();
+						}
+					})
+					.catch((err) => {
+						console.error(err);
+						if (onError) {
+							onError();
+						}
+					});
+			}
+		},
+		[onError, onFinished, title, url],
+	);
+
+	return (
+		<div className="ms3-link-share">
+			{navigator?.share ? (
+				<button
+					className="ms3-link-share__button"
+					type="button"
+					onClick={share}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="20"
+						height="22"
+						viewBox="0 0 20 22"
+					>
+						<path
+							fill="#000"
+							d="M10.86.91l4.42 4.42-1.33 1.32L11 3v10H9V3L6.06 6.6 4.7 5.37 9.15.9 9.13.87l.84-.84.03.03.03-.03.85.86z"
+						/>
+						<path
+							stroke="#000"
+							strokeLinecap="square"
+							strokeWidth="2"
+							d="M1 21h18M1 21V9M19 21V9M14 9h5M1 9h5"
+						/>
+					</svg>
+					<span className="ms3-visuallyhidden">{buttonLabel}</span>
+				</button>
+			) : null}
+			<input
+				className="ms3-link-share__input"
+				value={url}
+				onClick={selectInputContent}
+				readOnly={true}
+			/>
+		</div>
+	);
+}
+
+export default LinkShare;

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

@@ -0,0 +1,23 @@
+import {useRef} from "react";
+
+import useMapsightPanel from "../../hooks/useMapsightPanel";
+import {useMainPanelContext} from "./context";
+
+function MainPanelContainer({children}) {
+	const {panelPosition, collapsed} = useMainPanelContext();
+
+	const containerRef = useRef<HTMLDivElement>(null);
+	useMapsightPanel(containerRef, panelPosition, collapsed);
+
+	const containerClasses = `ms3-panel-container ms3-panel-container--docked-${panelPosition} ${
+		collapsed ? "ms3-panel-container--empty" : ""
+	}`;
+
+	return (
+		<div className={containerClasses} ref={containerRef}>
+			{children}
+		</div>
+	);
+}
+
+export default MainPanelContainer;

package/src/js/components/main-panel/context.jsx

@@ -0,0 +1,62 @@
+import {createContext, useContext, useMemo} from "react";
+import {useSelector} from "react-redux";
+
+import {createMainPanelContentTypeSelector} from "../../store/selectors.ts";
+
+/** @type {import('react').Context<import('../../types').MainPanelContextValue>} */
+const MainPanelContext = createContext(
+	/** @type {import('../../types').MainPanelContextValue} */ {
+		showSelectionInfo: false,
+		showList: false,
+		collapsible: false,
+		panelPosition: "left",
+
+		feature: null,
+		contentType: null,
+		collapsed: false,
+	},
+);
+MainPanelContext.displayName = "MainPanelContext";
+
+/** @returns {import('../../types').MainPanelContextValue} main panel context */
+export function useMainPanelContext() {
+	return useContext(MainPanelContext);
+}
+
+/**
+ * @param {Pick<import('../../types').MainPanelContextOptions, 'showSelectionInfo'| 'showList' | 'collapsible'>} options main panel options
+ * @returns {import('../../types').MainPanelContextState} main panel state
+ */
+function useMainPanelState({showSelectionInfo, showList, collapsible}) {
+	const selector = useMemo(
+		() =>
+			createMainPanelContentTypeSelector({
+				showSelectionInfo: showSelectionInfo,
+				showList: showList,
+				collapsible: collapsible,
+			}),
+		[showSelectionInfo, showList, collapsible],
+	);
+	return useSelector(selector);
+}
+
+export function MainPanelContextProvider(
+	/** @type {import('../../types').MainPanelContextOptions & {children: import('react').ReactChildren}} */ {
+		showSelectionInfo = false,
+		showList = false,
+		collapsible = false,
+		panelPosition = "left",
+		children,
+	},
+) {
+	const options = {
+		showSelectionInfo: showSelectionInfo,
+		showList: showList,
+		collapsible: collapsible,
+		panelPosition: panelPosition,
+	};
+	const state = useMainPanelState(options);
+	const value = {...options, ...state};
+
+	return <MainPanelContext.Provider value={value}>{children}</MainPanelContext.Provider>;
+}