@mapcomponents/react-maplibre 0.1.61 → 0.1.63

package/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.polygonStyler.js

@@ -0,0 +1,188 @@
+import React, {  useState, useMemo } from 'react';
+import Sidebar from '../../../ui_components/Sidebar';
+import { Select, Typography, Slider, Stack, MenuItem, FormControl } from '@mui/material';
+import { ColorPicker } from 'mui-color';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+
+/*
+const FeatureNames = () => {
+	const names = ['Show all', 'Hofgarten', 'Stadtgarten', 'Opernplatz', 'Keiserplatz'];
+	return names.map((item) => {
+		console.log(item);
+		return (
+			<>
+				<MenuItem key={item} value={`"${item}"`}>
+					{item}
+				</MenuItem>
+			</>
+		);
+	});
+};
+*/
+
+const marks = [
+	{
+		value: 0,
+		label: '0%',
+	},
+	{
+		value: 0.25,
+		label: '25%',
+	},
+	{
+		value: 0.5,
+		label: '50%',
+	},
+	{
+		value: 0.75,
+		label: '75%',
+	},
+	{
+		value: 1,
+		label: '100%',
+	},
+];
+
+const widthMarks = [
+	{
+		value: 0,
+		label: '0',
+	},
+	{
+		value: 5,
+		label: '5',
+	},
+	{
+		value: 10,
+		label: '10',
+	},
+];
+
+const PolygonStyler = (props) => {
+	const [color, setColor] = useState('#2485C1');
+	const [opacity, setOpacity] = useState(0.8);
+	const [featureToShow, setFeatureToShow] = useState('Show all');
+	const [geomType, setGeomType] = useState('fill');
+	const [lineWidth, setLineWidth] = useState(6);
+
+	const storyGeoJson = useMemo(() => {
+		if (featureToShow === 'Show all') {
+			return props.geojson;
+		}
+		return {
+			type: 'FeatureCollection',
+			features: props.geojson.features.filter((item) => item.properties.name === featureToShow),
+		};
+	}, [featureToShow, props.geojson]);
+
+	const handleColorChange = (e) => {
+		setColor(`#${e.hex}`);
+	};
+
+	return (
+		<>
+			<Sidebar>
+				<Stack paddingTop={5} spacing={3} direction="column" sx={{ mb: 1 }} alignItems="left">
+					<FormControl>
+						<Typography>Geometry type:</Typography>
+						<Select
+							value={geomType}
+							onChange={(e) => {
+								setGeomType(e.target.value);
+								console.log(e.target.value);
+							}}
+						>
+							<MenuItem value={'fill'} key={1}>
+								fill
+							</MenuItem>
+							<MenuItem value={'circle'} key={2}>
+								circle
+							</MenuItem>
+							<MenuItem value={'line'} key={3}>
+								line
+							</MenuItem>
+						</Select>
+					</FormControl>
+					<Typography>Feature to show:</Typography>
+					<FormControl>
+						<Select
+							value={featureToShow}
+							onChange={(e) => {
+								setFeatureToShow(e.target.value);
+								console.log(e.target.value);
+							}}
+						>
+							<MenuItem value={'Show all'} key={1}>
+								Show all
+							</MenuItem>
+							<MenuItem value={'Hofgarten'} key={2}>
+								Hofgarten
+							</MenuItem>
+							<MenuItem value={'Stadtgarten'} key={3}>
+								Stadtgarten
+							</MenuItem>
+							<MenuItem value={'Opernplatz'} key={4}>
+								Opernplatz
+							</MenuItem>
+							<MenuItem value={'Keiserplatz'} key={5}>
+								Keiserplatz
+							</MenuItem>
+						</Select>
+					</FormControl>
+					<Typography>Display color:</Typography>
+					<ColorPicker value={color} onChange={handleColorChange} />
+
+					<Typography>Opacity:</Typography>
+					<Slider
+						defaultValue={1}
+						aria-label="Default"
+						value={opacity}
+						max={1}
+						min={0}
+						step={0.01}
+						marks={marks}
+						onChange={(e) => {
+							setOpacity(e.target.value);
+							console.log(e);
+						}}
+					/>
+					<Typography paddingTop={4}>Stroke:</Typography>
+					<Slider
+						value={lineWidth}
+						aria-label="Default"
+						max={10}
+						min={0}
+						step={1}
+						marks={widthMarks}
+						onChange={(e) => {
+							setLineWidth(e.target.value);
+						}}
+						disabled={geomType !== 'line'}
+					/>
+				</Stack>
+			</Sidebar>
+
+			<MlGeoJsonLayer
+				geojson={storyGeoJson}
+				defaultPaintOverrides={{
+					fill: {
+						'fill-color': color,
+						'fill-opacity': opacity,
+					},
+					circle: {
+						'circle-color': color,
+						'circle-opacity': opacity,
+					},
+					line: {
+						'line-color': color,
+						'line-opacity': opacity,
+						'line-width': lineWidth,
+					},
+				}}
+				type={geomType}
+			/>
+		</>
+	);
+};
+
+export default PolygonStyler;

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;

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

@@ -0,0 +1,109 @@
+import { Checkbox, IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import TuneIcon from '@mui/icons-material/Tune';
+import React, { useMemo, useState } from 'react';
+import getDefaulLayerTypeByGeometry from '../../../components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry';
+import getDefaultPaintPropsByType from '../../../components/MlGeoJsonLayer/util/getDefaultPaintPropsByType';
+import LayerPropertyForm from './LayerPropertyForm';
+
+type Props = {
+	layerComponent: JSX.Element;
+	visible: boolean;
+	configurable: boolean;
+	type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
+	name: string;
+	description?: string;
+	additionalButtons?: JSX.Element;
+};
+
+function LayerListItem({
+	layerComponent,
+	visible = true,
+	type = 'layer',
+	name,
+	description,
+	configurable,
+}: Props) {
+	const [localVisible, setLocalVisible] = useState(true);
+	const [paintPropsFormVisible, setPaintPropsFormVisible] = useState(false);
+	const [paintProps, setPaintProps] = useState(
+		layerComponent?.props?.paint ||
+			getDefaultPaintPropsByType(
+				layerComponent?.props?.type || getDefaulLayerTypeByGeometry(layerComponent.props.geojson)
+			)
+	);
+
+	const _visible = useMemo(() => {
+		if (!visible) {
+			return false;
+		}
+		return localVisible;
+	}, [visible, localVisible]);
+
+	const _layerComponent = useMemo(() => {
+		if (type === 'layer') {
+			return React.cloneElement(layerComponent, {
+				layout: {
+					visibility: _visible ? 'visible' : 'none',
+				},
+				paint: paintProps,
+			});
+		}
+		return <></>;
+	}, [type, layerComponent, paintProps, _visible]);
+
+	const layerType = useMemo(() => {
+		if (type === 'layer') {
+			if (layerComponent.props.type) {
+				return layerComponent.props.type;
+			}
+			if (layerComponent.props.geojson) {
+				return getDefaulLayerTypeByGeometry(layerComponent.props.geojson);
+			}
+		}
+
+		return undefined;
+	}, [layerComponent]);
+
+	return (
+		<>
+			<ListItem
+				secondaryAction={
+					configurable ? (
+						<IconButton
+							edge="end"
+							aria-label="comments"
+							onClick={() => {
+								setPaintPropsFormVisible((current) => {
+									return !current;
+								});
+							}}
+						>
+							<TuneIcon />
+						</IconButton>
+					) : undefined
+				}
+			>
+				<ListItemIcon>
+					<Checkbox
+						disabled={!visible}
+						checked={localVisible}
+						onClick={() => {
+							setLocalVisible((val) => !val);
+						}}
+					/>
+				</ListItemIcon>
+				<ListItemText primary={name} secondary={description} />
+				{_layerComponent}
+			</ListItem>
+			{configurable && paintPropsFormVisible && (
+				<LayerPropertyForm
+					paintProps={paintProps}
+					setPaintProps={setPaintProps}
+					layerType={layerType}
+				/>
+			)}
+		</>
+	);
+}
+
+export default LayerListItem;

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 = {};