@mapcomponents/react-maplibre 0.1.57 → 0.1.58

package/src/components/MlCreatePdfButton/lib/createPdf.ts

@@ -4,186 +4,186 @@ import nmConverter from "./nominatimMap";
 import MapLibreGlWrapper from '../../MapLibreMap/lib/MapLibreGlWrapper'
 
 const toPixels = (length:number):string => {
-  let conversionFactor = 96;
+	let conversionFactor = 96;
 
-  conversionFactor /= 25.4;
+	conversionFactor /= 25.4;
 
-  return conversionFactor * length + "px";
+	return conversionFactor * length + "px";
 };
 
 const createPdf:Function = (map:MapLibreGlWrapper, locationValue:any, setLoading:any) => {
-  setLoading(true);
-
-  const width = 210;
-  const height = 297;
-  // Calculate pixel ratio
-  const actualPixelRatio = window.devicePixelRatio;
-
-  // Create map container
-  const hidden = document.createElement("div");
-  hidden.className = "hidden-map";
-  document.body.appendChild(hidden);
-  const container = document.createElement("div");
-  container.style.width = toPixels(width);
-  container.style.height = toPixels(height);
-  hidden.appendChild(container);
-
-  let style = map.map.getStyle();
-  for (let name in style.sources) {
-    let src = style.sources[name];
-
-    Object.keys(src).forEach((key) => {
-      //delete properties if value is undefined.
-      // for instance, raster-dem might has undefined value in "url" and "bounds"
-      if (!src[key]) {
-        delete src[key];
-      }
-    });
-  }
-  //Render map
-  var renderMap = new Map({
-    container: container,
-    center: map.map.getCenter(),
-    zoom: map.map.getZoom(),
-    bearing: map.map.getBearing(),
-    pitch: map.map.getPitch(),
-    interactive: false,
-    preserveDrawingBuffer: true,
-    fadeDuration: 0,
-    attributionControl: false,
-    style: style
-  });
-
-  renderMap.once("idle", function () {
-    // TO DO: It is still under development
-    const pdf = new jsPDF({
-      orientation: "p",
-      unit: "mm",
-      compress: true,
-    });
-    Object.defineProperty(window, "devicePixelRatio", {
-      get: function () {
-        return 300 / 96;
-      },
-    });
-    const offsetX = 2.5;
-    const offsetY = 2.5;
-    const marginTop = 3;
-    const marginBottom = 3;
-    const innerMargin = 2;
-    const logo =
-      "data:image/png;base64,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";
-    const textBuffer = 1;
-    const lineHeight = 3.25;
-    const text = locationValue ? nmConverter(locationValue.address) : "";
-    const textChunksSeperator = text.split(",");
-    const textChunks:string[] = [];
-
-    if (textChunks.length) {
-      textChunksSeperator.forEach((chunk:string) => {
-        const limitChunks:(RegExpMatchArray | null) = chunk.match(/.{1,34}/g);
-        if(limitChunks){
-        textChunks.push(...limitChunks);
-        }
-      });
-    }
-
-    //Render map image
-    pdf.addImage(
-      renderMap.getCanvas().toDataURL("image/png"),
-      "png",
-      0,
-      0,
-      210,
-      297,
-      undefined,
-      "FAST"
-    );
-
-    //Render lower left Copyright box
-    pdf.setFillColor("white");
-    pdf.rect(138, 287, 297, 10, "F");
-    pdf.setFontSize(10); // optional
-    pdf.text(
-      "Datenquelle: © OpenStreetMap-Mitwirkende",
-      140,
-      pdf.internal.pageSize.height - 3
-    );
-
-    //Render infobox
-    pdf.setFillColor("white");
-    const infoBoxSize =
-      textChunks.length * lineHeight +
-      marginTop +
-      marginBottom +
-      lineHeight * 2 +
-      innerMargin * 2 +
-      textBuffer;
-
-    pdf.rect(offsetX, 2, 66.5, infoBoxSize, "F");
-
-    pdf.setFontSize(10);
-    pdf.text("Karten PDF:", 6, offsetY + marginTop);
-
-    //Render inner infobox
-    pdf.rect(
-      6,
-      7,
-      60,
-      textChunks.length * lineHeight + innerMargin * 2 + textBuffer
-    );
-    pdf.setFontSize(10);
-
-    //Write out address
-    textChunks.forEach((text, i) => {
-      pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
-    });
-
-    //Add WG Logo
-    pdf.addImage(
-      logo,
-      "png",
-      5,
-      offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2,
-      3,
-      3,
-      undefined,
-      "FAST"
-    );
-
-    //Add WG Url
-    pdf.setFontSize(10);
-    pdf.text(
-      "wheregroup.com",
-      40,
-      offsetY +
-        marginTop +
-        lineHeight * 2 +
-        textChunks.length * lineHeight +
-        innerMargin * 2 +
-        textBuffer
-    );
-
-    //Set pdfs props
-    pdf.setProperties({
-      title: "Map export",
-      subject: "Map export",
-      creator: "WhereGroup GmbH",
-      author: "(c)WhereGroup GmbH, (c)OpenStreetMap",
-    });
-
-    pdf.save("Map.pdf");
-
-    renderMap.remove();
-    hidden.parentNode?.removeChild(hidden);
-    Object.defineProperty(window, "devicePixelRatio", {
-      get: function () {
-        return actualPixelRatio;
-      },
-    });
-
-    setLoading(false);
-  });
+	setLoading(true);
+
+	const width = 210;
+	const height = 297;
+	// Calculate pixel ratio
+	const actualPixelRatio = window.devicePixelRatio;
+
+	// Create map container
+	const hidden = document.createElement("div");
+	hidden.className = "hidden-map";
+	document.body.appendChild(hidden);
+	const container = document.createElement("div");
+	container.style.width = toPixels(width);
+	container.style.height = toPixels(height);
+	hidden.appendChild(container);
+
+	let style = map.map.getStyle();
+	for (let name in style.sources) {
+		let src = style.sources[name];
+
+		Object.keys(src).forEach((key) => {
+			//delete properties if value is undefined.
+			// for instance, raster-dem might has undefined value in "url" and "bounds"
+			if (!src[key]) {
+				delete src[key];
+			}
+		});
+	}
+	//Render map
+	var renderMap = new Map({
+		container: container,
+		center: map.map.getCenter(),
+		zoom: map.map.getZoom(),
+		bearing: map.map.getBearing(),
+		pitch: map.map.getPitch(),
+		interactive: false,
+		preserveDrawingBuffer: true,
+		fadeDuration: 0,
+		attributionControl: false,
+		style: style
+	});
+
+	renderMap.once("idle", function () {
+		// TO DO: It is still under development
+		const pdf = new jsPDF({
+			orientation: "p",
+			unit: "mm",
+			compress: true,
+		});
+		Object.defineProperty(window, "devicePixelRatio", {
+			get: function () {
+				return 300 / 96;
+			},
+		});
+		const offsetX = 2.5;
+		const offsetY = 2.5;
+		const marginTop = 3;
+		const marginBottom = 3;
+		const innerMargin = 2;
+		const logo =
+			"data:image/png;base64,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";
+		const textBuffer = 1;
+		const lineHeight = 3.25;
+		const text = locationValue ? nmConverter(locationValue.address) : "";
+		const textChunksSeperator = text.split(",");
+		const textChunks:string[] = [];
+
+		if (textChunks.length) {
+			textChunksSeperator.forEach((chunk:string) => {
+				const limitChunks:(RegExpMatchArray | null) = chunk.match(/.{1,34}/g);
+				if(limitChunks){
+				textChunks.push(...limitChunks);
+				}
+			});
+		}
+
+		//Render map image
+		pdf.addImage(
+			renderMap.getCanvas().toDataURL("image/png"),
+			"png",
+			0,
+			0,
+			210,
+			297,
+			undefined,
+			"FAST"
+		);
+
+		//Render lower left Copyright box
+		pdf.setFillColor("white");
+		pdf.rect(138, 287, 297, 10, "F");
+		pdf.setFontSize(10); // optional
+		pdf.text(
+			"Datenquelle: © OpenStreetMap-Mitwirkende",
+			140,
+			pdf.internal.pageSize.height - 3
+		);
+
+		//Render infobox
+		pdf.setFillColor("white");
+		const infoBoxSize =
+			textChunks.length * lineHeight +
+			marginTop +
+			marginBottom +
+			lineHeight * 2 +
+			innerMargin * 2 +
+			textBuffer;
+
+		pdf.rect(offsetX, 2, 66.5, infoBoxSize, "F");
+
+		pdf.setFontSize(10);
+		pdf.text("Karten PDF:", 6, offsetY + marginTop);
+
+		//Render inner infobox
+		pdf.rect(
+			6,
+			7,
+			60,
+			textChunks.length * lineHeight + innerMargin * 2 + textBuffer
+		);
+		pdf.setFontSize(10);
+
+		//Write out address
+		textChunks.forEach((text, i) => {
+			pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
+		});
+
+		//Add WG Logo
+		pdf.addImage(
+			logo,
+			"png",
+			5,
+			offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2,
+			3,
+			3,
+			undefined,
+			"FAST"
+		);
+
+		//Add WG Url
+		pdf.setFontSize(10);
+		pdf.text(
+			"wheregroup.com",
+			40,
+			offsetY +
+				marginTop +
+				lineHeight * 2 +
+				textChunks.length * lineHeight +
+				innerMargin * 2 +
+				textBuffer
+		);
+
+		//Set pdfs props
+		pdf.setProperties({
+			title: "Map export",
+			subject: "Map export",
+			creator: "WhereGroup GmbH",
+			author: "(c)WhereGroup GmbH, (c)OpenStreetMap",
+		});
+
+		pdf.save("Map.pdf");
+
+		renderMap.remove();
+		hidden.parentNode?.removeChild(hidden);
+		Object.defineProperty(window, "devicePixelRatio", {
+			get: function () {
+				return actualPixelRatio;
+			},
+		});
+
+		setLoading(false);
+	});
 };
 
 export default createPdf;

package/src/components/MlCreatePdfButton/lib/nominatimMap.ts

@@ -1,57 +1,57 @@
 const nmMap = {
-  street: [
-    "footway",
-    "street",
-    "road",
-    "street_name",
-    "residential",
-    "path",
-    "pedestrian",
-    "road_reference",
-    "road_reference_intl",
-    "square",
-    "place",
-  ],
-  number: ["house_number", "street_number"],
-  place: [
-    "city",
-    "village",
-    "hamlet",
-    "locality",
-    "croft",
-    "neighbourhood",
-    "suburb",
-    "city_district",
-    "district",
-    "quarter",
-    "borough",
-    "city_block",
-    "residential",
-    "commercial",
-    "industrial",
-    "houses",
-    "subdivision",
-    "allotments",
-    "postal_city",
-    "town",
-    "municipality",
-    "local_administrative_area",
-  ],
-  zip: ["postcode", "partial_postcode"],
-  state: ["state", "province", "state_code"],
+	street: [
+		"footway",
+		"street",
+		"road",
+		"street_name",
+		"residential",
+		"path",
+		"pedestrian",
+		"road_reference",
+		"road_reference_intl",
+		"square",
+		"place",
+	],
+	number: ["house_number", "street_number"],
+	place: [
+		"city",
+		"village",
+		"hamlet",
+		"locality",
+		"croft",
+		"neighbourhood",
+		"suburb",
+		"city_district",
+		"district",
+		"quarter",
+		"borough",
+		"city_block",
+		"residential",
+		"commercial",
+		"industrial",
+		"houses",
+		"subdivision",
+		"allotments",
+		"postal_city",
+		"town",
+		"municipality",
+		"local_administrative_area",
+	],
+	zip: ["postcode", "partial_postcode"],
+	state: ["state", "province", "state_code"],
 };
 
 const nmConverter:Function = (nmAddress:any):string => {
-  const addressArr:string[] = [];
-  for (let key in nmMap) {
-    nmMap[key].some((element:string) => {
-      if (nmAddress.hasOwnProperty(element)) {
-        addressArr.push(nmAddress[element]);
-        return true;
-      }
-      return false;
-    });
-  }
-  return addressArr.join(", ");
+	const addressArr:string[] = [];
+	for (let key in nmMap) {
+		nmMap[key].some((element:string) => {
+			if (nmAddress.hasOwnProperty(element)) {
+				addressArr.push(nmAddress[element]);
+				return true;
+			}
+			return false;
+		});
+	}
+	return addressArr.join(", ");
 };
 export default nmConverter;

package/src/components/MlCreatePdfForm/MlCreatePdfForm.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlCreatePdfForm/MlCreatePdfForm.meta.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlCreatePdfForm",
+  "title": "Export PDF form",
+  "description": "Creates a PDF file with the current PDF preview with adjustable position, format, rotation and quality.",
+  "i18n": {
+    "de": {
+      "title": "PDF Export Formular",
+      "description": "Erzeugt eine PDF Datei aus der aktuellen Vorschau, mit anpassbarem Position, Format, Rotation und Auflösung."
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlCreatePdfForm/MlCreatePdfForm.stories.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+
+import MlCreatePdfForm from './MlCreatePdfForm';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import { Button } from '@mui/material';
+import Paper from '@mui/material/Paper';
+import Draggable from 'react-draggable';
+
+import TopToolbar from '../../ui_components/TopToolbar';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+const PaperComponent = (props: object) => {
+	return (
+		<Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
+			<Paper {...props} />
+		</Draggable>
+	);
+};
+
+const MlDialog = ({ title, children }: { title: string; children: React.ReactNode }) => {
+	return (
+		<Dialog
+			open={true}
+			hideBackdrop={true}
+			PaperComponent={PaperComponent}
+			aria-labelledby="draggable-dialog-title"
+			sx={{
+				justifyContent: 'flex-start',
+				maxWidth: '300px',
+			}}
+		>
+			<DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
+				{title}
+			</DialogTitle>
+			<DialogContent>{children}</DialogContent>
+		</Dialog>
+	);
+};
+
+const storyoptions = {
+	title: 'MapComponents/MlCreatePdfForm',
+	component: MlCreatePdfForm,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => {
+	const [showCreatePdfForm, setShowCreatePdfForm] = useState(false);
+
+	return (
+		<>
+			<TopToolbar>
+				<Button variant="contained" onClick={() => setShowCreatePdfForm(true)}>
+					PDF
+				</Button>
+			</TopToolbar>
+			{showCreatePdfForm && (
+				<MlDialog title="Create PDF">
+					<MlCreatePdfForm
+						onCreatePdf={(options) => {
+							const pdf = options.pdf;
+							const offsetX = 2.5;
+							const offsetY = 2.5;
+							const marginTop = 3;
+							const marginBottom = 3;
+							const innerMargin = 2;
+							const logo =
+								'data:image/png;base64,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';
+							const textBuffer = 1;
+							const lineHeight = 3.25;
+							const text = '';
+							const textChunksSeperator = text.split(',');
+							const textChunks: string[] = [];
+
+							if (textChunks.length) {
+								textChunksSeperator.forEach((chunk: string) => {
+									const limitChunks: RegExpMatchArray | null = chunk.match(/.{1,34}/g);
+									if (limitChunks) {
+										textChunks.push(...limitChunks);
+									}
+								});
+							}
+							//Render infobox
+							pdf.setFillColor('white');
+							const infoBoxSize =
+								textChunks.length * lineHeight +
+								marginTop +
+								marginBottom +
+								lineHeight * 2 +
+								innerMargin * 2 +
+								textBuffer;
+
+							pdf.rect(offsetX, 2, 66.5, infoBoxSize, 'F');
+
+							pdf.setFontSize(10);
+							pdf.text('Map PDF:', 6, offsetY + marginTop);
+
+							//Render inner infobox
+							pdf.rect(6, 7, 60, textChunks.length * lineHeight + innerMargin * 2 + textBuffer);
+							pdf.setFontSize(10);
+
+							//Write out address
+							textChunks.forEach((text, i) => {
+								pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
+							});
+
+							//Add WG Logo
+							pdf.addImage(
+								logo,
+								'png',
+								5,
+								offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2,
+								3,
+								3,
+								undefined,
+								'FAST'
+							);
+
+							//Add WG Url
+							pdf.setFontSize(10);
+							pdf.text(
+								'wheregroup.com',
+								40,
+								offsetY +
+									marginTop +
+									lineHeight * 2 +
+									textChunks.length * lineHeight +
+									innerMargin * 2 +
+									textBuffer
+							);
+
+							//Set pdfs props
+							pdf.setProperties({
+								title: 'Map export',
+								subject: 'Map export',
+								creator: 'WhereGroup GmbH',
+								author: '(c)WhereGroup GmbH, (c)OpenStreetMap',
+							});
+							return options;
+						}}
+					/>
+				</MlDialog>
+			)}
+		</>
+	);
+};
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};