@mapcomponents/react-maplibre 0.1.67 → 0.1.69

package/src/ui_components/LayerList/util/LayerListItemVectorLayer.tsx

@@ -0,0 +1,92 @@
+import { ListItem, IconButton, ListItemIcon, Checkbox, ListItemText } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import LayerPropertyForm from './LayerPropertyForm';
+import TuneIcon from '@mui/icons-material/Tune';
+import { MlVectorTileLayerProps } from '../../../components/MlVectorTileLayer/MlVectorTileLayer';
+
+type Props = {
+	id: string;
+	configurable?: boolean;
+	vtProps: MlVectorTileLayerProps;
+	setVtProps: ((state: unknown) => void) | undefined;
+};
+
+export default function LayerListItemVectorLayer({ configurable, vtProps, setVtProps, id }: Props) {
+	const [paintPropsFormVisible, setPaintPropsFormVisible] = useState(false);
+	const [visible, setVisible] = useState(true);
+	const [paintProps, setPaintProps] = useState(vtProps.layers[id].paint);
+
+	useEffect(() => {
+		if (!setVtProps) return;
+
+		const _layers = [...vtProps.layers];
+		if (!_layers[id].layout) {
+			_layers[id].layout = { visibility: visible ? 'visible' : 'none' };
+		} else {
+			_layers[id].layout.visibility = visible ? 'visible' : 'none';
+		}
+
+		setVtProps({ ...vtProps, layers: _layers });
+	}, [visible, id, setVtProps, vtProps]);
+
+	useEffect(() => {
+		if (!setVtProps) return;
+
+		const _paintProps = { ...paintProps };
+		const _layers = [...vtProps.layers];
+		_layers[id].paint = _paintProps;
+
+		setVtProps({ ...vtProps, layers: _layers });
+	}, [paintProps, id, setVtProps, vtProps]);
+
+	return (
+		<>
+			<ListItem
+				key={id}
+				sx={{
+					paddingRight: configurable ? '56px' : 0,
+					paddingLeft: 0,
+					paddingTop: 0,
+					paddingBottom: '4px',
+				}}
+				secondaryAction={
+					configurable ? (
+						<IconButton
+							edge="end"
+							aria-label="comments"
+							onClick={() => {
+								setPaintPropsFormVisible((current) => {
+									return !current;
+								});
+							}}
+							sx={{ padding: '4px', marginTop: '-3px' }}
+						>
+							<TuneIcon />
+						</IconButton>
+					) : undefined
+				}
+			>
+				<ListItemIcon sx={{ minWidth: '30px' }}>
+					<Checkbox
+						checked={visible}
+						onClick={() => {
+							setVisible((val) => !val);
+						}}
+					/>
+				</ListItemIcon>
+				<ListItemText primary={vtProps.layers[id].id} />
+			</ListItem>
+			{configurable && paintPropsFormVisible && (
+				<LayerPropertyForm
+					paintProps={paintProps}
+					setPaintProps={setPaintProps}
+					layerType={vtProps.layers[id].type}
+				/>
+			)}
+		</>
+	);
+}
+
+LayerListItemVectorLayer.defaultProps = {
+	configurable: true,
+};

package/src/ui_components/LayerList/util/LayerPropertyForm.tsx

@@ -0,0 +1,125 @@
+import {
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	LineLayerSpecification,
+} from 'maplibre-gl';
+import React, { useRef } from 'react';
+import ColorPicker from './input/ColorPicker';
+import { Box, ListItem, Paper, Slider, TextField, Typography } from '@mui/material';
+import {useCallback} from 'react';
+
+export type paintPropsType =
+	| CircleLayerSpecification['paint']
+	| FillLayerSpecification['paint']
+	| LineLayerSpecification['paint'];
+
+type Props = {
+	paintProps: paintPropsType;
+	setPaintProps: (
+		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
+	) => void;
+	layerType: string;
+};
+
+const mapPropKeyToFormInputType = {
+	'fill-color': 'colorpicker',
+	'line-color': 'colorpicker',
+	'line-width': 'slider',
+	'line-blur': 'slider',
+};
+const mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
+
+const inputPropsByPropKey = {
+	'line-blur': {
+		step: 1,
+		min: 1,
+		max: 100,
+	},
+	'line-width': {
+		step: 1,
+		min: 1,
+		max: 100,
+	},
+};
+
+export default function LayerPropertyForm({ paintProps = {}, setPaintProps }: Props) {
+	const key = useRef(Math.round(Math.random() * 10000000000));
+	//const onChange = (event) => {};
+
+	const getFormInputByType = useCallback((key: string) => {
+		if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1) {
+			const label = (
+				<Typography id={key + '_label'} gutterBottom>
+					{key}
+				</Typography>
+			);
+			switch (mapPropKeyToFormInputType[key]) {
+				case 'slider':
+					return (
+						<>
+							{label}
+							<Slider
+								{...inputPropsByPropKey[key]}
+								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+								value={paintProps[key]}
+								onChange={(_ev: Event, value: number) => {
+									if (value) {
+										setPaintProps((current) => ({ ...current, [key]: value }));
+									}
+								}}
+							/>
+						</>
+					);
+					break;
+				case 'numberfield':
+					return (
+						<>
+							{label}
+							<TextField
+								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+								value={paintProps[key]}
+								onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+									if (ev?.target?.value) {
+										setPaintProps((current) => ({ ...current, [key]: parseInt(ev.target.value) }));
+									}
+								}}
+							/>
+						</>
+					);
+					break;
+				case 'colorpicker':
+					return (
+						<>
+							{label}
+							<Box sx={{ '& > div': { width: 'initial !important' } }}>
+								<ColorPicker
+									key={key}
+									value={paintProps[key]}
+									propKey={key}
+									setPaintProps={setPaintProps}
+								/>
+							</Box>
+						</>
+					);
+					break;
+			}
+		}
+		return null;
+	},[paintProps]);
+
+	return (
+		<>
+			<ListItem key={key + '_paintPropForm'}>
+				<Paper
+					sx={{
+						padding: '15px',
+						boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)',
+						borderRadius: '5px',
+					}}
+				>
+					{Object.keys(paintProps).map((el: string) => getFormInputByType(el))}
+				</Paper>
+			</ListItem>
+		</>
+	);
+}

package/src/ui_components/LayerList/util/input/ColorPicker.tsx

@@ -0,0 +1,44 @@
+import { ColorObject, ColorPicker, ColorValue } 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: (ColorObject & ColorValue)) => {
+								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/ui_components/MapcomponentsTheme.tsx

@@ -0,0 +1,133 @@
+import { createTheme } from '@mui/material/styles';
+import { Theme } from '@mui/system';
+
+declare module '@mui/material/Button' {
+	interface ButtonPropsVariantOverrides {
+		navtools: true;
+	}
+}
+
+const lightDefault = createTheme({
+	palette: {
+		mode: 'light',
+	},
+});
+const darkDefault = createTheme({
+	palette: {
+		mode: 'dark',
+	},
+});
+
+const getDesignTokens = (mode: 'light' | 'dark') => ({
+	...(mode === 'light' ? lightDefault : darkDefault),
+	palette: {
+		mode,
+		...(mode === 'dark'
+			? {
+					primary: {
+						main: '#009FE3',
+					},
+					background: {
+						default: '#121212',
+						paper: '#323232',
+						icon: '#525252',
+					},
+					text: {
+						secondary: '#fff',
+						contrast: '#121212',
+					},
+			  }
+			: {
+					primary: {
+						main: '#009FE3',
+					},
+
+					background: {
+						default: '#fff',
+						paper: '#fdfdfd',
+						icon: '#bdbdbd',
+					},
+					text: {
+						primary: '#111',
+						secondary: '#121212',
+						contrast: '#fff',
+					},
+			  }),
+	},
+});
+const getTheme = (mode: 'light' | 'dark') => {
+	const theme: Theme = getDesignTokens(mode);
+
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	return createTheme(theme, {
+		components: {
+			MuiTypography: {
+				styleOverrides: {
+					root: {
+					},
+				},
+			},
+			MuiAppBar: {
+				styleOverrides: {
+					root: {
+						backgroundColor: theme.palette.background.default,
+					},
+				},
+			},
+			MuiIconButton: {
+				styleOverrides: {
+					root: {
+						color: theme.palette.text.primary,
+						backgroundColor: theme.palette.background.icon,
+						':hover': {
+							backgroundColor: theme.palette.background.icon,
+							color: theme.palette.primary.main,
+						},
+					},
+				},
+			},
+			MuiButton: {
+				styleOverrides: {
+					backgroundColor: theme.palette.background.paper,
+					':hover': {
+						backgroundColor: theme.palette.primary.main,
+					},
+				},
+				variants: [
+					{
+						props: { variant: 'navtools' },
+						style: {
+							minWidth: '20px',
+							minHeight: '20px',
+							fontWeight: 600,
+							[theme.breakpoints.down('md')]: {
+								width: '50px',
+								height: '50px',
+								fontSize: '1.4em',
+							},
+							[theme.breakpoints.up('md')]: {
+								width: '30px',
+								height: '30px',
+								fontSize: '1.2em',
+							},
+							backgroundColor: theme.palette.background.icon,
+							borderRadius: '23%',
+							//border: "1px solid #bbb",
+							//boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
+							margin: '0.15px',
+							marginTop: '4px',
+							':hover': {
+								color: theme.palette.primary.main,
+								backgroundColor: theme.palette.background.icon,
+							},
+							color: theme.palette.text.secondary,
+						},
+					},
+				],
+			},
+		},
+	});
+};
+
+export default getTheme;

package/src/ui_components/Sidebar.tsx

@@ -2,12 +2,10 @@ import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import MenuIcon from '@mui/icons-material/Menu';
-import { Drawer, IconButton, PaperProps, SxProps, DrawerProps} from '@mui/material';
+import { Drawer, IconButton, PaperProps, SxProps, DrawerProps } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
 
-
-
 const DrawerHeader = styled('div')(() => ({
 	display: 'flex',
 	alignItems: 'center',
@@ -20,7 +18,12 @@ interface SidebarProps {
 	children?: React.ReactNode;
 }
 
-export default function Sidebar({ drawerPaperProps, drawerHeaderProps, drawerButtonStyle, ...props }: SidebarProps & DrawerProps) {
+export default function Sidebar({
+	drawerPaperProps,
+	drawerHeaderProps,
+	drawerButtonStyle,
+	...props
+}: SidebarProps & DrawerProps) {
 	const mediaIsMobile = useMediaQuery('(max-width:900px)');
 
 	const [drawerOpen, setDrawerOpen] = useState(true);
@@ -39,9 +42,9 @@ export default function Sidebar({ drawerPaperProps, drawerHeaderProps, drawerBut
 				sx={{
 					zIndex: 101,
 					position: 'relative',
-					padding: '20px',
-					...drawerButtonStyle
-				}}				
+					margin: { lg: '20px', md: '20px', sm: '20px', xs: '10px' },
+					...drawerButtonStyle,
+				}}
 			>
 				<MenuIcon />
 			</IconButton>
@@ -51,21 +54,23 @@ export default function Sidebar({ drawerPaperProps, drawerHeaderProps, drawerBut
 				anchor="left"
 				open={drawerOpen}
 				PaperProps={{
+					...drawerPaperProps,
 					sx: {
-						maxWidth: '20%',
-						padding: '40px'						
+						maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' },
+						padding: { lg: '20px', md: '20px', sm: '20px', xs: '10px' },
+						...drawerPaperProps?.sx,
 					},
-					...drawerPaperProps,
 				}}
 				sx={{
 					flexGrow: 1,
 					zIndex: 105,
 					position: 'absolute',
 					top: 0,
+					bottom: 0,
 					backgroundColor: '#fafafa',
 					display: 'flex',
 					flexDirection: 'column',
-					maxWidth: mediaIsMobile ? '90vw' : '20vw',
+					maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' },
 					...(drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' }),
 				}}
 				{...props}

package/src/ui_components/TopToolbar.tsx

@@ -11,12 +11,10 @@ export default function TopToolbar({ toolbarProps, appBarStyle, ...props }: TopT
 		<AppBar
 			sx={{
 				minHeight: '62px',
-				backgroundColor: 'background.default',
 				position: 'absolute',
 				zIndex: 120,
-				...appBarStyle
+				...appBarStyle,
 			}}
-			color="primary"
 			position="static"
 			{...props}
 		>

package/src/util/BubbleForInstructions.js

@@ -1,37 +1,39 @@
 import React from 'react';
 import ReplyAllIcon from '@mui/icons-material/ReplyAll';
+import { Box, Typography } from '@mui/material';
 
 function BubbleForInstruction(props) {
 	return (
 		<>
-			<div
-				style={{
+			<Box
+				sx={{
 					width: '475px',
 					height: '475px',
 					position: 'fixed',
 					display: 'block',
 					borderRadius: '360px',
-					backgroundColor: 'steelblue',
+					bgcolor: 'primary.main',
 					right: props.bubbleRight,
 					bottom: props.bubbleBottom,
 					left: props.bubbleLeft,
 					top: props.bubbleTop,
-					zIndex: props.zIndex
+					zIndex: props.zIndex,
 				}}
 			>
-				<h2
-					style={{
+				<Typography
+					variant="h5"
+					sx={{
 						marginTop: props.textMarginTop,
 						marginLeft: props.textMarginLeft,
-						color: 'white',
+						color: 'text.contrast',
 						textAlign: 'left',
 					}}
 				>
-					{props.children}
-				</h2>
+					<b>{props.children}</b>
+				</Typography>
 				<ReplyAllIcon
-					style={{
-						color: 'white',
+					sx={{
+						color: 'text.contrast',
 						fontSize: '80px',
 						position: 'absolute',
 						transform: props.iconTransform,
@@ -39,7 +41,7 @@ function BubbleForInstruction(props) {
 						marginLeft: props.iconMarginLeft,
 					}}
 				/>
-			</div>
+			</Box>
 		</>
 	);
 }

package/tsconfig.json

@@ -9,7 +9,7 @@
 		"sourceMap": true,
 		"strict": false,
 		"types": ["node", "jest", "geojson", "cypress"],
-    "typeRoots": ["./src/@types", "./node_modules/@types"],
+		"typeRoots": ["./src/@types", "./node_modules/@types"],
 		"outDir": "build/esm",
 		"module": "esnext",
 		"target": "es5",
@@ -27,15 +27,8 @@
 		"suppressImplicitAnyIndexErrors": true,
 		"allowSyntheticDefaultImports": true,
 		"allowJs": true,
-		"baseUrl": ".",
-		"paths": {
-			"!maplibre-gl": ["node_modules/maplibre-gl"] // This mapping is relative to "baseUrl"
-		}
+		"baseUrl": "."
 	},
 	"include": ["src", "src/custom.d.tsx"],
-	"exclude": ["node_modules", "lib"],
-	"typedocOptions": {
-		"entryPoints": ["src/index.ts"],
-		"out": "docs"
-	}
+	"exclude": ["node_modules", "lib"]
 }

package/dist/components/MlGPXViewer/MlGPXViewer.d.ts

@@ -1,29 +0,0 @@
-interface MlGPXViewerProps {
-    /**
-     * Id of the target MapLibre instance in mapHook
-     */
-    mapId?: string;
-    /**
-     * The layerId of an existing layer this layer should be rendered visually beneath
-     * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-     */
-    insertBeforeLayer?: string;
-    /**
-     * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-     */
-    idPrefix?: string;
-    /**
-     * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-     */
-    visible?: boolean;
-}
-/**
- * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
- */
-declare const MlGPXViewer: {
-    (props: MlGPXViewerProps): JSX.Element;
-    defaultProps: {
-        visible: boolean;
-    };
-};
-export default MlGPXViewer;

package/dist/components/MlGPXViewer/MlGPXViewer.stories.d.ts

@@ -1,16 +0,0 @@
-export default storyoptions;
-export const ExampleConfig: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlGPXViewer as component };
-    export namespace argTypes {
-        namespace options {
-            namespace control {
-                const type: string;
-            }
-        }
-    }
-    export { mapContextDecorator as decorators };
-}
-import MlGPXViewer from "./MlGPXViewer";
-import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/components/MlGPXViewer/MlGPXViewer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/MlGPXViewer/gpxConverter.d.ts

@@ -1,11 +0,0 @@
-export default toGeoJSON;
-declare namespace toGeoJSON {
-    function kml(doc: any): {
-        type: string;
-        features: never[];
-    };
-    function gpx(doc: any): {
-        type: string;
-        features: never[];
-    };
-}

package/dist/components/MlGPXViewer/util/GeoJsonContext.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { FeatureCollection } from '@turf/turf';
-declare type ContextProps = {
-    data: FeatureCollection;
-    setData: Function;
-    getEmptyFeatureCollection: Function;
-};
-declare const GeoJsonContext: React.Context<Partial<ContextProps>>;
-export declare const GeoJsonContextProvider: React.Provider<Partial<ContextProps>>;
-export default GeoJsonContext;

package/dist/components/MlGPXViewer/util/GeoJsonProvider.d.ts

@@ -1,4 +0,0 @@
-declare const GeoJsonProvider: ({ children }: {
-    children: JSX.Element;
-}) => JSX.Element;
-export default GeoJsonProvider;

package/dist/components/MlLayer/MlLayer.stories.d.ts

@@ -1,10 +0,0 @@
-export default storyoptions;
-export const ExampleConfig: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlLayer as component };
-    export const argTypes: {};
-    export { mapContextDecorator as decorators };
-}
-import MlLayer from "./MlLayer";
-import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/custom.d.d.ts

@@ -1,22 +0,0 @@
-declare module "*.svg" {
-    const content: any;
-    export default content;
-    export { content as ReactComponent };
-}
-declare module "*.js" {
-    const content: any;
-    export default content;
-}
-declare type MapContextType = {
-    mapIds: [string?];
-    mapExists: Function;
-    maps: [];
-    map: any;
-    getMap: Function;
-    setMap: Function;
-};
-interface GeoJSON {
-    type: string;
-    features?: any;
-    geometry?: any;
-}

package/dist/decorators/ThemeWrapper.d.ts

@@ -1 +0,0 @@
-export default function ThemeWrapper(props: any): JSX.Element;