@mapcomponents/react-maplibre 0.1.61 → 0.1.63

package/src/components/MlCreatePdfForm/lib/_PdfPreview.tsx

@@ -0,0 +1,399 @@
+import React, { useContext, useRef, useState, useEffect } from 'react';
+import MlGeoJsonLayer from '../../MlGeoJsonLayer/MlGeoJsonLayer';
+import * as turf from '@turf/turf';
+import useMap from '../../../hooks/useMap';
+import useLayerEvent from '../../../hooks/useLayerEvent';
+import { BBox, Feature, Polygon } from '@turf/turf';
+import PdfContext from './PdfContext';
+import { MapMouseEvent, MapTouchEvent, MapLayerMouseEvent, LngLat } from 'maplibre-gl';
+
+const createPreviewGeojson = (
+	geojsonProps: { center: LngLat; distance: number; bearing: number },
+	orientation: string
+) => {
+	const topLeftAngle = orientation === 'portrait' ? -35.3 : -54.7;
+	const bottomRightAngle = orientation === 'portrait' ? 144.7 : 125.3;
+	const topLeft = turf.destination(
+		[geojsonProps.center.lng, geojsonProps.center.lat],
+		geojsonProps.distance,
+		topLeftAngle
+	);
+	const bottomRight = turf.destination(
+		[geojsonProps.center.lng, geojsonProps.center.lat],
+		geojsonProps.distance,
+		bottomRightAngle
+	);
+	const bbox = [
+		topLeft.geometry.coordinates[0],
+		topLeft.geometry.coordinates[1],
+		bottomRight.geometry.coordinates[0],
+		bottomRight.geometry.coordinates[1],
+	];
+
+	let _previewGeojson = turf.bboxPolygon(bbox as BBox);
+	_previewGeojson = turf.transformRotate(_previewGeojson, geojsonProps.bearing);
+	if (!_previewGeojson?.properties) {
+		_previewGeojson.properties = {};
+	}
+	_previewGeojson.properties.bearing = geojsonProps.bearing;
+	return _previewGeojson;
+};
+
+interface PdfPreviewProps {
+	/**
+	 * 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;
+}
+
+interface geojsonProps {
+	center: { lng: number; lat: number };
+	distance: number;
+	bearing: number;
+	geojson: Feature<Polygon> | undefined;
+}
+
+export default function PdfPreview(props: PdfPreviewProps) {
+	const pdfContext = useContext(PdfContext);
+	const initializedRef = useRef(false);
+	const activeFeature = useRef();
+
+	const dragging = useRef(false);
+
+	const draggingResizeHandle = useRef(false);
+
+	const draggingRotationHandle = useRef(false);
+
+	const [geojsonProps, setGeojsonProps] = useState<geojsonProps>({
+		center: { lng: 0, lat: 0 },
+		distance: 10,
+		bearing: 0,
+		geojson: undefined,
+	});
+
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	useEffect(() => {
+		if (
+			!mapHook.map ||
+			!pdfContext.geojsonRef ||
+			!pdfContext.orientation ||
+			!pdfContext.template ||
+			initializedRef.current
+		)
+			return;
+
+		initializedRef.current = true;
+
+		const center = mapHook.map.map.getCenter();
+		const canvasHeight = mapHook.map.map._canvas.height;
+		const canvasWidth = mapHook.map.map._canvas.width;
+		const bboxPixelHeight = Math.ceil(canvasHeight / 2);
+		const bboxPixelWidth = Math.ceil(
+			(pdfContext.template.width / pdfContext.template.height) * bboxPixelHeight
+		);
+
+		const topLeft = mapHook.map.map.unproject([
+			Math.floor(canvasWidth / 2 - bboxPixelWidth / 2),
+			Math.floor(canvasHeight / 2 - bboxPixelHeight / 2),
+		]);
+
+		const distance = turf.distance([center.lng, center.lat], [topLeft.lng, topLeft.lat]);
+
+		const tmpGeojsonProps = {
+			center,
+			distance,
+			bearing: 0,
+			geojson: createPreviewGeojson({ center, distance, bearing: 0 }, pdfContext.orientation),
+		};
+		setGeojsonProps(tmpGeojsonProps);
+		pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
+	}, [mapHook.map]);
+
+	useEffect(() => {
+		if (!pdfContext.orientation || !pdfContext.geojsonRef) return;
+
+		const tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
+		tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
+		setGeojsonProps(tmpGeojsonProps);
+		pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
+	}, [pdfContext.orientation]);
+
+	// Resize handle events
+	useLayerEvent({
+		event: 'mouseenter',
+		layerId: 'pdfPreviewGeojsonResizeHandle',
+		eventHandler: function () {
+			if (!mapHook.map) return;
+
+			mapHook.map.map._canvas.style.cursor = 'nwse-resize';
+			mapHook.map.map.dragPan.disable();
+		},
+	});
+	useLayerEvent({
+		event: 'mouseleave',
+		layerId: 'pdfPreviewGeojsonResizeHandle',
+		eventHandler: function () {
+			if (!mapHook.map) return;
+
+			mapHook.map.map._canvas.style.cursor = '';
+			mapHook.map.map.dragPan.enable();
+		},
+	});
+	useLayerEvent({
+		event: 'mousedown',
+		layerId: 'pdfPreviewGeojsonResizeHandle',
+		addTouchEvents: true,
+		eventHandler: function (e: MapMouseEvent | MapTouchEvent) {
+			e.preventDefault();
+			if (!mapHook.map) return;
+
+			dragging.current = false;
+			draggingRotationHandle.current = false;
+			draggingResizeHandle.current = true;
+			mapHook.map.map._canvas.style.cursor = 'move';
+
+			function onMove(e: MapMouseEvent | MapTouchEvent) {
+				if (!pdfContext.geojsonRef || !draggingResizeHandle.current || !pdfContext.orientation)
+					return;
+
+				const tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
+				let _distance = turf.distance(
+					[tmpGeojsonProps.center.lng, tmpGeojsonProps.center.lat],
+					[e.lngLat.lng, e.lngLat.lat]
+				);
+				// limit max diagonal distance of PDF area to 120km as larger area lead to distortions for northern and southern areas
+				if (_distance > 60) {
+					_distance = 60;
+				}
+				tmpGeojsonProps.distance = _distance;
+				tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
+				pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
+				setGeojsonProps(tmpGeojsonProps);
+			}
+			function onUp() {
+				if (!draggingResizeHandle.current || !mapHook.map) return;
+
+				mapHook.map.map._canvas.style.cursor = '';
+				draggingResizeHandle.current = false;
+
+				mapHook.map.map.dragPan.enable();
+				// Unbind mouse events
+				mapHook.map.map.off('mousemove', onMove);
+				mapHook.map.map.off('touchmove', onMove);
+			}
+
+			// Mouse events
+			mapHook.map.map.on('mousemove', onMove);
+			mapHook.map.map.on('touchmove', onMove);
+			mapHook.map.map.once('mouseup', onUp);
+			mapHook.map.map.once('touchend', onUp);
+		},
+	});
+
+	// Rotation handle events
+	useLayerEvent({
+		event: 'mouseenter',
+		layerId: 'pdfPreviewGeojsonRotationHandle',
+		eventHandler: function () {
+			if (!mapHook.map) return;
+
+			mapHook.map.map._canvas.style.cursor = 'nwse-resize';
+			mapHook.map.map.dragPan.disable();
+		},
+	});
+	useLayerEvent({
+		event: 'mouseleave',
+		layerId: 'pdfPreviewGeojsonRotationHandle',
+		eventHandler: function () {
+			if (!mapHook.map) return;
+
+			mapHook.map.map._canvas.style.cursor = '';
+			mapHook.map.map.dragPan.enable();
+		},
+	});
+	useLayerEvent({
+		event: 'mousedown',
+		layerId: 'pdfPreviewGeojsonRotationHandle',
+		addTouchEvents: true,
+		eventHandler: function (e: MapMouseEvent | MapTouchEvent) {
+			e.preventDefault();
+			if (!mapHook.map || !pdfContext.orientation) return;
+
+			dragging.current = false;
+			draggingResizeHandle.current = false;
+			draggingRotationHandle.current = true;
+			mapHook.map.map._canvas.style.cursor = 'move';
+
+			function onMove(e: MapMouseEvent | MapTouchEvent) {
+				e.preventDefault();
+				if (!draggingRotationHandle.current || !pdfContext.orientation || !pdfContext.geojsonRef)
+					return;
+
+				const tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
+				const _bearing = turf.bearing(
+					[tmpGeojsonProps.center.lng, tmpGeojsonProps.center.lat],
+					[e.lngLat.lng, e.lngLat.lat]
+				);
+				tmpGeojsonProps.bearing = 144.7 + _bearing;
+				tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
+				pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
+				setGeojsonProps(tmpGeojsonProps);
+			}
+			function onUp() {
+				if (!draggingRotationHandle.current || !mapHook.map) return;
+
+				mapHook.map.map._canvas.style.cursor = '';
+				draggingRotationHandle.current = false;
+
+				mapHook.map.map.dragPan.enable();
+				// Unbind mouse events
+				mapHook.map.map.off('mousemove', onMove);
+				mapHook.map.map.off('touchmove', onMove);
+			}
+
+			// Mouse events
+			mapHook.map.map.on('mousemove', onMove);
+			mapHook.map.map.on('touchmove', onMove);
+			mapHook.map.map.once('mouseup', onUp);
+			mapHook.map.map.once('touchend', onUp);
+		},
+	});
+
+	// drag & drop events
+	useLayerEvent({
+		event: 'mouseenter',
+		layerId: 'pdfPreviewGeojson',
+		eventHandler: function (e: MapLayerMouseEvent) {
+			if (!mapHook.map || !e?.features?.length) return;
+			mapHook.map.map._canvas.style.cursor = 'move';
+			activeFeature.current = e.features[0];
+		},
+	});
+	useLayerEvent({
+		event: 'mouseleave',
+		layerId: 'pdfPreviewGeojson',
+		eventHandler: function () {
+			if (!mapHook.map) return;
+
+			mapHook.map.map._canvas.style.cursor = '';
+			mapHook.map.map.dragPan.enable();
+			activeFeature.current = undefined;
+		},
+	});
+	useLayerEvent({
+		event: 'mousedown',
+		addTouchEvents: true,
+		layerId: 'pdfPreviewGeojson',
+		eventHandler: function (e: MapMouseEvent | MapTouchEvent) {
+			e.preventDefault();
+			console.log('mousedown');
+			if (!mapHook.map) return;
+
+			draggingResizeHandle.current = false;
+			draggingRotationHandle.current = false;
+			dragging.current = true;
+			mapHook.map.map._canvas.style.cursor = 'move';
+
+			function onMove(e: MapMouseEvent | MapTouchEvent) {
+				e.preventDefault();
+				if (!dragging.current || !pdfContext.geojsonRef || !pdfContext.orientation) return;
+
+				const tmpGeojsonProps = JSON.parse(JSON.stringify(geojsonProps));
+				tmpGeojsonProps.center = e.lngLat;
+				tmpGeojsonProps.geojson = createPreviewGeojson(tmpGeojsonProps, pdfContext.orientation);
+				pdfContext.geojsonRef.current = tmpGeojsonProps.geojson;
+				setGeojsonProps(tmpGeojsonProps);
+			}
+			function onUp() {
+				if (!dragging.current || !mapHook.map) return;
+
+				mapHook.map.map._canvas.style.cursor = '';
+				dragging.current = false;
+
+				mapHook.map.map.dragPan.enable();
+				// Unbind mouse events
+				mapHook.map.map.off('mousemove', onMove);
+				mapHook.map.map.off('touchmove', onMove);
+			}
+
+			// Mouse events
+			mapHook.map.map.on('mousemove', onMove);
+			mapHook.map.map.on('touchmove', onMove);
+			mapHook.map.map.once('mouseup', onUp);
+			mapHook.map.map.once('touchend', onUp);
+		},
+	});
+
+	//map.on('mouseleave', 'point', function() {
+	//    map.setPaintProperty('point', 'circle-color', '#3887be');
+	//    canvas.style.cursor = '';
+	//    isCursorOverPoint = false;
+	//    map.dragPan.enable();
+	//});
+
+	return (
+		<>
+			{geojsonProps?.geojson?.bbox && (
+				<>
+					<MlGeoJsonLayer
+						paint={{ 'line-color': '#616161', 'line-width': 4 }}
+						type="line"
+						layerId="pdfPreviewGeojsonOutline"
+						geojson={geojsonProps.geojson}
+					/>
+					<MlGeoJsonLayer
+						paint={{ 'fill-opacity': 0 }}
+						type="fill"
+						layerId="pdfPreviewGeojson"
+						geojson={geojsonProps.geojson}
+					/>
+					<MlGeoJsonLayer
+						layerId="pdfPreviewGeojsonResizeHandle"
+						paint={{
+							'circle-radius': 10,
+							'circle-color': '#1976d2',
+							'circle-stroke-width': 2,
+							'circle-stroke-color': '#ffffff',
+						}}
+						geojson={{
+							type: 'Feature',
+							geometry: {
+								type: 'Point',
+								//coordinates: [geojsonProps.geojson.bbox[2], geojsonProps.geojson.bbox[3]],
+								coordinates: geojsonProps.geojson.geometry.coordinates[0][2],
+							},
+							properties: {},
+						}}
+					/>
+					<MlGeoJsonLayer
+						layerId="pdfPreviewGeojsonRotationHandle"
+						paint={{
+							'circle-radius': 10,
+							'circle-color': '#86dd71',
+							'circle-stroke-width': 2,
+							'circle-stroke-color': '#ffffff',
+						}}
+						geojson={{
+							type: 'Feature',
+							geometry: {
+								type: 'Point',
+								//coordinates: [geojsonProps.geojson.bbox[0], geojsonProps.geojson.bbox[3]],
+								coordinates: geojsonProps.geojson.geometry.coordinates[0][3],
+							},
+							properties: {},
+						}}
+					/>
+				</>
+			)}
+		</>
+	);
+}

package/src/components/MlCreatePdfForm/lib/pdfContext.d.ts

@@ -0,0 +1,24 @@
+import { Feature } from '@turf/turf';
+export interface PdfPreviewOptions {
+	center: [number, number] | undefined;
+	scale: [number, number] | undefined;
+	rotate: number;
+	width: number;
+	height: number;
+	fixedScale?: number | false;
+	orientation: 'portrait' | 'landscape';
+}
+
+export interface PdfContextInterface {
+	options: PdfPreviewOptions;
+	setOptions: (arg1: (val: PdfPreviewOptions) => PdfPreviewOptions) => void;
+	format: string;
+	setFormat: (format: string) => void;
+	quality: string;
+	setQuality: (quality: string) => void;
+	geojsonRef: MutableRefObject<
+		| Feature
+		| undefined
+	>;
+	template: { width: number; height: number };
+}

package/src/components/MlCreatePdfForm/lib/preview.css

@@ -0,0 +1,114 @@
+.root {
+  position: relative;
+}
+.mapContainer {
+  position: relative;
+}
+.will-change-container {
+  padding-left: 100px;
+  padding-top: 100px;
+  will-change: transform;
+}
+.will-change-target {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  background: #ee8;
+  color: #333;
+  font-weight: bold;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+.moveable-control-box{
+  z-index:255;
+  cursor: pointer;
+}
+.moveable-rotation .moveable-rotation-control {
+  cursor:pointer !important;
+}
+.target {
+  position: fixed;
+  top: 0;
+  left: 0;
+  line-height: 100px;
+  text-align: center;
+  background: rgba(120,210,210,0.1);
+  border: 3px solid #3a3;
+  box-sizing: border-box;
+  z-index:250;
+  cursor: pointer;
+}
+
+.nested {
+  position: absolute;
+  border: 4px solid #ccc;
+  width: 100px;
+  height: 100px;
+  top: 50px;
+  left: 70px;
+  color: #333;
+  /* box-sizing: border-box; */
+}
+
+.nested.first {
+  top: 150px;
+}
+
+.nested.rotate {
+  transform-origin: 0 0;
+  transform: rotate(-30deg);
+}
+
+.nested.scale {
+  transform: scale(1.5, 1.5);
+}
+
+.nested .target {
+  top: 50px;
+  left: 50px
+}
+
+
+/* pos guidelines */
+.moveable-normal.red {
+  background: red!important;
+}
+/* gap guidelines */
+.moveable-gap.red {
+  background: red!important;
+}
+/* When snapped to an element in elementGuidelines */
+.moveable-bold.red {
+  background: red!important;
+}
+/* A dashed line between target and element */
+.moveable-dashed.red {
+  border-top-color: red!important;
+  border-left-color: red!important;
+}
+
+/* pos guidelines */
+.moveable-normal.green {
+  background: green!important;
+}
+/* gap guidelines */
+.moveable-gap.green {
+  background: green!important;
+}
+/* When snapped to an element in elementGuidelines */
+.moveable-bold.green {
+  background: green!important;
+}
+/* A dashed line between target and element */
+.moveable-dashed.green {
+  border-top-color: green!important;
+  border-left-color: green!important;
+}
+.MuiDialog-root{
+  pointer-events: none;
+}
+.MuiDialog-root .react-draggable{
+  pointer-events: all;
+}

package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlFeatureEditor",
-  "title": "Sketch tools",
+  "title": "Feature editor",
   "description": "Enables the editing of Point, Linestring and Polygon GeoJSON Files.",
   "i18n": {
     "de": {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useRef } from "react";
-import "./MlFeatureEditor.css";
+import React, { useState, useEffect, useRef } from 'react';
+import './MlFeatureEditor.css';
 
-import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import CustomPolygonMode from "./custom-polygon-mode.js";
-import CustomSelectMode from "./custom-select-mode.js";
-import CustomDirectSelectMode from "./custom-direct-select-mode.js";
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import CustomPolygonMode from './custom-polygon-mode.js';
+import CustomSelectMode from './custom-select-mode.js';
+import CustomDirectSelectMode from './custom-direct-select-mode.js';
 
-import useMap from "../../hooks/useMap";
+import useMap from '../../hooks/useMap';
+import { GeoJSONObject, Feature } from '@turf/turf';
 
 interface MlFeatureEditorProps {
 	/**
@@ -22,12 +23,17 @@ interface MlFeatureEditorProps {
 	/**
 	 * Input GeoJson data at initialization
 	 */
-	geojson?: any;
+	geojson?: Feature;
 	/**
 	 * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
 	 * First parameter is the new GeoJson feature.
 	 */
-	onChange?: Function;
+	onChange?: (para: GeoJSONObject[]) => void;
+	/**
+	 * Callback function that is called each time the GeoJson data within has been finished within MlFeatureEditor.
+	 * First parameter is the new GeoJson feature.
+	 */
+	onFinish?: () => void;
 	/**
 	 * Feature editor mode:
 	 * - "custom_select" edit features
@@ -51,10 +57,15 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 	const drawToolsInitialized = useRef(false);
 	const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-
 	const modeChangeHandler = (e: any) => {
-		console.log("MlFeatureEditor mode change to " + e.mode);
+		console.log('MlFeatureEditor mode change to ' + e.mode);
 		//setDrawMode(e.mode);
+		if (
+			typeof props.onFinish === 'function' &&
+			(e.mode === 'custom_select' || e.mode === 'simple_select')
+		) {
+			props.onFinish();
+		}
 	};
 
 	useEffect(() => {
@@ -63,17 +74,19 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 
 			if (
 				mapHook.map.map.style &&
-				mapHook.map.map.getSource("mapbox-gl-draw-cold") &&
+				mapHook.map.map.getSource('mapbox-gl-draw-cold') &&
 				draw.current
 			) {
 				// remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				draw.current?.remove();
 			}
 
 			draw.current = new MapboxDraw({
 				displayControlsDefault: false,
-				defaultMode: props.mode || "custom_select",
+				defaultMode: props.mode || 'custom_select',
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				modes: Object.assign(
 					{
@@ -85,10 +98,9 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 				),
 			});
 
-			mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
+			mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
 
-
-			mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
+			mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
 
 			setDrawToolsReady(true);
 		}
@@ -100,35 +112,34 @@ const MlFeatureEditor = (props: MlFeatureEditorProps) => {
 		const changeHandler = () => {
 			if (draw.current) {
 				// update drawnFeatures state object
-				if (typeof props.onChange === "function") {
-					let currentFeatureCollection = draw.current.getAll?.();
+				if (typeof props.onChange === 'function') {
+					const currentFeatureCollection = draw.current.getAll?.();
 					props.onChange(currentFeatureCollection?.features);
 				}
 			}
 		};
 
-		mapHook.map.on("mouseup", changeHandler);
+		mapHook.map.on('mouseup', changeHandler);
 
-		mapHook.map.on("touchend", changeHandler);
+		mapHook.map.on('touchend', changeHandler);
 
 		return () => {
 			if (!mapHook.map) return;
 
-			mapHook.map.map.off("mouseup", changeHandler);
-
-			mapHook.map.map.off("touchend", changeHandler);
-		}
-
-	}, [drawToolsReady, mapHook.map])
+			mapHook.map.map.off('mouseup', changeHandler);
+			mapHook.map.map.off('touchend', changeHandler);
+		};
+	}, [drawToolsReady, mapHook.map]);
 
 	useEffect(() => {
 		if (draw.current && props.geojson?.geometry) {
-			draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+			draw.current.set({ type: 'FeatureCollection', features: [props.geojson as any] });
 		}
 	}, [props.geojson, drawToolsReady]);
 
 	useEffect(() => {
 		if (props.mode && draw.current) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			draw.current.changeMode(props.mode);
 		}