@open-pioneer/printing 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# @open-pioneer/printing
+
+## 0.1.0
+
+### Minor Changes
+
+-   9334e81: Update to OpenLayers 9
+-   a0d8882: Initial release
+
+### Patch Changes
+
+-   a2a6c63: Provide an API for exporting the map into a canvas / png.
+-   1a8ad89: Update package.json metadata
+-   6162979: Update versions of core packages
+-   Updated dependencies [1a8ad89]
+-   Updated dependencies [a11bf72]
+-   Updated dependencies [fc6bf82]
+-   Updated dependencies [a0d8882]
+-   Updated dependencies [6162979]
+-   Updated dependencies [9334e81]
+-   Updated dependencies [ac7fdd1]
+-   Updated dependencies [13ea342]
+    -   @open-pioneer/react-utils@0.2.2
+    -   @open-pioneer/map@0.4.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/Printing.d.ts

@@ -0,0 +1,15 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC } from "react";
+/**
+ * This is special property for the Printing.
+ */
+export interface PrintingProps extends CommonComponentProps {
+    /**
+     * The id of the map.
+     */
+    mapId: string;
+}
+/**
+ * The `Printing` component can be used to download the current map view as a printable file.
+ */
+export declare const Printing: FC<PrintingProps>;

package/Printing.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } 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';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useIntl, useService } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useState, useEffect } from 'react';
+import { PrintingController } from './PrintingController.js';
+
+const LOG = createLogger("printing");
+const Printing = (props) => {
+  const intl = useIntl();
+  const { mapId } = props;
+  const { containerProps } = useCommonComponentProps("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);
+  useEffect(() => {
+    controller?.setFileFormat(selectedFileFormat);
+  }, [controller, selectedFileFormat]);
+  useEffect(() => {
+    controller?.setTitle(title);
+  }, [controller, title]);
+  function changeFileFormat(fileFormat) {
+    if (fileFormat === "png" || fileFormat === "pdf") {
+      setSelectedFileFormat(fileFormat);
+    }
+  }
+  function exportMap() {
+    if (running || !controller) {
+      return;
+    }
+    setRunning(true);
+    controller.handleMapExport().catch((error) => {
+      const errorMessage = intl.formatMessage({ id: "printingFailed" });
+      notifier.notify({
+        level: "error",
+        message: errorMessage
+      });
+      LOG.error("Failed to print the map", error);
+    }).finally(() => {
+      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" }) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: intl.formatMessage({ id: "input.placeholder" }),
+            value: title,
+            onChange: (event) => {
+              setTitle(event.target.value);
+            },
+            isRequired: true,
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(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(
+      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) {
+  const [controller, setController] = useState(void 0);
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const controller2 = new PrintingController(map.olMap, printingService, {
+      overlayText: intl.formatMessage({ id: "printingMap" })
+    });
+    setController(controller2);
+    return () => {
+      controller2.destroy();
+      setController(void 0);
+    };
+  }, [map, intl, printingService]);
+  return controller;
+}
+
+export { Printing };
+//# sourceMappingURL=Printing.js.map

package/Printing.js.map

@@ -0,0 +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 { 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/**\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 } = 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\n    const controller = useController(map, intl, printingService);\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                        isRequired\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) {\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    return controller;\n}\n"],"names":["controller"],"mappings":"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"}

package/PrintingController.d.ts

@@ -0,0 +1,26 @@
+import OlMap from "ol/Map";
+import { PrintingService } from "./index";
+export type FileFormatType = "png" | "pdf";
+export declare class PrintingController {
+    private olMap;
+    private title;
+    private fileFormat;
+    private i18n;
+    private printingService;
+    private printMap;
+    private overlay;
+    constructor(olMap: OlMap, printingService: PrintingService, i18n: I18n);
+    destroy(): void;
+    setTitle(title: string): void;
+    setFileFormat(format: FileFormatType): void;
+    handleMapExport(): Promise<void>;
+    private begin;
+    private reset;
+    private getTitleAndFileName;
+    private exportMapInPNG;
+    private exportMapInPDF;
+}
+interface I18n {
+    overlayText: string;
+}
+export {};

package/PrintingController.js

@@ -0,0 +1,117 @@
+import { createBlockUserOverlay, canvasToPng } from './utils.js';
+
+const DEFAULT_FILE_NAME = "map";
+class PrintingController {
+  olMap;
+  title = "";
+  fileFormat = "pdf";
+  i18n;
+  printingService;
+  printMap = void 0;
+  overlay = void 0;
+  constructor(olMap, printingService, i18n) {
+    this.olMap = olMap;
+    this.printingService = printingService;
+    this.i18n = i18n;
+  }
+  destroy() {
+    this.reset();
+  }
+  setTitle(title) {
+    this.title = title;
+  }
+  setFileFormat(format) {
+    this.fileFormat = format;
+  }
+  async handleMapExport() {
+    if (!this.olMap || !this.fileFormat) {
+      return;
+    }
+    try {
+      this.begin();
+      this.printMap = await this.printingService.printMap(this.olMap, {
+        blockUserInteraction: false
+      });
+      const canvas = this.printMap.getCanvas();
+      if (canvas) {
+        this.fileFormat == "png" ? await this.exportMapInPNG(canvas) : await this.exportMapInPDF(canvas);
+      } else {
+        throw new Error("Canvas export failed");
+      }
+    } finally {
+      this.reset();
+    }
+  }
+  begin() {
+    const container = this.olMap.getTargetElement();
+    if (container) {
+      this.overlay = createBlockUserOverlay(container, this.i18n.overlayText);
+    }
+  }
+  reset() {
+    this.overlay?.destroy();
+    this.overlay = void 0;
+  }
+  getTitleAndFileName() {
+    const titleValue = this.title || "";
+    const fileName = this.title || DEFAULT_FILE_NAME;
+    return { title: titleValue, fileName };
+  }
+  async exportMapInPNG(mapCanvas) {
+    const containerCanvas = document.createElement("canvas");
+    containerCanvas.width = mapCanvas.width;
+    containerCanvas.height = mapCanvas.height + 50;
+    containerCanvas.style.backgroundColor = "#fff";
+    const context = containerCanvas.getContext("2d");
+    if (!context) {
+      throw new Error("2d canvas rendering context not available");
+    }
+    const { title, fileName } = this.getTitleAndFileName();
+    context.fillStyle = "#fff";
+    context.fillRect(0, 0, containerCanvas.width, containerCanvas.height);
+    context.font = "20px bold sans-serif";
+    context.textAlign = "center";
+    context.fillStyle = "#000";
+    const x = containerCanvas.width / 2;
+    context.fillText(title, x, 20);
+    context.drawImage(mapCanvas, 0, 50);
+    const link = document.createElement("a");
+    link.setAttribute("download", fileName + ".png");
+    const dataURL = canvasToPng(containerCanvas);
+    if (!dataURL) {
+      throw new Error("Failed to get image data URL");
+    }
+    link.href = dataURL;
+    link.click();
+  }
+  async exportMapInPDF(canvas) {
+    const { jsPDF } = await import('jspdf');
+    const pdf = new jsPDF({
+      orientation: "landscape",
+      unit: "mm",
+      format: "a4"
+    });
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    const titleOffset = 15;
+    const mapOffset = 20;
+    const mapPageHeight = pageHeight - mapOffset;
+    pdf.setFontSize(20);
+    const { title, fileName } = this.getTitleAndFileName();
+    pdf.text(title, pageWidth / 2, titleOffset, { align: "center" });
+    const imageAspectRatio = canvas.width / canvas.height;
+    let targetImageHeight = mapPageHeight;
+    let targetImageWidth = targetImageHeight * imageAspectRatio;
+    if (targetImageWidth >= pageWidth) {
+      targetImageWidth = pageWidth;
+      targetImageHeight = targetImageWidth / imageAspectRatio;
+    }
+    const imageX = (pageWidth - targetImageWidth) / 2;
+    const imageY = mapOffset + (mapPageHeight - targetImageHeight) / 2;
+    pdf.addImage(canvas, "", imageX, imageY, targetImageWidth, targetImageHeight);
+    pdf.save(fileName + ".pdf");
+  }
+}
+
+export { PrintingController };
+//# sourceMappingURL=PrintingController.js.map

package/PrintingController.js.map

@@ -0,0 +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 } 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\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    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            });\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":";;AASA,MAAM,iBAAoB,GAAA,KAAA,CAAA;AAEnB,MAAM,kBAAmB,CAAA;AAAA,EACpB,KAAA,CAAA;AAAA,EACA,KAAgB,GAAA,EAAA,CAAA;AAAA,EAChB,UAA6B,GAAA,KAAA,CAAA;AAAA,EAC7B,IAAA,CAAA;AAAA,EAEA,eAAA,CAAA;AAAA,EAEA,QAAoC,GAAA,KAAA,CAAA,CAAA;AAAA,EACpC,OAAgC,GAAA,KAAA,CAAA,CAAA;AAAA,EAExC,WAAA,CAAY,KAAc,EAAA,eAAA,EAAkC,IAAY,EAAA;AACpE,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAA,IAAA,CAAK,eAAkB,GAAA,eAAA,CAAA;AACvB,IAAA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AAAA,GAChB;AAAA,EAEA,OAAU,GAAA;AACN,IAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AAAA,GACf;AAAA,EAEA,SAAS,KAAe,EAAA;AACpB,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AAAA,GACjB;AAAA,EAEA,cAAc,MAAwB,EAAA;AAClC,IAAA,IAAA,CAAK,UAAa,GAAA,MAAA,CAAA;AAAA,GACtB;AAAA,EAEA,MAAM,eAAkB,GAAA;AACpB,IAAA,IAAI,CAAC,IAAA,CAAK,KAAS,IAAA,CAAC,KAAK,UAAY,EAAA;AACjC,MAAA,OAAA;AAAA,KACJ;AAEA,IAAI,IAAA;AACA,MAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AACX,MAAA,IAAA,CAAK,WAAW,MAAM,IAAA,CAAK,eAAgB,CAAA,QAAA,CAAS,KAAK,KAAO,EAAA;AAAA,QAC5D,oBAAsB,EAAA,KAAA;AAAA,OACzB,CAAA,CAAA;AACD,MAAM,MAAA,MAAA,GAAS,IAAK,CAAA,QAAA,CAAS,SAAU,EAAA,CAAA;AACvC,MAAA,IAAI,MAAQ,EAAA;AACR,QAAK,IAAA,CAAA,UAAA,IAAc,KACb,GAAA,MAAM,IAAK,CAAA,cAAA,CAAe,MAAM,CAChC,GAAA,MAAM,IAAK,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AAAA,OACnC,MAAA;AACH,QAAM,MAAA,IAAI,MAAM,sBAAsB,CAAA,CAAA;AAAA,OAC1C;AAAA,KACF,SAAA;AACE,MAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AAAA,KACf;AAAA,GACJ;AAAA,EAEQ,KAAQ,GAAA;AACZ,IAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,gBAAiB,EAAA,CAAA;AAC9C,IAAA,IAAI,SAAW,EAAA;AACX,MAAA,IAAA,CAAK,OAAU,GAAA,sBAAA,CAAuB,SAAW,EAAA,IAAA,CAAK,KAAK,WAAW,CAAA,CAAA;AAAA,KAC1E;AAAA,GACJ;AAAA,EAEQ,KAAQ,GAAA;AACZ,IAAA,IAAA,CAAK,SAAS,OAAQ,EAAA,CAAA;AACtB,IAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,GACnB;AAAA,EAEQ,mBAAsB,GAAA;AAC1B,IAAM,MAAA,UAAA,GAAa,KAAK,KAAS,IAAA,EAAA,CAAA;AACjC,IAAM,MAAA,QAAA,GAAW,KAAK,KAAS,IAAA,iBAAA,CAAA;AAC/B,IAAO,OAAA,EAAE,KAAO,EAAA,UAAA,EAAY,QAAmB,EAAA,CAAA;AAAA,GACnD;AAAA,EAEA,MAAc,eAAe,SAA8B,EAAA;AACvD,IAAM,MAAA,eAAA,GAAkB,QAAS,CAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACvD,IAAA,eAAA,CAAgB,QAAQ,SAAU,CAAA,KAAA,CAAA;AAClC,IAAgB,eAAA,CAAA,MAAA,GAAS,UAAU,MAAS,GAAA,EAAA,CAAA;AAC5C,IAAA,eAAA,CAAgB,MAAM,eAAkB,GAAA,MAAA,CAAA;AAExC,IAAM,MAAA,OAAA,GAAU,eAAgB,CAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAC/C,IAAA,IAAI,CAAC,OAAS,EAAA;AACV,MAAM,MAAA,IAAI,MAAM,2CAA2C,CAAA,CAAA;AAAA,KAC/D;AAEA,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,KAAK,mBAAoB,EAAA,CAAA;AAErD,IAAA,OAAA,CAAQ,SAAY,GAAA,MAAA,CAAA;AACpB,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA,CAAA,EAAG,eAAgB,CAAA,KAAA,EAAO,gBAAgB,MAAM,CAAA,CAAA;AACpE,IAAA,OAAA,CAAQ,IAAO,GAAA,sBAAA,CAAA;AACf,IAAA,OAAA,CAAQ,SAAY,GAAA,QAAA,CAAA;AACpB,IAAA,OAAA,CAAQ,SAAY,GAAA,MAAA,CAAA;AAEpB,IAAM,MAAA,CAAA,GAAI,gBAAgB,KAAQ,GAAA,CAAA,CAAA;AAClC,IAAQ,OAAA,CAAA,QAAA,CAAS,KAAO,EAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AAC7B,IAAQ,OAAA,CAAA,SAAA,CAAU,SAAW,EAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AAElC,IAAM,MAAA,IAAA,GAAO,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AACvC,IAAK,IAAA,CAAA,YAAA,CAAa,UAAY,EAAA,QAAA,GAAW,MAAM,CAAA,CAAA;AAE/C,IAAM,MAAA,OAAA,GAAU,YAAY,eAAe,CAAA,CAAA;AAC3C,IAAA,IAAI,CAAC,OAAS,EAAA;AACV,MAAM,MAAA,IAAI,MAAM,8BAA8B,CAAA,CAAA;AAAA,KAClD;AAEA,IAAA,IAAA,CAAK,IAAO,GAAA,OAAA,CAAA;AACZ,IAAA,IAAA,CAAK,KAAM,EAAA,CAAA;AAAA,GACf;AAAA,EAEA,MAAc,eAAe,MAA2B,EAAA;AAGpD,IAAA,MAAM,EAAE,KAAA,EAAU,GAAA,MAAM,OAAO,OAAO,CAAA,CAAA;AACtC,IAAM,MAAA,GAAA,GAAM,IAAI,KAAM,CAAA;AAAA,MAClB,WAAa,EAAA,WAAA;AAAA,MACb,IAAM,EAAA,IAAA;AAAA,MACN,MAAQ,EAAA,IAAA;AAAA,KACX,CAAA,CAAA;AAID,IAAA,MAAM,SAAY,GAAA,GAAA,CAAI,QAAS,CAAA,QAAA,CAAS,QAAS,EAAA,CAAA;AACjD,IAAA,MAAM,UAAa,GAAA,GAAA,CAAI,QAAS,CAAA,QAAA,CAAS,SAAU,EAAA,CAAA;AACnD,IAAA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,IAAA,MAAM,SAAY,GAAA,EAAA,CAAA;AAClB,IAAA,MAAM,gBAAgB,UAAa,GAAA,SAAA,CAAA;AAGnC,IAAA,GAAA,CAAI,YAAY,EAAE,CAAA,CAAA;AAClB,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,KAAK,mBAAoB,EAAA,CAAA;AACrD,IAAI,GAAA,CAAA,IAAA,CAAK,OAAO,SAAY,GAAA,CAAA,EAAG,aAAa,EAAE,KAAA,EAAO,UAAU,CAAA,CAAA;AAG/D,IAAM,MAAA,gBAAA,GAAmB,MAAO,CAAA,KAAA,GAAQ,MAAO,CAAA,MAAA,CAAA;AAC/C,IAAA,IAAI,iBAAoB,GAAA,aAAA,CAAA;AACxB,IAAA,IAAI,mBAAmB,iBAAoB,GAAA,gBAAA,CAAA;AAC3C,IAAA,IAAI,oBAAoB,SAAW,EAAA;AAC/B,MAAmB,gBAAA,GAAA,SAAA,CAAA;AACnB,MAAA,iBAAA,GAAoB,gBAAmB,GAAA,gBAAA,CAAA;AAAA,KAC3C;AAGA,IAAM,MAAA,MAAA,GAAA,CAAU,YAAY,gBAAoB,IAAA,CAAA,CAAA;AAChD,IAAM,MAAA,MAAA,GAAS,SAAa,GAAA,CAAA,aAAA,GAAgB,iBAAqB,IAAA,CAAA,CAAA;AAEjE,IAAA,GAAA,CAAI,SAAS,MAAQ,EAAA,EAAA,EAAI,MAAQ,EAAA,MAAA,EAAQ,kBAAkB,iBAAiB,CAAA,CAAA;AAC5E,IAAI,GAAA,CAAA,IAAA,CAAK,WAAW,MAAM,CAAA,CAAA;AAAA,GAC9B;AACJ;;;;"}

package/PrintingServiceImpl.d.ts

@@ -0,0 +1,30 @@
+import type { PrintingOptions, PrintingService, PrintResult } from "./index";
+import OlMap from "ol/Map";
+import { ServiceOptions } from "@open-pioneer/runtime";
+export declare class PrintingServiceImpl implements PrintingService {
+    private defaultOverlayText;
+    constructor(options: ServiceOptions);
+    printMap(olMap: OlMap, options?: PrintingOptions): Promise<PrintResultImpl>;
+}
+export declare class PrintJob {
+    private olMap;
+    private blockUserInteraction;
+    private overlayText;
+    private running;
+    private drawInformation;
+    private scaleLine;
+    private overlay;
+    constructor(olMap: OlMap, options: Required<PrintingOptions>);
+    printMap(): Promise<PrintResultImpl>;
+    private beginExport;
+    private addScaleLine;
+    private printToCanvas;
+    private reset;
+}
+declare class PrintResultImpl implements PrintResult {
+    private canvas;
+    constructor(canvas: HTMLCanvasElement);
+    getCanvas(): HTMLCanvasElement;
+    getPNGDataURL(quality?: number): string;
+}
+export {};

package/PrintingServiceImpl.js

@@ -0,0 +1,144 @@
+import Draw from 'ol/interaction/Draw';
+import { ScaleLine } from 'ol/control';
+import { createManualPromise } from '@open-pioneer/core';
+import { createBlockUserOverlay, canvasToPng, PRINTING_HIDE_CLASS } from './utils.js';
+
+class PrintingServiceImpl {
+  defaultOverlayText;
+  constructor(options) {
+    this.defaultOverlayText = options.intl.formatMessage({
+      id: "printingMap"
+    });
+  }
+  async printMap(olMap, options) {
+    const job = new PrintJob(olMap, {
+      blockUserInteraction: true,
+      overlayText: this.defaultOverlayText,
+      ...options
+    });
+    return await job.printMap();
+  }
+}
+class PrintJob {
+  olMap;
+  blockUserInteraction = false;
+  overlayText;
+  running = false;
+  drawInformation = [];
+  scaleLine = void 0;
+  overlay = void 0;
+  constructor(olMap, options) {
+    this.olMap = olMap;
+    this.blockUserInteraction = options.blockUserInteraction;
+    this.overlayText = options.overlayText;
+  }
+  async printMap() {
+    if (this.running) {
+      throw new Error("Printing already running.");
+    }
+    try {
+      await this.beginExport();
+      const canvas = await this.printToCanvas(this.olMap.getViewport());
+      if (canvas) {
+        return new PrintResultImpl(canvas);
+      } else {
+        throw new Error("Canvas export failed");
+      }
+    } finally {
+      this.reset();
+    }
+  }
+  async beginExport() {
+    this.running = true;
+    const interactions = this.olMap.getInteractions().getArray().filter((interaction) => {
+      return interaction.getActive() && interaction instanceof Draw;
+    });
+    this.drawInformation = [];
+    interactions?.forEach((interaction) => {
+      const draw = interaction;
+      const previousStyle = draw.getOverlay().getStyle();
+      draw.getOverlay().setStyle(null);
+      this.drawInformation?.push({
+        draw,
+        style: previousStyle
+      });
+    });
+    if (this.blockUserInteraction) {
+      const container = this.olMap?.getTargetElement();
+      if (container) {
+        this.overlay = createBlockUserOverlay(container, this.overlayText);
+      }
+    }
+    await this.addScaleLine();
+  }
+  async addScaleLine() {
+    this.scaleLine = new ScaleLine({
+      className: "printing-scale-bar ol-scale-bar",
+      bar: true,
+      text: true,
+      minWidth: 125
+    });
+    const renderPromise = createManualPromise();
+    const timeout = setTimeout(() => {
+      renderPromise.reject(new Error("Scale line did not render"));
+    }, 3e3);
+    const oldRender = this.scaleLine.render;
+    this.scaleLine.render = (...args) => {
+      oldRender.apply(this.scaleLine, args);
+      renderPromise.resolve();
+    };
+    this.olMap?.addControl(this.scaleLine);
+    try {
+      await renderPromise.promise;
+      await new Promise((resolve) => {
+        requestAnimationFrame(resolve);
+      });
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+  async printToCanvas(element) {
+    const exportOptions = {
+      useCORS: true,
+      ignoreElements: function(element2) {
+        if (element2.classList && typeof element2.classList === "object") {
+          const classList = element2.classList;
+          return classList.contains("map-anchors") || classList.contains(PRINTING_HIDE_CLASS);
+        }
+        return false;
+      }
+    };
+    const html2canvas = (await import('html2canvas')).default;
+    const canvas = await html2canvas(element, exportOptions);
+    return canvas;
+  }
+  reset() {
+    if (this.scaleLine) {
+      this.olMap?.removeControl(this.scaleLine);
+      this.scaleLine = void 0;
+    }
+    if (this.overlay) {
+      this.overlay.destroy();
+      this.overlay = void 0;
+    }
+    this.running = false;
+    this.drawInformation?.length && this.drawInformation.forEach((drawInfo) => {
+      drawInfo.draw.getOverlay().setStyle(drawInfo.style);
+    });
+  }
+}
+class PrintResultImpl {
+  canvas;
+  constructor(canvas) {
+    this.canvas = canvas;
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  getPNGDataURL(quality) {
+    return canvasToPng(this.canvas, quality);
+  }
+}
+
+export { PrintJob, PrintingServiceImpl };
+//# sourceMappingURL=PrintingServiceImpl.js.map

package/PrintingServiceImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintingServiceImpl.js","sources":["PrintingServiceImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport type { PrintingOptions, PrintingService, PrintResult } from \"./index\";\nimport OlMap from \"ol/Map\";\nimport Draw from \"ol/interaction/Draw\";\nimport { StyleLike } from \"ol/style/Style\";\nimport { ScaleLine } from \"ol/control\";\nimport { Interaction } from \"ol/interaction\";\nimport { createManualPromise, Resource } from \"@open-pioneer/core\";\nimport { Options } from \"html2canvas\";\nimport { canvasToPng, createBlockUserOverlay, PRINTING_HIDE_CLASS } from \"./utils\";\nimport { ServiceOptions } from \"@open-pioneer/runtime\";\n\nexport class PrintingServiceImpl implements PrintingService {\n    private defaultOverlayText: string;\n\n    constructor(options: ServiceOptions) {\n        this.defaultOverlayText = options.intl.formatMessage({\n            id: \"printingMap\"\n        });\n    }\n\n    async printMap(olMap: OlMap, options?: PrintingOptions): Promise<PrintResultImpl> {\n        const job = new PrintJob(olMap, {\n            blockUserInteraction: true,\n            overlayText: this.defaultOverlayText,\n            ...options\n        });\n        return await job.printMap();\n    }\n}\n\n// Exported just for test (mocking)\nexport class PrintJob {\n    private olMap: OlMap;\n    private blockUserInteraction: boolean = false;\n    private overlayText: string;\n\n    private running = false;\n    private drawInformation: { draw: Draw; style: StyleLike | null | undefined }[] | undefined = [];\n    private scaleLine: ScaleLine | undefined = undefined;\n    private overlay: Resource | undefined = undefined;\n\n    constructor(olMap: OlMap, options: Required<PrintingOptions>) {\n        this.olMap = olMap;\n        this.blockUserInteraction = options.blockUserInteraction;\n        this.overlayText = options.overlayText;\n    }\n\n    async printMap(): Promise<PrintResultImpl> {\n        if (this.running) {\n            throw new Error(\"Printing already running.\");\n        }\n\n        try {\n            await this.beginExport();\n\n            const canvas = await this.printToCanvas(this.olMap.getViewport());\n            if (canvas) {\n                return new PrintResultImpl(canvas);\n            } else {\n                throw new Error(\"Canvas export failed\");\n            }\n        } finally {\n            // Always remove scale bar\n            this.reset();\n        }\n    }\n\n    private async beginExport() {\n        this.running = true;\n\n        /** hides active draw interactions while printing (set feature style to null ) */\n        const interactions = this.olMap\n            .getInteractions()\n            .getArray()\n            .filter((interaction: Interaction) => {\n                return interaction.getActive() && interaction instanceof Draw;\n            });\n        this.drawInformation = [];\n        interactions?.forEach((interaction) => {\n            const draw = interaction as Draw;\n            const previousStyle = draw.getOverlay().getStyle();\n            draw.getOverlay().setStyle(null);\n            this.drawInformation?.push({\n                draw: draw,\n                style: previousStyle\n            });\n        });\n\n        if (this.blockUserInteraction) {\n            const container = this.olMap?.getTargetElement();\n            if (container) {\n                this.overlay = createBlockUserOverlay(container, this.overlayText);\n            }\n        }\n        await this.addScaleLine();\n    }\n\n    private async addScaleLine() {\n        this.scaleLine = new ScaleLine({\n            className: \"printing-scale-bar ol-scale-bar\",\n            bar: true,\n            text: true,\n            minWidth: 125\n        });\n\n        const renderPromise = createManualPromise<void>();\n\n        // We expect the scale line to be rendered by the open layers map.\n        // This is a sanity check that throws an error when that either doesn't happen\n        // or if it takes an extremely large time.\n        const timeout = setTimeout(() => {\n            renderPromise.reject(new Error(\"Scale line did not render\"));\n        }, 3000);\n\n        const oldRender = this.scaleLine.render;\n        this.scaleLine.render = (...args) => {\n            oldRender.apply(this.scaleLine, args);\n            renderPromise.resolve();\n        };\n        this.olMap?.addControl(this.scaleLine);\n\n        try {\n            // Wait until render (+ one additional frame just to be sure).\n            await renderPromise.promise;\n            await new Promise((resolve) => {\n                requestAnimationFrame(resolve);\n            });\n        } finally {\n            clearTimeout(timeout);\n        }\n    }\n\n    private async printToCanvas(element: HTMLElement): Promise<HTMLCanvasElement> {\n        // export options for html2canvas.\n        const exportOptions: Partial<Options> = {\n            useCORS: true,\n            ignoreElements: function (element: Element) {\n                if (element.classList && typeof element.classList === \"object\") {\n                    const classList = element.classList;\n                    return (\n                        classList.contains(\"map-anchors\") || classList.contains(PRINTING_HIDE_CLASS)\n                    );\n                }\n                return false;\n            }\n        };\n\n        // Lazy load html2canvas: it is a large dependency (a few hundred KiB) that is only\n        // required when actually printed. This speeds up the initial page load.\n        const html2canvas = (await import(\"html2canvas\")).default;\n        const canvas = await html2canvas(element, exportOptions);\n\n        return canvas;\n    }\n\n    private reset() {\n        if (this.scaleLine) {\n            this.olMap?.removeControl(this.scaleLine);\n            this.scaleLine = undefined;\n        }\n        if (this.overlay) {\n            this.overlay.destroy();\n            this.overlay = undefined;\n        }\n\n        this.running = false;\n\n        /** show active draw interactions after printing (reset feature style to its previous style ) */\n        this.drawInformation?.length &&\n            this.drawInformation.forEach((drawInfo) => {\n                drawInfo.draw.getOverlay().setStyle(drawInfo.style);\n            });\n    }\n}\n\nclass PrintResultImpl implements PrintResult {\n    private canvas: HTMLCanvasElement;\n\n    constructor(canvas: HTMLCanvasElement) {\n        this.canvas = canvas;\n    }\n    getCanvas(): HTMLCanvasElement {\n        return this.canvas;\n    }\n\n    getPNGDataURL(quality?: number): string {\n        return canvasToPng(this.canvas, quality);\n    }\n}\n"],"names":["element"],"mappings":"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"}

package/README.md

@@ -0,0 +1,75 @@
+# @open-pioneer/printing
+
+This package provides a UI component and an API to export the current map view as a printable file.
+
+The UI allows users to enter a title, switch between the printing file formats, and trigger the export.
+
+The supported file formats are PDF and PNG.
+If file format is PNG, the current map canvas is exported as an image.
+If file format is PDF, the map is printed as a DIN A4 landscape PDF file, preserving the current map scale and showing the current map center in the middle of the exported map image.
+
+The package also provides a printing service that creates an image of the map as a canvas element or a data URL for a PNG image.
+
+## Usage
+
+### UI Component
+
+To integrate the printing in your app, insert the following snippet and reference a map ID:
+
+```tsx
+<Printing mapId="map_id" />
+```
+
+### Printing Service
+
+To use the printing service, inject it as following:
+
+```js
+// build.config.mjs
+import { defineBuildConfig } from "@open-pioneer/build-support";
+
+export default defineBuildConfig({
+    ui: {
+        references: ["printing.PrintingService"]
+    }
+});
+```
+
+```tsx
+const printingService = useService<PrintingService>("printing.PrintingService");
+
+// Triggers printing and waits for the result.
+const printResult = await printingService.printMap(map);
+
+// An HTMLCanvasElement containing an image of the map
+const canvas = printResult.getCanvas();
+
+// For convenience, an image encoded as PNG (i.e. `data:image/png;base64,...`)
+const dataURL = printResult.getPNGDataURL();
+```
+
+It is configurable whether to add an overlay element above the map or not.
+The default overlay blocks user interactions while the map is printing.
+The text content of the overlay can be overwritten by configuring a custom text.
+
+Example:
+
+```tsx
+const printResult = await printingService.printMap(map, {
+    blockUserInteraction: true,
+    overlayText: "custom text"
+});
+```
+
+### Printed elements
+
+The printed map contains all map elements, visible layers, scale-bar and a title. If the user does not enter a title, the map is printed without title.
+To prevent custom elements from showing in the printed map, add the classname `printing-hide` to the elements.
+
+## Known issues
+
+-   Printing to PNG may not work on Safari / Chrome on iOS (see <https://github.com/open-pioneer/trails-openlayers-base-packages/issues/294>)
+
+## License
+
+Apache-2.0 (see `LICENSE` file)

package/_virtual/_virtual-pioneer-module_react-hooks.js

@@ -0,0 +1,8 @@
+import { useServiceInternal, useIntlInternal } from '@open-pioneer/runtime/react-integration';
+
+const PACKAGE_NAME = "@open-pioneer/printing";
+const useService = /*@__PURE__*/ useServiceInternal.bind(undefined, PACKAGE_NAME);
+const useIntl = /*@__PURE__*/ useIntlInternal.bind(undefined, PACKAGE_NAME);
+
+export { useIntl, useService };
+//# sourceMappingURL=_virtual-pioneer-module_react-hooks.js.map

package/_virtual/_virtual-pioneer-module_react-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_virtual-pioneer-module_react-hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/i18n/de.yaml

@@ -0,0 +1,8 @@
+messages:
+  title: "Titel"
+  fileFormat: "Datei Format"
+  export: "Exportieren"
+  input:
+    placeholder: "Titel eingeben"
+  printingMap: "Karte wird gedruckt ..."
+  printingFailed: "Die Karte konnte nicht gedruckt werden."

package/i18n/en.yaml

@@ -0,0 +1,8 @@
+messages:
+  title: "Title"
+  fileFormat: "File format"
+  export: "Export"
+  input:
+    placeholder: "Enter title"
+  printingMap: "Map is printing ..."
+  printingFailed: "Failed to print the map."

package/index.d.ts

@@ -0,0 +1,47 @@
+import { DeclaredService } from "@open-pioneer/runtime";
+import OlMap from "ol/Map";
+/**
+ * Options supported when printing the map.
+ */
+export interface PrintingOptions {
+    /**
+     * When this is true (the default), an overlay will be added above the map
+     * to block user interactions.
+     *
+     * It is recommended to block user interaction (in some way) while the map is printing
+     * to avoid inconsistencies.
+     */
+    blockUserInteraction?: boolean;
+    /**
+     * This option can be used to customize the text content of the overlay (if enabled).
+     */
+    overlayText?: string;
+}
+/**
+ * The printing service provides an image of a map as a canvas element or a data URL for a PNG image.
+ *
+ * Inject an instance of this service by referencing the interface name `"printing.PrintingService"`.
+ */
+export interface PrintingService extends DeclaredService<"printing.PrintingService"> {
+    /**
+     * Starts a map print operation on the specified map.
+     *
+     * The promise resolves with the resulting map image or with any error that occurred
+     * while printing the map.
+     */
+    printMap(olMap: OlMap, options?: PrintingOptions): Promise<PrintResult>;
+}
+/** The result of a print operation. */
+export interface PrintResult {
+    /** Returns a canvas element that contains the result of the map print. */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * Returns a data URL (i.e. `data:...`) that contains a PNG image.
+     *
+     * Use `quality` (between 0 and 1, defaults to 0.8) to control the image size / compression.
+     *
+     * See also <https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL>.
+     */
+    getPNGDataURL(quality?: number): string;
+}
+export { Printing, type PrintingProps } from "./Printing";

package/index.js

@@ -0,0 +1,2 @@
+export { Printing } from './Printing.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/printing",
+  "version": "0.1.0",
+  "description": "This package provides a UI component to export the current map view as a printable file.",
+  "keywords": [
+    "open-pioneer-trails"
+  ],
+  "homepage": "https://github.com/open-pioneer",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/open-pioneer/trails-openlayers-base-packages",
+    "directory": "src/packages/printing"
+  },
+  "peerDependencies": {
+    "@open-pioneer/chakra-integration": "^1.1.1",
+    "@open-pioneer/runtime": "^2.1.2",
+    "@open-pioneer/core": "^1.2.1",
+    "@open-pioneer/notifier": "^0.3.1",
+    "ol": "^9.0.0",
+    "react": "^18.2.0",
+    "classnames": "^2.3.2",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
+    "@open-pioneer/map": "^0.4.0",
+    "@open-pioneer/react-utils": "^0.2.2"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./services": {
+      "import": "./services.js",
+      "types": "./services.d.ts"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "openPioneerFramework": {
+    "styles": "./styles.css",
+    "services": [
+      {
+        "serviceName": "PrintingServiceImpl",
+        "provides": [
+          {
+            "interfaceName": "printing.PrintingService"
+          }
+        ],
+        "references": []
+      }
+    ],
+    "servicesModule": "./services",
+    "i18n": {
+      "languages": [
+        "en",
+        "de"
+      ]
+    },
+    "ui": {
+      "references": [
+        {
+          "type": "unique",
+          "interfaceName": "notifier.NotificationService"
+        },
+        {
+          "type": "unique",
+          "interfaceName": "printing.PrintingService"
+        }
+      ]
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}

package/services.d.ts

@@ -0,0 +1 @@
+export { PrintingServiceImpl } from "./PrintingServiceImpl";

package/services.js

@@ -0,0 +1,2 @@
+export { PrintingServiceImpl } from './PrintingServiceImpl.js';
+//# sourceMappingURL=services.js.map

package/services.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/styles.css

@@ -0,0 +1,25 @@
+.printing-overlay {
+    /* container uses position relative, so this absolute positioning works */
+    position: absolute;
+    inset: 0;
+    z-index: 10000;
+
+    /* non-interactive: the overlay is "in front" of the map and blocks events */
+    user-select: none;
+    pointer-events: all;
+    cursor: wait;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(180, 180, 180, 0.8);
+}
+
+.printing-overlay-status {
+    flex: 1 1 auto;
+    font-size: 1.5em;
+    text-align: center;
+}
+
+/*# sourceMappingURL=styles.css.map */

package/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.css"],"names":[],"mappings":"AAAA;IACI,yEAAyE;IACzE,kBAAkB;IAClB,QAAQ;IACR,cAAc;;IAEd,4EAA4E;IAC5E,iBAAiB;IACjB,mBAAmB;IACnB,YAAY;;IAEZ,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,uBAAuB;IACvB,0CAA0C;AAC9C;;AAEA;IACI,cAAc;IACd,gBAAgB;IAChB,kBAAkB;AACtB","file":"styles.css","sourcesContent":[".printing-overlay {\n    /* container uses position relative, so this absolute positioning works */\n    position: absolute;\n    inset: 0;\n    z-index: 10000;\n\n    /* non-interactive: the overlay is \"in front\" of the map and blocks events */\n    user-select: none;\n    pointer-events: all;\n    cursor: wait;\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    background-color: rgba(180, 180, 180, 0.8);\n}\n\n.printing-overlay-status {\n    flex: 1 1 auto;\n    font-size: 1.5em;\n    text-align: center;\n}\n"]}

package/utils.d.ts

@@ -0,0 +1,4 @@
+import { Resource } from "@open-pioneer/core";
+export declare const PRINTING_HIDE_CLASS = "printing-hide";
+export declare function canvasToPng(canvas: HTMLCanvasElement, quality?: number): string;
+export declare function createBlockUserOverlay(container: HTMLElement, text: string): Resource;

package/utils.js

@@ -0,0 +1,22 @@
+const DEFAULT_QUALITY = 0.8;
+const PRINTING_HIDE_CLASS = "printing-hide";
+function canvasToPng(canvas, quality) {
+  return canvas.toDataURL("image/png", quality ?? DEFAULT_QUALITY);
+}
+function createBlockUserOverlay(container, text) {
+  const overlay = document.createElement("div");
+  overlay.classList.add("printing-overlay", PRINTING_HIDE_CLASS);
+  container.appendChild(overlay);
+  const message = document.createElement("div");
+  message.classList.add("printing-overlay-status");
+  message.textContent = text;
+  overlay.appendChild(message);
+  return {
+    destroy() {
+      overlay.remove();
+    }
+  };
+}
+
+export { PRINTING_HIDE_CLASS, canvasToPng, createBlockUserOverlay };
+//# sourceMappingURL=utils.js.map

package/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Resource } from \"@open-pioneer/core\";\n\nconst DEFAULT_QUALITY = 0.8;\n\nexport const PRINTING_HIDE_CLASS = \"printing-hide\";\n\nexport function canvasToPng(canvas: HTMLCanvasElement, quality?: number) {\n    return canvas.toDataURL(\"image/png\", quality ?? DEFAULT_QUALITY);\n}\n\nexport function createBlockUserOverlay(container: HTMLElement, text: string): Resource {\n    const overlay = document.createElement(\"div\");\n    overlay.classList.add(\"printing-overlay\", PRINTING_HIDE_CLASS);\n    container.appendChild(overlay);\n\n    const message = document.createElement(\"div\");\n    message.classList.add(\"printing-overlay-status\");\n    message.textContent = text;\n    overlay.appendChild(message);\n\n    return {\n        destroy() {\n            overlay.remove();\n        }\n    };\n}\n"],"names":[],"mappings":"AAIA,MAAM,eAAkB,GAAA,GAAA,CAAA;AAEjB,MAAM,mBAAsB,GAAA,gBAAA;AAEnB,SAAA,WAAA,CAAY,QAA2B,OAAkB,EAAA;AACrE,EAAA,OAAO,MAAO,CAAA,SAAA,CAAU,WAAa,EAAA,OAAA,IAAW,eAAe,CAAA,CAAA;AACnE,CAAA;AAEgB,SAAA,sBAAA,CAAuB,WAAwB,IAAwB,EAAA;AACnF,EAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC5C,EAAQ,OAAA,CAAA,SAAA,CAAU,GAAI,CAAA,kBAAA,EAAoB,mBAAmB,CAAA,CAAA;AAC7D,EAAA,SAAA,CAAU,YAAY,OAAO,CAAA,CAAA;AAE7B,EAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC5C,EAAQ,OAAA,CAAA,SAAA,CAAU,IAAI,yBAAyB,CAAA,CAAA;AAC/C,EAAA,OAAA,CAAQ,WAAc,GAAA,IAAA,CAAA;AACtB,EAAA,OAAA,CAAQ,YAAY,OAAO,CAAA,CAAA;AAE3B,EAAO,OAAA;AAAA,IACH,OAAU,GAAA;AACN,MAAA,OAAA,CAAQ,MAAO,EAAA,CAAA;AAAA,KACnB;AAAA,GACJ,CAAA;AACJ;;;;"}