@mapcomponents/react-maplibre 0.1.69 → 0.1.70

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

@@ -1,165 +0,0 @@
-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 './lib/preview.css';
-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);
-
-	// <MlWmsLayer url='https://geo.stat.fi/geoserver/vaestoruutu/wms' urlParameters={{layers:'vaki2005_1km_kp'}}/>
-	return (
-		<>
-			<TopToolbar>
-				<Button variant="contained" className='pdfFormButton' onClick={() => setShowCreatePdfForm(!showCreatePdfForm)}>
-					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 = {};
-
-
-//const SidebarTemplate = function() {
-//
-//	return <>
-//	</>;
-//}
-//export const SidebarExample = SidebarTemplate.bind({});
-//SidebarExample.parameters = {};
-//SidebarExample.args = {};

package/src/components/MlCreatePdfForm/MlCreatePdfForm.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PdfForm from './lib/PdfForm';
-import { PdfContextProvider } from './lib/PdfContext';
-import { createPdfResolverParams } from '../../hooks/useExportMap/lib';
-import { SxProps } from '@mui/material';
-
-interface MlCreatePdfFormProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	formControlStyles?: SxProps;
-	onCreatePdf?: (options:createPdfResolverParams) => createPdfResolverParams;
-	excludeLayerIds?: Array<string>;
-	includeLayerIds?: Array<string>;
-}
-
-export type { MlCreatePdfFormProps };
-
-/**
- * Create PDF Form Component
- *
- */
-const MlCreatePdfForm = (props: MlCreatePdfFormProps) => {
-	return (
-		<>
-			<PdfContextProvider>
-				<PdfForm {...props} />
-			</PdfContextProvider>
-		</>
-	);
-};
-
-MlCreatePdfForm.defaultProps = {
-	mapId: undefined,
-};
-export default MlCreatePdfForm;

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

@@ -1,51 +0,0 @@
-import React, { useState, useRef, useMemo } from 'react';
-import templates from './pdf.templates';
-import { PdfContextInterface, PdfPreviewOptions } from './pdfContext';
-
-
-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 [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 options.orientation === 'portrait'
-				? templates[format][quality]
-				: {
-						width: templates[format][quality].height,
-						height: templates[format][quality].width,
-				  };
-		}
-		return defaultTemplate;
-	}, [format, quality, options.orientation]);
-
-	const value = {
-		options,
-		setOptions,
-		format,
-		setFormat,
-		quality,
-		setQuality,
-		geojsonRef,
-		template,
-	};
-
-	return <PdfContext.Provider value={value}>{children}</PdfContext.Provider>;
-};
-
-export { PdfContextProvider };
-export default PdfContext;

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

@@ -1,257 +0,0 @@
-import React, { useContext, useMemo, useCallback, useState } from 'react';
-import PdfContext from './PdfContext';
-import PdfPreview from './PdfPreview';
-import {
-	FormControl,
-	MenuItem,
-	Select,
-	InputLabel,
-	Button,
-	FormLabel,
-	FormControlLabel,
-	Radio,
-	RadioGroup,
-	CircularProgress,
-} from '@mui/material';
-
-import useMap from '../../../hooks/useMap';
-import useExportMap from '../../../hooks/useExportMap';
-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',
-		label: 'Draft (72dpi)',
-	},
-	{
-		value: '150dpi',
-		label: 'Medium (150dpi)',
-	},
-	{
-		value: '300dpi',
-		label: 'High (300dpi)',
-	},
-];
-
-interface PdfFormProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	onCreatePdf?: (options: createPdfResolverParams) => createPdfResolverParams;
-}
-
-export default function PdfForm(props: PdfFormProps) {
-	const [loading, setLoading] = useState(false);
-	const pdfContext = useContext(PdfContext);
-	const mapHook = useMap({
-		// eslint-disable-next-line react/prop-types
-		mapId: props.mapId,
-	});
-	const mapExporter = useExportMap({ mapId: props.mapId });
-
-	const createPdfHandler = useCallback(() => {
-		if (
-			mapHook.map &&
-			mapExporter.createExport &&
-			pdfContext.template &&
-			pdfContext.format &&
-			pdfContext.options?.orientation &&
-			pdfContext.geojsonRef?.current?.bbox &&
-			pdfContext.geojsonRef?.current
-		) {
-			setLoading(true);
-			const bbox = turf.bbox(pdfContext.geojsonRef.current);
-
-			mapExporter
-				.createExport({
-					width: pdfContext.template.width,
-					height: pdfContext.template.height,
-					bbox: bbox,
-					bboxUnrotated: pdfContext.geojsonRef.current.bbox,
-					bearing: (pdfContext.geojsonRef.current?.properties?.bearing as number) || 0,
-					format: pdfContext.format.toLowerCase(),
-					orientation: pdfContext.options.orientation,
-				})
-				.then((res) => res.createPdf())
-				.then((res) => {
-					if (typeof props.onCreatePdf === 'function') {
-						props.onCreatePdf(res);
-					}
-					setLoading(false);
-					return res.downloadPdf();
-				})
-				.catch((error) => {
-					console.log(error);
-					setLoading(false);
-				});
-		}
-	}, [mapHook.map, pdfContext]);
-
-	const formControlStyles = useMemo(
-		() => {
-			return {
-				margin: '5px 0 15px 0 ',
-				//...props.formControlStyles,
-			};
-		},
-		[
-			/*props.formControlStyles*/
-		]
-	);
-
-	return (
-		<>
-			<FormControl fullWidth sx={formControlStyles}>
-				<InputLabel id="format-select-label">Format</InputLabel>
-				<Select
-					labelId="format-select-label"
-					id="format-select"
-					label="Format"
-					value={pdfContext.format}
-					onChange={(event) => {
-						pdfContext.setFormat?.(event.target.value);
-					}}
-				>
-					{Object.keys(templates).map((el) => (
-						<MenuItem key={el} value={el}>
-							{el}
-						</MenuItem>
-					))}
-				</Select>
-			</FormControl>
-			<FormControl fullWidth sx={formControlStyles}>
-				<FormLabel id="orientation-radio-buttons-group-label">Orientation</FormLabel>
-				<RadioGroup
-					row
-					aria-labelledby="orientation-radio-buttons-group-label"
-					name="orientation-radio-buttons-group"
-					value={pdfContext.options?.orientation}
-					onChange={(event) => {
-						if (!pdfContext.setOptions) return;
-
-						pdfContext.setOptions((val: PdfPreviewOptions) => ({
-							...val,
-							orientation: event.target.value as 'landscape' | 'portrait',
-						}));
-					}}
-				>
-					<FormControlLabel value="portrait" control={<Radio />} label="Portrait" />
-					<FormControlLabel value="landscape" control={<Radio />} label="Landscape" />
-				</RadioGroup>
-			</FormControl>
-			<FormControl fullWidth sx={formControlStyles}>
-				<InputLabel id="quality-select-label">Quality</InputLabel>
-				<Select
-					labelId="quality-select-label"
-					id="quality-select"
-					label="Quality"
-					value={pdfContext.quality}
-					onChange={(event) => {
-						pdfContext.setQuality?.(event.target.value);
-					}}
-				>
-					{qualityOptions.map((el) => (
-						<MenuItem key={el.value} value={el.value}>
-							{el.label}
-						</MenuItem>
-					))}
-				</Select>
-			</FormControl>
-			<FormControl fullWidth sx={formControlStyles}>
-				<InputLabel id="scale-select-label">Scale</InputLabel>
-				<Select
-					labelId="scale-select-label"
-					id="scale-select"
-					label="Scale"
-					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"
-					className="createPdfButton"
-					onClick={createPdfHandler}
-					disabled={loading}
-				>
-					create PDF
-				</Button>
-				{loading && (
-          <CircularProgress
-            size={24}
-            sx={{
-              color: 'primary.main',
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              marginTop: '-12px',
-              marginLeft: '-12px',
-            }}
-          />
-        )}
-			</FormControl>
-			{pdfContext.options && pdfContext.setOptions && (
-				<PdfPreview
-					options={pdfContext.options}
-					setOptions={pdfContext.setOptions}
-					geojsonRef={pdfContext.geojsonRef}
-				/>
-			)}
-		</>
-	);
-}