@mapcomponents/react-maplibre 0.1.69 → 0.1.71

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

@@ -1,399 +0,0 @@
-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/pdf.templates.ts

@@ -1,82 +0,0 @@
-interface PdfTemplateType{
-	width: number;
-	height: number;
-};
-interface PdfTemplateObject{
-	[key:string]:({[key:string]:PdfTemplateType});
-};
-
-const PdfTemplates:PdfTemplateObject = {
-	A4: {
-		'300dpi': {
-			width: 2480,
-			height: 3508,
-		},
-		'150dpi': {
-			width: 1240,
-			height: 1754,
-		},
-		'72dpi': {
-			width: 595,
-			height: 842,
-		},
-	},
-	A3: {
-		'300dpi': {
-			width: 3505,
-			height: 4961,
-		},
-		'150dpi': {
-			width: 1754,
-			height: 2480,
-		},
-		'72dpi': {
-			width: 842,
-			height: 1191,
-		},
-	},
-	A2: {
-		'300dpi': {
-			width: 4961,
-			height: 7016,
-		},
-		'150dpi': {
-			width: 2480,
-			height: 3508,
-		},
-		'72dpi': {
-			width: 1191,
-			height: 1684,
-		},
-	},
-	A1: {
-		'300dpi': {
-			width: 7016,
-			height: 9933,
-		},
-		'150dpi': {
-			width: 3508,
-			height: 4967,
-		},
-		'72dpi': {
-			width: 1684,
-			height: 2384,
-		},
-	},
-	A0: {
-		'300dpi': {
-			width: 9933,
-			height: 14043,
-		},
-		'150dpi': {
-			width: 4967,
-			height: 7022,
-		},
-		'72dpi': {
-			width: 2384,
-			height: 3370,
-		},
-	},
-};
-
-export default PdfTemplates;

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

@@ -1,24 +0,0 @@
-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

@@ -1,114 +0,0 @@
-.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.doc.de.md

@@ -1 +0,0 @@
-Erzeugen und Bearbeiten von Objekten

package/src/components/MlFeatureEditor/MlFeatureEditor.doc.en.md

@@ -1 +0,0 @@
-Creating and editing of objects. 

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

@@ -1,14 +0,0 @@
-{
-  "name": "MlFeatureEditor",
-  "title": "Feature editor",
-  "description": "Enables the editing of Point, Linestring and Polygon GeoJSON Files.",
-  "i18n": {
-    "de": {
-      "title": "Skizzen Werkzeug",
-      "description": "Erzeugen und Bearbeiten von Objekten."
-    }
-  },
-  "tags": ["Map add-on"],
-  "category": "add-ons",
-  "type": "component"
-}