@mapcomponents/react-maplibre 0.1.61 → 0.1.62

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/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";