@mapsight/ui 7.0.0

package/src/js/plugins/browser/views.ts

@@ -0,0 +1,141 @@
+import throttle from "lodash/throttle";
+
+import {VIEW_DESKTOP, VIEW_MOBILE, type View} from "../../config/constants/app";
+import {setViewBreakpoints} from "../../store/actions";
+import type {
+	MapsightUiContext,
+	MapsightUiView,
+	PluginInstance,
+} from "../../types.ts";
+
+const getViewportWidth = () =>
+	Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
+const defaultResizeThrottleWait = 100;
+
+function defaultDetermineInitialClientRenderingView(
+	currentBreakpoints: string[],
+	_context: MapsightUiContext,
+): View {
+	// NOTE: This will only be used for client side only rendering, otherwise INITIAL view will be determined by server!
+	return currentBreakpoints.indexOf("mobile") > -1
+		? VIEW_MOBILE
+		: VIEW_DESKTOP;
+}
+
+/**
+ * This plugin will dispatch breakpoint changes for the specified renderBreakpoints (@see {CreateOptions.renderBreakpoints})
+ *
+ * @param [options] options
+ * @param [options.determineInitialView] function to determine the INITIAL view breakpoint for
+ *              the given currently active render breakpoints. Used for client-side rendering ONLY! Otherwise the initial view
+ *              is determined server side.
+ * @param [options.resizeThrottleWait=100] ms to wait between window resize events before updating breakpoints
+ * @returns  plugin instance
+ */
+export default function createPlugin(
+	options: {
+		determineInitialView?: (
+			currentBreakpoints: string[],
+			context: MapsightUiContext,
+		) => View;
+		resizeThrottleWait?: number;
+	} = {},
+): PluginInstance {
+	const {
+		determineInitialView = defaultDetermineInitialClientRenderingView,
+		resizeThrottleWait = defaultResizeThrottleWait,
+	} = options;
+
+	// sorted {label: [min (included), max (included)]}
+	// -1 = Infinity
+	let currentBreakpoints: MapsightUiView[] = [];
+	let currentWidth: number;
+	let renderBreakpoints: Record<string, [number, number]> = {};
+
+	if (typeof window === "undefined") {
+		console.error("This plugin will only work as intended in the browser!");
+	}
+
+	let isInitialSetDone = false;
+	return {
+		afterInit: function viewsInitPlugin(context) {
+			currentWidth = getViewportWidth();
+			renderBreakpoints = context.createOptions.renderBreakpoints ?? {};
+			currentBreakpoints = calculateCurrentBreakpoints(
+				renderBreakpoints,
+				currentWidth,
+			);
+
+			if (!context.isStateReHydrated && context.initialState?.app) {
+				context.initialState.app.view = determineInitialView(
+					currentBreakpoints,
+					context,
+				);
+			}
+		},
+		afterCreate: function viewsCreatePlugin(context) {
+			// We cannot change the state before we have not at least rendered the dehydrated html at least once
+			// to prevent a mixed up DOM when predicted (server-side) view and client-side determined view mismatch or has changed
+			// since page load. If the app is not rehydrated but initially rendered in the client we can omit the additional render
+			// and set the view breakpoints on creation (before render).
+			if (!context.isStateReHydrated) {
+				isInitialSetDone = true;
+				context.store?.dispatch(setViewBreakpoints(currentBreakpoints));
+			}
+
+			window.addEventListener(
+				"resize",
+				throttle(function handleWindowResize() {
+					const widthBefore = currentWidth;
+					currentWidth = getViewportWidth();
+					if (widthBefore === currentWidth) {
+						return;
+					}
+
+					const breakpointsBefore = currentBreakpoints;
+					currentBreakpoints = calculateCurrentBreakpoints(
+						renderBreakpoints,
+						currentWidth,
+					);
+					if (
+						(context.hasRendered &&
+							diffBreakpoints(
+								breakpointsBefore,
+								currentBreakpoints,
+							).length) ||
+						diffBreakpoints(currentBreakpoints, breakpointsBefore)
+							.length
+					) {
+						context.store?.dispatch(
+							setViewBreakpoints(currentBreakpoints),
+						);
+						isInitialSetDone = true;
+					}
+				}, resizeThrottleWait),
+			);
+		},
+		afterRender: function (context) {
+			if (!isInitialSetDone) {
+				isInitialSetDone = true;
+				context.store?.dispatch(setViewBreakpoints(currentBreakpoints));
+			}
+		},
+	};
+}
+
+function diffBreakpoints(a: string[], b: string[]): string[] {
+	return a.filter((x) => !b.includes(x));
+}
+
+function calculateCurrentBreakpoints(
+	breakpoints: Record<MapsightUiView, [number, number]>,
+	currentWidth: number,
+) {
+	return Object.keys(breakpoints).filter((key: MapsightUiView) => {
+		const from = breakpoints[key][0];
+		const end = breakpoints[key][1];
+
+		return from <= currentWidth && (end === -1 || end >= currentWidth);
+	}) as MapsightUiView[];
+}

package/src/js/plugins/browser-defaults.ts

@@ -0,0 +1,101 @@
+import {FEATURE_SELECTION_PRESELECT} from "../config/feature/selections";
+import type {PluginDefinition} from "../types.ts";
+import createAppTitlePlugin from "./browser/app-title.ts";
+import createFeatureDeepLinkPlugin from "./browser/feature-deep-link.ts";
+import createLocalStoragePlugin from "./browser/local-storage.ts";
+import createNoScrollPlugin from "./browser/no-scroll.ts";
+import createPiwikTrackFeatureSelectionEventPlugin from "./browser/piwik-track-feature-selection-event.ts";
+import createPiwikTrackFullscreenToggleEventPlugin from "./browser/piwik-track-fullscreen-toggle-event.ts";
+//import createQuitFullscreenOnRenderPlugin from './browser/quit-fullscreen-on-render';
+import createSearchPlugin from "./browser/search.ts";
+import createToggleMobileViewsPlugin from "./browser/toggle-mobile-views.ts";
+import createUserGeolocationPlugin from "./browser/user-geolocation.ts";
+import createViewsPlugin from "./browser/views.ts";
+import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url.ts";
+import createLangPlugin from "./common/lang.ts";
+import createOlProxyPlugin from "./common/ol-proxy.ts";
+
+/**
+ * Create the default set of plugins for use in the browser IN ORDER!
+ *
+ * @param options options map for default plugins
+ * @returns sorted list of plugins
+ */
+export default function createDefaultPlugins(
+	options: {
+		olProxy?: Parameters<typeof createOlProxyPlugin>[0];
+		appTitle?: Parameters<typeof createAppTitlePlugin>[0];
+		featurePreselectDeepLink?: Parameters<
+			typeof createFeatureDeepLinkPlugin
+		>[0];
+		featureDeepLink?: Parameters<typeof createFeatureDeepLinkPlugin>[0];
+		featureSelectionDetailsUrl?: Parameters<
+			typeof createFeatureSelectionDetailsUrlPlugin
+		>[0];
+		localStoragePlugin?: Parameters<typeof createLocalStoragePlugin>[0];
+		noScroll?: Parameters<typeof createNoScrollPlugin>[0];
+		piwikTrackFeatureSelectionEvent?: Parameters<
+			typeof createPiwikTrackFeatureSelectionEventPlugin
+		>[0];
+		piwikTrackFullscreenToggleEvent?: Parameters<
+			typeof createPiwikTrackFullscreenToggleEventPlugin
+		>[0];
+		search?: Parameters<typeof createSearchPlugin>[0];
+		toggleMobileViews?: Parameters<typeof createToggleMobileViewsPlugin>[0];
+		userGeolocation?: Parameters<typeof createUserGeolocationPlugin>[0];
+		views?: Parameters<typeof createViewsPlugin>[0];
+	} = {},
+): PluginDefinition[] {
+	return [
+		["lang", createLangPlugin()],
+		["olProxy", createOlProxyPlugin(options.olProxy)],
+		["appTitle", createAppTitlePlugin(options.appTitle)],
+		[
+			"featurePreselectDeepLink",
+			createFeatureDeepLinkPlugin({
+				getParameter: "preselect",
+				featureSelection: FEATURE_SELECTION_PRESELECT,
+				clearMissingParameters: ["feature"],
+				...(options.featurePreselectDeepLink || {}),
+			}),
+		],
+		[
+			"featureDeepLink",
+			createFeatureDeepLinkPlugin(options.featureDeepLink),
+		],
+		[
+			"featureSelectionDetailsUrl",
+			createFeatureSelectionDetailsUrlPlugin(
+				options.featureSelectionDetailsUrl,
+			),
+		],
+		[
+			"localStoragePlugin",
+			createLocalStoragePlugin(options.localStoragePlugin),
+		],
+		["noScroll", createNoScrollPlugin(options.noScroll)],
+		[
+			"piwikTrackFeatureSelectionEvent",
+			createPiwikTrackFeatureSelectionEventPlugin(
+				options.piwikTrackFeatureSelectionEvent,
+			),
+		],
+		[
+			"piwikTrackFullscreenToggleEvent",
+			createPiwikTrackFullscreenToggleEventPlugin(
+				options.piwikTrackFullscreenToggleEvent,
+			),
+		],
+		["search", createSearchPlugin(options.search)],
+		//['quitFullscreenOnRender', createQuitFullscreenOnRenderPlugin(options.quitFullscreenOnRender)],
+		[
+			"toggleMobileViews",
+			createToggleMobileViewsPlugin(options.toggleMobileViews),
+		],
+		[
+			"userGeolocation",
+			createUserGeolocationPlugin(options.userGeolocation),
+		],
+		["views", createViewsPlugin(options.views)],
+	];
+}

package/src/js/plugins/common/feature-selection-details-url.ts

@@ -0,0 +1,135 @@
+import {createFeatureSelectionSelector} from "@mapsight/core/lib/feature-selections/selectors";
+import {findFeatureInFeatureSourcesById} from "@mapsight/core/lib/feature-sources/selectors";
+import type {FeatureSourcesState} from "@mapsight/core/lib/feature-sources/types";
+import type {State} from "@mapsight/core/types";
+
+import {getAndObserveState} from "@mapsight/lib-redux/observe-state";
+
+import * as c from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {setFeatureDetailsUrl} from "../../store/actions";
+import type {
+	MapsightUiFeature,
+	MapsightUiFeatureProperty,
+	PluginInstance,
+} from "../../types.ts";
+
+const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
+const defaultFeatureSourcesController = c.FEATURE_SOURCES;
+const defaultFeatureSelection = FEATURE_SELECTION_SELECT;
+const defaultFeaturePropertyDetailsUrl: MapsightUiFeatureProperty =
+	"detailsUrl";
+
+/**
+ * This plugin will load the dispatch the details url on feature selection.
+ *
+ * @param {object} [options] options
+ * @param {string} [options.featureSelectionsController] name of the feature selections controller, defaults to mapsight ui default
+ * @param {string} [options.featureSelection="select"] name of the feature selection to track
+ * @param {string} [options.featureSourcesController] name of the feature sources controller, defaults to mapsight ui default
+ * @param {string} [options.featurePropertyDetailsUrl="detailsUrl"] feature property to get the details url from
+ * @returns {import('../../types').PluginInstance} plugin instance
+ */
+export default function createPlugin(
+	options: {
+		featureSelectionsController?: string;
+		featureSelection?: string;
+		featureSourcesController?: string;
+		featurePropertyDetailsUrl?: MapsightUiFeatureProperty;
+	} = {},
+): PluginInstance {
+	const {
+		featureSelectionsController = defaultFeatureSelectionsController,
+		featureSelection = defaultFeatureSelection,
+		featureSourcesController = defaultFeatureSourcesController,
+		featurePropertyDetailsUrl = defaultFeaturePropertyDetailsUrl,
+	} = options;
+	const selectorSelectedFeatures = createFeatureSelectionSelector(
+		featureSelectionsController,
+		featureSelection,
+	);
+
+	return {
+		beforeRender: function setupFeatureSelection(context) {
+			const {store} = context;
+			if (!store) return;
+
+			let unsubscribeObserveSelectedFeature: undefined | (() => void);
+
+			const handleFeatureSelection = () => {
+				if (unsubscribeObserveSelectedFeature) {
+					unsubscribeObserveSelectedFeature();
+					unsubscribeObserveSelectedFeature = undefined;
+				}
+
+				const state = store.getState();
+				const selection = selectorSelectedFeatures(state);
+				const featureIds = selection?.features;
+
+				if (!featureIds || !featureIds.length) {
+					return;
+				}
+
+				// Anmerkung: Dieser Code ignoriert den Sonderfall, dass sich die URL eines bereits selektierten POI _nach_ dem Select und nach dem ersten Load aufgrund eines Reloads ändert
+				// Der Code in fetchText sieht zudem kein Refresh der Inhalte vor. Der angezeigte Text ist also auch aus anderen Gründen potentiell veraltet.
+				// In Beiden Fällen kann der User das Aktualsiseren auslösen indem er den POI deselektiert (Feature-Details schließt) und wieder selektiert.
+				// → diese Sonderfälle werden zu Recht ignoriert. Wo man das automatische Aktualisieren braucht, schreibe man die Description direkt in die geojson.
+
+				const detailsUrlSelector = (state: State) => {
+					const selectedFeature = findFeatureInFeatureSourcesById(
+						state[featureSourcesController] as FeatureSourcesState,
+						featureIds[0]!,
+					);
+					if (selectedFeature) {
+						return getFeatureProperty(
+							selectedFeature as MapsightUiFeature,
+							featurePropertyDetailsUrl,
+						) as string | null;
+					}
+
+					return null;
+				};
+				const detailsUrl = detailsUrlSelector(state);
+				if (detailsUrl) {
+					// im Normalfall setzt der User das Select und da ist das Feature schon geladen.
+					store.dispatch(setFeatureDetailsUrl(detailsUrl));
+					return;
+				}
+
+				// wenn das feature anderweitig, zB. über einen Url-Parameter gesetzt wird, ist es noch nicht geladen
+				// dann und nur dann darauf warten.
+				// das betrifft aber nicht den SSR-Fall, dafür ist render-await-... zuständig.
+
+				const updateFeatureDetailsUrl = () => {
+					const updatedState = store.getState();
+					const updatedSelection =
+						selectorSelectedFeatures(updatedState);
+					const updatedFeatureIds = updatedSelection?.features ?? [];
+					const updatedDetailsUrl = detailsUrlSelector(
+						store.getState(),
+					);
+
+					if (
+						updatedDetailsUrl &&
+						featureIds[0] === updatedFeatureIds[0] // entprellen, falls updateFeatureDetailsUrl zB. beim unsubscribe aufgerufen wird und inzwischen ein anderer poi selektiert ist
+					) {
+						store.dispatch(setFeatureDetailsUrl(updatedDetailsUrl));
+					}
+				};
+
+				unsubscribeObserveSelectedFeature = getAndObserveState(
+					store,
+					detailsUrlSelector,
+					updateFeatureDetailsUrl,
+				);
+			};
+
+			getAndObserveState(
+				store,
+				selectorSelectedFeatures,
+				handleFeatureSelection,
+			);
+		},
+	};
+}

package/src/js/plugins/common/lang.ts

@@ -0,0 +1,17 @@
+import {setDocumentLanguage} from "../../helpers/i18n";
+import type {PluginInstance} from "../../types";
+
+/**
+ * This plugin will apply a lang from the embedOptions to i18n
+ *
+ * @param [_options] options
+ * @returns plugin instance
+ */
+export default function createLangPlugin(_options = {}): PluginInstance {
+	return {
+		beforeRender: function pluginLangBeforeRender(context) {
+			const {lang} = context.createOptions;
+			if (lang) setDocumentLanguage(lang);
+		},
+	};
+}

package/src/js/plugins/common/measure-distance.ts

@@ -0,0 +1,223 @@
+import type {Store} from "redux";
+import {createSelector} from "reselect";
+
+import {mergeAll} 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_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 {
+	FEATURE_SELECTIONS,
+	FEATURE_SOURCES,
+	MAP,
+} from "../../config/constants/controllers";
+import {getDictionary} from "../../helpers/i18n";
+import type {PluginInstance} from "../../types.ts";
+
+export const createActivateAction = (mapController: string, name: string) =>
+	activateInteraction(mapController, `${name}_drawInteraction`);
+export const createDeactivateAction = (mapController: string, name: string) =>
+	deactivateInteraction(mapController, `${name}_drawInteraction`);
+
+/**
+ * @param options options
+ * @param options.store store
+ * @param options.name name name of the editor (must be unique per mapsight instance)
+ * @param options.mapControllerName map controller name
+ * @param options.featureSourcesControllerName feature sources controller name
+ * @param options.featureSelectionsControllerName feature selections controller name
+ * @param options.displayStyle style for finished draw
+ * @param options.drawStyle style while drawing
+ */
+function setupDrawInteraction({
+	store,
+	name,
+	featureSourcesControllerName,
+	featureSelectionsControllerName,
+	mapControllerName,
+	drawStyle,
+	displayStyle,
+}: {
+	store: Store;
+	name: string;
+	featureSourcesControllerName: string;
+	featureSelectionsControllerName: string;
+	mapControllerName: string;
+	drawStyle: string;
+	displayStyle: string;
+}) {
+	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: "LineString",
+							style: drawStyle,
+							replacePrevious: true,
+							clearOnStart: true,
+							source: vFS,
+							stopClick: true,
+							measure: {
+								active: true,
+								keepLabel: 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?.[0]?.geometry?.type === "Point") {
+			store.dispatch(deactivate);
+		}
+	});
+}
+
+const translations = {
+	de: {
+		"ui.measure-distance.title": "Strecke messen",
+		"ui.measure-distance.instructions":
+			"Klicken Sie auf die Karte um Punkte hinzuzufügen. Ein Doppelklick schließt die Strecke ab.",
+		"ui.measure-distance.instructions-done":
+			"Klicken Sie auf die Karte um eine neue Strecke zu messen.",
+		"ui.measure-distance.measurement": "Streckenlänge",
+	},
+	en: {
+		"ui.measure-distance.title": "Measure distance",
+		"ui.measure-distance.instructions":
+			"Click on the map to add points. Double click to end the line.",
+		"ui.measure-distance.instructions-done":
+			"Click on the map to start measuring a new line.",
+		"ui.measure-distance.measurement": "Distance",
+	},
+} as const;
+
+/**
+ * This plugin will allow drawing a link maker (to be used with the appropriate component)
+ * and/or display such a measurement.
+ *
+ * @param {object} [options] options
+ * @param [options.name="measureDistance"] name name of the editor (must be unique per mapsight instance)
+ * @param [options.mapControllerName="map"] map controller name
+ * @param [options.featureSourcesControllerName="featureSources"] feature sources controller name
+ * @param [options.featureSelectionsControllerName="featureSelections"] feature selections controller name
+ * @param [options.enableDrawing=true] enable drawing
+ * @param [options.displayStyle="features"] style for finished draw
+ * @param [options.drawStyle="drawMeasure"] style while drawing
+ * @param [options.drawInteraction] draw interaction
+ * @returns {import('../../types').PluginInstance} plugin
+ */
+export default function createMeasureDistancePlugin(
+	options: {
+		name?: string;
+		enableDrawing?: boolean;
+		mapControllerName?: string;
+		featureSourcesControllerName?: string;
+		featureSelectionsControllerName?: string;
+		displayStyle?: string;
+		drawStyle?: string;
+		drawInteraction?: Definition | null;
+	} = {},
+): PluginInstance {
+	const {
+		name = "measureDistance",
+		enableDrawing = true,
+		mapControllerName = MAP,
+		featureSourcesControllerName = FEATURE_SOURCES,
+		featureSelectionsControllerName = FEATURE_SELECTIONS,
+		displayStyle = DEFAULT_DISPLAY_STYLE,
+		drawStyle = "drawMeasure",
+		drawInteraction = DrawInteraction,
+	} = options;
+
+	const dict = getDictionary();
+
+	Object.entries(translations).forEach(([key, obj]) => {
+		Object.assign((dict[key] ??= {}), obj);
+	});
+
+	return {
+		afterCreate: function measureDistancePlugin({store}) {
+			if (!enableDrawing || !store) {
+				return;
+			}
+
+			if (drawInteraction) {
+				di.injectDefinitions([drawInteraction]);
+			}
+
+			setupDrawInteraction({
+				name: name,
+				store: store,
+				mapControllerName: mapControllerName,
+				featureSourcesControllerName: featureSourcesControllerName,
+				featureSelectionsControllerName:
+					featureSelectionsControllerName,
+				drawStyle: drawStyle,
+				displayStyle: displayStyle,
+			});
+		},
+	};
+}

package/src/js/plugins/common/ol-proxy.ts

@@ -0,0 +1,68 @@
+import type {Definition} from "@mapsight/core/ol-proxy";
+import {di} from "@mapsight/core/ol-proxy";
+import GeoJSONFormat from "@mapsight/core/ol-proxy/definitions/format/GeoJSONFormat";
+import DoubleClickZoomInteraction from "@mapsight/core/ol-proxy/definitions/interaction/DoubleClickZoomInteraction";
+import DragPanInteraction from "@mapsight/core/ol-proxy/definitions/interaction/DragPanInteraction";
+import KeyboardPanInteraction from "@mapsight/core/ol-proxy/definitions/interaction/KeyboardPanInteraction";
+import KeyboardZoomInteraction from "@mapsight/core/ol-proxy/definitions/interaction/KeyboardZoomInteraction";
+import MouseWheelZoomInteraction from "@mapsight/core/ol-proxy/definitions/interaction/MouseWheelZoomInteraction";
+import PinchZoomInteraction from "@mapsight/core/ol-proxy/definitions/interaction/PinchZoomInteraction";
+import SelectInteraction from "@mapsight/core/ol-proxy/definitions/interaction/SelectInteraction";
+import TileLayer from "@mapsight/core/ol-proxy/definitions/layer/TileLayer";
+import VectorLayer from "@mapsight/core/ol-proxy/definitions/layer/VectorLayer";
+import VectorOverlayLayer from "@mapsight/core/ol-proxy/definitions/layer/VectorOverlayLayer";
+import OSMSource from "@mapsight/core/ol-proxy/definitions/source/OsmSource";
+import TileWMSSource from "@mapsight/core/ol-proxy/definitions/source/TileWMSSource";
+import VectorFeatureSource from "@mapsight/core/ol-proxy/definitions/source/VectorFeatureSource";
+import VectorSource from "@mapsight/core/ol-proxy/definitions/source/VectorSource";
+
+import type {PluginInstance} from "../../types.ts";
+
+/**
+ * This plugin will inject the ol-proxy dependencies required by default.
+ *
+ * @param {object} [options] options
+ * @param {Array<import('@mapsight/core/ol-proxy').Definition<any>>} [options.dependencies={}] add or override dependencies
+ * @returns {import('../../types').PluginInstance} plugin instance
+ */
+export default function createPlugin({
+	dependencies = {},
+}: {
+	dependencies?: Definition[] | Record<string, Definition>;
+} = {}): PluginInstance {
+	return {
+		afterInit(_context) {
+			di.injectDefinitions([
+				// layer
+				TileLayer,
+				VectorLayer,
+				VectorOverlayLayer,
+
+				// source
+				VectorSource,
+				// TODO: Make optional to reduce bundle size
+				TileWMSSource,
+				OSMSource,
+				VectorFeatureSource,
+
+				// format
+				GeoJSONFormat,
+				// interaction
+				SelectInteraction,
+				DragPanInteraction,
+				DoubleClickZoomInteraction,
+				PinchZoomInteraction,
+				MouseWheelZoomInteraction,
+				KeyboardPanInteraction,
+				KeyboardZoomInteraction,
+			]);
+
+			if (Array.isArray(dependencies)) {
+				di.injectDefinitions(dependencies);
+			} else {
+				// workaround for legacy code
+				di.injectDefinitions(Object.values(dependencies));
+			}
+		},
+	};
+}