@mapcomponents/react-maplibre 0.1.62 → 0.1.63

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

@@ -0,0 +1,126 @@
+import {
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	LineLayerSpecification,
+} from 'maplibre-gl';
+import React, { useRef } from 'react';
+import ColorPicker from './ColorPicker';
+import { ListItem, Slider, TextField, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+export type paintPropsType =
+	| CircleLayerSpecification['paint']
+	| FillLayerSpecification['paint']
+	| LineLayerSpecification['paint'];
+
+type Props = {
+	paintProps: paintPropsType;
+	setPaintProps: (
+		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
+	) => void;
+	layerType: string;
+};
+
+const mapLayerTypeToPaintProps = {
+	circle: ['circle-color'],
+	line: ['line-color', 'line-width', 'line-blur'],
+	fill: ['fill-color'],
+};
+const mapPropKeyToFormInputType = {
+	'line-color': 'colorpicker',
+	'line-width': 'slider',
+	'line-blur': 'slider',
+	'fill-color': 'colorpicker',
+	'circle-color': 'colorpicker',
+};
+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 = (key: string, value: any) => {
+		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, activeThumb) => {
+									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) => {
+									if (ev?.target?.value) {
+										setPaintProps((current) => ({ ...current, [key]: parseInt(ev.target.value) }));
+									}
+								}}
+							/>
+						</>
+					);
+					break;
+				case 'colorpicker':
+					return (
+						<>
+							{label}
+							<ColorPicker
+								key={key}
+								value={paintProps[key]}
+								propKey={key}
+								setPaintProps={setPaintProps}
+							/>
+						</>
+					);
+					break;
+			}
+		}
+		return null;
+	};
+
+	return (
+		<>
+			<ListItem
+				sx={{ boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)', borderRadius: '5px' }}
+				key={key + '_paintPropForm'}
+			>
+				<Box>
+					{Object.keys(paintProps).map((el: string) => getFormInputByType(el, paintProps[el]))}
+				</Box>
+			</ListItem>
+		</>
+	);
+}

package/src/components/MlSketchTool/MlSketchTool.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlSketchTool/MlSketchTool.meta.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlSketchTool",
+  "title": "Sketch Tool",
+  "description": "Enables creation and editing of Points LineStrings and Polygons.",
+  "i18n": {
+    "de": {
+      "title": "Zeichenwerkzeug",
+      "description": "Erzeugen und bearbeiten von Geometrien."
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlSketchTool/MlSketchTool.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import MlSketchTool from './MlSketchTool';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import Sidebar from '../../ui_components/Sidebar';
+
+const storyoptions = {
+	title: 'MapComponents/MlSketchTool',
+	component: MlSketchTool,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (args) => (
+	<>
+		<Sidebar sx={{ maxWidth: '25vw' }}>
+			<MlSketchTool />
+		</Sidebar>
+	</>
+);
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlSketchTool/MlSketchTool.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useCallback } from 'react';
+import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import PentagonIcon from '@mui/icons-material/Pentagon';
+import { Box } from '@mui/system';
+//import useMediaQuery from '@mui/material/useMediaQuery';
+import MlFeatureEditor from '../MlFeatureEditor/MlFeatureEditor';
+import List from '@mui/material/List';
+import EditIcon from '@mui/icons-material/Edit';
+import SettingsIcon from '@mui/icons-material/Settings';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import useMap from '../../hooks/useMap';
+import DeleteIcon from '@mui/icons-material/Delete';
+import * as turf from '@turf/turf';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import LayerListItem from './LayerList/LayerListItem';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import { Feature } from '@turf/turf';
+import { LngLatLike } from '!maplibre-gl';
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+interface MlSketchToolProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+	 */
+	insertBeforeLayer?: string;
+	/**
+	 * Style attribute for the button-style
+	 * https://mui.com/system/getting-started/the-sx-prop/
+	 */
+	buttonStyleOverride?: SxProps;
+}
+
+/**
+ * Component template
+ *
+ */
+
+const MlSketchTool = (props: MlSketchToolProps) => {
+	type SketchStateType = {
+		selectedGeoJson: Feature | undefined;
+		activeGeometryIndex: number;
+		geometries: Feature[];
+		drawMode: string;
+	};
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	//const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [hoveredGeometry, setHoveredGeometry] = useState<Feature>();
+	const [sketchState, setSketchState] = useState<SketchStateType>({
+		activeGeometryIndex: 0,
+		selectedGeoJson: undefined,
+		geometries: [],
+		drawMode: '',
+	});
+
+	const buttonStyle = {
+		...props.buttonStyleOverride,
+	};
+
+	const buttonClickHandler = useCallback(
+		(buttonDrawMode: string) => {
+			console.log(buttonDrawMode);
+			sketchState.drawMode !== buttonDrawMode
+				? setSketchState((_sketchTool) => ({
+						drawMode: buttonDrawMode,
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }))
+				: setSketchState((_sketchTool) => ({
+						drawMode: '',
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }));
+		},
+		[sketchState]
+	);
+
+	const removeGeoJson = (geoJson: Feature): void => {
+		setSketchState((_sketchState) => {
+			const tempGeometries = [..._sketchState.geometries];
+			tempGeometries.splice(tempGeometries.indexOf(geoJson), 1);
+
+			return {
+				..._sketchState,
+				geometries: tempGeometries,
+				activeGeometryIndex: _sketchState.activeGeometryIndex - 1,
+			};
+		});
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					zIndex: 104,
+				}}
+			>
+				<ButtonGroup>
+					<Tooltip title={'point'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('draw_point')}>
+							<PanoramaFishEyeIcon />
+						</IconButton>
+					</Tooltip>
+					<Tooltip title={'Line'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('draw_line_string')}>
+							<ShowChartIcon />
+						</IconButton>
+					</Tooltip>
+					<Tooltip title={'Polygon'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('custom_polygon')}>
+							<PentagonIcon />
+						</IconButton>
+					</Tooltip>
+				</ButtonGroup>
+			</Box>
+
+			{sketchState.drawMode && (
+				<MlFeatureEditor
+					mode={
+						sketchState.drawMode === 'edit'
+							? sketchState.selectedGeoJson?.geometry?.type === 'LineString'
+								? 'simple_select'
+								: 'custom_select'
+							: sketchState.drawMode
+					}
+					geojson={sketchState.drawMode === 'edit' ? sketchState.selectedGeoJson : undefined}
+					onChange={(feature: object) => {
+						setSketchState((_sketchState) => {
+							const _geometries = [...sketchState.geometries];
+							if (sketchState.drawMode === 'edit' && sketchState.selectedGeoJson) {
+								_geometries[_geometries.indexOf(sketchState.selectedGeoJson)] = feature[0];
+							} else {
+								if (!sketchState.activeGeometryIndex) {
+									const tempFeature = feature[0];
+									tempFeature.properties.id = tempFeature.id;
+
+									_geometries.push(tempFeature);
+								} else {
+									_geometries[sketchState.activeGeometryIndex] = feature[0];
+								}
+							}
+							return {
+								..._sketchState,
+								activeGeometryIndex:
+									_sketchState.drawMode !== 'edit' && feature[0].geometry.type !== 'Point'
+										? _geometries.length - 1
+										: _sketchState.activeGeometryIndex,
+								geometries: _geometries,
+							};
+						});
+					}}
+					onFinish={() => {
+						setSketchState((_sketchState) => ({
+							..._sketchState,
+							drawMode: '',
+							activeGeometryIndex:
+								_sketchState.drawMode !== 'draw_point' ? 0 : _sketchState.activeGeometryIndex,
+							selectedGeoJson:
+								_sketchState.drawMode !== 'draw_point' ? undefined : _sketchState.selectedGeoJson,
+						}));
+					}}
+				/>
+			)}
+
+			<List sx={{ zIndex: 105 }}>
+				{sketchState.geometries.map((el) => (
+					<>
+						<Box key={el.id} sx={{ display: 'flex', flexDirection: 'column' }}>
+							<br />
+							<Box
+								flexDirection={'row'}
+								sx={{
+									'&:hover': {
+										backgroundColor: 'rgb(177, 177, 177, 0.2)',
+									},
+								}}
+								onMouseOver={() => {
+									setHoveredGeometry(el);
+								}}
+								onMouseLeave={() => {
+									setHoveredGeometry(undefined);
+								}}
+							>
+								{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+								{/* @ts-ignore-next-line */}
+								<LayerListItem
+									sx={buttonStyle}
+									visible={true}
+									configurable={true}
+									layerComponent={
+										<MlGeoJsonLayer mapId={props.mapId} geojson={el} layerId={String(el.id)} />
+									}
+									type={'layer'}
+									name={String(el.id)}
+									description={el.geometry.type}
+								>
+									<SettingsIcon />
+								</LayerListItem>
+								<IconButton
+									onClick={() => {
+										mapHook?.map?.map.setCenter(
+											el.geometry.type === 'Point'
+												? (el.geometry.coordinates as LngLatLike)
+												: (turf.centerOfMass(el).geometry.coordinates as LngLatLike)
+										);
+									}}
+								>
+									<GpsFixedIcon />
+								</IconButton>
+								<IconButton
+									sx={buttonStyle}
+									onClick={() => {
+										setSketchState((_sketchState) => ({
+											..._sketchState,
+											selectedGeoJson: el,
+											drawMode: 'edit',
+										}));
+									}}
+								>
+									<EditIcon />
+								</IconButton>
+								<IconButton
+									sx={buttonStyle}
+									onClick={() => {
+										removeGeoJson(el);
+									}}
+								>
+									<DeleteIcon />
+								</IconButton>
+							</Box>
+						</Box>
+					</>
+				))}
+				{hoveredGeometry && (
+					<MlGeoJsonLayer
+						mapId={props.mapId}
+						geojson={{ type: 'FeatureCollection', features: [hoveredGeometry] }}
+						type={'line'}
+						layerId={'highlightBorder'}
+						paint={{
+							'line-color': '#dd9900',
+							'line-opacity': 0.4,
+							'line-width': 10,
+						}}
+					/>
+				)}
+			</List>
+			{sketchState.drawMode === 'edit' && (
+				<Box>Edit {sketchState.selectedGeoJson?.geometry?.type}</Box>
+			)}
+		</>
+	);
+};
+
+MlSketchTool.defaultProps = {
+	mapId: undefined,
+	buttonStyleOverride: {},
+};
+export default MlSketchTool;

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.meta.json

@@ -1,10 +1,10 @@
 {
   "name": "MlTransitionGeoJsonLayer",
-  "title": "GeoJSON layer",
+  "title": "Transition GeoJSON layer",
   "description": "",
   "i18n": {
     "de": {
-      "title": "GeoJSON Ebene",
+      "title": "Animierte GeoJSON Ebene",
       "description": ""
     }
   },

package/src/ui_components/Sidebar.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Drawer from '@mui/material/Drawer';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import MenuIcon from '@mui/icons-material/Menu';
+import { IconButton, PaperProps } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Box from '@mui/material/Box';
+import { JsxChildren } from 'typedoc/dist/lib/utils/jsx.elements';
+
+const DrawerHeader = styled('div')(() => ({
+	display: 'flex',
+	alignItems: 'center',
+}));
+
+interface SidebarProps {
+	drawerPaperProps: PaperProps;
+	drawerHeaderProps: Headers;
+	children: JsxChildren;
+}
+
+export default function Sidebar({ drawerPaperProps, drawerHeaderProps, ...props }: SidebarProps) {
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+
+	const [drawerOpen, setDrawerOpen] = useState(true);
+
+	const handleDrawerOpen = () => {
+		setDrawerOpen(true);
+	};
+	const handleDrawerClose = () => {
+		setDrawerOpen(false);
+	};
+
+	return (
+		<>
+			<IconButton
+				onClick={handleDrawerOpen}
+				style={{
+					zIndex: 101,
+					position: 'relative',
+					padding: '20px',
+				}}
+			>
+				<MenuIcon />
+			</IconButton>
+			<Drawer
+				transitionDuration={0}
+				variant="persistent"
+				anchor="left"
+				open={drawerOpen}
+				PaperProps={{
+					sx: {
+						maxWidth: '20%',
+						padding: '40px',
+					},
+					...drawerPaperProps,
+				}}
+				sx={{
+					flexGrow: 1,
+					zIndex: 105,
+					position: 'absolute',
+					top: 0,
+					backgroundColor: '#fafafa',
+					display: 'flex',
+					flexDirection: 'column',
+					maxWidth: mediaIsMobile ? '90vw' : '20vw',
+					...(drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' }),
+				}}
+				{...props}
+			>
+				<DrawerHeader {...drawerHeaderProps}>
+					<IconButton onClick={handleDrawerClose}>
+						<ChevronLeftIcon />
+					</IconButton>
+				</DrawerHeader>
+				<Box>{props.children}</Box>
+			</Drawer>
+		</>
+	);
+}

package/src/ui_components/TopToolbar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import { Toolbar, AppBarProps, ToolbarProps } from '@mui/material';
+
+interface TopToolbarProps extends AppBarProps {
+	toolbarProps: ToolbarProps;
+}
+export default function TopToolbar({ toolbarProps, ...props }: TopToolbarProps) {
+	return (
+		<AppBar
+			sx={{
+				minHeight: '62px',
+				backgroundColor: '#f1f1f1',
+				position: 'absolute',
+				zIndex: 120,
+			}}
+			color="primary"
+			position="static"
+			{...props}
+		>
+			<Toolbar {...toolbarProps}>{props.children}</Toolbar>
+		</AppBar>
+	);
+}

package/tsconfig.json

@@ -1,59 +1,40 @@
 {
-  "compilerOptions": {
-    "checkJs": false,
-    "esModuleInterop": true,
-    "importHelpers": false,
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": false,
-    "types": [
-      "node",
-      "jest",
-      "geojson"
-    ],
-    "outDir": "build/esm",
-    "module": "esnext",
-    "target": "es5",
-    "lib": [
-      "es6",
-      "dom",
-      "es2016",
-      "es2017"
-    ],
-    "jsx": "react",
-    "declaration": true,
-    "declarationDir": "./dist",
-    "moduleResolution": "node",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "baseUrl": ".",
-    "paths": {
-      "!maplibre-gl": [
-        "node_modules/maplibre-gl"
-      ] // This mapping is relative to "baseUrl"
-    }
-  },
-  "include": [
-    "src",
-    "src/custom.d.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "lib"
-  ],
-  "typedocOptions": {
-    "entryPoints": [
-      "src/index.ts"
-    ],
-    "out": "docs",
-  }
-}
+	"compilerOptions": {
+		"checkJs": false,
+		"esModuleInterop": true,
+		"importHelpers": false,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": false,
+		"types": ["node", "jest", "geojson", "cypress", "./support"],
+		"outDir": "build/esm",
+		"module": "esnext",
+		"target": "es5",
+		"lib": ["es6", "dom", "es2016", "es2017"],
+		"jsx": "react",
+		"declaration": true,
+		"declarationDir": "./dist",
+		"moduleResolution": "node",
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noImplicitThis": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"suppressImplicitAnyIndexErrors": true,
+		"allowSyntheticDefaultImports": true,
+		"allowJs": true,
+		"baseUrl": ".",
+		"paths": {
+			"!maplibre-gl": ["node_modules/maplibre-gl"] // This mapping is relative to "baseUrl"
+		}
+	},
+	"include": ["src", "src/custom.d.tsx"],
+	"exclude": ["node_modules", "lib"],
+	"typedocOptions": {
+		"entryPoints": ["src/index.ts"],
+		"out": "docs"
+	}
+}