@mapcomponents/react-maplibre 0.1.61 → 0.1.63

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/hooks/useExportMap/lib.ts

@@ -1,8 +1,7 @@
-import { LngLatLike, Map } from '!maplibre-gl';
+import { Map } from '!maplibre-gl';
 import jsPDF from 'jspdf';
 import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
 
-import * as turf from '@turf/turf';
 import { BBox } from '@turf/turf';
 
 interface createExportOptions {
@@ -59,54 +58,26 @@ const createExport = (options: createExportOptions) => {
 		style: style,
 	});
 
-	let _previewGeojson = turf.bboxPolygon([
-		options.bbox[0],
-		options.bbox[1],
-		options.bbox[2],
-		options.bbox[3],
-	]);
-	_previewGeojson = turf.transformRotate(_previewGeojson, options.bearing);
-
-	// use original unrotated bbox and bearing 0 to calculate the correct zoom value as the function always adds a padding if used on the rotated feature coordinates
 	const bboxCamera = renderMap._cameraForBoxAndBearing(
 		[options.bboxUnrotated[0], options.bboxUnrotated[1]],
 		[options.bboxUnrotated[2], options.bboxUnrotated[3]],
-		0
-	);
-	const geometryCamera = renderMap._cameraForBoxAndBearing(
-		_previewGeojson.geometry.coordinates[0][0] as LngLatLike,
-		_previewGeojson.geometry.coordinates[0][2] as LngLatLike,
-		options.bearing
+		options.bearing+options.map.map.getBearing()
 	);
-	geometryCamera.zoom = bboxCamera.zoom;
 
-	renderMap._fitInternal(geometryCamera);
+	renderMap._fitInternal(bboxCamera);
 	return new Promise<createExportResolverParams>((resolve) => {
-		renderMap.once('idle', function () {
-			if (renderMap.getLayer('pdfPreviewGeojsonOutline')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonOutline', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojson')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojson', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojsonResizeHandle')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonResizeHandle', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojsonRotationHandle')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonRotationHandle', 'visibility', 'none');
-			}
+		console.log('before idle');
 
-			renderMap.once('idle', function () {
-				const params: createExportResolverParams = {
-					...options,
-					renderMap,
-					hiddenContainer,
-					createPdf: (_options?: createJsPdfOptions) =>
-						createJsPdf({ ...options, renderMap, hiddenContainer, ..._options }),
-				};
-
-				resolve(params);
-			});
+		renderMap.once('idle', function () {
+			const params: createExportResolverParams = {
+				...options,
+				renderMap,
+				hiddenContainer,
+				createPdf: (_options?: createJsPdfOptions) =>
+					createJsPdf({ ...options, renderMap, hiddenContainer, ..._options }),
+			};
+
+			resolve(params);
 		});
 	});
 };

package/src/index.ts

@@ -2,6 +2,7 @@ export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
 export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
 export { default as MlCreatePdfForm } from "./components/MlCreatePdfForm/MlCreatePdfForm";
+export { default as MlPdfPreview } from "./components/MlCreatePdfForm/lib/PdfPreview";
 export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";

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"
+	}
+}

package/config/getHttpsConfig.js

@@ -1,66 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
-
-// Ensure the certificate and key provided are valid and if not
-// throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted;
-  try {
-    // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
-  } catch (err) {
-    throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
-    );
-  }
-
-  try {
-    // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted);
-  } catch (err) {
-    throw new Error(
-      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
-        err.message
-      }`
-    );
-  }
-}
-
-// Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    );
-  }
-  return fs.readFileSync(file);
-}
-
-// Get the https config
-// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
-
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
-    };
-
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
-  }
-  return isHttps;
-}
-
-module.exports = getHttpsConfig;