@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlLayerMagnify/MlLayerMagnify.tsx

@@ -1,17 +1,11 @@
-import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-	useMemo
-} from "react";
+import React, { useContext, useCallback, useRef, useEffect, useState, useMemo } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-import "./style.css";
-import	MapContext	from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 
-interface MlLayerMagnifyProps {
+export interface MlLayerMagnifyProps {
 	/**
 	 * Id of the first MapLibre instance
 	 */
@@ -24,6 +18,10 @@ interface MlLayerMagnifyProps {
 	 * Size of the "magnifier"-circle
 	 */
 	magnifierRadius?: number;
+	/**
+	 * object (React.CSSProperties) that is added to the magnifier default style
+	 */
+	magnifierStyle: React.CSSProperties | undefined;
 }
 
 /**
@@ -32,7 +30,7 @@ interface MlLayerMagnifyProps {
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
  */
 const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
-	const mapContext:MapContextType = useContext(MapContext);
+	const mapContext: MapContextType = useContext(MapContext);
 	const syncMoveInitializedRef = useRef(false);
 	const syncCleanupFunctionRef = useRef(() => {});
 
@@ -43,7 +41,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 	const magnifierRadius = useMemo(() => {
 		return props.magnifierRadius || 200;
-	},[props.magnifierRadius]);
+	}, [props.magnifierRadius]);
 
 	const mapExists = useCallback(() => {
 		if (!props.map1Id || !props.map2Id) {
@@ -66,11 +64,11 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 	});
 
 	useEffect(() => {
-		window.addEventListener("resize", onResize.current);
-		let _onResize = onResize.current;
+		window.addEventListener('resize', onResize.current);
+		const _onResize = onResize.current;
 
 		return () => {
-			window.removeEventListener("resize", _onResize);
+			window.removeEventListener('resize', _onResize);
 			syncCleanupFunctionRef.current();
 		};
 	}, []);
@@ -79,29 +77,24 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		(e) => {
 			if (!mapExists()) return;
 
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientX
 					: 0);
 			let clientY =
 				e.clientY ||
-				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientY
 					: 0);
 
 			clientX -= bounds.x;
 			clientY -= bounds.y;
-			let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-			let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+			const swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+			const swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
 
-			if (
-				swipeXRef.current !== swipeX_tmp ||
-				swipeYRef.current !== swipeY_tmp
-			) {
+			if (swipeXRef.current !== swipeX_tmp || swipeYRef.current !== swipeY_tmp) {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 				setSwipeY(swipeY_tmp);
@@ -110,9 +103,9 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 				mapContext.maps[props.map2Id].getContainer().style.clipPath =
 					`circle(${magnifierRadius}px at ` +
 					(parseFloat(swipeXRef.current) * bounds.width) / 100 +
-					"px " +
+					'px ' +
 					(parseFloat(swipeYRef.current) * bounds.height) / 100 +
-					"px)";
+					'px)';
 			}
 		},
 		[mapContext, mapExists, props, magnifierRadius]
@@ -160,53 +153,53 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		});
 	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 
-	const onDown = (e:any) => {
-		if (e.touches) {
-			document.addEventListener("touchmove", onMove);
-			document.addEventListener("touchend", onTouchEnd);
+	const onDown = (e: React.MouseEvent | React.TouchEvent) => {
+		if (e.nativeEvent instanceof TouchEvent) {
+			document.addEventListener('touchmove', onMove);
+			document.addEventListener('touchend', onTouchEnd);
 		} else {
-			document.addEventListener("mousemove", onMove);
-			document.addEventListener("mouseup", onMouseUp);
+			document.addEventListener('mousemove', onMove);
+			document.addEventListener('mouseup', onMouseUp);
 		}
 	};
 
 	const onTouchEnd = () => {
-		document.removeEventListener("touchmove", onMove);
-		document.removeEventListener("touchend", onTouchEnd);
+		document.removeEventListener('touchmove', onMove);
+		document.removeEventListener('touchend', onTouchEnd);
 	};
 
 	const onMouseUp = () => {
-		document.removeEventListener("mousemove", onMove);
-		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener('mousemove', onMove);
+		document.removeEventListener('mouseup', onMouseUp);
 	};
 
-	const onWheel = (e:any) => {
-		let evCopy = new WheelEvent(e.type, e);
+	const onWheel = (e: React.WheelEvent) => {
+		const evCopy = new WheelEvent(e.type, e as unknown as WheelEventInit);
 		mapContext.map.getCanvas().dispatchEvent(evCopy);
 	};
 
 	return (
 		<div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: swipeY + "%",
-				borderRadius: "50%",
-				width: magnifierRadius * 2 + 1 + "px",
-				height: magnifierRadius * 2 + 1 + "px",
-				background: "rgba(0,0,0,0)",
-				border: "2px solid #fafafa",
-				boxShadow:
-					"1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
-				cursor: "pointer",
-				zIndex: "110",
-				marginLeft: magnifierRadius * -1 - 1 + "px",
-				marginTop: magnifierRadius * -1 - 1 + "px",
-				textAlign: "center",
-				lineHeight: "91px",
-				fontSize: "2em",
-				color: "#fafafa",
-				userSelect: "none",
+				position: 'absolute',
+				left: swipeX + '%',
+				top: swipeY + '%',
+				borderRadius: '50%',
+				width: magnifierRadius * 2 - 2 + 'px',
+				height: magnifierRadius * 2 - 2 + 'px',
+				background: 'rgba(0,0,0,0)',
+				border: '2px solid #fafafa',
+				boxShadow: '1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)',
+				cursor: 'pointer',
+				zIndex: '110',
+				marginLeft: magnifierRadius * -1 - 1 + 'px',
+				marginTop: magnifierRadius * -1 - 1 + 'px',
+				textAlign: 'center',
+				lineHeight: '91px',
+				fontSize: '2em',
+				color: '#fafafa',
+				userSelect: 'none',
+				...props.magnifierStyle,
 			}}
 			onTouchStart={onDown}
 			onMouseDown={onDown}
@@ -217,6 +210,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 MlLayerMagnify.defaultProps = {
 	magnifierRadius: 200,
+	magnifierStyle: {},
 };
 
 export default MlLayerMagnify;

package/src/components/MlLayerSwipe/MlLayerSwipe.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlLayerSwipe/{MlLayerSwipe.stories.js → MlLayerSwipe.stories.tsx}

@@ -1,26 +1,24 @@
-import React from "react";
+import React from 'react';
 
-import MlLayerSwipe from "./MlLayerSwipe";
-import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
+import MlLayerSwipe from './MlLayerSwipe';
+import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
 
-import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
+import multiMapContextDecorator from '../../decorators/MultiMapContextDecorator';
 
 const storyoptions = {
-	title: "MapComponents/MlLayerSwipe",
-	name: "MlLayerSwipe",
+	title: 'MapComponents/MlLayerSwipe',
 	component: MlLayerSwipe,
-	argTypes: {
-	},
+	argTypes: {},
 	decorators: multiMapContextDecorator,
 };
-export default storyoptions;
 
-const Template = (args) => (
+export default storyoptions;
+const Template = () => (
 	<>
 		<MlWmsLayer
 			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
 			urlParameters={{
-				layers: "nw_uraufnahme_rw",
+				layers: 'nw_uraufnahme_rw',
 			}}
 			sourceOptions={{
 				minzoom: 13,

package/src/components/MlLayerSwipe/MlLayerSwipe.tsx

@@ -1,16 +1,11 @@
-import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-} from "react";
+import React, { useContext, useCallback, useRef, useEffect, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-import "./style.css";
-import MapContext from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 
-interface MlLayerSwipeProps {
+export interface MlLayerSwipeProps {
 	/**
 	 * Id of the first MapLibre instance.
 	 */
@@ -19,6 +14,10 @@ interface MlLayerSwipeProps {
 	 * Id of the second MapLibre instance.
 	 */
 	map2Id: string;
+	/**
+	 * object (React.CSSProperties) that is added to the button default style
+	 */
+	buttonStyle: React.CSSProperties | undefined;
 }
 
 /**
@@ -45,33 +44,28 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 	}, [mapContext, props.map1Id, props.map2Id]);
 
 	const cleanup = () => {
-			syncCleanupFunctionRef.current();
+		syncCleanupFunctionRef.current();
 	};
 
 	const onMove = useCallback(
 		(e) => {
 			if (!mapExists()) return;
 
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientX
 					: 0);
 
 			clientX -= bounds.x;
-			let swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
+			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
 
 			if (swipeXRef.current !== swipeX_tmp) {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 
-				var clipA =
-					"rect(0, " +
-					(swipeXRef.current * bounds.width) / 100 +
-					"px, 999em, 0)";
+				const clipA = 'rect(0, ' + (swipeXRef.current * bounds.width) / 100 + 'px, 999em, 0)';
 
 				mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
 			}
@@ -96,46 +90,47 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 		});
 	}, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
 
-	const onDown = (e: any) => {
-		if (e.touches) {
-			document.addEventListener("touchmove", onMove);
-			document.addEventListener("touchend", onTouchEnd);
+	const onDown = (e: React.MouseEvent | React.TouchEvent) => {
+		if (e.nativeEvent instanceof TouchEvent) {
+			document.addEventListener('touchmove', onMove);
+			document.addEventListener('touchend', onTouchEnd);
 		} else {
-			document.addEventListener("mousemove", onMove);
-			document.addEventListener("mouseup", onMouseUp);
+			document.addEventListener('mousemove', onMove);
+			document.addEventListener('mouseup', onMouseUp);
 		}
 	};
 
 	const onTouchEnd = () => {
-		document.removeEventListener("touchmove", onMove);
-		document.removeEventListener("touchend", onTouchEnd);
+		document.removeEventListener('touchmove', onMove);
+		document.removeEventListener('touchend', onTouchEnd);
 	};
 
 	const onMouseUp = () => {
-		document.removeEventListener("mousemove", onMove);
-		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener('mousemove', onMove);
+		document.removeEventListener('mouseup', onMouseUp);
 	};
 
 	return (
 		<div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: "50%",
-				borderRadius: "50%",
-				width: "100px",
-				height: "100px",
-				background: "#0066ff",
-				border: "3px solid #eaebf1",
-				cursor: "pointer",
-				zIndex: "110",
-				marginLeft: "-50px",
-				marginTop: "-50px",
-				textAlign: "center",
-				lineHeight: "91px",
-				fontSize: "2em",
-				color: "#fafafa",
-				userSelect: "none",
+				position: 'absolute',
+				left: swipeX + '%',
+				top: '50%',
+				borderRadius: '50%',
+				width: '100px',
+				height: '100px',
+				background: '#0066ff',
+				border: '3px solid #eaebf1',
+				cursor: 'pointer',
+				zIndex: '110',
+				marginLeft: '-50px',
+				marginTop: '-50px',
+				textAlign: 'center',
+				lineHeight: '91px',
+				fontSize: '2em',
+				color: '#fafafa',
+				userSelect: 'none',
+				...props.buttonStyle,
 			}}
 			onTouchStart={onDown}
 			onMouseDown={onDown}
@@ -143,4 +138,8 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 	);
 };
 
+MlLayerSwipe.defaultProps = {
+	buttonStyle: {},
+};
+
 export default MlLayerSwipe;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { css } from "@emotion/css";
-import { Box } from "@mui/system";
-import ImageLoader from "../../../ui_components/ImageLoader";
-import useMapState from "../../../hooks/useMapState";
+import React from 'react';
+import { css } from '@emotion/css';
+import { Box } from '@mui/system';
+import ImageLoader from '../../../ui_components/ImageLoader';
+import useMapState from '../../../hooks/useMapState';
 
 /**
  * @component
@@ -20,7 +20,7 @@ const LayerBox = (props) => {
 			matchLayerIds: props.layerId,
 		},
 	});
-	const width = "40px";
+	const width = '40px';
 
 	const defaultClass = css`
 		& img:hover {
@@ -34,22 +34,25 @@ const LayerBox = (props) => {
 				className={defaultClass}
 				sx={{
 					width,
-					height: "53px",
-					justifyContent: "center",
+					height: '53px',
+					justifyContent: 'center',
 					py: 0.25,
-					px: "1rem",
-					cursor: "pointer",
+					px: '1rem',
+					cursor: 'pointer',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'stretch',
 				}}
 				onClick={() => {
 					props?.handleLayerBoxClick?.(props.layerId);
 				}}
 			>
 				<ImageLoader
-					style={{
-						border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
-						borderRadius: "8px",
-						height: "40px",
-						width: "40px",
+					sx={{
+						border: '2px solid ' + (layers?.[0]?.visible ? '#64c864' : '#fd720f'),
+						borderRadius: '8px',
+						height: '40px',
+						width: '40px',
 					}}
 					src={props.thumbnail}
 				/>
@@ -57,11 +60,11 @@ const LayerBox = (props) => {
 				<div
 					className="mllayerswitcher-layer-text"
 					style={{
-						textAlign: "center",
-						color: "rgb(112, 117, 122)",
-						fontFamily: "Roboto, Arial",
+						textAlign: 'center',
+						color: 'rgb(112, 117, 122)',
+						fontFamily: 'Roboto, Arial',
 						width,
-						fontSize: "0.60rem",
+						fontSize: '0.60rem',
 					}}
 				>
 					{props.label}

package/src/components/MlMarker/MlMarker.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlMeasureTool/MlMeasureTool.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlNavigationCompass/MlNavigationCompass.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlNavigationTools/MlNavigationTools.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlScaleReference/MlScaleReference.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlShareMapState/MlShareMapState.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlSketchTool/LayerList/ColorPicker.tsx

@@ -0,0 +1,43 @@
+import { ColorPicker } from 'mui-color';
+import React from 'react';
+import { paintPropsType } from './LayerPropertyForm';
+
+type Props = {
+	key: string;
+	value: string;
+	propKey: string;
+	setPaintProps: (
+		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
+	) => void;
+};
+
+export default function PaintPropsColorPicker({ propKey, value, setPaintProps }: Props) {
+	return (
+		<ColorPicker
+			value={value}
+			onChange={(value: any) => {
+				setPaintProps((current: paintPropsType): paintPropsType => {
+					if (!value?.rgb?.[0]) {
+						return current;
+					}
+
+					const newProps = {
+						...current,
+						[propKey]:
+							'rgba(' +
+							value.rgb[0] +
+							',' +
+							value.rgb[1] +
+							',' +
+							value.rgb[2] +
+							',' +
+							value.alpha +
+							')',
+					};
+
+					return newProps;
+				});
+			}}
+		/>
+	);
+}

package/src/components/MlSketchTool/LayerList/LayerList.tsx

@@ -0,0 +1,12 @@
+import { List } from '@mui/material';
+import React from 'react';
+
+type Props = {
+	children: JSX.Element;
+};
+
+function LayerList({ children }: Props) {
+	return <List>{children}</List>;
+}
+
+export default LayerList;