From 27da2b81163bed192f94121979032b32404953a2 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 31 Mar 2024 21:14:29 +0200 Subject: [PATCH] More fixes to export functionality --- src/UI/Map/MapLibreAdaptor.ts | 37 ++++++++----- src/UI/Map/MaplibreMap.svelte | 3 +- src/Utils/pngMapCreator.ts | 5 +- src/Utils/svgToPdf.ts | 100 ---------------------------------- 4 files changed, 29 insertions(+), 116 deletions(-) diff --git a/src/UI/Map/MapLibreAdaptor.ts b/src/UI/Map/MapLibreAdaptor.ts index b3e85296d..933775e34 100644 --- a/src/UI/Map/MapLibreAdaptor.ts +++ b/src/UI/Map/MapLibreAdaptor.ts @@ -336,9 +336,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { for (const img of Array.from(allimages)) { let isLoaded: boolean = false while (!isLoaded) { - console.log("Waiting for image", img.src, "to load") + console.log("Waiting for image", img.src, "to load", img.complete, img.naturalWidth, img) await Utils.waitFor(250) - isLoaded = img.complete && img.naturalWidth > 0 + isLoaded = img.complete && img.width > 0 } } } @@ -349,21 +349,32 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { element.style.transform = "" const offset = style.match(/translate\(([-0-9]+)%, ?([-0-9]+)%\)/) + let labels = Array.from(element.getElementsByClassName("marker-label")) + const origLabelTransforms = labels.map(l => l.style.transform) + // We save the original width (`w`) and height (`h`) in order to restore them later on const w = element.style.width - const h = element.style.height - + const h = Number(element.style.height) + const targetW = Math.max(element.getBoundingClientRect().width * 4, + ...labels.map(l => l.getBoundingClientRect().width)) + const targetH = element.getBoundingClientRect().height + + Math.max(...labels.map(l => l.getBoundingClientRect().height)) // Force a wider view for icon badges - element.style.width = element.getBoundingClientRect().width * 4 + "px" + element.style.width = targetW + "px" // Force more height to include labels - element.style.height = element.getBoundingClientRect().height * 2 + "px" - element.classList.add("w-full","flex", "flex-col","items-center") - + element.style.height = targetH + "px" + element.classList.add("w-full", "flex", "flex-col", "items-center") + labels.forEach(l => { + l.style.transform = "" + }) + await Utils.awaitAnimationFrame() const svgSource = await htmltoimage.toSvg(element) const img = await MapLibreAdaptor.createImage(svgSource) - element.style.width = w - element.style.height = h + for (let i = 0; i < labels.length; i++) { + labels[i].style.transform = origLabelTransforms[i] + } + element.style.width = "" + w + element.style.height = "" + h - await Utils.awaitAnimationFrame() if (offset && rescaleIcons !== 1) { const [_, __, relYStr] = offset const relY = Number(relYStr) @@ -374,12 +385,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { y *= pixelRatio try { - let xdiff = img.width * rescaleIcons / 2 + const xdiff = img.width * rescaleIcons / 2 drawOn.drawImage(img, x - xdiff, y, img.width * rescaleIcons, img.height * rescaleIcons) } catch (e) { console.log("Could not draw image because of", e) } - element.classList.remove("w-full","flex", "flex-col","items-center") + element.classList.remove("w-full", "flex", "flex-col", "items-center") } diff --git a/src/UI/Map/MaplibreMap.svelte b/src/UI/Map/MaplibreMap.svelte index 21cb69fa1..2caee99c0 100644 --- a/src/UI/Map/MaplibreMap.svelte +++ b/src/UI/Map/MaplibreMap.svelte @@ -3,7 +3,6 @@ import type { Map, MapOptions } from "maplibre-gl" import * as maplibre from "maplibre-gl" import type { Writable } from "svelte/store" - import { get } from "svelte/store" import { AvailableRasterLayers } from "../../Models/RasterLayers" import { Utils } from "../../Utils" import { ariaLabel } from "../../Utils/ariaLabel" @@ -40,7 +39,7 @@ styleUrl = defaultLayer.style ?? defaultLayer.url } - console.log("INiting mapLIbremap with style", styleUrl) + console.log("Initing mapLIbremap with style", styleUrl) const options: MapOptions = { container, diff --git a/src/Utils/pngMapCreator.ts b/src/Utils/pngMapCreator.ts index ead43252a..cb115a148 100644 --- a/src/Utils/pngMapCreator.ts +++ b/src/Utils/pngMapCreator.ts @@ -65,9 +65,12 @@ export class PngMapCreator { document.getElementById(freeComponentId).appendChild(div) const newZoom = settings.zoom.data + Math.log2(pixelRatio) - 1 + const rasterLayerProperties = settings.rasterLayer.data?.properties ?? AvailableRasterLayers.defaultBackgroundLayer.properties + const style = rasterLayerProperties?.style ?? rasterLayerProperties?.url +console.log("Png-map-creator: initing MlMap with style", style, rasterLayerProperties) const mapElem = new MlMap({ container: div.id, - style: settings.rasterLayer.data?.properties?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url, + style, center: [l.lon, l.lat], zoom: newZoom, pixelRatio, diff --git a/src/Utils/svgToPdf.ts b/src/Utils/svgToPdf.ts index 989834ea9..e413d3c5a 100644 --- a/src/Utils/svgToPdf.ts +++ b/src/Utils/svgToPdf.ts @@ -881,107 +881,7 @@ class SvgToPdfPage { width, height, }).CreatePng(this.options.freeComponentId, this._state) - } /* else { - const match = spec.match(/\$map\(([^)]*)\)$/) - if (match === null) { - throw "Invalid mapspec:" + spec - } - const params = SvgToPdfInternals.parseCss(match[1], ",") - const layout = AllKnownLayouts.allKnownLayouts.get(params["theme"]) - if (layout === undefined) { - console.error("Could not show map with parameters", params) - throw ( - "Theme not found:" + - params["theme"] + - ". Use theme: to define which theme to use. " - ) - } - layout.widenFactor = 0 - layout.overpassTimeout = 600 - layout.defaultBackgroundId = params["background"] ?? layout.defaultBackgroundId - for (const paramsKey in params) { - if (paramsKey.startsWith("layer-")) { - const layerName = paramsKey.substring("layer-".length) - const key = params[paramsKey].toLowerCase().trim() - const layer = layout.layers.find((l) => l.id === layerName) - if (layer === undefined) { - throw "No layer found for " + paramsKey - } - if (key === "force") { - layer.minzoom = 0 - layer.minzoomVisible = 0 - } - } - } - const zoom = Number(params["zoom"] ?? params["z"] ?? 14) - - const state = new ThemeViewState(layout) - state.mapProperties.location.setData({ - lat: this.options?.overrideLocation?.lat ?? Number(params["lat"] ?? 51.05016), - lon: this.options?.overrideLocation?.lon ?? Number(params["lon"] ?? 3.717842), - }) - state.mapProperties.zoom.setData(zoom) - - const fl = Array.from(state.layerState.filteredLayers.values()) - for (const filteredLayer of fl) { - if (params["layer-" + filteredLayer.layerDef.id] !== undefined) { - filteredLayer.isDisplayed.setData( - loadData && - params["layer-" + filteredLayer.layerDef.id].trim().toLowerCase() !== - "false" - ) - } else if (params["layers"] === "none") { - filteredLayer.isDisplayed.setData(false) - } else if (filteredLayer.layerDef.id.startsWith("note_import")) { - filteredLayer.isDisplayed.setData(false) - } - } - - for (const paramsKey in params) { - if (paramsKey.startsWith("layer-")) { - const layerName = paramsKey.substring("layer-".length) - const key = params[paramsKey].toLowerCase().trim() - const isDisplayed = loadData && (key === "true" || key === "force") - const layer = fl.find((l) => l.layerDef.id === layerName) - if (!loadData) { - console.log( - "Not loading map data as 'loadData' is falsed, this is probably a test run" - ) - } else { - console.log( - "Setting ", - layer?.layerDef?.id, - " to visibility", - isDisplayed, - "(minzoom:", - layer?.layerDef?.minzoomVisible, - layer?.layerDef?.minzoom, - ")" - ) - } - layer.isDisplayed.setData(loadData && isDisplayed) - if (key === "force" && loadData) { - layer.layerDef.minzoom = 0 - layer.layerDef.minzoomVisible = 0 - layer.isDisplayed.addCallback((isDisplayed) => { - if (!isDisplayed) { - console.warn("Forcing layer " + paramsKey + " as true") - layer.isDisplayed.setData(true) - } - }) - } - } - } - const pngCreator = new PngMapCreator(state, { - width: 4 * width, - height: 4 * height, - }) - png = await pngCreator.CreatePng(this.options.freeComponentId, this._state) - if (!png) { - throw "PngCreator did not output anything..." - } } -//*/ svgImage.setAttribute("xlink:href", await SvgToPdfPage.blobToBase64(png)) svgImage.style.width = width + "mm" svgImage.style.height = height + "mm"