@open-pioneer/printing 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @open-pioneer/printing
 
+## 0.2.0
+
+### Minor Changes
+
+-   3e7d978: Wrap the content of the printing widget into a `<form>`.
+    This change also fixes invalid DOM ids that were accidentally reused for the two form items.
+
+### Patch Changes
+
+-   b152428: Update trails dependencies
+-   Updated dependencies [b152428]
+-   Updated dependencies [291ccb6]
+    -   @open-pioneer/map@0.6.1
+
 ## 0.1.3
 
 ### Patch Changes

package/Printing.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box, FormControl, HStack, FormLabel, Input, Select, Button } from '@open-pioneer/chakra-integration';
 import { createLogger } from '@open-pioneer/core';
 import { useMapModel } from '@open-pioneer/map';
@@ -15,16 +15,9 @@ const Printing = (props) => {
   const [selectedFileFormat, setSelectedFileFormat] = useState("pdf");
   const [title, setTitle] = useState("");
   const [running, setRunning] = useState(false);
-  const printingService = useService("printing.PrintingService");
   const notifier = useService("notifier.NotificationService");
   const { map } = useMapModel(mapId);
-  const controller = useController(map, intl, printingService, viewPadding);
-  useEffect(() => {
-    controller?.setFileFormat(selectedFileFormat);
-  }, [controller, selectedFileFormat]);
-  useEffect(() => {
-    controller?.setTitle(title);
-  }, [controller, title]);
+  const controller = useController(map, intl, viewPadding);
   function changeFileFormat(fileFormat) {
     if (fileFormat === "png" || fileFormat === "pdf") {
       setSelectedFileFormat(fileFormat);
@@ -35,7 +28,10 @@ const Printing = (props) => {
       return;
     }
     setRunning(true);
-    controller.handleMapExport().catch((error) => {
+    controller.handleMapExport({
+      title,
+      fileFormat: selectedFileFormat
+    }).catch((error) => {
       const errorMessage = intl.formatMessage({ id: "printingFailed" });
       notifier.notify({
         level: "error",
@@ -46,54 +42,66 @@ const Printing = (props) => {
       setRunning(false);
     });
   }
-  return /* @__PURE__ */ jsxs(Box, { ...containerProps, children: [
-    /* @__PURE__ */ jsxs(FormControl, { mb: 4, alignItems: "center", children: [
-      /* @__PURE__ */ jsxs(HStack, { mb: 2, children: [
-        /* @__PURE__ */ jsx(FormLabel, { minWidth: "82", mb: 1, children: intl.formatMessage({ id: "title" }) }),
+  return /* @__PURE__ */ jsx(Box, { ...containerProps, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "form",
+      m: 2,
+      alignItems: "center",
+      onSubmit: (e) => {
+        e.preventDefault();
+        exportMap();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(FormControl, { as: HStack, mb: 2, children: [
+          /* @__PURE__ */ jsx(FormLabel, { minWidth: "82", mb: 1, children: intl.formatMessage({ id: "title" }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: intl.formatMessage({ id: "input.placeholder" }),
+              value: title,
+              onChange: (event) => {
+                setTitle(event.target.value);
+              },
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { as: HStack, mb: 2, children: [
+          /* @__PURE__ */ jsx(FormLabel, { minWidth: "82", mb: 1, children: intl.formatMessage({ id: "fileFormat" }) }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: selectedFileFormat,
+              onChange: (e) => changeFileFormat(e.target.value),
+              className: "printing-select",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "png", children: "PNG" }),
+                /* @__PURE__ */ jsx("option", { value: "pdf", children: "PDF" })
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          Input,
-          {
-            placeholder: intl.formatMessage({ id: "input.placeholder" }),
-            value: title,
-            onChange: (event) => {
-              setTitle(event.target.value);
-            },
-            autoFocus: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(HStack, { mb: 2, children: [
-        /* @__PURE__ */ jsx(FormLabel, { minWidth: "82", mb: 1, children: intl.formatMessage({ id: "fileFormat" }) }),
-        /* @__PURE__ */ jsxs(
-          Select,
+          Button,
           {
-            value: selectedFileFormat,
-            onChange: (e) => changeFileFormat(e.target.value),
-            className: "printing-select",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "png", children: "PNG" }),
-              /* @__PURE__ */ jsx("option", { value: "pdf", children: "PDF" })
-            ]
+            isLoading: running,
+            loadingText: intl.formatMessage({ id: "printingMap" }),
+            disabled: running,
+            mt: 2,
+            p: 2,
+            className: "printing-export-button",
+            type: "submit",
+            width: "100%",
+            children: intl.formatMessage({ id: "export" })
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        isLoading: running,
-        loadingText: intl.formatMessage({ id: "printingMap" }),
-        disabled: running,
-        padding: 2,
-        className: "printing-export-button",
-        onClick: exportMap,
-        width: "100%",
-        children: intl.formatMessage({ id: "export" })
-      }
-    )
-  ] });
+      ]
+    }
+  ) });
 };
-function useController(map, intl, printingService, viewPadding) {
+function useController(map, intl, viewPadding) {
+  const printingService = useService("printing.PrintingService");
   const [controller, setController] = useState(void 0);
   useEffect(() => {
     if (!map) {

package/Printing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Printing.js","sources":["Printing.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Button,\n    FormControl,\n    FormLabel,\n    HStack,\n    Input,\n    Select\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { NotificationService } from \"@open-pioneer/notifier\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, useEffect, useState } from \"react\";\nimport { FileFormatType, PrintingController } from \"./PrintingController\";\nimport type { ViewPaddingBehavior, PrintingService } from \"./index\";\n\nconst LOG = createLogger(\"printing\");\n\n/**\n * This is special property for the Printing.\n */\nexport interface PrintingProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * Whether to respect the map view's padding when printing (default: `\"auto\"`).\n     *\n     * See also {@link ViewPaddingBehavior}.\n     */\n    viewPadding?: ViewPaddingBehavior;\n}\n\n/**\n * The `Printing` component can be used to download the current map view as a printable file.\n */\nexport const Printing: FC<PrintingProps> = (props) => {\n    const intl = useIntl();\n\n    const { mapId, viewPadding = \"auto\" } = props;\n    const { containerProps } = useCommonComponentProps(\"printing\", props);\n    const [selectedFileFormat, setSelectedFileFormat] = useState<FileFormatType>(\"pdf\");\n    const [title, setTitle] = useState<string>(\"\");\n    const [running, setRunning] = useState<boolean>(false);\n\n    const printingService = useService<PrintingService>(\"printing.PrintingService\");\n    const notifier = useService<NotificationService>(\"notifier.NotificationService\");\n\n    const { map } = useMapModel(mapId);\n    const controller = useController(map, intl, printingService, viewPadding);\n\n    useEffect(() => {\n        controller?.setFileFormat(selectedFileFormat);\n    }, [controller, selectedFileFormat]);\n\n    useEffect(() => {\n        controller?.setTitle(title);\n    }, [controller, title]);\n\n    function changeFileFormat(fileFormat: string) {\n        if (fileFormat === \"png\" || fileFormat === \"pdf\") {\n            setSelectedFileFormat(fileFormat);\n        }\n    }\n\n    function exportMap() {\n        if (running || !controller) {\n            return;\n        }\n\n        setRunning(true);\n        controller\n            .handleMapExport()\n            .catch((error) => {\n                const errorMessage = intl.formatMessage({ id: \"printingFailed\" });\n                notifier.notify({\n                    level: \"error\",\n                    message: errorMessage\n                });\n                LOG.error(\"Failed to print the map\", error);\n            })\n            .finally(() => {\n                setRunning(false);\n            });\n    }\n\n    return (\n        <Box {...containerProps}>\n            <FormControl mb={4} alignItems=\"center\">\n                <HStack mb={2}>\n                    <FormLabel minWidth=\"82\" mb={1}>\n                        {intl.formatMessage({ id: \"title\" })}\n                    </FormLabel>\n                    <Input\n                        placeholder={intl.formatMessage({ id: \"input.placeholder\" })}\n                        value={title}\n                        onChange={(event) => {\n                            setTitle(event.target.value);\n                        }}\n                        autoFocus // eslint-disable-line jsx-a11y/no-autofocus\n                    />\n                </HStack>\n                <HStack mb={2}>\n                    <FormLabel minWidth=\"82\" mb={1}>\n                        {intl.formatMessage({ id: \"fileFormat\" })}\n                    </FormLabel>\n                    <Select\n                        value={selectedFileFormat}\n                        onChange={(e) => changeFileFormat(e.target.value)}\n                        className=\"printing-select\"\n                    >\n                        <option value={\"png\"}>PNG</option>\n                        <option value={\"pdf\"}>PDF</option>\n                    </Select>\n                </HStack>\n            </FormControl>\n            <Button\n                isLoading={running}\n                loadingText={intl.formatMessage({ id: \"printingMap\" })}\n                disabled={running}\n                padding={2}\n                className=\"printing-export-button\"\n                onClick={exportMap}\n                width=\"100%\"\n            >\n                {intl.formatMessage({ id: \"export\" })}\n            </Button>\n        </Box>\n    );\n};\n\n/**\n * Create a PrintingController instance to export the map view.\n */\nfunction useController(\n    map: MapModel | undefined,\n    intl: PackageIntl,\n    printingService: PrintingService,\n    viewPadding: ViewPaddingBehavior\n) {\n    const [controller, setController] = useState<PrintingController | undefined>(undefined);\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const controller = new PrintingController(map.olMap, printingService, {\n            overlayText: intl.formatMessage({ id: \"printingMap\" })\n        });\n        setController(controller);\n\n        return () => {\n            controller.destroy();\n            setController(undefined);\n        };\n    }, [map, intl, printingService]);\n\n    useEffect(() => {\n        controller?.setViewPadding(viewPadding);\n    }, [controller, viewPadding]);\n\n    return controller;\n}\n"],"names":["controller"],"mappings":"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"}
+{"version":3,"file":"Printing.js","sources":["Printing.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Button,\n    FormControl,\n    FormLabel,\n    HStack,\n    Input,\n    Select\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { MapModel, useMapModel } from \"@open-pioneer/map\";\nimport { NotificationService } from \"@open-pioneer/notifier\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, FormEvent, useEffect, useState } from \"react\";\nimport { FileFormatType, PrintingController } from \"./PrintingController\";\nimport type { ViewPaddingBehavior, PrintingService } from \"./index\";\n\nconst LOG = createLogger(\"printing\");\n\n/**\n * This is special property for the Printing.\n */\nexport interface PrintingProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * Whether to respect the map view's padding when printing (default: `\"auto\"`).\n     *\n     * See also {@link ViewPaddingBehavior}.\n     */\n    viewPadding?: ViewPaddingBehavior;\n}\n\n/**\n * The `Printing` component can be used to download the current map view as a printable file.\n */\nexport const Printing: FC<PrintingProps> = (props) => {\n    const intl = useIntl();\n\n    const { mapId, viewPadding = \"auto\" } = props;\n    const { containerProps } = useCommonComponentProps(\"printing\", props);\n    const [selectedFileFormat, setSelectedFileFormat] = useState<FileFormatType>(\"pdf\");\n    const [title, setTitle] = useState<string>(\"\");\n    const [running, setRunning] = useState<boolean>(false);\n\n    const notifier = useService<NotificationService>(\"notifier.NotificationService\");\n\n    const { map } = useMapModel(mapId);\n    const controller = useController(map, intl, viewPadding);\n\n    function changeFileFormat(fileFormat: string) {\n        if (fileFormat === \"png\" || fileFormat === \"pdf\") {\n            setSelectedFileFormat(fileFormat);\n        }\n    }\n\n    function exportMap() {\n        if (running || !controller) {\n            return;\n        }\n\n        setRunning(true);\n        controller\n            .handleMapExport({\n                title,\n                fileFormat: selectedFileFormat\n            })\n            .catch((error) => {\n                const errorMessage = intl.formatMessage({ id: \"printingFailed\" });\n                notifier.notify({\n                    level: \"error\",\n                    message: errorMessage\n                });\n                LOG.error(\"Failed to print the map\", error);\n            })\n            .finally(() => {\n                setRunning(false);\n            });\n    }\n\n    return (\n        <Box {...containerProps}>\n            <Box\n                as=\"form\"\n                m={2}\n                alignItems=\"center\"\n                onSubmit={(e: FormEvent) => {\n                    e.preventDefault();\n                    exportMap();\n                }}\n            >\n                <FormControl as={HStack} mb={2}>\n                    <FormLabel minWidth=\"82\" mb={1}>\n                        {intl.formatMessage({ id: \"title\" })}\n                    </FormLabel>\n                    <Input\n                        placeholder={intl.formatMessage({ id: \"input.placeholder\" })}\n                        value={title}\n                        onChange={(event) => {\n                            setTitle(event.target.value);\n                        }}\n                        autoFocus // eslint-disable-line jsx-a11y/no-autofocus\n                    />\n                </FormControl>\n                <FormControl as={HStack} mb={2}>\n                    <FormLabel minWidth=\"82\" mb={1}>\n                        {intl.formatMessage({ id: \"fileFormat\" })}\n                    </FormLabel>\n                    <Select\n                        value={selectedFileFormat}\n                        onChange={(e) => changeFileFormat(e.target.value)}\n                        className=\"printing-select\"\n                    >\n                        <option value={\"png\"}>PNG</option>\n                        <option value={\"pdf\"}>PDF</option>\n                    </Select>\n                </FormControl>\n                <Button\n                    isLoading={running}\n                    loadingText={intl.formatMessage({ id: \"printingMap\" })}\n                    disabled={running}\n                    mt={2}\n                    p={2}\n                    className=\"printing-export-button\"\n                    type=\"submit\"\n                    width=\"100%\"\n                >\n                    {intl.formatMessage({ id: \"export\" })}\n                </Button>\n            </Box>\n        </Box>\n    );\n};\n\n/**\n * Create a PrintingController instance to export the map view.\n */\nfunction useController(\n    map: MapModel | undefined,\n    intl: PackageIntl,\n    viewPadding: ViewPaddingBehavior\n) {\n    const printingService = useService<PrintingService>(\"printing.PrintingService\");\n    const [controller, setController] = useState<PrintingController | undefined>(undefined);\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const controller = new PrintingController(map.olMap, printingService, {\n            overlayText: intl.formatMessage({ id: \"printingMap\" })\n        });\n        setController(controller);\n\n        return () => {\n            controller.destroy();\n            setController(undefined);\n        };\n    }, [map, intl, printingService]);\n\n    useEffect(() => {\n        controller?.setViewPadding(viewPadding);\n    }, [controller, viewPadding]);\n\n    return controller;\n}\n"],"names":["controller"],"mappings":"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"}

package/PrintingController.d.ts

@@ -1,10 +1,12 @@
 import OlMap from "ol/Map";
 import { PrintingService, ViewPaddingBehavior } from "./index";
 export type FileFormatType = "png" | "pdf";
+export interface ExportOptions {
+    title?: string | undefined;
+    fileFormat: FileFormatType;
+}
 export declare class PrintingController {
     private olMap;
-    private title;
-    private fileFormat;
     private i18n;
     private printingService;
     private viewPadding;
@@ -12,10 +14,8 @@ export declare class PrintingController {
     private overlay;
     constructor(olMap: OlMap, printingService: PrintingService, i18n: I18n);
     destroy(): void;
-    setTitle(title: string): void;
-    setFileFormat(format: FileFormatType): void;
     setViewPadding(padding: ViewPaddingBehavior): void;
-    handleMapExport(): Promise<void>;
+    handleMapExport(options: ExportOptions): Promise<void>;
     private begin;
     private reset;
     private getTitleAndFileName;

package/PrintingController.js

@@ -3,8 +3,6 @@ import { createBlockUserOverlay, canvasToPng } from './utils.js';
 const DEFAULT_FILE_NAME = "map";
 class PrintingController {
   olMap;
-  title = "";
-  fileFormat = "pdf";
   i18n;
   printingService;
   viewPadding;
@@ -18,17 +16,11 @@ class PrintingController {
   destroy() {
     this.reset();
   }
-  setTitle(title) {
-    this.title = title;
-  }
-  setFileFormat(format) {
-    this.fileFormat = format;
-  }
   setViewPadding(padding) {
     this.viewPadding = padding;
   }
-  async handleMapExport() {
-    if (!this.olMap || !this.fileFormat) {
+  async handleMapExport(options) {
+    if (!this.olMap) {
       return;
     }
     try {
@@ -39,7 +31,7 @@ class PrintingController {
       });
       const canvas = this.printMap.getCanvas();
       if (canvas) {
-        this.fileFormat == "png" ? await this.exportMapInPNG(canvas) : await this.exportMapInPDF(canvas);
+        options.fileFormat == "png" ? await this.exportMapInPNG(canvas, options) : await this.exportMapInPDF(canvas, options);
       } else {
         throw new Error("Canvas export failed");
       }
@@ -57,12 +49,12 @@ class PrintingController {
     this.overlay?.destroy();
     this.overlay = void 0;
   }
-  getTitleAndFileName() {
-    const titleValue = this.title || "";
-    const fileName = this.title || DEFAULT_FILE_NAME;
+  getTitleAndFileName(options) {
+    const titleValue = options.title || "";
+    const fileName = options.title || DEFAULT_FILE_NAME;
     return { title: titleValue, fileName };
   }
-  async exportMapInPNG(mapCanvas) {
+  async exportMapInPNG(mapCanvas, options) {
     const containerCanvas = document.createElement("canvas");
     containerCanvas.width = mapCanvas.width;
     containerCanvas.height = mapCanvas.height + 50;
@@ -71,7 +63,7 @@ class PrintingController {
     if (!context) {
       throw new Error("2d canvas rendering context not available");
     }
-    const { title, fileName } = this.getTitleAndFileName();
+    const { title, fileName } = this.getTitleAndFileName(options);
     context.fillStyle = "#fff";
     context.fillRect(0, 0, containerCanvas.width, containerCanvas.height);
     context.font = "20px bold sans-serif";
@@ -89,7 +81,7 @@ class PrintingController {
     link.href = dataURL;
     link.click();
   }
-  async exportMapInPDF(canvas) {
+  async exportMapInPDF(canvas, options) {
     const { jsPDF } = await import('jspdf');
     const pdf = new jsPDF({
       orientation: "landscape",
@@ -102,7 +94,7 @@ class PrintingController {
     const mapOffset = 20;
     const mapPageHeight = pageHeight - mapOffset;
     pdf.setFontSize(20);
-    const { title, fileName } = this.getTitleAndFileName();
+    const { title, fileName } = this.getTitleAndFileName(options);
     pdf.text(title, pageWidth / 2, titleOffset, { align: "center" });
     const imageAspectRatio = canvas.width / canvas.height;
     let targetImageHeight = mapPageHeight;

package/PrintingController.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrintingController.js","sources":["PrintingController.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport OlMap from \"ol/Map\";\nimport { PrintingService, PrintResult, ViewPaddingBehavior } from \"./index\";\nimport { canvasToPng, createBlockUserOverlay } from \"./utils\";\nimport { Resource } from \"@open-pioneer/core\";\n\nexport type FileFormatType = \"png\" | \"pdf\";\n\nconst DEFAULT_FILE_NAME = \"map\";\n\nexport class PrintingController {\n    private olMap: OlMap;\n    private title: string = \"\";\n    private fileFormat: FileFormatType = \"pdf\";\n    private i18n: I18n;\n\n    private printingService: PrintingService;\n    private viewPadding: ViewPaddingBehavior | undefined;\n\n    private printMap: PrintResult | undefined = undefined;\n    private overlay: Resource | undefined = undefined;\n\n    constructor(olMap: OlMap, printingService: PrintingService, i18n: I18n) {\n        this.olMap = olMap;\n        this.printingService = printingService;\n        this.i18n = i18n;\n    }\n\n    destroy() {\n        this.reset();\n    }\n\n    setTitle(title: string) {\n        this.title = title;\n    }\n\n    setFileFormat(format: FileFormatType) {\n        this.fileFormat = format;\n    }\n\n    setViewPadding(padding: ViewPaddingBehavior) {\n        this.viewPadding = padding;\n    }\n\n    async handleMapExport() {\n        if (!this.olMap || !this.fileFormat) {\n            return;\n        }\n\n        try {\n            this.begin();\n            this.printMap = await this.printingService.printMap(this.olMap, {\n                blockUserInteraction: false,\n                viewPadding: this.viewPadding\n            });\n            const canvas = this.printMap.getCanvas();\n            if (canvas) {\n                this.fileFormat == \"png\"\n                    ? await this.exportMapInPNG(canvas)\n                    : await this.exportMapInPDF(canvas);\n            } else {\n                throw new Error(\"Canvas export failed\");\n            }\n        } finally {\n            this.reset();\n        }\n    }\n\n    private begin() {\n        const container = this.olMap.getTargetElement();\n        if (container) {\n            this.overlay = createBlockUserOverlay(container, this.i18n.overlayText);\n        }\n    }\n\n    private reset() {\n        this.overlay?.destroy();\n        this.overlay = undefined;\n    }\n\n    private getTitleAndFileName() {\n        const titleValue = this.title || \"\";\n        const fileName = this.title || DEFAULT_FILE_NAME;\n        return { title: titleValue, fileName: fileName };\n    }\n\n    private async exportMapInPNG(mapCanvas: HTMLCanvasElement) {\n        const containerCanvas = document.createElement(\"canvas\");\n        containerCanvas.width = mapCanvas.width;\n        containerCanvas.height = mapCanvas.height + 50;\n        containerCanvas.style.backgroundColor = \"#fff\";\n\n        const context = containerCanvas.getContext(\"2d\");\n        if (!context) {\n            throw new Error(\"2d canvas rendering context not available\");\n        }\n\n        const { title, fileName } = this.getTitleAndFileName();\n\n        context.fillStyle = \"#fff\"; // background color for background rect\n        context.fillRect(0, 0, containerCanvas.width, containerCanvas.height); //draw background rect\n        context.font = 20 + \"px bold sans-serif\";\n        context.textAlign = \"center\";\n        context.fillStyle = \"#000\"; // text color\n\n        const x = containerCanvas.width / 2; //align text to center\n        context.fillText(title, x, 20);\n        context.drawImage(mapCanvas, 0, 50);\n\n        const link = document.createElement(\"a\");\n        link.setAttribute(\"download\", fileName + \".png\");\n\n        const dataURL = canvasToPng(containerCanvas);\n        if (!dataURL) {\n            throw new Error(\"Failed to get image data URL\");\n        }\n\n        link.href = dataURL;\n        link.click();\n    }\n\n    private async exportMapInPDF(canvas: HTMLCanvasElement) {\n        // Landscape map export.\n        // Lazy load pdfjs as well.\n        const { jsPDF } = await import(\"jspdf\");\n        const pdf = new jsPDF({\n            orientation: \"landscape\",\n            unit: \"mm\",\n            format: \"a4\"\n        });\n\n        // Simple layout: 50 pixels for the header and\n        // the remaining space can be used by the map export.\n        const pageWidth = pdf.internal.pageSize.getWidth();\n        const pageHeight = pdf.internal.pageSize.getHeight();\n        const titleOffset = 15;\n        const mapOffset = 20;\n        const mapPageHeight = pageHeight - mapOffset;\n\n        // Render title\n        pdf.setFontSize(20);\n        const { title, fileName } = this.getTitleAndFileName();\n        pdf.text(title, pageWidth / 2, titleOffset, { align: \"center\" });\n\n        // Resize image while keeping aspect ratio\n        const imageAspectRatio = canvas.width / canvas.height;\n        let targetImageHeight = mapPageHeight;\n        let targetImageWidth = targetImageHeight * imageAspectRatio;\n        if (targetImageWidth >= pageWidth) {\n            targetImageWidth = pageWidth;\n            targetImageHeight = targetImageWidth / imageAspectRatio;\n        }\n\n        // Center image\n        const imageX = (pageWidth - targetImageWidth) / 2;\n        const imageY = mapOffset + (mapPageHeight - targetImageHeight) / 2;\n\n        pdf.addImage(canvas, \"\", imageX, imageY, targetImageWidth, targetImageHeight);\n        pdf.save(fileName + \".pdf\");\n    }\n}\n\ninterface I18n {\n    overlayText: string;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PrintingController.js","sources":["PrintingController.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport OlMap from \"ol/Map\";\nimport { PrintingService, PrintResult, ViewPaddingBehavior } from \"./index\";\nimport { canvasToPng, createBlockUserOverlay } from \"./utils\";\nimport { Resource } from \"@open-pioneer/core\";\n\nexport type FileFormatType = \"png\" | \"pdf\";\n\nconst DEFAULT_FILE_NAME = \"map\";\n\nexport interface ExportOptions {\n    title?: string | undefined;\n    fileFormat: FileFormatType;\n}\n\nexport class PrintingController {\n    private olMap: OlMap;\n    private i18n: I18n;\n\n    private printingService: PrintingService;\n    private viewPadding: ViewPaddingBehavior | undefined;\n\n    private printMap: PrintResult | undefined = undefined;\n    private overlay: Resource | undefined = undefined;\n\n    constructor(olMap: OlMap, printingService: PrintingService, i18n: I18n) {\n        this.olMap = olMap;\n        this.printingService = printingService;\n        this.i18n = i18n;\n    }\n\n    destroy() {\n        this.reset();\n    }\n\n    setViewPadding(padding: ViewPaddingBehavior) {\n        this.viewPadding = padding;\n    }\n\n    async handleMapExport(options: ExportOptions) {\n        if (!this.olMap) {\n            return;\n        }\n\n        try {\n            this.begin();\n            this.printMap = await this.printingService.printMap(this.olMap, {\n                blockUserInteraction: false,\n                viewPadding: this.viewPadding\n            });\n            const canvas = this.printMap.getCanvas();\n            if (canvas) {\n                options.fileFormat == \"png\"\n                    ? await this.exportMapInPNG(canvas, options)\n                    : await this.exportMapInPDF(canvas, options);\n            } else {\n                throw new Error(\"Canvas export failed\");\n            }\n        } finally {\n            this.reset();\n        }\n    }\n\n    private begin() {\n        const container = this.olMap.getTargetElement();\n        if (container) {\n            this.overlay = createBlockUserOverlay(container, this.i18n.overlayText);\n        }\n    }\n\n    private reset() {\n        this.overlay?.destroy();\n        this.overlay = undefined;\n    }\n\n    private getTitleAndFileName(options: ExportOptions) {\n        const titleValue = options.title || \"\";\n        const fileName = options.title || DEFAULT_FILE_NAME;\n        return { title: titleValue, fileName: fileName };\n    }\n\n    private async exportMapInPNG(mapCanvas: HTMLCanvasElement, options: ExportOptions) {\n        const containerCanvas = document.createElement(\"canvas\");\n        containerCanvas.width = mapCanvas.width;\n        containerCanvas.height = mapCanvas.height + 50;\n        containerCanvas.style.backgroundColor = \"#fff\";\n\n        const context = containerCanvas.getContext(\"2d\");\n        if (!context) {\n            throw new Error(\"2d canvas rendering context not available\");\n        }\n\n        const { title, fileName } = this.getTitleAndFileName(options);\n\n        context.fillStyle = \"#fff\"; // background color for background rect\n        context.fillRect(0, 0, containerCanvas.width, containerCanvas.height); //draw background rect\n        context.font = 20 + \"px bold sans-serif\";\n        context.textAlign = \"center\";\n        context.fillStyle = \"#000\"; // text color\n\n        const x = containerCanvas.width / 2; //align text to center\n        context.fillText(title, x, 20);\n        context.drawImage(mapCanvas, 0, 50);\n\n        const link = document.createElement(\"a\");\n        link.setAttribute(\"download\", fileName + \".png\");\n\n        const dataURL = canvasToPng(containerCanvas);\n        if (!dataURL) {\n            throw new Error(\"Failed to get image data URL\");\n        }\n\n        link.href = dataURL;\n        link.click();\n    }\n\n    private async exportMapInPDF(canvas: HTMLCanvasElement, options: ExportOptions) {\n        // Landscape map export.\n        // Lazy load pdfjs as well.\n        const { jsPDF } = await import(\"jspdf\");\n        const pdf = new jsPDF({\n            orientation: \"landscape\",\n            unit: \"mm\",\n            format: \"a4\"\n        });\n\n        // Simple layout: 50 pixels for the header and\n        // the remaining space can be used by the map export.\n        const pageWidth = pdf.internal.pageSize.getWidth();\n        const pageHeight = pdf.internal.pageSize.getHeight();\n        const titleOffset = 15;\n        const mapOffset = 20;\n        const mapPageHeight = pageHeight - mapOffset;\n\n        // Render title\n        pdf.setFontSize(20);\n        const { title, fileName } = this.getTitleAndFileName(options);\n        pdf.text(title, pageWidth / 2, titleOffset, { align: \"center\" });\n\n        // Resize image while keeping aspect ratio\n        const imageAspectRatio = canvas.width / canvas.height;\n        let targetImageHeight = mapPageHeight;\n        let targetImageWidth = targetImageHeight * imageAspectRatio;\n        if (targetImageWidth >= pageWidth) {\n            targetImageWidth = pageWidth;\n            targetImageHeight = targetImageWidth / imageAspectRatio;\n        }\n\n        // Center image\n        const imageX = (pageWidth - targetImageWidth) / 2;\n        const imageY = mapOffset + (mapPageHeight - targetImageHeight) / 2;\n\n        pdf.addImage(canvas, \"\", imageX, imageY, targetImageWidth, targetImageHeight);\n        pdf.save(fileName + \".pdf\");\n    }\n}\n\ninterface I18n {\n    overlayText: string;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/printing",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "This package provides a UI component to export the current map view as a printable file.",
   "keywords": [
     "open-pioneer-trails"
@@ -14,17 +14,17 @@
     "directory": "src/packages/printing"
   },
   "peerDependencies": {
-    "@open-pioneer/chakra-integration": "^1.1.3",
-    "@open-pioneer/runtime": "^2.1.6",
-    "@open-pioneer/react-utils": "^1.0.0",
-    "@open-pioneer/core": "^1.2.3",
-    "@open-pioneer/notifier": "^0.3.5",
-    "ol": "^9.2.4",
-    "react": "^18.3.1",
+    "@open-pioneer/chakra-integration": "^1.1.4",
+    "@open-pioneer/core": "^1.3.0",
+    "@open-pioneer/notifier": "^0.3.6",
+    "@open-pioneer/react-utils": "^1.0.1",
+    "@open-pioneer/runtime": "^2.1.7",
     "classnames": "^2.3.2",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
-    "@open-pioneer/map": "^0.6.0"
+    "ol": "^9.2.4",
+    "react": "^18.3.1",
+    "@open-pioneer/map": "^0.6.1"
   },
   "exports": {
     "./package.json": "./package.json",