@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,127 +0,0 @@
-import React, { useRef, useEffect, useContext, FC, RefObject } from 'react';
-
-import MapContext, { MapContextType } from '../../contexts/MapContext';
-import MapLibreGlWrapper from './lib/MapLibreGlWrapper';
-
-import { MapOptions as MapOptionsType, Map } from 'maplibre-gl';
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-type MapLibreMapProps = {
-	/**
-	 * Id of the MapLibreGl(Wrapper) instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * Config object that is passed to the MapLibreGl constructor as first parameter.
-	 * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
-	 * available properties.
-	 */
-	options?: Partial<MapOptionsType>;
-	/**
-	 * css style definition passed to the map container DOM element
-	 */
-	style?: object;
-};
-
-const defaultProps: MapLibreMapProps = {
-	mapId: undefined,
-	options: {
-		center: { lng: 8.607, lat: 53.1409349 },
-		zoom: 11,
-		container: '',
-		style: {
-			version: 8,
-			name: 'blank',
-			center: [0, 0],
-			zoom: 0,
-			sources: {},
-			sprite: 'https://wms.wheregroup.com/tileserver/sprites/osm-bright',
-			glyphs: 'https://wms.wheregroup.com/tileserver/fonts/{fontstack}/{range}.pbf',
-			layers: [
-				{
-					id: '_background',
-					type: 'background',
-					paint: {
-						'background-color': 'rgba(0,0,0,0)',
-					},
-				},
-			],
-		},
-	},
-};
-
-/**
- * Creates a MapLibreGlWrapper instance and registers it in MapContext
- * after the MapLibre-gl load event has fired.
- *
- * MapLibreMap returns the html node that will be used by MapLibre-gl to render the map.
- * This Component must be kept unaware of any related components that interact with the MapLibre-gl
- * instance.
- *
- * @category Map components
- */
-const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
-	const map = useRef<MapLibreGlWrapper>();
-	const mapContainer = useRef<HTMLDivElement>();
-
-	const mapContext = useContext<MapContextType>(MapContext);
-
-	const mapIdRef = useRef(props.mapId);
-	const initializedRef = useRef(false);
-	const currentStyle = useRef(props.options?.style);
-
-	useEffect(() => {
-		const mapId = mapIdRef.current;
-
-		return () => {
-			mapContext.removeMap(mapId);
-			map.current?.map?.remove?.();
-			map.current = undefined;
-		};
-	}, []);
-
-	useEffect(() => {
-		if (initializedRef.current) return;
-
-		if (mapContainer.current) {
-			initializedRef.current = true;
-			map.current = new MapLibreGlWrapper({
-				mapOptions: {
-					style: '',
-					...props.options,
-					...(props?.options?.style ? {} : { style: defaultProps?.options?.style }),
-					container: mapContainer.current,
-				},
-				onReady: (map: Map, wrapper: MapLibreGlWrapper) => {
-					map.once('load', () => {
-						if (props.mapId) {
-							mapContext.registerMap(props.mapId, wrapper);
-						} else {
-							mapContext.setMap(wrapper);
-						}
-					});
-				},
-			});
-		}
-	}, [props.options, props.mapId]);
-
-	useEffect(() => {
-		if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
-			console.log('set style');
-			currentStyle.current = props.options.style;
-			map.current.map.setStyle(props.options.style);
-		}
-	}, [props?.options?.style]);
-
-	return (
-		<div
-			ref={mapContainer as RefObject<HTMLDivElement>}
-			className="mapContainer"
-			style={props.style}
-		/>
-	);
-};
-
-MapLibreMap.defaultProps = defaultProps;
-
-export default MapLibreMap;

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.test.js

@@ -1,395 +0,0 @@
-import React, { useRef, useEffect, useContext, useState } from "react";
-import { mount } from "enzyme";
-import MapContext, { MapComponentsProvider } from "../../../contexts/MapContext";
-import { v4 as uuidv4 } from "uuid";
-import MapLibreMap from "../MapLibreMap";
-
-// create plain MapLibre mock for this test
-var mockMapLibreMethods = {
-	addLayer: jest.fn(),
-	removeLayer: jest.fn(),
-	addSource: jest.fn(),
-	removeSource: jest.fn(),
-	addImage: jest.fn(),
-	removeImage: jest.fn(),
-	addControl: jest.fn(),
-	removeControl: jest.fn(),
-	on: jest.fn(),
-	off: jest.fn(),
-	once: (eventName, callback) => {
-		callback();
-	},
-	getLayer: () => ({}),
-	getSource: () => ({}),
-	hasImage: () => ({}),
-};
-mockMapLibreMethods.style = {
-	...mockMapLibreMethods,
-};
-jest.mock("maplibre-gl", () => {
-	const originalModule = jest.requireActual("maplibre-gl");
-
-	return {
-		...originalModule,
-		Map: function () {
-			return {
-				...mockMapLibreMethods,
-			};
-		},
-		NavigationControl: jest.fn(),
-	};
-});
-
-const MapLibreGlWrapperTestComponent = (props) => {
-	const [childrenAreVisible, setChildrenAreVisible] = useState(true);
-
-	return (
-		<>
-			<button
-				className="toggle_children_are_visible"
-				onClick={() => {
-					setChildrenAreVisible(!childrenAreVisible);
-				}}
-			>
-				toggle children
-			</button>
-
-			<MapLibreMap />
-			{childrenAreVisible && props.children}
-		</>
-	);
-};
-
-const MlTestComponentTemplate = (props) => {
-	const mapContext = useContext(MapContext);
-
-	const initializedRef = useRef(false);
-	const mapRef = useRef(undefined);
-	const componentId = useRef(
-		(props.idPrefix ? props.idPrefix : "LayerTestComponent-") + uuidv4()
-	);
-
-	useEffect(() => {
-		let _componentId = componentId.current;
-
-		return () => {
-			if (mapRef.current) {
-				mapRef.current.cleanup(_componentId);
-				mapRef.current = undefined;
-			}
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-		// the MapLibre-gl instance (mapContext.map) is accessible here
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
-
-		props.afterInit(mapRef.current, componentId.current);
-	}, [mapContext.mapIds, mapContext, props]);
-
-	return <></>;
-};
-// add & remove layer tests
-const LayerTestComponent = (props) => {
-	return (
-		<MlTestComponentTemplate
-			{...props}
-			afterInit={(map, componentId) => {
-				for (let i = 0; i < props.cnt; i++) {
-					map.addLayer({ id: uuidv4() }, undefined, componentId);
-				}
-			}}
-		/>
-	);
-};
-
-describe("MapLibreGlWrapper - layer tests", () => {
-	it("should add a layer using addLayer to MapLibreGl", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<LayerTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addLayer).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove a layer using removeLayer from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<LayerTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addLayer).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeLayer).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove 3 layers using removeLayer from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<LayerTestComponent cnt={3} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addLayer).toHaveBeenCalledTimes(3);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeLayer).toHaveBeenCalledTimes(3);
-	});
-});
-
-// add & remove source tests
-const SourceTestComponent = (props) => {
-	return (
-		<MlTestComponentTemplate
-			{...props}
-			afterInit={(map, componentId) => {
-				for (let i = 0; i < props.cnt; i++) {
-					map.addSource(uuidv4(), {}, componentId);
-				}
-			}}
-		/>
-	);
-};
-
-describe("MapLibreGlWrapper - source tests", () => {
-	it("should add a source using addSource to MapLibreGl", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<SourceTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addSource).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove a source using removeSource from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<SourceTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addSource).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeSource).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove 3 sources using removeSource from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<SourceTestComponent cnt={3} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addSource).toHaveBeenCalledTimes(3);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeSource).toHaveBeenCalledTimes(3);
-	});
-});
-
-// add & remove image tests
-const ImageTestComponent = (props) => {
-	return (
-		<MlTestComponentTemplate
-			{...props}
-			afterInit={(map, componentId) => {
-				for (let i = 0; i < props.cnt; i++) {
-					map.addImage(uuidv4(), {}, componentId);
-				}
-			}}
-		/>
-	);
-};
-
-describe("MapLibreGlWrapper - image tests", () => {
-	it("should add an image using addImage to MapLibreGl", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ImageTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addImage).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove an image using removeImage from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ImageTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addImage).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeImage).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove 3 images using removeImage from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ImageTestComponent cnt={3} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addImage).toHaveBeenCalledTimes(3);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeImage).toHaveBeenCalledTimes(3);
-	});
-});
-
-// add & remove event listener tests
-const EventTestComponent = (props) => {
-	return (
-		<MlTestComponentTemplate
-			{...props}
-			afterInit={(map, componentId) => {
-				for (let i = 0; i < props.cnt; i++) {
-					map.on("event", () => ({}), componentId);
-				}
-			}}
-		/>
-	);
-};
-
-describe("MapLibreGlWrapper - event tests", () => {
-	it("should add a event listener using on to MapLibreGl", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<EventTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
-	});
-
-	it("should remove an event using off from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<EventTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove 3 events using off from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<EventTestComponent cnt={3} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to "data", "move" events on its own
-		expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
-	});
-});
-// add & remove controls tests
-const ControlTestComponent = (props) => {
-	return (
-		<MlTestComponentTemplate
-			{...props}
-			afterInit={(map, componentId) => {
-				for (let i = 0; i < props.cnt; i++) {
-					map.addControl({}, "top-left", componentId);
-				}
-			}}
-		/>
-	);
-};
-
-describe("MapLibreGlWrapper - control tests", () => {
-	it("should add a control using addControl to MapLibreGl", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ControlTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove a control using removeControl from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ControlTestComponent cnt={1} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeControl).toHaveBeenCalledTimes(1);
-	});
-
-	it("should remove 3 controls using removeControl from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<MapLibreGlWrapperTestComponent>
-					<ControlTestComponent cnt={3} />
-				</MapLibreGlWrapperTestComponent>
-			</MapComponentsProvider>
-		);
-
-		expect(mockMapLibreMethods.addControl).toHaveBeenCalledTimes(3);
-
-		wrapper.find(".toggle_children_are_visible").simulate("click");
-
-		expect(mockMapLibreMethods.removeControl).toHaveBeenCalledTimes(3);
-	});
-});