@mapsight/ui 7.1.0 → 7.2.0

package/src/js/components/view-toggle-button/view-toggle-button.jsx

@@ -1,74 +0,0 @@
-import {memo, useCallback} from "react";
-import {useSelector} from "react-redux";
-
-import {
-	VIEW_DESKTOP,
-	VIEW_FULLSCREEN,
-	VIEW_MAP_ONLY,
-	VIEW_MOBILE,
-} from "../../config/constants/app";
-import {translate} from "../../helpers/i18n";
-import {viewSelector} from "../../store/selectors";
-
-function getOtherView(view) {
-	switch (view) {
-		case VIEW_MAP_ONLY:
-			return VIEW_MOBILE;
-		case VIEW_FULLSCREEN:
-			return VIEW_DESKTOP;
-		case VIEW_DESKTOP:
-			return VIEW_FULLSCREEN;
-		case VIEW_MOBILE:
-		default:
-			return VIEW_MAP_ONLY;
-	}
-}
-
-function getAriaLabel(view) {
-	return translate("ui.view-toggle-button.ariaLabel" + view);
-}
-
-function getLabel(view) {
-	return translate("ui.view-toggle-button.label" + view);
-}
-
-function ViewToggleButton({
-	isMapOutOfViewport = false,
-	changeView,
-
-	additionalClasses = "",
-	baseClass = "button",
-	viewModifierClassPrefix = "button--",
-
-	style = {},
-}) {
-	const view = useSelector(viewSelector);
-	const otherView = getOtherView(view);
-
-	const onClick = useCallback(
-		function onClick(e) {
-			e.stopPropagation();
-			changeView(view, otherView);
-		},
-		[changeView, view, otherView],
-	);
-
-	let className = `${baseClass} ${viewModifierClassPrefix}${view} ${additionalClasses}`;
-	if (isMapOutOfViewport) {
-		className += ` ${viewModifierClassPrefix}map-out-of-view`;
-	}
-
-	return (
-		<button
-			type="button"
-			style={style}
-			className={className}
-			onClick={onClick}
-			aria-label={getAriaLabel(otherView)}
-		>
-			<span className={`${baseClass}__label`}>{getLabel(otherView)}</span>
-		</button>
-	);
-}
-
-export default memo(ViewToggleButton);

package/src/js/components/view-toggle-button/viewport-button.tsx

@@ -1,13 +0,0 @@
-import ViewToggleButton from "./index";
-
-function ViewportViewToggleButton() {
-	return (
-		<ViewToggleButton
-			baseClass="ms3-viewport-button"
-			additionalClasses="ms3-viewport-button--bottom-right ms3-viewport-button--mobile-view-toggle"
-			viewModifierClassPrefix="ms3-viewport-button--mobile-view-toggle--"
-		/>
-	);
-}
-
-export default ViewportViewToggleButton;

package/src/js/config/constants/app.ts

@@ -1,16 +0,0 @@
-export type View =
-	| typeof VIEW_DESKTOP
-	| typeof VIEW_MOBILE
-	| typeof VIEW_FULLSCREEN
-	| typeof VIEW_MAP_ONLY;
-
-export const VIEW_DESKTOP = "desktop";
-export const VIEW_MOBILE = "mobile";
-
-export const VIEW_FULLSCREEN = "fullscreen";
-export const VIEW_MAP_ONLY = "mapOnly";
-
-export const DETAILS_CONTENT_STATE_KEY = "featureItemDetailsContent";
-
-export const ZOOM_IN = "zoomIn";
-export const ZOOM_OUT = "zoomOut";

package/src/js/config/constants/controllers.ts

@@ -1,11 +0,0 @@
-export const FEATURE_SOURCES = "featureSources";
-export const FEATURE_SELECTIONS = "featureSelections";
-
-export const FEATURE_LIST = "list";
-export const MAP = "map";
-export const PROJECTIONS = "projections";
-
-export const USER_GEOLOCATION = "userGeolocation";
-
-export const TIME_FILTER = "timeFilter";
-export const TAG_FILTER = "tagFilter";

package/src/js/config/feature/selections.ts

@@ -1,13 +0,0 @@
-// ausgewähltes Feature für Detail-Ansicht
-export const FEATURE_SELECTION_SELECT = "select";
-// in Liste vorgewähltes Feature, ohne Detailansicht
-export const FEATURE_SELECTION_PRESELECT = "preselect";
-// in Liste und Karte hervorheben bei Mouse-Hover
-export const FEATURE_SELECTION_HIGHLIGHT = "highlight";
-
-// Attention! With respect to the map icon state this is an ordered collection. The map vector style will only correspond to that set state with the highest priority, ie. the one which has been mentioned first.
-export default {
-	[FEATURE_SELECTION_SELECT]: {max: 1},
-	[FEATURE_SELECTION_HIGHLIGHT]: {max: 1},
-	[FEATURE_SELECTION_PRESELECT]: {max: 1},
-};

package/src/js/config/feature/sources.ts

@@ -1,77 +0,0 @@
-import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
-
-export {TIME_FILTER, TAG_FILTER} from "../constants/controllers";
-
-/**
- * Create an empty feature source that can be filled using actions
- * and cannot not load features itself.
- *
- * @returns config for a plain feature source
- */
-export function plain(): FeatureSourceState {
-	return {
-		type: "noop" as const,
-		data: null,
-		lastUpdate: null,
-		lastActionType: null,
-	};
-}
-
-/**
- * Create a feature source that loads data from a remote url.
- *
- * @param url url to fetch data from
- * @returns config for a xhr json feature source
- */
-export function xhrJson(url: string): FeatureSourceState {
-	return {
-		type: "xhr-json" as const,
-		url: url,
-		data: null,
-		lastUpdate: null,
-		lastActionType: null,
-	};
-}
-
-/**
- * Create a feature source that fetches data from a remote url.
- *
- * Additionally, it will fetch the data every {timer} milliseconds.
- *
- * @param url url to fetch data from
- * @param timer time in milliseconds to fetch new data
- * @returns config for a xhr json feature source that will refresh regularly
- */
-export function xhrJsonRefreshing(
-	url: string,
-	timer: number,
-): FeatureSourceState {
-	return {
-		type: "xhr-json" as const,
-		url: url,
-		doRefresh: true,
-		timer: timer,
-		data: null,
-		lastUpdate: null,
-		lastActionType: null,
-	};
-}
-
-/**
- * add a filter to the definition of a feature source.
- *
- * may be used iteratively.
- *
- * @param featureSource definition to extend by filterName
- * @param filterName name of filter to add to the filter collection. The feature filter will be applied when using the appropriate feature source selectors.
- * @returns extended definition of feature source
- */
-export function withFilter(
-	featureSource: Partial<FeatureSourceState>,
-	filterName: string,
-): Partial<FeatureSourceState> {
-	return {
-		...featureSource,
-		filters: [...(featureSource.filters || []), filterName],
-	};
-}

package/src/js/config/index.ts

@@ -1,133 +0,0 @@
-import type {Coordinate} from "ol/coordinate";
-import type {Extent} from "ol/extent";
-import type {ProjectionLike} from "ol/proj";
-
-import type {FeatureSourceState} from "@mapsight/core/lib/feature-sources/types";
-import type {FeatureInteractions} from "@mapsight/core/lib/map/lib/WithFeatureInteractions";
-import type {LayerDefinition} from "@mapsight/core/lib/map/lib/WithLayers";
-import type {Options} from "@mapsight/core/lib/map/types";
-
-import {
-	FEATURE_LIST,
-	FEATURE_SELECTIONS,
-	FEATURE_SOURCES,
-	MAP,
-	PROJECTIONS,
-	TIME_FILTER,
-} from "./constants/controllers";
-import featureSelections, {
-	FEATURE_SELECTION_HIGHLIGHT,
-	FEATURE_SELECTION_SELECT,
-} from "./feature/selections";
-import createFeatureInteractions from "./map/featureInteractions";
-import mapInteractions from "./map/interactions";
-
-export const defaultProjections: Array<ProjectionLike> = [];
-
-export function mapViewCenter(x: number, y: number): Coordinate {
-	return [x, y];
-}
-
-export function mapViewExtent(
-	minx: number,
-	miny: number,
-	maxx: number,
-	maxy: number,
-): Extent {
-	return [minx, miny, maxx, maxy];
-}
-
-export function mapView(
-	center: Coordinate,
-	extent: Extent,
-	zoom = 13,
-	minZoom = 5,
-	maxZoom = 18,
-): Options {
-	return {
-		center: center,
-		extent: extent,
-		zoom: zoom,
-		minZoom: minZoom,
-		maxZoom: maxZoom,
-	};
-}
-
-// FIXME need function for layers
-
-export function map(
-	layers: Record<string, LayerDefinition>,
-	view: Options,
-	projections = defaultProjections,
-	visible = false,
-	featureInteractions: FeatureInteractions = createFeatureInteractions(),
-) {
-	if (!projections) {
-		projections = defaultProjections;
-	}
-
-	return {
-		[MAP]: {
-			layers: layers,
-			moveTolerance: 2,
-			interactions: mapInteractions,
-			featureInteractions: featureInteractions,
-			view: view,
-			visible: visible,
-		},
-		[PROJECTIONS]: projections,
-	};
-}
-
-export function features(
-	featureSources: Record<string, Partial<FeatureSourceState>>,
-) {
-	return {
-		[FEATURE_SELECTIONS]: featureSelections,
-		[FEATURE_SOURCES]: featureSources,
-	};
-}
-
-// TODO derzeit ist nur eine Liste erlaubt!
-export function featureList(featureSourceName: string, visible = false) {
-	return {
-		[FEATURE_LIST]: {
-			visible: visible,
-			featureSource: featureSourceName,
-			featureSelectionHighlight: FEATURE_SELECTION_HIGHLIGHT,
-			featureSelectionSelect: FEATURE_SELECTION_SELECT,
-		},
-	};
-}
-
-export function timeFilter(visible = false) {
-	return {
-		[TIME_FILTER]: {
-			// TODO dies gehört nicht in diese js/config und nicht in die
-			//  Eigenschaften des TimeFilter-FilterController, sondern in den uiState
-			visible: visible,
-		},
-	};
-}
-
-export function defaultTopOffsetForView(_view: string) {
-	return 0;
-}
-
-/** @type {import('../types').SiteConfig} */
-export const siteConfig = {
-	/** base url of app. this must be set for server-side rendering and is not used when run in browser */
-	baseUrl: "//set this for server based rendering//",
-
-	/** images base url */
-	imagesUrl: "/images/",
-
-	/** search api url for feature search */
-	searchUrl: "/poi-search-api/",
-
-	/** search api query parameter for feature search */
-	searchQueryParameter: "query",
-
-	/** function to get top offset for the given view */
-	topOffsetForView: defaultTopOffsetForView,
-};

package/src/js/config/map/featureInteractions.ts

@@ -1,53 +0,0 @@
-import type {FeatureInteractions} from "@mapsight/core/lib/map/lib/WithFeatureInteractions";
-
-export default function createFeatureInteractions({
-	hitTolerance = 5,
-	deselectUncontrolledOnClick = null,
-}: {
-	hitTolerance?: number;
-	deselectUncontrolledOnClick?: Array<string> | null;
-} = {}): FeatureInteractions {
-	return {
-		mouseover: {
-			selection: "mouseover",
-			options: {
-				// mouse event button
-				main: true,
-				auxiliary: false,
-				secondary: false,
-				fourth: false,
-				fifth: false,
-
-				// options
-				cursor: "pointer",
-				deselectUncontrolled: null,
-				hitTolerance: hitTolerance,
-			},
-		},
-
-		mousedown: {
-			selection: "mousedown",
-			options: {
-				// mouse event button
-				main: true,
-				auxiliary: false,
-				secondary: false,
-				fourth: false,
-				fifth: false,
-
-				// options
-				deselectUncontrolled: deselectUncontrolledOnClick,
-				hitTolerance: hitTolerance,
-			},
-		},
-
-		touch: {
-			selection: "touch",
-			options: {
-				// options
-				deselectUncontrolled: deselectUncontrolledOnClick,
-				hitTolerance: hitTolerance,
-			},
-		},
-	};
-}

package/src/js/config/map/interactions.ts

@@ -1,15 +0,0 @@
-import type {Description} from "@mapsight/core/ol-proxy";
-
-const INTERACTIONS: Record<string, Description> = {
-	DragPan: {
-		type: "DragPanInteraction",
-		options: {kinetic: [-0.005, 0.05, 100]},
-	},
-	PinchZoom: {type: "PinchZoomInteraction"},
-	DoubleClickZoom: {type: "DoubleClickZoomInteraction"},
-	MouseWheelZoom: {type: "MouseWheelZoomInteraction"},
-	KeyboardPan: {type: "KeyboardPanInteraction"},
-	KeyboardZoom: {type: "KeyboardZoomInteraction"},
-};
-
-export default INTERACTIONS;

package/src/js/config/map/layers.ts

@@ -1,190 +0,0 @@
-import type {ProjectionLike} from "ol/proj";
-
-import type {
-	Description,
-	LayerMetaData,
-	OptionValue,
-	Options,
-} from "@mapsight/core/lib/map/types";
-
-import type {MapsightStyleFunctionEnv} from "@mapsight/lib-ol/style/styleFunction";
-
-import {FEATURE_SELECTIONS, FEATURE_SOURCES} from "../constants/controllers";
-import {
-	FEATURE_SELECTION_HIGHLIGHT,
-	FEATURE_SELECTION_SELECT,
-} from "../feature/selections";
-
-export function features(
-	featureSourceId: string,
-	visible = false,
-	interactive = false,
-	_metaData: LayerMetaData = {},
-	style: string | MapsightStyleFunctionEnv = "features",
-	sourceOptions?: Options,
-): Description {
-	return {
-		type: "VectorLayer",
-		options: {
-			visible: visible,
-			style: style as OptionValue,
-			//updateWhileAnimating: true,
-			//updateWhileInteracting: true,
-			renderBuffer: 200,
-			source: {
-				type: "VectorFeatureSource",
-				options: {
-					featureSourceId,
-					featureSourcesControllerName: FEATURE_SOURCES,
-					featureSelectionsControllerName: FEATURE_SELECTIONS,
-					...sourceOptions,
-				},
-			},
-			selections: !interactive
-				? {}
-				: {
-						//'second-touch': FEATURE_SELECTION_SELECT,
-						//touch: FEATURE_SELECTION_HIGHLIGHT,
-						mousedown: FEATURE_SELECTION_SELECT,
-						touch: FEATURE_SELECTION_SELECT,
-						mouseover: FEATURE_SELECTION_HIGHLIGHT,
-					},
-		},
-		metaData: _metaData,
-	};
-}
-
-export function interactiveFeatures(
-	featureSourceId,
-	visible = false,
-	_metaData = {},
-	style: string | MapsightStyleFunctionEnv = "features",
-	sourceOptions?: Options,
-) {
-	return features(
-		featureSourceId,
-		visible,
-		true,
-		_metaData,
-		style,
-		sourceOptions,
-	);
-}
-
-export function userGeolocation(
-	featureSourceId: string,
-	visible = false,
-	_metaData: LayerMetaData = {},
-	style: string | MapsightStyleFunctionEnv = "userGeolocation",
-	sourceOptions?: Options,
-) {
-	const base = features(
-		featureSourceId,
-		visible,
-		false,
-		_metaData,
-		style,
-		sourceOptions,
-	);
-
-	return {
-		...base,
-		options: {
-			...base.options,
-			updateWhileAnimating: true,
-			updateWhileInteracting: true,
-			renderBuffer: 400,
-		},
-	};
-}
-
-export function osm(url: string, visible = false, _metaData = {}) {
-	return {
-		type: "TileLayer",
-		metaData: _metaData,
-		options: {
-			source: {
-				type: "OsmSource",
-				options: {url},
-			},
-			visible,
-		},
-	};
-}
-
-export function wms(
-	url: string,
-	params = {},
-	projection: ProjectionLike = "ESPG:3857",
-	visible = false,
-	_metaData: LayerMetaData = {},
-	opacity?: number,
-) {
-	return {
-		type: "TileLayer",
-		metaData: _metaData,
-		options: {
-			source: {
-				type: "TileWMSSource",
-				options: {
-					projection,
-					url,
-					params,
-				},
-			},
-			visible,
-			opacity,
-		},
-	};
-}
-
-// TODO metadata auftrennen in metaData, withAttribution() und withLegend()
-export function metaData(
-	title: string,
-	attribution: string | null = null,
-	visibleInLayerSwitcher = false,
-	visibleInExternalLayerSwitcher = false,
-	isBaseLayer = false,
-	group: string | null = null,
-	lockedInLayerSwitcher = undefined,
-): LayerMetaData {
-	return {
-		title,
-		attribution: attribution ?? undefined,
-		visibleInLayerSwitcher,
-		visibleInExternalLayerSwitcher,
-		group: group ?? undefined,
-		isBaseLayer,
-		lockedInLayerSwitcher, // users can't change layer's visbility TODO this has to be implemented
-	};
-}
-
-export function metaDataWithAttribution(
-	_metaData: LayerMetaData = {},
-	attribution: string,
-): LayerMetaData {
-	return {
-		..._metaData,
-		attribution: attribution,
-	};
-}
-
-export function metaDataWithLegend(
-	_metaData: LayerMetaData = {},
-	legend,
-): LayerMetaData {
-	return {
-		..._metaData,
-		legend: legend,
-	};
-}
-
-export function metaDataWithMiniLegend(
-	_metaData: LayerMetaData = {},
-	miniLegend,
-): LayerMetaData {
-	return {
-		..._metaData,
-		miniLegend: miniLegend,
-	};
-}

package/src/js/controllers/defaults.ts

@@ -1,36 +0,0 @@
-import type {BaseController} from "@mapsight/core/lib/base/controller";
-import {FeatureSelectionsController} from "@mapsight/core/lib/feature-selections/controller";
-import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/controller";
-import {FilterController} from "@mapsight/core/lib/filter/controller";
-import {ListController} from "@mapsight/core/lib/list/controller";
-import {MapController} from "@mapsight/core/lib/map/controller";
-import {ProjectionsController} from "@mapsight/core/lib/projections/controller";
-import {UserGeolocationController} from "@mapsight/core/lib/user-geolocation/controller";
-
-import * as c from "../config/constants/controllers";
-import {createTagFilterFunction} from "../filters/tag-filter";
-import timeFilter from "../filters/time-filter";
-import type {MapsightUiContext} from "../types";
-
-export function createDefaultControllers(
-	context: MapsightUiContext,
-): Record<string, BaseController> {
-	const mapController = new MapController(c.MAP);
-	mapController.setStyleFunction(context.styleFunction);
-
-	return {
-		[c.PROJECTIONS]: new ProjectionsController(c.PROJECTIONS),
-		[c.MAP]: mapController,
-		[c.FEATURE_LIST]: new ListController(c.FEATURE_LIST),
-		[c.TIME_FILTER]: new FilterController(c.TIME_FILTER, timeFilter),
-		[c.TAG_FILTER]: new FilterController(
-			c.TAG_FILTER,
-			createTagFilterFunction(),
-		),
-		[c.USER_GEOLOCATION]: new UserGeolocationController(c.USER_GEOLOCATION),
-		[c.FEATURE_SOURCES]: new FeatureSourcesController(c.FEATURE_SOURCES),
-		[c.FEATURE_SELECTIONS]: new FeatureSelectionsController(
-			c.FEATURE_SELECTIONS,
-		),
-	};
-}