@mapsight/ui 7.0.3 → 7.2.0

package/src/js/plugins/browser/share-position-link.ts

@@ -1,463 +0,0 @@
-import proj4 from "proj4";
-import {createSelector} from "reselect";
-
-import {mergeAll, set} from "@mapsight/core/lib/base/actions";
-import {createFilteredFeatureSourceSelector} from "@mapsight/core/lib/feature-sources/selectors";
-import {
-	activateInteraction,
-	deactivateInteraction,
-} from "@mapsight/core/lib/map/actions";
-import {
-	DEFAULT_DISPLAY_STYLE,
-	DEFAULT_DRAW_STYLE,
-	DEFAULT_PROJECTION,
-} from "@mapsight/core/mixins/EditorMixin";
-import type {Definition} from "@mapsight/core/ol-proxy";
-import {di} from "@mapsight/core/ol-proxy";
-import DrawInteraction from "@mapsight/core/ol-proxy/definitions/interaction/DrawInteraction";
-
-import {observeState} from "@mapsight/lib-redux/observe-state";
-
-import {mapViewCenter} from "../../config";
-import {
-	FEATURE_SELECTIONS,
-	FEATURE_SOURCES,
-	MAP,
-} from "../../config/constants/controllers";
-import {features, metaData} from "../../config/map/layers";
-import {translate} from "../../helpers/i18n";
-import type {PluginInstance} from "../../types.ts";
-
-export const createActivateAction = (mapController, name) =>
-	activateInteraction(mapController, `${name}_drawInteraction`);
-export const createDeactivateAction = (mapController, name) =>
-	deactivateInteraction(mapController, `${name}_drawInteraction`);
-
-function geoJsonPointToMapViewCoordinates(pointGeometry): [number, number] {
-	return proj4(DEFAULT_PROJECTION, "EPSG:3857", pointGeometry.coordinates);
-}
-
-/**
- * @param {object} options options
- * @param {import('redux').Store} options.store store
- * @param {string} options.name name name of the editor (must be unique per mapsight instance)
- * @param {string} options.mapControllerName map controller name
- * @param {string} options.featureSourcesControllerName feature sources controller name
- * @param {string} options.featureSelectionsControllerName feature selections controller name
- * @param {string} options.displayStyle style for finished draw
- * @param {string} options.drawStyle style while drawing
- */
-function setupDrawInteraction({
-	store,
-	name,
-	featureSourcesControllerName,
-	featureSelectionsControllerName,
-	mapControllerName,
-	drawStyle,
-	displayStyle,
-}) {
-	const fSId = `${name}_featureSource`;
-	const drawLayerId = `${name}_drawLayer`;
-	const interactionId = `${name}_drawInteraction`;
-
-	const vFS = {
-		type: "VectorFeatureSource",
-		options: {
-			projection: DEFAULT_PROJECTION,
-			featureSourceId: fSId,
-			featureSourcesControllerName: featureSourcesControllerName,
-			featureSelectionsControllerName: featureSelectionsControllerName,
-			canAnimate: false,
-			canCluster: false,
-			featureSelections: [],
-		},
-	};
-
-	store.dispatch(
-		mergeAll({
-			[mapControllerName]: {
-				interactions: {
-					[interactionId]: {
-						type: "DrawInteraction",
-						options: {
-							active: false,
-							type: "Point",
-							style: drawStyle,
-							replacePrevious: true,
-							clearOnStart: true,
-							source: vFS,
-							stopClick: true,
-						},
-					},
-				},
-				layers: {
-					[drawLayerId]: {
-						type: "VectorLayer",
-						options: {
-							visible: true,
-							style: displayStyle,
-							renderBuffer: 200,
-							selections: [],
-							source: vFS,
-						},
-					},
-				},
-			},
-			[featureSourcesControllerName]: {
-				[fSId]: {
-					enableHistory: false,
-					data: {},
-					isLoading: true,
-				},
-			},
-		}),
-	);
-
-	const featuresSelector = createSelector(
-		createFilteredFeatureSourceSelector(
-			featureSourcesControllerName,
-			fSId,
-			mapControllerName,
-		),
-		(featureSourceState) => featureSourceState?.data?.features,
-	);
-	const deactivate = createDeactivateAction(mapControllerName, name);
-
-	observeState(store, featuresSelector, (createdFeatures) => {
-		if (createdFeatures?.length) {
-			const feature = createdFeatures[0];
-
-			if (feature?.geometry?.type === "Point") {
-				store.dispatch(deactivate);
-			}
-		}
-	});
-}
-
-export type MarkerPoint = {
-	type: "Point";
-	coordinates: [number, number] | [number, number, number];
-};
-
-export type MarkerProps = {
-	id: import("../../types").MapsightUiFeatureId;
-	name: string;
-	iconId: string;
-};
-
-export type MarkerFeatureFactory = (
-	a: MarkerPoint,
-	b: MarkerProps,
-) => import("../../types").MapsightUiFeature;
-
-/**
- * @type {MarkerFeatureFactory}
- */
-function defaultCreateMarkerFeature(
-	point,
-	{id = "link-marker", name = "Marker", iconId = "marker"},
-) {
-	return /** @type {import('../../types').MapsightUiFeature} */ {
-		type: "Feature",
-		geometry: point,
-		id: id,
-		properties: {
-			id: id,
-			name: name,
-			mapsightIconId: iconId,
-		},
-	};
-}
-
-/**
- * @param {object} options options
- * @param {import('redux').Store} options.store store
- * @param {string} options.name name name of the editor (must be unique per mapsight instance)
- * @param {string} options.mapControllerName map controller name
- * @param {string} options.featureSourcesControllerName feature sources controller name
- * @param {string} options.linkParameter link parameter name
- * @param {boolean} options.centerOnMarker centers map on marker if present
- * @param {string} options.markerStyle style for marker
- * @param {number|null} options.markerZoom zoom level when marker is present
- * @param {import('../../types').MapsightUiFeatureId} options.markerFeatureId feature id
- * @param {string} options.markerName marker feature name
- * @param {string|null} options.markerLayerGroup marker layer group
- * @param {MarkerFeatureFactory} options.createMarkerFeature factory for marker feature
- */
-function setupMarker(options) {
-	const {
-		store,
-		name,
-		linkParameter,
-		mapControllerName,
-		featureSourcesControllerName,
-		markerStyle,
-		centerOnMarker,
-		markerZoom,
-		markerFeatureId,
-		markerName,
-		markerLayerGroup,
-		markerIconId,
-		createMarkerFeature,
-	} = options;
-
-	const fSId = `${name}_markerFeatureSource`;
-	const layerId = `${name}_markerLayer`;
-
-	const regex = new RegExp(
-		`[#&]${encodeURIComponent(
-			linkParameter,
-		)}=(\\d+(?:\\.\\d+)?)\\/(\\d+(?:\\.\\d+)?)(?:&|$)`,
-		"",
-	);
-
-	// TODO: Handle on SSR?!
-	// TODO: Handle on-page-navigation (on hashchange/pushState)
-	const linkMarkerMatches =
-		typeof window !== "undefined" && window.location?.hash.match(regex);
-	if (!linkMarkerMatches) {
-		return;
-	}
-
-	const [, lat, lon] = linkMarkerMatches;
-	const point = {
-		type: "Point",
-		coordinates: [parseFloat(lon!), parseFloat(lat!)],
-	};
-
-	const feature = createMarkerFeature(point, {
-		id: markerFeatureId,
-		name: markerName,
-		iconId: markerIconId,
-	});
-
-	store.dispatch(
-		mergeAll({
-			[mapControllerName]: {
-				layers: {
-					[layerId]: features(
-						fSId,
-						true,
-						true,
-						metaData(
-							markerName,
-							null,
-							false,
-							false,
-							false,
-							markerLayerGroup,
-						),
-						markerStyle,
-					),
-				},
-			},
-			[featureSourcesControllerName]: {
-				[fSId]: {
-					enableHistory: false,
-					data: {
-						type: "FeatureCollection",
-						features: [feature],
-					},
-					ids: [feature.id],
-				},
-			},
-		}),
-	);
-
-	if (centerOnMarker) {
-		store.dispatch(
-			set(
-				[mapControllerName, "view", "center"],
-				mapViewCenter(...geoJsonPointToMapViewCoordinates(point)),
-			),
-		);
-
-		if (Number.isInteger(markerZoom)) {
-			store.dispatch(
-				set([mapControllerName, "view", "zoom"], markerZoom),
-			);
-		}
-	}
-}
-
-export type Options = {
-	/**
-	 * name of the editor (must be unique per mapsight instance)
-	 *
-	 * @default "sharePositionLink"
-	 */
-	name?: string;
-
-	/**
-	 * map controller name
-	 *
-	 * @default "map"
-	 */
-	mapControllerName?: string;
-
-	/**
-	 * feature sources controller name
-	 *
-	 * @default "featureSources"
-	 */
-	featureSourcesControllerName?: string;
-	/**
-	 * feature selections controller name
-	 *
-	 * @default "featureSelections"
-	 */
-	featureSelectionsControllerName?: string;
-
-	/**
-	 * enable drawing
-	 *
-	 * @default true
-	 */
-	enableDrawing?: boolean;
-
-	/**
-	 * style for finished draw
-	 *
-	 * @default"features"
-	 */
-	displayStyle?: string;
-
-	/**
-	 * style while drawing
-	 *
-	 * @default "draw"
-	 */
-	drawStyle?: string;
-
-	/**
-	 * draw interaction
-	 */
-	drawInteraction?: Definition | null;
-
-	/**
-	 * link parameter name
-	 *
-	 * @default "lm"
-	 */
-	linkParameter?: string;
-
-	/**
-	 * show marker if link parameter is present
-	 *
-	 * @default true
-	 */
-	showMarker?: boolean;
-
-	/**
-	 * centers map on marker if present
-	 *
-	 * @default true
-	 */
-	centerOnMarker?: boolean;
-
-	/**
-	 * style for marker
-	 *
-	 * @default "features"
-	 */
-	markerStyle?: string;
-
-	/**
-	 * zoom level when marker is present
-	 *
-	 * @default 16
-	 */
-	markerZoom?: number | null;
-
-	/**
-	 *  marker feature id
-	 */
-	markerFeatureId?: import("../../types").MapsightUiFeatureId;
-	/**
-	 * marker feature name
-	 *
-	 * @default "marker"
-	 */
-	markerName?: string;
-
-	/**
-	 * marker layer group
-	 *
-	 * @default null
-	 */
-	markerLayerGroup?: string | null;
-
-	/**
-	 * factory for marker feature
-	 */
-	createMarkerFeature?: MarkerFeatureFactory;
-};
-
-/**
- * This plugin will allow drawing a link maker (to be used with the appropriate component)
- * and/or display such a marker.
- *
- * @param options options
- * @returns plugin
- */
-export default function createShareLinkPlugin(
-	options: Options = {},
-): PluginInstance {
-	const {
-		name = "sharePositionLink",
-		enableDrawing = true,
-		mapControllerName = MAP,
-		featureSourcesControllerName = FEATURE_SOURCES,
-		featureSelectionsControllerName = FEATURE_SELECTIONS,
-		displayStyle = DEFAULT_DISPLAY_STYLE,
-		drawStyle = DEFAULT_DRAW_STYLE,
-		drawInteraction = DrawInteraction,
-		linkParameter = "lm",
-		showMarker = true,
-		centerOnMarker = true,
-		markerStyle = DEFAULT_DISPLAY_STYLE,
-		markerZoom = 16,
-		markerFeatureId = "link-marker",
-		markerName = translate("marker"),
-		markerLayerGroup = null,
-		createMarkerFeature = defaultCreateMarkerFeature,
-	} = options;
-
-	return {
-		afterCreate({store}) {
-			if (enableDrawing) {
-				if (drawInteraction) {
-					di.injectDefinitions([drawInteraction]);
-				}
-
-				setupDrawInteraction({
-					name,
-					store,
-					mapControllerName,
-					featureSourcesControllerName,
-					featureSelectionsControllerName,
-					drawStyle,
-					displayStyle,
-				});
-			}
-
-			if (showMarker) {
-				setupMarker({
-					name,
-					store,
-					mapControllerName,
-					featureSourcesControllerName,
-
-					linkParameter,
-					centerOnMarker,
-					markerStyle,
-					markerZoom,
-					markerFeatureId,
-					markerName,
-					markerLayerGroup,
-					createMarkerFeature,
-				});
-			}
-		},
-	};
-}

package/src/js/plugins/browser/toggle-mobile-views.ts

@@ -1,60 +0,0 @@
-import {MapController} from "@mapsight/core/lib/map/controller";
-
-import {VIEW_MAP_ONLY, VIEW_MOBILE} from "../../config/constants/app";
-import * as c from "../../config/constants/controllers";
-import {setView} from "../../store/actions";
-import {isEmbeddedMapSelector, viewSelector} from "../../store/selectors";
-import type {PluginInstance} from "../../types.ts";
-
-const defaultMapControllerName = c.MAP;
-const defaultToggleBrowserEvent = "click";
-
-/**
- * This plugin will bind the search result feature source to the mapsight ui state
- *
- * @param [options] options
- * @param [options.mapControllerName="map"] name of the map controller, defaults to mapsight ui default
- * @param [options.toggleBrowserEvent="click"] event which should trigger a toggle
- * @returns plugin instance
- */
-export default function createPlugin(
-	options: {
-		mapControllerName?: string;
-		toggleBrowserEvent?: string;
-	} = {},
-): PluginInstance {
-	const {
-		mapControllerName = defaultMapControllerName,
-		toggleBrowserEvent = defaultToggleBrowserEvent,
-	} = options;
-
-	if (typeof window === "undefined") {
-		console.error("This plugin will only work as intended in the browser!");
-	}
-
-	return {
-		afterCreate: function viewsCreatePlugin(context) {
-			const {store, controllers} = context;
-			if (!store || !controllers) return;
-
-			const mapController = controllers[mapControllerName];
-			if (mapController && mapController instanceof MapController) {
-				mapController
-					.getMap()
-					?.getTargetElement()
-					?.addEventListener(
-						toggleBrowserEvent,
-						function handleToggleInteraction() {
-							const state = store.getState();
-							if (
-								viewSelector(state) === VIEW_MOBILE &&
-								!isEmbeddedMapSelector(state)
-							) {
-								store.dispatch(setView(VIEW_MAP_ONLY));
-							}
-						},
-					);
-			}
-		},
-	};
-}

package/src/js/plugins/browser/user-geolocation.ts

@@ -1,134 +0,0 @@
-import {createSelector, createStructuredSelector} from "reselect";
-
-import {set} from "@mapsight/core/lib/base/actions";
-import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/controller";
-import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
-import {
-	createUserGeolocationAsFeatureSelector,
-	createUserGeolocationIsEnabledSelector,
-	geolocationStatusSelector,
-} from "@mapsight/core/lib/user-geolocation/selectors";
-
-import {createStorage} from "@mapsight/lib-redux/local-storage";
-import {
-	AbortObserving,
-	getAndObserveState,
-} from "@mapsight/lib-redux/observe-state";
-
-import * as c from "../../config/constants/controllers";
-import type {PluginInstance} from "../../types.ts";
-
-const defaultFeatureSourceId = "userGeolocation";
-const defaultFeatureSourcesControllerName = c.FEATURE_SOURCES;
-const defaultUserGeolocationControllerName = c.USER_GEOLOCATION;
-
-/**
- * This plugin will bind the use geolocation feature source to the use geolocation controller
- *
- * @param [options] options
- * @param [options.featureSourceId="userGeolocation"] name of the feature source
- * @param [options.featureSourcesControllerName] name of the feature sources controller, defaults to mapsight ui default
- * @param [options.userGeolocationControllerName] name of the user geolocation controller, defaults to mapsight ui default
- * @param  [options.storeInLocalStorage] Syncs enabled state with localStorage if true
- * @returns {import('../../types').PluginInstance} plugin instance
- */
-export default function createPlugin(
-	options: {
-		featureSourceId?: string;
-		featureSourcesControllerName?: string;
-		userGeolocationControllerName?: string;
-		storeInLocalStorage?: boolean;
-	} = {},
-): PluginInstance {
-	const {
-		featureSourceId = defaultFeatureSourceId,
-		featureSourcesControllerName = defaultFeatureSourcesControllerName,
-		userGeolocationControllerName = defaultUserGeolocationControllerName,
-		storeInLocalStorage = false,
-	} = options;
-
-	const featureSelector = createUserGeolocationAsFeatureSelector(
-		userGeolocationControllerName,
-	);
-
-	if (typeof window === "undefined") {
-		console.error("This plugin will only work as intended in the browser!");
-	}
-
-	const localStorage = createStorage("ms3-ui/user-geolocation");
-
-	return {
-		afterCreate: function searchPlugin(context) {
-			const controller =
-				context.controllers?.[featureSourcesControllerName];
-
-			if (controller && controller instanceof FeatureSourcesController) {
-				controller.bindFeatureSourceToStore(
-					featureSourceId,
-					featureSelector,
-				);
-			}
-		},
-		afterRender: function ({store}) {
-			if (!storeInLocalStorage || !store) {
-				return;
-			}
-
-			const lSState = localStorage.getLocalStorageState();
-
-			if (
-				lSState !== null &&
-				typeof lSState === "object" &&
-				userGeolocationControllerName in lSState &&
-				lSState[userGeolocationControllerName] !== null &&
-				typeof lSState[userGeolocationControllerName] === "object" &&
-				typeof lSState[userGeolocationControllerName].isEnabled ===
-					"boolean"
-			) {
-				store.dispatch(
-					set(
-						[userGeolocationControllerName, "isEnabled"],
-						lSState[userGeolocationControllerName].isEnabled,
-					),
-				);
-			}
-
-			localStorage.synchronizePathsToLocalStorage(store, [
-				[userGeolocationControllerName, "isEnabled"],
-			]);
-
-			const geoLocIsEnabledSelector =
-				createUserGeolocationIsEnabledSelector(
-					userGeolocationControllerName,
-				);
-
-			const geoLocStatusSelector = createSelector(
-				(state) => state[userGeolocationControllerName],
-				geolocationStatusSelector,
-			);
-
-			getAndObserveState(
-				store,
-				createStructuredSelector({
-					isEnabled: geoLocIsEnabledSelector,
-					alreadyRequested: createSelector(
-						geoLocStatusSelector,
-						(status) => status === "loading" || status === "error",
-					),
-				}),
-				({isEnabled, alreadyRequested}) => {
-					if (alreadyRequested) {
-						return AbortObserving;
-					}
-
-					if (isEnabled) {
-						store.dispatch(getGeolocation());
-						return AbortObserving;
-					}
-
-					return undefined;
-				},
-			);
-		},
-	};
-}