@mapcomponents/react-maplibre 0.1.61 → 0.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
@@ -33,6 +33,7 @@
     "jspdf": "^2.5.1",
     "maplibre-gl": "^2.1.7",
     "react-i18next": "^11.14.3",
+    "react-moveable": "^0.41.1",
     "three": "^0.139.1",
     "uuid": "^8.3.2",
     "wms-capabilities": "^0.5.1",

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

@@ -10,7 +10,9 @@ import Draggable from 'react-draggable';
 
 import TopToolbar from '../../ui_components/TopToolbar';
 
+import './lib/preview.css';
 import mapContextDecorator from '../../decorators/MapContextDecorator';
+
 const PaperComponent = (props: object) => {
 	return (
 		<Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
@@ -49,11 +51,14 @@ export default storyoptions;
 
 const Template = () => {
 	const [showCreatePdfForm, setShowCreatePdfForm] = useState(false);
+	const targetRef = React.useRef<HTMLDivElement>(null);
+	const containerRef = React.useRef<HTMLDivElement>(document.querySelector('.map_container'));
 
+	// <MlWmsLayer url='https://geo.stat.fi/geoserver/vaestoruutu/wms' urlParameters={{layers:'vaki2005_1km_kp'}}/>
 	return (
 		<>
 			<TopToolbar>
-				<Button variant="contained" onClick={() => setShowCreatePdfForm(true)}>
+				<Button variant="contained" onClick={() => setShowCreatePdfForm(!showCreatePdfForm)}>
 					PDF
 				</Button>
 			</TopToolbar>
@@ -150,3 +155,13 @@ const Template = () => {
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {};
+
+
+//const SidebarTemplate = function() {
+//
+//	return <>
+//	</>;
+//}
+//export const SidebarExample = SidebarTemplate.bind({});
+//SidebarExample.parameters = {};
+//SidebarExample.args = {};

package/src/components/MlCreatePdfForm/MlCreatePdfForm.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PdfPreview from './lib/PdfPreview';
 import PdfForm from './lib/PdfForm';
 import { PdfContextProvider } from './lib/PdfContext';
 import { createPdfResolverParams } from '../../hooks/useExportMap/lib';
@@ -27,7 +26,6 @@ const MlCreatePdfForm = (props: MlCreatePdfFormProps) => {
 		<>
 			<PdfContextProvider>
 				<PdfForm {...props} />
-				<PdfPreview />
 			</PdfContextProvider>
 		</>
 	);

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

@@ -1,31 +1,29 @@
-import React, { useState, useRef, useMemo, MutableRefObject } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import templates from './pdf.templates';
-import {  Feature } from '@turf/turf';
+import { PdfContextInterface, PdfPreviewOptions } from './pdfContext';
 
-interface PdfContextInterface {
-	format: string;
-	setFormat: (format: string) => void;
-	quality: string;
-	setQuality: (quality: string) => void;
-	orientation: string;
-	setOrientation: (orientation: string) => void;
-	geojsonRef: MutableRefObject<Feature | undefined>;
-	template: { width: number; height: number };
-}
 
-const PdfContext = React.createContext<Partial<PdfContextInterface>>({});
+const PdfContext = React.createContext<PdfContextInterface>({} as PdfContextInterface);
 
 const defaultTemplate = templates['A4']['72dpi'];
 const PdfContextProvider = ({ children }: { children: React.ReactNode }) => {
 	const [format, setFormat] = useState('A4');
 	const [quality, setQuality] = useState('72dpi');
-	const [orientation, setOrientation] = useState('portrait');
+	const [options, setOptions] = useState<PdfPreviewOptions>({
+		center: undefined,
+		scale: undefined,
+		rotate: 0,
+		width: 210,
+		height: 297,
+		orientation: 'portrait',
+		fixedScale: 0,
+	});
 
 	const geojsonRef = useRef();
 
 	const template = useMemo(() => {
 		if (typeof templates[format][quality] !== 'undefined') {
-			return orientation === 'portrait'
+			return options.orientation === 'portrait'
 				? templates[format][quality]
 				: {
 						width: templates[format][quality].height,
@@ -33,15 +31,15 @@ const PdfContextProvider = ({ children }: { children: React.ReactNode }) => {
 				  };
 		}
 		return defaultTemplate;
-	}, [format, quality, orientation]);
+	}, [format, quality, options.orientation]);
 
 	const value = {
+		options,
+		setOptions,
 		format,
 		setFormat,
 		quality,
 		setQuality,
-		orientation,
-		setOrientation,
 		geojsonRef,
 		template,
 	};

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

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo, useCallback } from 'react';
 import PdfContext from './PdfContext';
+import PdfPreview from './PdfPreview';
 import {
 	FormControl,
 	MenuItem,
@@ -19,7 +20,46 @@ import { createPdfResolverParams } from '../../../hooks/useExportMap/lib';
 import * as turf from '@turf/turf';
 
 import templates from './pdf.templates';
+import { PdfPreviewOptions } from './pdfContext';
 
+const scaleOptions = [
+	{
+		value: 0,
+		label: 'free scale',
+	},
+	{
+		value: 250,
+		label: '1/250',
+	},
+	{
+		value: 500,
+		label: '1/500',
+	},
+	{
+		value: 750,
+		label: '1/750',
+	},
+	{
+		value: 1000,
+		label: '1/1000',
+	},
+	{
+		value: 1500,
+		label: '1/1500',
+	},
+	{
+		value: 2000,
+		label: '1/2000',
+	},
+	{
+		value: 10000,
+		label: '1/10000',
+	},
+	{
+		value: 100000,
+		label: '1/100000',
+	},
+];
 const qualityOptions = [
 	{
 		value: '72dpi',
@@ -57,7 +97,7 @@ export default function PdfForm(props: PdfFormProps) {
 			mapExporter.createExport &&
 			pdfContext.template &&
 			pdfContext.format &&
-			pdfContext.orientation &&
+			pdfContext.options?.orientation &&
 			pdfContext.geojsonRef?.current?.bbox &&
 			pdfContext.geojsonRef?.current
 		) {
@@ -69,9 +109,9 @@ export default function PdfForm(props: PdfFormProps) {
 					height: pdfContext.template.height,
 					bbox: bbox,
 					bboxUnrotated: pdfContext.geojsonRef.current.bbox,
-					bearing: pdfContext.geojsonRef.current?.properties?.bearing || 0,
+					bearing: (pdfContext.geojsonRef.current?.properties?.bearing as number) || 0,
 					format: pdfContext.format.toLowerCase(),
-					orientation: pdfContext.orientation,
+					orientation: pdfContext.options.orientation,
 				})
 				.then((res) => res.createPdf())
 				.then((res) => {
@@ -124,9 +164,14 @@ export default function PdfForm(props: PdfFormProps) {
 					row
 					aria-labelledby="orientation-radio-buttons-group-label"
 					name="orientation-radio-buttons-group"
-					value={pdfContext.orientation}
+					value={pdfContext.options?.orientation}
 					onChange={(event) => {
-						pdfContext.setOrientation?.(event.target.value);
+						if (!pdfContext.setOptions) return;
+
+						pdfContext.setOptions((val: PdfPreviewOptions) => ({
+							...val,
+							orientation: event.target.value as 'landscape' | 'portrait',
+						}));
 					}}
 				>
 					<FormControlLabel value="portrait" control={<Radio />} label="Portrait" />
@@ -151,11 +196,39 @@ export default function PdfForm(props: PdfFormProps) {
 					))}
 				</Select>
 			</FormControl>
+			<FormControl fullWidth sx={formControlStyles}>
+				<InputLabel id="quality-select-label">Scale</InputLabel>
+				<Select
+					labelId="quality-select-label"
+					id="quality-select"
+					label="Qualität"
+					value={pdfContext?.options?.fixedScale}
+					onChange={(event) => {
+						pdfContext.setOptions?.((val) => ({
+							...val,
+							fixedScale: event.target.value as number,
+						}));
+					}}
+				>
+					{scaleOptions.map((el, idx) => (
+						<MenuItem key={idx} value={el.value}>
+							{el.label}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
 			<FormControl fullWidth sx={formControlStyles}>
 				<Button variant="contained" onClick={createPdfHandler}>
 					PDF erstellen
 				</Button>
 			</FormControl>
+			{pdfContext.options && pdfContext.setOptions && (
+				<PdfPreview
+					options={pdfContext.options}
+					setOptions={pdfContext.setOptions}
+					geojsonRef={pdfContext.geojsonRef}
+				/>
+			)}
 		</>
 	);
 }