finishes print maplibre

This commit is contained in:
Christian Beutel
2024-11-30 00:34:18 +01:00
parent 60c1400dfd
commit 8c42e9e695
13 changed files with 77 additions and 17 deletions

View File

@@ -24,6 +24,8 @@
export let showElevation: boolean = true;
export let showInfoPopup: boolean = false;
export let showGrid: boolean = false;
export let fitBounds: "animate" | "instant" | "off" = "instant";
export let elevationProfileContainer: string | HTMLDivElement | undefined =
undefined;
export let mapOptions: Partial<M.MapOptions> | undefined = undefined;
@@ -158,8 +160,12 @@
}
});
if (!drawing && data.some((d) => d.bbox !== undefined)) {
flyToBounds();
if (
!drawing &&
fitBounds !== "off" &&
data.some((d) => d.bbox !== undefined)
) {
flyToBounds(fitBounds == "animate");
}
}
@@ -181,12 +187,12 @@
return new M.LngLatBounds([minX, minY, maxX, maxY]);
}
function flyToBounds() {
function flyToBounds(animate: boolean = true) {
const bounds = data[activeTrail]
? (data[activeTrail].bbox as M.LngLatBoundsLike)
: getBounds();
map!.fitBounds(bounds, {
animate: trails.length > 1,
animate: animate,
padding: {
top: 16,
left: 16,
@@ -325,13 +331,15 @@
}
e?.preventDefault();
dispatch("select", trail);
const index = trails.indexOf(trail);
const index = trails.findIndex((t) => t.id == trail.id);
if (index == -1) {
console.log("here");
return;
}
activeTrail = index;
highlightTrail(trail.id!);
flyToBounds();
if (data[activeTrail] && showElevation) {
epc?.setData(
data[activeTrail]!,
@@ -339,6 +347,7 @@
);
epc?.showProfile();
}
flyToBounds();
}
export function unFocusTrail(trail: Trail) {

View File

@@ -53,6 +53,7 @@
"date": "Datum",
"default-category": "Standard Kategorie",
"default-location": "Standort",
"degrees": "",
"delete": "Löschen",
"delete-account": "Konto löschen",
"delete-list-confirm": "Möchten Sie diese Liste wirklich löschen? Die Routen in der Liste sind danach weiterhin verfügbar.",
@@ -158,6 +159,7 @@
"new-trail": "Neue Route",
"no-account": "Du hast noch kein Konto?",
"no-data": "Keine Daten",
"no-grid": "",
"no-preference": "Keine Präferenz",
"no-results": "Keine Ergebnisse gefunden",
"not-a-valid-email-address": "Keine gültige Email-Adresse",

View File

@@ -53,6 +53,7 @@
"date": "Date",
"default-category": "Default category",
"default-location": "Default Location",
"degrees": "Degrees",
"delete": "Delete",
"delete-account": "Delete Account",
"delete-list-confirm": "Do you really want to delete this list? The trails in the list will still be available.",
@@ -158,6 +159,7 @@
"new-trail": "New Trail",
"no-account": "Don't have an account?",
"no-data": "No data",
"no-grid": "No Grid",
"no-preference": "No preference",
"no-results": "No results found",
"not-a-valid-email-address": "Not a valid email address",

View File

@@ -53,6 +53,7 @@
"date": "Date",
"default-category": "",
"default-location": "Endroit pas défaut",
"degrees": "",
"delete": "Supprimer",
"delete-account": "Supprimer le compte",
"delete-list-confirm": "Voulez-vous vraiment supprimer cette liste ? Les itinéraires de la liste seront toujours disponibles.",
@@ -158,6 +159,7 @@
"new-trail": "Nouvel itinéraire",
"no-account": "Pas encore de compte ?",
"no-data": "",
"no-grid": "",
"no-preference": "Pas de préférence",
"no-results": "Pas de résultat",
"not-a-valid-email-address": "Adresse email invalide",

View File

@@ -53,6 +53,7 @@
"date": "Dátum",
"default-category": "",
"default-location": "Alapértelmezett hely",
"degrees": "",
"delete": "Törlés",
"delete-account": "Fiók törlése",
"delete-list-confirm": "Tényleg törölni akarja ezt a listát? A listán szereplő nyomvonalak továbbra is elérhetőek maradnak.",
@@ -158,6 +159,7 @@
"new-trail": "Új útvonal",
"no-account": "Nincs még fiókja?",
"no-data": "",
"no-grid": "",
"no-preference": "Nincs preferált",
"no-results": "Nincs eredmény",
"not-a-valid-email-address": "Érvénytelen e-mail cím",

View File

@@ -53,6 +53,7 @@
"date": "Data",
"default-category": "",
"default-location": "Posizione predefinita",
"degrees": "",
"delete": "Elimina",
"delete-account": "Elimina account",
"delete-list-confirm": "Vuoi davvero cancellare questa lista? I percorsi presenti nella lista saranno ancora disponibili.",
@@ -158,6 +159,7 @@
"new-trail": "Nuovo percorso",
"no-account": "Non hai ancora un account?",
"no-data": "",
"no-grid": "",
"no-preference": "Nessuna preferenza",
"no-results": "Nessun risultato trovato",
"not-a-valid-email-address": "Indirizzo email non valido",

View File

@@ -53,6 +53,7 @@
"date": "Datum",
"default-category": "",
"default-location": "Standaardlocatie",
"degrees": "",
"delete": "Verwijderen",
"delete-account": "Account verwijderen",
"delete-list-confirm": "Weet je zeker dat je deze lijst wilt verwijderen? De wandelroutes worden bewaard.",
@@ -158,6 +159,7 @@
"new-trail": "Nieuwe wandelroute",
"no-account": "Heb je nog geen account?",
"no-data": "",
"no-grid": "",
"no-preference": "Geen voorkeur",
"no-results": "Er zijn geen zoekresultaten",
"not-a-valid-email-address": "Het e-mailadres is ongeldig",

View File

@@ -53,6 +53,7 @@
"date": "Data",
"default-category": "",
"default-location": "Domyślna Lokalizacja",
"degrees": "",
"delete": "Usuń",
"delete-account": "Usuń Konto",
"delete-list-confirm": "Czy na pewno chcesz usunąć tę listę? Ścieżki na liście zostaną zachowane.",
@@ -158,6 +159,7 @@
"new-trail": "Nowa ścieżka",
"no-account": "Nie masz konta?",
"no-data": "",
"no-grid": "",
"no-preference": "Brak preferencji",
"no-results": "Brak wyników",
"not-a-valid-email-address": "Nieprawidłowy adres email",

View File

@@ -53,6 +53,7 @@
"date": "Data",
"default-category": "",
"default-location": "Localização padrão",
"degrees": "",
"delete": "Excluir",
"delete-account": "Excluir conta",
"delete-list-confirm": "Você realmente quer excluir esta lista? As trilhas na lista ainda estarão disponíveis.",
@@ -158,6 +159,7 @@
"new-trail": "Nova trilha",
"no-account": "Não tem uma conta?",
"no-data": "",
"no-grid": "",
"no-preference": "Nenhuma preferência",
"no-results": "Nenhum resultado encontrado",
"not-a-valid-email-address": "Não um endereço de e-mail válido",

View File

@@ -53,6 +53,7 @@
"date": "日期",
"default-category": "",
"default-location": "默认地点",
"degrees": "",
"delete": "删除",
"delete-account": "注销账户",
"delete-list-confirm": "您确认要删除当前列表?列表中所有行程仍然继续保留不会被删除。",
@@ -158,6 +159,7 @@
"new-trail": "创建新路线",
"no-account": "还未注册?",
"no-data": "",
"no-grid": "",
"no-preference": "尚未规划",
"no-results": "没有找到结果",
"not-a-valid-email-address": "无效电子邮箱地址",

View File

@@ -173,6 +173,7 @@
bind:map
bind:this={mapWithElevation}
bind:markers
fitBounds="animate"
on:select={(e) => {
selectedTrail = e.detail;
}}

View File

@@ -246,6 +246,7 @@
showElevation={false}
showInfoPopup={true}
activeTrail={-1}
fitBounds="off"
minZoom={MIN_ZOOM}
bind:map
bind:this={mapWithElevation}

View File

@@ -70,8 +70,8 @@
let selectedOrientation: "portrait" | "landscape" = orientations[0].value;
const gridOptions = [
{ text: "Degrees", value: "degree" },
{ text: "No Grid", value: "off" },
{ text: $_("degrees"), value: "degree" },
{ text: $_("no-grid"), value: "off" },
];
let selectedGrid = gridOptions[0].value;
@@ -121,8 +121,18 @@
let ratio = img.height / img.width;
img.src = map.getCanvas().toDataURL();
doc.addImage(img.src, "png", 8, 8, 0, (width - 16) * ratio);
currentHeight += (width - 16) * ratio + 11;
const imgPadding = 8;
const docImgWidth = width - 2 * imgPadding;
const docImgHeight = docImgWidth * ratio;
doc.addImage(
img.src,
"png",
imgPadding,
imgPadding,
0,
docImgHeight,
);
currentHeight += docImgHeight + 11;
const elevationProfileHeight = currentHeight - 11;
// Waypoints
@@ -142,15 +152,33 @@
const iconContent = window
.getComputedStyle(markerIcon, ":before")
.getPropertyValue("content");
const iconText = String.fromCharCode(parseInt(iconContent.replace(/['"\\]/g, "").trim(), 16));
const iconText = iconContent.replaceAll('"', "");
const iconPositionX = docImgWidth * percentX + imgPadding;
const iconPositionY = docImgHeight * percentY + imgPadding;
const circleRadius = 3;
doc.setFillColor(107, 114, 128);
doc.circle(
iconPositionX + circleRadius,
iconPositionY + circleRadius,
circleRadius,
"F",
);
doc.setTextColor("#ffffff");
doc.setFontSize(9);
doc.setFont("fa-solid-900", "normal");
doc.text(iconText, width * percentX, height * percentY);
const { w: letterWidth, h: letterHeight } =
doc.getTextDimensions(iconText);
doc.text(
iconText,
iconPositionX + circleRadius - letterWidth / 2 + 0.1,
iconPositionY + circleRadius + letterHeight / 2 - 0.1,
);
}
// printLoading = false;
// return;
// QR Code
doc.addImage(
document.getElementById("qrcode") as HTMLImageElement,
@@ -536,9 +564,12 @@
>Scale: &nbsp 1 : {Math.round(scale)}</span
>
</div>
<div class="min-w-0 basis-full" id="elevation-profile"></div>
<div
class="min-w-0 basis-full relative"
id="elevation-profile"
></div>
</div>
<div class="pt-4 -mt-4 border-t border-t-input-border z-10">
<div class="pt-4 border-t border-t-input-border z-10">
<div class="float-right"><LogoText height={48}></LogoText></div>
<h4 class="text-sm font-semibold">{$trail.name}</h4>