diff --git a/examples/iceberg/components/IcebergMap.vue b/examples/iceberg/components/IcebergMap.vue index 3b30382087..21e5b1e1dd 100644 --- a/examples/iceberg/components/IcebergMap.vue +++ b/examples/iceberg/components/IcebergMap.vue @@ -21,6 +21,15 @@ darkMode ? 'Exit dark mode' : 'Enter dark mode' }} + import type { PolarContainer } from '@polar/polar' -import { addPlugins, getStore, subscribe } from '@polar/polar' +import { addPlugins, removePlugin, getStore, subscribe } from '@polar/polar' import pluginAddressSearch from '@polar/polar/plugins/addressSearch' import pluginAttributions from '@polar/polar/plugins/attributions' +import pluginExport from '@polar/polar/plugins/export' import pluginFilter from '@polar/polar/plugins/filter' import pluginFullscreen from '@polar/polar/plugins/fullscreen' import pluginIconMenu from '@polar/polar/plugins/iconMenu' @@ -153,6 +163,12 @@ watch(map, (map) => { displayComponent: true, layoutTag: 'BOTTOM_LEFT', }), + pluginExport({ + displayComponent: true, + layoutTag: 'MIDDLE_LEFT', + download: true, + formats: ['pdf', 'jpeg', 'png'], + }), ]) subscribe(map, 'core', 'language', (newLanguage) => { @@ -177,6 +193,32 @@ const darkMode = computed({ }, }) +const exportPluginActive = computed({ + get: () => { + if (!map.value) { + return + } + return Boolean(getStore(map.value, 'export')) + }, + set: (value: boolean) => { + if (!map.value) { + return + } + if (value) { + addPlugins(map.value, [ + pluginExport({ + displayComponent: true, + layoutTag: 'MIDDLE_LEFT', + download: true, + formats: ['pdf', 'jpeg', 'png'], + }), + ]) + } else { + removePlugin(map.value, 'export') + } + }, +}) + function switchLanguage() { if (!map.value) { return diff --git a/examples/snowbox/index.js b/examples/snowbox/index.js index 38b966fa92..1b108d5509 100644 --- a/examples/snowbox/index.js +++ b/examples/snowbox/index.js @@ -9,6 +9,7 @@ import { } from '@polar/polar' import pluginAddressSearch from '@polar/polar/plugins/addressSearch' import pluginAttributions from '@polar/polar/plugins/attributions' +import pluginExport from '@polar/polar/plugins/export' import pluginFilter from '@polar/polar/plugins/filter' import pluginFullscreen from '@polar/polar/plugins/fullscreen' import pluginGeoLocation from '@polar/polar/plugins/geoLocation' @@ -260,6 +261,16 @@ document.getElementById('secondMapClean').addEventListener('click', () => { additionalMaps.length = 0 }) +addPlugin( + map, + pluginExport({ + displayComponent: true, + layoutTag: 'MIDDLE_LEFT', + download: true, + formats: ['pdf', 'jpeg', 'png'], + }) +) + addPlugin( map, pluginAttributions({ diff --git a/package-lock.json b/package-lock.json index 08267478ca..72064ba4e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "i18next-browser-languagedetector": "^8.2.0", "i18next-vue": "^5.4.0", "jsdom": "^29.0.1", + "jspdf": "^4.2.1", "magic-string": "^0.30.18", "ol": "10.9.0", "patch-package": "^8.0.0", @@ -3118,6 +3119,21 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/pako": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz", + "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/raf": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz", + "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/@types/rbush": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz", @@ -3131,8 +3147,7 @@ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "dev": true, "license": "MIT", - "optional": true, - "peer": true + "optional": true }, "node_modules/@types/unist": { "version": "3.0.3", @@ -4357,6 +4372,17 @@ "node": "18 || 20 || >=22" } }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -4625,6 +4651,27 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvg": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz", + "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/raf": "^3.4.0", + "core-js": "^3.8.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.7", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", @@ -5205,6 +5252,17 @@ "node": ">= 8" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/css-tree": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", @@ -5519,7 +5577,6 @@ "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==", "dev": true, "license": "(MPL-2.0 OR Apache-2.0)", - "peer": true, "optionalDependencies": { "@types/trusted-types": "^2.0.7" } @@ -6784,6 +6841,18 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-png": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz", + "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/pako": "^2.0.3", + "iobuffer": "^5.3.2", + "pako": "^2.1.0" + } + }, "node_modules/fast-uri": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz", @@ -7561,6 +7630,21 @@ "vscode-languageserver-textdocument": "^1.0.12" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/husky": { "version": "9.1.7", "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz", @@ -7748,6 +7832,13 @@ "node": ">= 0.4" } }, + "node_modules/iobuffer": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz", + "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==", + "dev": true, + "license": "MIT" + }, "node_modules/is-arguments": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz", @@ -8746,6 +8837,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/jspdf": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz", + "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "fast-png": "^6.2.0", + "fflate": "^0.8.1" + }, + "optionalDependencies": { + "canvg": "^3.0.11", + "core-js": "^3.6.0", + "dompurify": "^3.3.1", + "html2canvas": "^1.0.0-rc.5" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -11235,6 +11344,14 @@ "dev": true, "license": "MIT" }, + "node_modules/performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -11773,6 +11890,17 @@ "dev": true, "license": "ISC" }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "performance-now": "^2.1.0" + } + }, "node_modules/rbush": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz", @@ -11860,6 +11988,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/regexp.prototype.flags": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz", @@ -11997,6 +12133,17 @@ "dev": true, "license": "MIT" }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "dev": true, + "license": "MIT OR SEE LICENSE IN FEEL-FREE.md", + "optional": true, + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/rolldown": { "version": "1.0.0-rc.18", "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.18.tgz", @@ -12530,6 +12677,17 @@ "dev": true, "license": "MIT" }, + "node_modules/stackblur-canvas": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz", + "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/std-env": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz", @@ -12890,6 +13048,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -12927,6 +13096,17 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -13673,6 +13853,17 @@ "dev": true, "license": "MIT" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", diff --git a/package.json b/package.json index 6cf14dcbd7..77634aac82 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,7 @@ "i18next-browser-languagedetector": "^8.2.0", "i18next-vue": "^5.4.0", "jsdom": "^29.0.1", + "jspdf": "^4.2.1", "magic-string": "^0.30.18", "ol": "10.9.0", "patch-package": "^8.0.0", diff --git a/src/core/types/main.ts b/src/core/types/main.ts index 8b5a5f427d..ac7f362cd9 100644 --- a/src/core/types/main.ts +++ b/src/core/types/main.ts @@ -2,6 +2,7 @@ import type { VueElement } from 'vue' import type { AddressSearchPluginOptions } from '@/plugins/addressSearch' import type { AttributionsPluginOptions } from '@/plugins/attributions' +import type { ExportPluginOptions } from '@/plugins/export/types' import type { FilterPluginOptions } from '@/plugins/filter' import type { FooterPluginOptions } from '@/plugins/footer' import type { FullscreenPluginOptions } from '@/plugins/fullscreen' @@ -314,6 +315,9 @@ export interface MapConfiguration extends MasterportalApiConfiguration { /** Configuration for attributions plugin. */ attributions?: AttributionsPluginOptions + /** Configuration for export plugin. */ + export?: ExportPluginOptions + /** Configuration for filter plugin. */ filter?: FilterPluginOptions diff --git a/src/core/types/plugin.ts b/src/core/types/plugin.ts index b67b811737..993b8debbc 100644 --- a/src/core/types/plugin.ts +++ b/src/core/types/plugin.ts @@ -7,6 +7,9 @@ import type { useAddressSearchStore as AddressSearchStore } from '@/plugins/addr import type { PluginId as AttributionsPluginId } from '@/plugins/attributions' import type { resourcesEn as AttributionsResources } from '@/plugins/attributions/locales' import type { useAttributionsStore as AttributionsStore } from '@/plugins/attributions/store' +import type { PluginId as ExportPluginId } from '@/plugins/export' +import type { resourcesEn as ExportResources } from '@/plugins/export/locales' +import type { useExportStore as ExportStore } from '@/plugins/export/store' import type { PluginId as FilterPluginId } from '@/plugins/filter' import type { resourcesEn as FilterResources } from '@/plugins/filter/locales' import type { useFilterStore as FilterStore } from '@/plugins/filter/store' @@ -130,6 +133,7 @@ export type PolarPluginStore< export type BundledPluginId = | typeof AddressSearchPluginId | typeof AttributionsPluginId + | typeof ExportPluginId | typeof FilterPluginId | typeof FooterPluginId | typeof FullscreenPluginId @@ -156,6 +160,7 @@ type GetPluginStore< export type BundledPluginStores = | GetPluginStore | GetPluginStore + | GetPluginStore | GetPluginStore | GetPluginStore | GetPluginStore @@ -195,6 +200,7 @@ export type BundledPluginLocaleResources = typeof AttributionsPluginId, typeof AttributionsResources > + | GetPluginResources | GetPluginResources | GetPluginResources | GetPluginResources diff --git a/src/plugins/export/components/ExportUI.ce.vue b/src/plugins/export/components/ExportUI.ce.vue new file mode 100644 index 0000000000..e31d7ccf23 --- /dev/null +++ b/src/plugins/export/components/ExportUI.ce.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/src/plugins/export/index.ts b/src/plugins/export/index.ts new file mode 100644 index 0000000000..16637b148b --- /dev/null +++ b/src/plugins/export/index.ts @@ -0,0 +1,34 @@ +/* eslint-disable tsdoc/syntax */ +/** + * @module \@polar/polar/plugins/export + */ +/* eslint-enable tsdoc/syntax */ + +import type { PluginContainer, PolarPluginStore } from '@/core' + +import component from './components/ExportUI.ce.vue' +import locales from './locales' +import { useExportStore } from './store' +import { PluginId, type ExportPluginOptions } from './types' + +/** + * The Export plugin allows making screenshots of the currently visible map. + * Please note that the plugin must be added initially, before any layers are + * loaded, or the canvas will no longer be printable due to potential security + * issues. + * + * @returns Plugin for use with {@link addPlugin}. + */ +export default function pluginExport( + options: ExportPluginOptions +): PluginContainer { + return { + id: PluginId, + component, + locales, + storeModule: useExportStore as PolarPluginStore, + options, + } +} + +export * from './types' diff --git a/src/plugins/export/locales.ts b/src/plugins/export/locales.ts new file mode 100644 index 0000000000..b372dbdc37 --- /dev/null +++ b/src/plugins/export/locales.ts @@ -0,0 +1,53 @@ +import type { Locale } from '@/core' + +/* eslint-disable tsdoc/syntax */ +/** + * This is the documentation for the locales keys in the export plugin. + * These locales are *NOT* exported, but documented only. + * + * @module locales/plugins/export + */ +/* eslint-enable tsdoc/syntax */ + +/** + * German locales for export plugin. + * For overwriting these values, use the plugin's ID as namespace. + */ +export const resourcesDe = { + button: { + tooltip: { + open: 'Kartenexportoptionen öffnen', + close: 'Kartenexportoptionen schließen', + format: 'Karte als {{format}} exportieren', + }, + }, + error: 'Beim Exportieren der Karte ist ein Fehler aufgetreten.', +} as const + +/** + * English locales for export plugin. + * For overwriting these values, use the plugin's ID as namespace. + */ +export const resourcesEn = { + button: { + tooltip: { + open: 'Open map export options', + close: 'Close map export options', + format: 'Export map as {{format}}', + }, + }, + error: 'An error occurred while exporting the map.', +} as const + +const locales: Locale[] = [ + { + type: 'de', + resources: resourcesDe, + }, + { + type: 'en', + resources: resourcesEn, + }, +] + +export default locales diff --git a/src/plugins/export/store.ts b/src/plugins/export/store.ts new file mode 100644 index 0000000000..921b120965 --- /dev/null +++ b/src/plugins/export/store.ts @@ -0,0 +1,158 @@ +/* eslint-disable tsdoc/syntax */ +/** + * @module \@polar/polar/plugins/export/store + */ +/* eslint-enable tsdoc/syntax */ + +import type { Interaction } from 'ol/interaction' + +import { t } from 'i18next' +import { defineStore } from 'pinia' +import { computed, ref } from 'vue' + +import { useCoreStore } from '@/core/stores' +import { notifyUser } from '@/lib/notifyUser' + +import type { ExportFormat } from './types' + +import { EXPORT_FORMATS } from './types' +import { convertToPdf } from './utils/convertToPdf' +import { CrossOriginMonkey } from './utils/CrossOriginMonkey' +import { downloadAsImage } from './utils/downloadAsImage' +import { getCanvasFromMap } from './utils/getCanvasFromMap' +/* eslint-disable tsdoc/syntax */ +/** + * @function + * + * Plugin store for export functionality. + */ +/* eslint-enable tsdoc/syntax */ +export const useExportStore = defineStore('plugins/export', () => { + const coreStore = useCoreStore() + const exportedMap = ref('') + + const configuration = computed(() => coreStore.configuration.export ?? {}) + const download = computed(() => configuration.value.download ?? false) + const layoutTag = computed(() => configuration.value.layoutTag) + const availableFormats = computed(() => { + const validFormats = + configuration.value.formats?.filter((format) => { + const valid = EXPORT_FORMATS.includes(format) + + if (!valid) { + console.warn( + `Erroneous export.formats entry '${format}' configured. It was filtered out. Please verify configuration. Allowed formats are: '${EXPORT_FORMATS.join("', '")}'.` + ) + } + + return valid + }) ?? ([] as ExportFormat[]) + + return validFormats.length > 0 ? validFormats : (['png'] as ExportFormat[]) + }) + + function exportAs(type: ExportFormat) { + let pausedInteractions: Array = [] + + try { + if (!availableFormats.value.includes(type)) { + throw new Error(`Export format not allowed: "${type}"`) + } + + pausedInteractions = coreStore.map + .getInteractions() + .getArray() + .filter((interaction) => interaction.getActive()) + + pausedInteractions.forEach((interaction) => { + interaction.setActive(false) + }) + + coreStore.map.once('postrender', function () { + const map = coreStore.map + const canvas = getCanvasFromMap(map) + const base64String = canvas.toDataURL( + type === 'png' ? 'image/png' : 'image/jpeg' + ) + + if (!base64String) { + throw new Error('Failed to convert canvas to base64 string.') + } + + if (type === 'pdf') { + const { pdfSrc, jsPdf } = convertToPdf( + base64String, + canvas.width, + canvas.height + ) + exportedMap.value = pdfSrc + + if (download.value) { + jsPdf.save('polar-map.pdf') + } + } else { + exportedMap.value = base64String + if (download.value) { + downloadAsImage(base64String, type) + } + } + }) + + coreStore.map.renderSync() + } catch (error) { + console.error(error) + notifyUser('error', () => + t(($) => $.error, { + ns: 'export', + }) + ) + throw error + } finally { + pausedInteractions.forEach((interaction) => { + interaction.setActive(true) + }) + } + } + + const monkey = new CrossOriginMonkey() + + function setupPlugin() { + monkey.startBusiness(coreStore.map) + } + + function teardownPlugin() { + monkey.stopBusiness(coreStore.map) + } + + return { + /** @internal */ + setupPlugin, + + /** @internal */ + teardownPlugin, + + /** + * Configured valid formats or, if none are given or all are invalid, fallback. + * @alpha + */ + availableFormats, + + /** + * Configured layout tag, if given. + * @alpha + */ + layoutTag, + + /** + * Initiates the export process for the specified format. Throws with an + * error description if something goes wrong. + */ + exportAs, + + /** + * Holds the exported map as a base64-encoded string after export. + * Content depends on chosen export format. Initially `''`. + */ + exportedMap, + } +}) diff --git a/src/plugins/export/types.ts b/src/plugins/export/types.ts new file mode 100644 index 0000000000..25419400ba --- /dev/null +++ b/src/plugins/export/types.ts @@ -0,0 +1,34 @@ +import type { PluginOptions } from '@/core' + +export const PluginId = 'export' + +/** + * Supported export formats. + */ +export const EXPORT_FORMATS = ['jpg', 'jpeg', 'pdf', 'png'] as const + +export type ExportFormat = (typeof EXPORT_FORMATS)[number] + +export interface ExportPluginOptions extends PluginOptions { + /** + * If `true`, the screenshot will be both stored in the store and offered as a + * download to the user. If `false`, it will only be stored – in that case, the + * leading application must show a fitting indication (e.g. by firing a + * toast or showing the screenshot) to the user. + * + * @defaultValue `false` + */ + download?: boolean + + /** + * Defines the export formats to be offered in the export menu. + * + * @defaultValue `['png']` + * + * @remarks + * 'jpg' and 'jpeg' are effectively the same format, + * so you can provide whatever you prefer. Providing both is not recommended + * due to the confusing nature of having both options. + */ + formats?: ExportFormat[] +} diff --git a/src/plugins/export/utils/CrossOriginMonkey.ts b/src/plugins/export/utils/CrossOriginMonkey.ts new file mode 100644 index 0000000000..5cb7ea6ede --- /dev/null +++ b/src/plugins/export/utils/CrossOriginMonkey.ts @@ -0,0 +1,60 @@ +import { Map } from 'ol' +import { ImageWMS } from 'ol/source' + +/** + * Provides a monkey patch for cross-origin shenanigans. Please mind that this + * solution is not compatible with some kinds of login. Should a case arise + * where both an afflicted kind of login and the export plugin are to be used, + * another solution must be found to this. + */ +export class CrossOriginMonkey { + /** additional element for prototype chain to shadow addLayer */ + shadowingPrototype + + #setAllCrossOrigins = (map: Map, crossOrigin: 'anonymous' | null) => + Object.getPrototypeOf(this.shadowingPrototype) + .getLayers.call(map) + .getArray() + .forEach((layer) => { + const source = layer.getSource() + + if (!source) { + return + } + + // Brittle code, ready to break on any ol update and produce a nice bug. (づ๑•ᴗ•๑)づ🐞 + if (source instanceof ImageWMS) { + // @ts-expect-error | Set private param for ol class ImageWMS. + source.crossOrigin_ = crossOrigin + } else { + source.crossOrigin = crossOrigin + } + + // trigger update + layer.setSource(source) + // NOTE(sende): oh no it doesn't untaint the canvas, so we can't print if it's added too late! ;_; + }) + + startBusiness(map: Map) { + this.shadowingPrototype = Object.create(Object.getPrototypeOf(map)) + + // Shadow Monkey patch + this.shadowingPrototype.addLayer = (...parameters) => { + Object.getPrototypeOf(this.shadowingPrototype).addLayer.call( + map, + ...parameters + ) + this.#setAllCrossOrigins(map, 'anonymous') + } + + Object.setPrototypeOf(map, this.shadowingPrototype) + + // to get all already existing layers (in case plugin was added later) + this.#setAllCrossOrigins(map, 'anonymous') + } + + stopBusiness(map: Map) { + Object.setPrototypeOf(map, Object.getPrototypeOf(this.shadowingPrototype)) + this.#setAllCrossOrigins(map, null) + } +} diff --git a/src/plugins/export/utils/convertToPdf.ts b/src/plugins/export/utils/convertToPdf.ts new file mode 100644 index 0000000000..9d00541774 --- /dev/null +++ b/src/plugins/export/utils/convertToPdf.ts @@ -0,0 +1,42 @@ +import { jsPDF as JSpdf } from 'jspdf' + +type DINmension = 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' + +const dimensions: Record = { + a0: [1189, 841], + a1: [841, 594], + a2: [594, 420], + a3: [420, 297], + a4: [297, 210], + a5: [210, 148], +} + +export const convertToPdf = ( + src: string, + imgWidth: number, + imgHeight: number +) => { + // NOTE: when supporting more formats, scale map accordingly + const format = 'a4' + const dimension = dimensions[format] + const jsPdf = new JSpdf('landscape', undefined, format) + + // Fit image proportionally onto the page + const pageWidth = dimension[0] + const pageHeight = dimension[1] + const ratio = imgWidth / imgHeight + let drawWidth = pageWidth + let drawHeight = pageWidth / ratio + if (drawHeight > pageHeight) { + drawHeight = pageHeight + drawWidth = pageHeight * ratio + } + const x = (pageWidth - drawWidth) / 2 + const y = (pageHeight - drawHeight) / 2 + jsPdf.addImage(src, 'JPEG', x, y, drawWidth, drawHeight) + + return { + pdfSrc: jsPdf.output('datauristring'), + jsPdf, + } +} diff --git a/src/plugins/export/utils/downloadAsImage.ts b/src/plugins/export/utils/downloadAsImage.ts new file mode 100644 index 0000000000..2f46fd4364 --- /dev/null +++ b/src/plugins/export/utils/downloadAsImage.ts @@ -0,0 +1,11 @@ +import { type ExportFormat } from '../types' + +export const downloadAsImage = (base64String: string, type: ExportFormat) => { + const link = document.createElement('a') + link.download = `polar-map.${type}` + link.href = base64String + link.style.display = 'none' + document.body.appendChild(link) + link.click() + document.body.removeChild(link) +} diff --git a/src/plugins/export/utils/getCanvasFromMap.ts b/src/plugins/export/utils/getCanvasFromMap.ts new file mode 100644 index 0000000000..b46dc5af23 --- /dev/null +++ b/src/plugins/export/utils/getCanvasFromMap.ts @@ -0,0 +1,40 @@ +import { Map } from 'ol' + +export function getCanvasFromMap(map: Map) { + const viewport = map.getViewport() + const canvas = document.createElement('canvas') + const context = canvas.getContext('2d') + + if (!context) { + throw new Error('2D context not available') + } + + canvas.width = viewport.clientWidth + canvas.height = viewport.clientHeight + + const layerCanvases: NodeListOf = + viewport.querySelectorAll('.ol-layer canvas') + layerCanvases.forEach((layerCanvas) => { + const canvas = layerCanvas + if (canvas.width > 0) { + // use layer opacity for printing + const opacity = (canvas.parentNode as HTMLElement).style.opacity + context.globalAlpha = opacity === '' ? 1 : Number(opacity) + + // Get the transform parameters from the style's transform matrix + const transform = canvas.style.transform + const matrixMatch = transform.match(/^matrix\(([^(]*)\)$/) + if (matrixMatch && matrixMatch[1]) { + const matrix = matrixMatch[1].split(',').map(Number) + context.setTransform( + ...(matrix as [number, number, number, number, number, number]) + ) + } + + context.drawImage(canvas, 0, 0) + } else { + console.error('Canvas width is 0, remains effectively empty.') + } + }) + return canvas +} diff --git a/vue2/packages/core/src/monkeyCrossOrigin.ts b/vue2/packages/core/src/monkeyCrossOrigin.ts deleted file mode 100644 index e31a812f7e..0000000000 --- a/vue2/packages/core/src/monkeyCrossOrigin.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Map } from 'ol' -import { ImageWMS } from 'ol/source' - -// TODO: Check whether this is still needed for the export plugin - -// NOTE: This is needed to be able to properly use the export - -// Original addLayer method -const originalAddLayer = Map.prototype.addLayer -// Monkey patch -Map.prototype.addLayer = function (...parameters) { - // Add layer to map - originalAddLayer.call(this, ...parameters) - // Change all layers to be crossOrigin safe - Map.prototype.getLayers - .call(this) - .getArray() // Change layers with wrong crossOrigin - .forEach((layer) => { - // @ts-expect-error | All layers here are instantiated layers including a source. - const source = layer.getSource() - // @ts-expect-error | Set private param for ol class ImageWMS to prevent error in canvas rendering. - // Might break after ol upgrade because its undocumented. - if (source instanceof ImageWMS) source.crossOrigin_ = 'anonymous' - else source.crossOrigin = 'anonymous' - // @ts-expect-error | All layers here are instantiated layers including a source. - layer.setSource(source) - }) -} diff --git a/vue2/packages/plugins/Export/CHANGELOG.md b/vue2/packages/plugins/Export/CHANGELOG.md deleted file mode 100644 index 7eb10c5255..0000000000 --- a/vue2/packages/plugins/Export/CHANGELOG.md +++ /dev/null @@ -1,25 +0,0 @@ -# CHANGELOG - -## 1.2.2 - -- Chore: Update `@polar/lib-custom-types` to `v2.0.0`. - -## 1.2.1 - -- Fix: PDF export with download:false now works correctly. -- Fix: Adjust documentation to properly describe optionality of configuration parameters. -- Fix: Disable map interactions during the export process so potential interaction features won't be exported. -- Chore: Update dependencies to latest versions. - -## 1.2.0 - -- Feature: Improved implementation to make plugin SPA-ready. - -## 1.1.0 - -- Feature: Hide obstructive tooltip on small devices. -- Fix: Documentation error regarding plugin state. - -## 1.0.0 - -Initial release. diff --git a/vue2/packages/plugins/Export/LICENSE b/vue2/packages/plugins/Export/LICENSE deleted file mode 100644 index c29ce2f835..0000000000 --- a/vue2/packages/plugins/Export/LICENSE +++ /dev/null @@ -1,287 +0,0 @@ - EUROPEAN UNION PUBLIC LICENCE v. 1.2 - EUPL © the European Union 2007, 2016 - -This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined -below) which is provided under the terms of this Licence. Any use of the Work, -other than as authorised under this Licence is prohibited (to the extent such -use is covered by a right of the copyright holder of the Work). - -The Work is provided under the terms of this Licence when the Licensor (as -defined below) has placed the following notice immediately following the -copyright notice for the Work: - - Licensed under the EUPL - -or has expressed by any other means his willingness to license under the EUPL. - -1. Definitions - -In this Licence, the following terms have the following meaning: - -- ‘The Licence’: this Licence. - -- ‘The Original Work’: the work or software distributed or communicated by the - Licensor under this Licence, available as Source Code and also as Executable - Code as the case may be. - -- ‘Derivative Works’: the works or software that could be created by the - Licensee, based upon the Original Work or modifications thereof. This Licence - does not define the extent of modification or dependence on the Original Work - required in order to classify a work as a Derivative Work; this extent is - determined by copyright law applicable in the country mentioned in Article 15. - -- ‘The Work’: the Original Work or its Derivative Works. - -- ‘The Source Code’: the human-readable form of the Work which is the most - convenient for people to study and modify. - -- ‘The Executable Code’: any code which has generally been compiled and which is - meant to be interpreted by a computer as a program. - -- ‘The Licensor’: the natural or legal person that distributes or communicates - the Work under the Licence. - -- ‘Contributor(s)’: any natural or legal person who modifies the Work under the - Licence, or otherwise contributes to the creation of a Derivative Work. - -- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of - the Work under the terms of the Licence. - -- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending, - renting, distributing, communicating, transmitting, or otherwise making - available, online or offline, copies of the Work or providing access to its - essential functionalities at the disposal of any other natural or legal - person. - -2. Scope of the rights granted by the Licence - -The Licensor hereby grants You a worldwide, royalty-free, non-exclusive, -sublicensable licence to do the following, for the duration of copyright vested -in the Original Work: - -- use the Work in any circumstance and for all usage, -- reproduce the Work, -- modify the Work, and make Derivative Works based upon the Work, -- communicate to the public, including the right to make available or display - the Work or copies thereof to the public and perform publicly, as the case may - be, the Work, -- distribute the Work or copies thereof, -- lend and rent the Work or copies thereof, -- sublicense rights in the Work or copies thereof. - -Those rights can be exercised on any media, supports and formats, whether now -known or later invented, as far as the applicable law permits so. - -In the countries where moral rights apply, the Licensor waives his right to -exercise his moral right to the extent allowed by law in order to make effective -the licence of the economic rights here above listed. - -The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to -any patents held by the Licensor, to the extent necessary to make use of the -rights granted on the Work under this Licence. - -3. Communication of the Source Code - -The Licensor may provide the Work either in its Source Code form, or as -Executable Code. If the Work is provided as Executable Code, the Licensor -provides in addition a machine-readable copy of the Source Code of the Work -along with each copy of the Work that the Licensor distributes or indicates, in -a notice following the copyright notice attached to the Work, a repository where -the Source Code is easily and freely accessible for as long as the Licensor -continues to distribute or communicate the Work. - -4. Limitations on copyright - -Nothing in this Licence is intended to deprive the Licensee of the benefits from -any exception or limitation to the exclusive rights of the rights owners in the -Work, of the exhaustion of those rights or of other applicable limitations -thereto. - -5. Obligations of the Licensee - -The grant of the rights mentioned above is subject to some restrictions and -obligations imposed on the Licensee. Those obligations are the following: - -Attribution right: The Licensee shall keep intact all copyright, patent or -trademarks notices and all notices that refer to the Licence and to the -disclaimer of warranties. The Licensee must include a copy of such notices and a -copy of the Licence with every copy of the Work he/she distributes or -communicates. The Licensee must cause any Derivative Work to carry prominent -notices stating that the Work has been modified and the date of modification. - -Copyleft clause: If the Licensee distributes or communicates copies of the -Original Works or Derivative Works, this Distribution or Communication will be -done under the terms of this Licence or of a later version of this Licence -unless the Original Work is expressly distributed only under this version of the -Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee -(becoming Licensor) cannot offer or impose any additional terms or conditions on -the Work or Derivative Work that alter or restrict the terms of the Licence. - -Compatibility clause: If the Licensee Distributes or Communicates Derivative -Works or copies thereof based upon both the Work and another work licensed under -a Compatible Licence, this Distribution or Communication can be done under the -terms of this Compatible Licence. For the sake of this clause, ‘Compatible -Licence’ refers to the licences listed in the appendix attached to this Licence. -Should the Licensee's obligations under the Compatible Licence conflict with -his/her obligations under this Licence, the obligations of the Compatible -Licence shall prevail. - -Provision of Source Code: When distributing or communicating copies of the Work, -the Licensee will provide a machine-readable copy of the Source Code or indicate -a repository where this Source will be easily and freely available for as long -as the Licensee continues to distribute or communicate the Work. - -Legal Protection: This Licence does not grant permission to use the trade names, -trademarks, service marks, or 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 copyright notice. - -6. Chain of Authorship - -The original Licensor warrants that the copyright in the Original Work granted -hereunder is owned by him/her or licensed to him/her and that he/she has the -power and authority to grant the Licence. - -Each Contributor warrants that the copyright in the modifications he/she brings -to the Work are owned by him/her or licensed to him/her and that he/she has the -power and authority to grant the Licence. - -Each time You accept the Licence, the original Licensor and subsequent -Contributors grant You a licence to their contributions to the Work, under the -terms of this Licence. - -7. Disclaimer of Warranty - -The Work is a work in progress, which is continuously improved by numerous -Contributors. It is not a finished work and may therefore contain defects or -‘bugs’ inherent to this type of development. - -For the above reason, the Work is provided under the Licence on an ‘as is’ basis -and without warranties of any kind concerning the Work, including without -limitation merchantability, fitness for a particular purpose, absence of defects -or errors, accuracy, non-infringement of intellectual property rights other than -copyright as stated in Article 6 of this Licence. - -This disclaimer of warranty is an essential part of the Licence and a condition -for the grant of any rights to the Work. - -8. Disclaimer of Liability - -Except in the cases of wilful misconduct or damages directly caused to natural -persons, the Licensor will in no event be liable for any direct or indirect, -material or moral, damages of any kind, arising out of the Licence or of the use -of the Work, including without limitation, damages for loss of goodwill, work -stoppage, computer failure or malfunction, loss of data or any commercial -damage, even if the Licensor has been advised of the possibility of such damage. -However, the Licensor will be liable under statutory product liability laws as -far such laws apply to the Work. - -9. Additional agreements - -While distributing the Work, You may choose to conclude an additional agreement, -defining obligations or services consistent with this Licence. However, if -accepting obligations, You may act only on your own behalf and on your sole -responsibility, not on behalf of the original Licensor or 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 -the fact You have accepted any warranty or additional liability. - -10. Acceptance of the Licence - -The provisions of this Licence can be accepted by clicking on an icon ‘I agree’ -placed under the bottom of a window displaying the text of this Licence or by -affirming consent in any other similar way, in accordance with the rules of -applicable law. Clicking on that icon indicates your clear and irrevocable -acceptance of this Licence and all of its terms and conditions. - -Similarly, you irrevocably accept this Licence and all of its terms and -conditions by exercising any rights granted to You by Article 2 of this Licence, -such as the use of the Work, the creation by You of a Derivative Work or the -Distribution or Communication by You of the Work or copies thereof. - -11. Information to the public - -In case of any Distribution or Communication of the Work by means of electronic -communication by You (for example, by offering to download the Work from a -remote location) the distribution channel or media (for example, a website) must -at least provide to the public the information requested by the applicable law -regarding the Licensor, the Licence and the way it may be accessible, concluded, -stored and reproduced by the Licensee. - -12. Termination of the Licence - -The Licence and the rights granted hereunder will terminate automatically upon -any breach by the Licensee of the terms of the Licence. - -Such a termination will not terminate the licences of any person who has -received the Work from the Licensee under the Licence, provided such persons -remain in full compliance with the Licence. - -13. Miscellaneous - -Without prejudice of Article 9 above, the Licence represents the complete -agreement between the Parties as to the Work. - -If any provision of the Licence is invalid or unenforceable under applicable -law, this will not affect the validity or enforceability of the Licence as a -whole. Such provision will be construed or reformed so as necessary to make it -valid and enforceable. - -The European Commission may publish other linguistic versions or new versions of -this Licence or updated versions of the Appendix, so far this is required and -reasonable, without reducing the scope of the rights granted by the Licence. New -versions of the Licence will be published with a unique version number. - -All linguistic versions of this Licence, approved by the European Commission, -have identical value. Parties can take advantage of the linguistic version of -their choice. - -14. Jurisdiction - -Without prejudice to specific agreement between parties, - -- any litigation resulting from the interpretation of this License, arising - between the European Union institutions, bodies, offices or agencies, as a - Licensor, and any Licensee, will be subject to the jurisdiction of the Court - of Justice of the European Union, as laid down in article 272 of the Treaty on - the Functioning of the European Union, - -- any litigation arising between other parties and resulting from the - interpretation of this License, will be subject to the exclusive jurisdiction - of the competent court where the Licensor resides or conducts its primary - business. - -15. Applicable Law - -Without prejudice to specific agreement between parties, - -- this Licence shall be governed by the law of the European Union Member State - where the Licensor has his seat, resides or has his registered office, - -- this licence shall be governed by Belgian law if the Licensor has no seat, - residence or registered office inside a European Union Member State. - -Appendix - -‘Compatible Licences’ according to Article 5 EUPL are: - -- GNU General Public License (GPL) v. 2, v. 3 -- GNU Affero General Public License (AGPL) v. 3 -- Open Software License (OSL) v. 2.1, v. 3.0 -- Eclipse Public License (EPL) v. 1.0 -- CeCILL v. 2.0, v. 2.1 -- Mozilla Public Licence (MPL) v. 2 -- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3 -- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for - works other than software -- European Union Public Licence (EUPL) v. 1.1, v. 1.2 -- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong - Reciprocity (LiLiQ-R+). - -The European Commission may update this Appendix to later versions of the above -licences without producing a new version of the EUPL, as long as they provide -the rights granted in Article 2 of this Licence and protect the covered Source -Code from exclusive appropriation. - -All other changes or additions to this Appendix require the production of a new -EUPL version. \ No newline at end of file diff --git a/vue2/packages/plugins/Export/README.md b/vue2/packages/plugins/Export/README.md deleted file mode 100644 index 864efb9c1c..0000000000 --- a/vue2/packages/plugins/Export/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# Export - -## Scope - -The Export plugin offers users to download the currently visible map canvas in a variety of file formats and by a variety of methods. - -## Configuration - -### export - -| fieldName | type | description | -| - | - | - | -| download | boolean? | Whether file is offered for download. By default, no download will happen, and the using service is supposed to register whether a "screenshot" has been taken and react accordingly. | -| showJpg | boolean? | Tools offers current map view as JPG. Defaults to `true`. | -| showPdf | boolean? | Tools offers current map view as PDF. Defaults to `true`. | -| showPng | boolean? | Tools offers current map view as PNG. Defaults to `true`. | - -Example Configuration: -```js -export: { - download: true, - showJpg: false, - showPdf: false, - showPng: true, -} -``` - -To remove user control, add `displayComponent: false` to the configuration and use the following interactions. - -For details on the `displayComponent` attribute, refer to the [Global Plugin Parameters](../../core/README.md#global-plugin-parameters) section of `@polar/core`. - -## Store - -### Actions - -To programmatically trigger a "screenshot", use this action. - -```js -// type is 'Png', 'Jpg', or 'Pdf' -map.$store.dispatch('plugin/export/exportAs', type) -``` - -### State - -This shows how a callback can be used to show the exported data in a suitable html element. The value of the `screenshot` variable is a base64-encoded string. - -```js -const someElement = // ... however you retrieve your html element - map.subscribe('plugin/export/exportedMap', (screenshot) => - someElement.setAttribute('src', screenshot) - ) -``` diff --git a/vue2/packages/plugins/Export/package.json b/vue2/packages/plugins/Export/package.json deleted file mode 100644 index f9b723c079..0000000000 --- a/vue2/packages/plugins/Export/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "@polar/plugin-export", - "version": "1.2.2", - "description": "Export plugin for POLAR that adds export functionality in various formats to retrieve a screenshot-like graphic of the map without the buttons.", - "keywords": [ - "OpenLayers", - "ol", - "POLAR", - "plugin", - "Export", - "PDF", - "PNG", - "JPG", - "screenshot" - ], - "license": "EUPL-1.2", - "type": "module", - "author": "Dataport AöR ", - "main": "src/index.ts", - "repository": { - "type": "git", - "url": "git+https://github.com/Dataport/polar.git", - "directory": "packages/plugins/Export" - }, - "files": [ - "src/**/*", - "CHANGELOG.md" - ], - "dependencies": { - "jspdf": "^2.5.2" - }, - "peerDependencies": { - "@repositoryname/vuex-generators": "^1.1.2", - "vue": "^2.6.14", - "vuex": "^3.6.2" - }, - "devDependencies": { - "@polar/lib-custom-types": "^2.0.0" - } -} diff --git a/vue2/packages/plugins/Export/src/components/Button.vue b/vue2/packages/plugins/Export/src/components/Button.vue deleted file mode 100644 index a201377840..0000000000 --- a/vue2/packages/plugins/Export/src/components/Button.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - diff --git a/vue2/packages/plugins/Export/src/components/Export.vue b/vue2/packages/plugins/Export/src/components/Export.vue deleted file mode 100644 index 95b69564f0..0000000000 --- a/vue2/packages/plugins/Export/src/components/Export.vue +++ /dev/null @@ -1,129 +0,0 @@ - - - - - diff --git a/vue2/packages/plugins/Export/src/components/index.ts b/vue2/packages/plugins/Export/src/components/index.ts deleted file mode 100644 index 0fa74ceb56..0000000000 --- a/vue2/packages/plugins/Export/src/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Export } from './Export.vue' diff --git a/vue2/packages/plugins/Export/src/index.ts b/vue2/packages/plugins/Export/src/index.ts deleted file mode 100644 index 73b5e4641e..0000000000 --- a/vue2/packages/plugins/Export/src/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import Vue from 'vue' -import { ExportConfiguration } from '@polar/lib-custom-types' - -import { Export } from './components' -import locales from './locales' -import { makeStoreModule } from './store' - -export { ExportDirection } from './types' -export default (options: ExportConfiguration) => (instance: Vue) => - instance.$store.dispatch('addComponent', { - name: 'export', - plugin: Export, - locales, - options, - storeModule: makeStoreModule(), - }) diff --git a/vue2/packages/plugins/Export/src/locales.ts b/vue2/packages/plugins/Export/src/locales.ts deleted file mode 100644 index fe1876db84..0000000000 --- a/vue2/packages/plugins/Export/src/locales.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Locale } from '@polar/lib-custom-types' - -export const resourcesDe = { - plugins: { - export: { - buttons: { - jpg: 'Als .jpeg exportieren.', - pdf: 'Als .pdf exportieren.', - png: 'Als .png exportieren.', - toggle: 'Exportieren ...', - }, - }, - }, -} as const - -export const resourcesEn = { - plugins: { - export: { - buttons: { - jpg: 'Export as a .jpeg-file.', - pdf: 'Export as a .pdf-file.', - png: 'Export as a .png-file.', - toggle: 'Export ...', - }, - }, - }, -} as const - -const locales: Locale[] = [ - { - type: 'de', - resources: resourcesDe, - }, - { - type: 'en', - resources: resourcesEn, - }, -] - -export default locales diff --git a/vue2/packages/plugins/Export/src/store/actions.ts b/vue2/packages/plugins/Export/src/store/actions.ts deleted file mode 100644 index 3cb5ee488b..0000000000 --- a/vue2/packages/plugins/Export/src/store/actions.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { jsPDF } from 'jspdf' -import { PolarActionTree } from '@polar/lib-custom-types' -import { ExportFormat, ExportGetters, ExportState } from '../types' - -// PDF options -const dims = { - a0: [1189, 841], - a1: [841, 594], - a2: [594, 420], - a3: [420, 297], - a4: [297, 210], - a5: [210, 148], -} - -// Screenshot canvas -const CANVAS_ID = 'export-canvas' - -const convertToPdf = (src: string) => { - // NOTE: when supporting more formats, scale map accordingly - const format = 'a4' - const dim = dims[format] - // Import of jspdf is in mounted. - const jsPdf = new jsPDF('landscape', undefined, format) // eslint-disable-line - jsPdf.addImage(src, 'JPEG', 0, 0, dim[0], dim[1]) - - return { - pdfSrc: jsPdf.output('datauristring'), - jsPdf, - } -} - -const downloadAsImage = (src: string, type: ExportFormat) => { - const link = document.createElement('a') - link.download = 'map.' + (type === ExportFormat.PNG ? 'png' : 'jpeg') - link.href = src - document.body.appendChild(link) - link.click() - document.body.removeChild(link) -} - -// For every ol-layer, get matrix and apply on canvas -const getDataUrl = (size: number[], type: ExportFormat) => { - // The canvas to render the screenshot in - const mapCanvas: HTMLCanvasElement = document.createElement('canvas') - mapCanvas.id = CANVAS_ID - // mapCanvas.setAttribute('crossOrigin', 'anonymous') - mapCanvas.width = size[0] - mapCanvas.height = size[1] - - // Write on this - const mapContext = mapCanvas.getContext('2d') - if (!mapContext) { - console.error( - '@polar/plugin-export: map does not have a 2d context, export failed.' - ) - return - } - - Array.prototype.forEach.call( - document.querySelector('[data-app]')?.querySelectorAll('.ol-layer canvas'), - function (canvas) { - if (canvas.width > 0) { - const opacity = canvas.parentNode.style.opacity - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity) - const transform = canvas.style.transform - // Get the transform parameters from the style's transform matrix - const matrix = transform - .match(/^matrix\(([^(]*)\)$/)[1] - .split(',') - .map(Number) - // Apply the transform to the export map context - CanvasRenderingContext2D.prototype.setTransform.apply( - mapContext, - matrix - ) - mapContext.drawImage(canvas, 0, 0) - } else console.warn('@polar/plugin-export: canvas width is 0.') - } - ) - - return mapCanvas.toDataURL( - type === ExportFormat.PNG ? 'image/png' : 'image/jpeg' - ) -} - -const actions: PolarActionTree = { - exportAs( - { commit, getters: { download }, rootGetters: { map } }, - type: ExportFormat - ) { - if (!map) { - console.warn('@polar/plugin-export: map is not initialized.') - return - } - - map.getInteractions().forEach((interaction) => interaction.setActive(false)) - - map.once('postrender', function () { - const size = map.getSize() - if (!Array.isArray(size) || size.length !== 2) { - throw Error('Export: Map has no size.') - } - let src = getDataUrl(size, type) - if (!src) return - - if (type === ExportFormat.JPG || type === ExportFormat.PNG) { - if (download) downloadAsImage(src, type) - } else { - const { pdfSrc, jsPdf } = convertToPdf(src) - src = pdfSrc - - if (download) jsPdf.save('map.pdf') - } - - map.getInteractions().forEach((interaction) => { - interaction.setActive(true) - }) - - commit('setExportedMap', src) - }) - - map.renderSync() - }, -} - -export default actions diff --git a/vue2/packages/plugins/Export/src/store/index.ts b/vue2/packages/plugins/Export/src/store/index.ts deleted file mode 100644 index d53f6602de..0000000000 --- a/vue2/packages/plugins/Export/src/store/index.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { - generateSimpleGetters, - generateSimpleMutations, -} from '@repositoryname/vuex-generators' -import { PolarModule } from '@polar/lib-custom-types' -import { ExportDirection, ExportGetters, ExportState } from '../types' -import actions from './actions' - -const getInitialState = (): ExportState => ({ - exportedMap: '', - openInDirection: ExportDirection.RIGHT, -}) - -export const makeStoreModule = () => { - const storeModule: PolarModule = { - namespaced: true, - state: getInitialState(), - actions, - getters: { - ...generateSimpleGetters(getInitialState()), - configuration(_, __, ___, rootGetters) { - return { - download: false, - showJpg: true, - showPdf: true, - showPng: true, - ...rootGetters.configuration?.export, - } - }, - download(_, { configuration }) { - return configuration.download - }, - showJpg(_, { configuration }) { - return configuration.showJpg - }, - showPng(_, { configuration }) { - return configuration.showPng - }, - showPdf(_, { configuration }) { - return configuration.showPdf - }, - }, - mutations: { - ...generateSimpleMutations(getInitialState()), - }, - } - - return storeModule -} diff --git a/vue2/packages/plugins/Export/src/types.ts b/vue2/packages/plugins/Export/src/types.ts deleted file mode 100644 index 96b0b37768..0000000000 --- a/vue2/packages/plugins/Export/src/types.ts +++ /dev/null @@ -1,36 +0,0 @@ -import Vue from 'vue' -import { ExportConfiguration } from '@polar/lib-custom-types' - -export enum ExportFormat { - JPG = 'Jpg', - PNG = 'Png', - PDF = 'Pdf', -} - -export enum ExportDirection { - UP = 'up', - DOWN = 'down', - RIGHT = 'right', - LEFT = 'left', -} - -export interface ExportState { - /** Base64 encoded picture of the map */ - exportedMap: string - openInDirection: ExportDirection -} - -export interface ExportGetters extends ExportState { - configuration: ExportConfiguration - download: boolean - showJpg: boolean - showPdf: boolean - showPng: boolean -} - -export type ExportAs = (ExportFormat) => void - -export interface ExportComponent extends Vue, ExportState { - /** Exports the currently visible map as the format given to the function */ - exportAs: ExportAs -} diff --git a/vue2/packages/plugins/Export/vite.config.js b/vue2/packages/plugins/Export/vite.config.js deleted file mode 100644 index 0d2ec38a15..0000000000 --- a/vue2/packages/plugins/Export/vite.config.js +++ /dev/null @@ -1,3 +0,0 @@ -import { getCodeConfig } from '../../../viteConfigs' - -export default getCodeConfig() diff --git a/vue2/packages/types/custom/core.ts b/vue2/packages/types/custom/core.ts index 3d756ebbc0..1d2da0e8b8 100644 --- a/vue2/packages/types/custom/core.ts +++ b/vue2/packages/types/custom/core.ts @@ -122,20 +122,6 @@ export interface DrawMetaService { propertyNames?: string[] } -export interface ExportConfiguration extends PluginOptions { - /** - * Whether the user should be able to download a file - * or the data should only be accessible through the store. - */ - download?: boolean - /** Tool offers exporting current mapView as a jpg. */ - showJpg?: boolean - /** Tool offers exporting current mapView as a pdf. */ - showPdf?: boolean - /** Tool offers exporting current mapView as a png. */ - showPng?: boolean -} - export interface FilterConfigurationTimeOption { amounts: number[] unit?: 'days' @@ -382,7 +368,6 @@ export interface MapConfig extends MasterportalApiConfig { addressSearch?: AddressSearchConfiguration attributions?: AttributionsConfiguration draw?: DrawConfiguration - export?: ExportConfiguration filter?: FilterConfiguration fullscreen?: FullscreenConfiguration geoLocation?: GeoLocationConfiguration diff --git a/vue2/pages/examples/draw.html b/vue2/pages/examples/draw.html index 5cabb1798e..b527562cd0 100644 --- a/vue2/pages/examples/draw.html +++ b/vue2/pages/examples/draw.html @@ -25,7 +25,7 @@ const preDrawn = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"radius":779.3311236595036},"geometry":{"type":"Point","coordinates":[562905.3766030567,5935068.951517103]}},{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[564254.7508743946,5934370.451894293],[565572.3751628775,5935719.8261656305]]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[566858.2494685053,5935021.326542821]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[568191.7487484157,5934354.576902865],[568953.7483369359,5935783.326131341],[569747.4979083112,5934354.576902865],[568191.7487484157,5934354.576902865]]]}}]}' render({ - name: 'Draw & Export & Toast', + name: 'Draw & & Toast', description: [ "Allows the user to draw geospatial information and text to the map. The information can be forwarded both as GeoJSON and as screenshot producable by programmatic calls or, in this example, a screenshot button. It's also confiugurable to offer the image as download directly to the user.", "This also showcases how the toast plugin can be used to inform users about the process, as progress outside the map can easily be missed." ],