@panoramax/web-viewer 4.4.0-develop-26884d68 → 4.4.0-develop-877a2f40

package/build/components/core/Basic.js

@@ -8,7 +8,7 @@ import PACKAGE_JSON from "../../../package.json" with { type: "json" };
 import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "26884d6";
+const __COMMIT_HASH__ = "877a2f4";
 
 /**
  * Event for overlaying menu opening

package/build/components/layout/Mini.js

@@ -1,7 +1,10 @@
 import { LitElement, css, html } from "lit";
+import { svgToImg } from "../../utils/utils.js";
+const SwitchBigSVG = await fetch(new URL("../../img/switch_big.svg", import.meta.url).href).then(res => res.text());
+const SwitchMiniSVG = await fetch(new URL("../../img/switch_mini.svg", import.meta.url).href).then(res => res.text());
 
-const SwitchBig = new URL("../../img/switch_big.svg", import.meta.url).href;
-const SwitchMini = new URL("../../img/switch_mini.svg", import.meta.url).href;
+const SwitchBig = svgToImg(SwitchBigSVG);
+const SwitchMini = svgToImg(SwitchMiniSVG);
 
 /**
  * Mini layout allows to show a reduced or collapsed component in a corner of a main component.
@@ -98,7 +101,7 @@ export default class Mini extends LitElement {
 					style="top: 0; right: 0"
 					@click=${onExpand}
 				>
-					<img src=${SwitchBig} alt="" />
+					${SwitchBig}
 					${this._parent?._t.pnx.expand}
 				</pnx-button>
 
@@ -108,7 +111,7 @@ export default class Mini extends LitElement {
 					style="bottom: 0; left: 0"
 					@click=${() => this.collapsed = true}
 				>
-					<img src=${SwitchMini} alt="" />
+					${SwitchMini}
 				</pnx-button>
 			`;
 		}

package/build/components/ui/Loader.js

@@ -1,8 +1,8 @@
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { inRangeRandom } from "../../utils/utils.js";
 
-const LogoDead = new URL("../../img/logo_dead.svg", import.meta.url).href;
-const LoaderBg = new URL("../../img/loader_base.jpg", import.meta.url).href;
+const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
+const LoaderBg = await fetch(new URL("../../img/loader_base.jpg", import.meta.url).href).then(res => res.text());
 
 /**
  * Loader component display a full page covering for user waiting.

package/build/components/ui/Map.js

@@ -4,6 +4,7 @@ import {
 import SemanticsMapProtocol from "../../utils/SemanticsMapProtocol.js";
 import PanoraMapProtocol from "../../utils/PanoraMapProtocol.js";
 import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import { svgToImg } from "../../utils/utils.js";
 import MapStyles from "./Map.css" with { type: "css" };
 document.adoptedStyleSheets.push(MapStyles);
 
@@ -19,8 +20,8 @@ maplibregl.addProtocol("panora", new PanoraMapProtocol().tile());
 // eslint-disable-next-line no-undef
 maplibregl.addProtocol("panoras", new PanoraMapProtocol().tile());
 
-const MarkerBaseSVG = new URL("../../img/marker.svg", import.meta.url).href;
-const MarkerSelectedSVG = new URL("../../img/marker_blue.svg", import.meta.url).href;
+const MarkerBaseSVG = await fetch(new URL("../../img/marker.svg", import.meta.url).href).then(res => res.text());
+const MarkerSelectedSVG = await fetch(new URL("../../img/marker_blue.svg", import.meta.url).href).then(res => res.text());
 
 
 /**
@@ -326,7 +327,7 @@ export default class Map extends maplibregl.Map {
 		].forEach(m => {
 			const img = new Image(64, 64);
 			img.onload = () => this.addImage(m.id, img);
-			img.src = m.img;
+			svgToImg(m.img, img);
 		});
 	}
 
@@ -714,12 +715,9 @@ export default class Map extends maplibregl.Map {
 	 * @memberof Panoramax.components.ui.Map#
 	 */
 	_getPictureMarker(selected = true) {
-		const img = document.createElement("img");
-		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
-		img.alt = "";
 		// eslint-disable-next-line no-undef
 		return new maplibregl.Marker({
-			element: img,
+			element: svgToImg(selected ? MarkerSelectedSVG : MarkerBaseSVG),
 			picId: null
 		})
 			// Only picMarker could be draggable, don't for picMarkerPreview.

package/build/components/ui/Photo.js

@@ -13,8 +13,8 @@ import PhotoAdapter from "../../utils/PhotoAdapter.js";
 import PhotoStyles from "./Photo.css" with { type: "css" };
 document.adoptedStyleSheets.push(PhotoStyles);
 
-const LogoDead = new URL("../../img/logo_dead.svg", import.meta.url).href;
-const LoaderImgBase = new URL("../../img/loader_base.jpg", import.meta.url).href;
+const LogoDead = await fetch(new URL("../../img/logo_dead.svg", import.meta.url).href).then(res => res.text());
+const LoaderImgBase = await fetch(new URL("../../img/loader_base.jpg", import.meta.url).href).then(res => res.text());
 
 
 // Default panorama (logo)

package/build/components/ui/widgets/Legend.js

@@ -4,8 +4,8 @@ import { fa, onceParentAvailable } from "../../../utils/widgets.js";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { classMap } from "lit/directives/class-map.js";
 import { PanoramaxWebsiteURL } from "../../../utils/services.js";
-
-const PanoramaxImg = new URL("../../../img/panoramax.svg", import.meta.url).href;
+import { svgToImg } from "../../../utils/utils.js";
+const PanoramaxImg = await fetch(new URL("../../../img/panoramax.svg", import.meta.url).href).then(res => res.text());
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -137,12 +137,15 @@ export default class Legend extends LitElement {
 			"pnx-legend-light": this.light,
 		};
 
+		const logo = svgToImg(PanoramaxImg);
+		logo.classList.add("logo");
+
 		return html`<div class=${classMap(classes)} part="panel">
 			<div
 				class="presentation"
 				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
 			>
-				<img class="logo" src=${PanoramaxImg} alt="" />
+				${logo}
 
 				${this.light ? html`
 					&copy; <a

package/build/package.json

@@ -38,6 +38,13 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-url": "^8.0.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
     "eslint": "^9.39.4",
@@ -50,6 +57,9 @@
     "jest-environment-jsdom": "^30.3.0",
     "jest-fixed-jsdom": "^0.0.11",
     "jsdoc-to-markdown": "^9.1.1",
+    "rollup": "^4.60.2",
+    "rollup-plugin-import-css": "^4.2.1",
+    "rollup-plugin-lit-css": "^6.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "whatwg-url": "^16.0.1"
   },
@@ -131,7 +141,9 @@
       "<rootDir>"
     ],
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(jpg|jpeg|png|gif|webp)$": "<rootDir>/config/jest/imgMock.js",
+      "\\.svg$": "<rootDir>/config/jest/svgMock.js",
       "\\.css$": "identity-obj-proxy"
     },
     "setupFilesAfterEnv": [

package/build/translations/hr.json

@@ -146,6 +146,149 @@
         "filter_gps_precision_help_3": "\"5⭐\" je vrlo precizno (<= {p5}m), \"1⭐\" je vrlo neprecizno (> {p1}m) ili nepoznato.",
         "error_nopic": "Nema dostupnih slika na datoj poziciji",
         "error_josm": "JOSM ne odgovara, radi li i je li udaljeno omogućeno?",
-        "filter_date_1year": "1 godina"
+        "filter_date_1year": "1 godina",
+        "map_background_more": "Ostale pozadine...",
+        "map_theme": "Tema karte",
+        "map_theme_age": "Datum snimanja",
+        "map_theme_age_1": "> 2 godine",
+        "map_theme_age_2": "< 2 godine",
+        "map_theme_age_3": "< 1 godine",
+        "map_theme_age_4": "< 1 mjeseca",
+        "map_theme_type": "Tip kamere",
+        "map_theme_score": "Ocjena kvalitete",
+        "map_theme_gps": "Preciznost lokacije",
+        "contrast": "Omogući veći kontrast slike",
+        "metadata": "Metapodaci slike",
+        "metadata_summary": "Sažetak",
+        "metadata_general_copy_id": "Kopiraj ID",
+        "metadata_general_copy_picid": "Kopiraj ID slike",
+        "metadata_general_picid": "Slika",
+        "metadata_general_seqid": "Sekvenca",
+        "metadata_general_picid_link": "Idi na JSON opis slike",
+        "metadata_general_seqid_link": "Idi na JSON opis sekvence",
+        "metadata_general_author": "Autor",
+        "metadata_general_license": "Licenca",
+        "metadata_general_license_link": "Pogledaj puni opis licence",
+        "metadata_general_date": "Datum snimanja",
+        "metadata_general_instance": "Izvorna instanca",
+        "metadata_camera": "Kamera",
+        "metadata_camera_make": "Učini",
+        "metadata_camera_model": "Model",
+        "metadata_camera_type": "Tip",
+        "metadata_camera_resolution": "Rezolucija",
+        "metadata_camera_focal_length": "Žarišna udaljenost",
+        "metadata_location": "Pozicija",
+        "metadata_location_coordinates": "Koordinate (dužina, širina)",
+        "metadata_location_orientation": "Smjer",
+        "metadata_location_precision": "Preciznost pozicioniranja",
+        "metadata_location_copy": "Kopiraj {v}",
+        "metadata_location_copy_more": "Više opcija kopiranja koordinata",
+        "metadata_quality": "Kvaliteta",
+        "metadata_quality_help": "Saznaj više o ocjeni kvalitete",
+        "metadata_quality_score": "Globalna ocjena",
+        "metadata_quality_gps_score": "Rezultat pozicioniranja",
+        "metadata_quality_resolution_score": "Rezultat rezolucije",
+        "metadata_quality_missing": "nema postavljene vrijednosti na slici",
+        "metadata_exif": "EXIF",
+        "metadata_exif_name": "Oznaka",
+        "metadata_exif_value": "Vrijednost",
+        "metadata_exif_doc": "Dokumenti za EXIF oznake",
+        "metadata_exif_doc_title": "Posjeti Exiv2 dokumentaciju kako bi saznao sve pojedinosti o definicijama EXIF i XMP oznaka",
+        "semantics_title": "Oznake",
+        "semantics_tags": "{nb} oznake",
+        "semantics_features": "Značajke slike",
+        "semantics_features_none": "Na ovoj slici još nije nacrtano nijedno značajka.",
+        "semantics_features_subtitle": "{nb} povezana svojstva",
+        "semantics_annotation_tooltip": "Klikni za detalje",
+        "semantics_show_all_tags": "Prikaži sve oznake",
+        "semantics_hide_all_tags": "Sakrij sve oznake",
+        "semantics_key": "Ključ",
+        "semantics_value": "Vrijednost",
+        "semantics_sequence_tags": "Oznaka sekvence",
+        "semantics_picture_tags": "Oznaka slike",
+        "semantics_annotation_tags": "Oznaka objekta",
+        "semantics_doc": "Pomoć",
+        "semantics_doc_info1": "Daj kontekst oko slike pomoću oznaka.",
+        "semantics_doc_info1u1": "Možete ga označiti da je snimljen automobilom s oznakom transport=car.",
+        "semantics_doc_info2": "Na slici možeš crtati i objekte: prometne znakove, urbanu opremu... Označi ono što vidiš koristeći postojeće oznake. Možeš izraditi i vlastite ako je potrebno.",
+        "semantics_doc_info3": "Neki se objekti automatski otkrivaju pomoću AI: kvaliteta nije zajamčena.",
+        "semantics_doc_link": "Saznaj više o oznakama",
+        "semantics_key_doc": "Saznaj više o ovom ključu",
+        "semantics_value_doc": "Saznaj više o ovoj oznaci",
+        "semantics_value_show_osm": "Pogledaj na OpenStreetMap",
+        "semantics_qualifiers": "Kvalifikacije",
+        "semantics_show_annotations": "Prikaz značajki slike",
+        "semantics_hide_annotations": "Sakrij značajke slike",
+        "semantics_zero_annotations": "Na ovoj slici nema značajki",
+        "semantics_add_annotation": "Dodaj novu oznaku",
+        "semantics_draw_annotation": "Preko slike možete nacrtati objekt koji želite dodati (nije obavezno).",
+        "semantics_erase_annotation": "Obriši nacrtanu značajku",
+        "semantics_delete_annotation": "Obriši ovu značajku",
+        "semantics_delete_annotation_confirm": "Želiš li zaista obrisati ovu oznaku?",
+        "semantics_wikidata_properties": {
+            "P31": "instanca",
+            "P180": "prikazuje",
+            "P279": "podklasa",
+            "P361": "dio"
+        },
+        "semantics_editor_error": "Sintaksa je nevažeća. Tvoje oznake mogu izgledati ovako: \nključ=vrijednost\nprefiks|ključ=vrijednosti\nprefix ključ[qualif_key=qualif_val]=vrijednost \nMaksimalna duljina ključa je 256 znakova, maksimalna duljina vrijednosti 2048 znakova.",
+        "semantics_editor_example": "ključ=vrijednost\nprefiks|ključ=vrijednost",
+        "semantics_copy": "Kopiraj atribute",
+        "semantics_edit": "Uredi atribute",
+        "semantics_save": "Spremi svoje promjene",
+        "semantics_undo": "Otkaži svoje promjene",
+        "semantics_send_fail": "Nije moguće spremiti tvoje promjene, pokušaj ponovno kasnije",
+        "semantics_login_needed": "Kako bi uredio oznake ili značajke slika, moraš se prijaviti na Panoramax {n} instancu. Želiš li se prijaviti?",
+        "semantics_overlays": {
+            "tfsigns": "Prometni znakovi",
+            "features": "Sve značajke"
+        },
+        "semantics_zoom_in": "Povećaj kartu kako bi vidio oznake",
+        "semantics_download": "Preuzimanje",
+        "semantics_download_title": "Preuzmi oznake",
+        "semantics_download_info": "Svi semantički podaci (tagovi) dostupni su kao otvoreni podaci. Možeš ih preuzeti i koristiti kako želiš.",
+        "semantics_download_cta": "Preuzmi otvorene podatke",
+        "report": "Izvještaj",
+        "report_nature_label": "Uzrok problema",
+        "report_nature": {
+            "": "Izaberi prirodu problema…",
+            "blur_missing": "Vidljivo je lice osobe ili registarska tablica automobila",
+            "blur_excess": "Na objektu je primjenjeno nepotrebno zamućenje",
+            "privacy": "Vidljiv je privatni put ili privatno vlasništvo",
+            "picture_low_quality": "Slika je loše kvalitete",
+            "mislocated": "Slika je loše pozicionirana na karti",
+            "copyright": "Slika krši autorska prava",
+            "other": "Bilo koja druga vrsta problema",
+            "inappropriate": "Slika nije odgovarajuća (nepovezana, nagost...)"
+        },
+        "report_whole_sequence": "Ovo se odnosi na cijelu sekvencu",
+        "report_details": "Dodatni detalji",
+        "report_details_placeholder": "Po želji, možeš dodati pojedinosti o problemu",
+        "report_email": "Tvoj email",
+        "report_email_placeholder": "Neobavezno",
+        "report_submit": "Dostavi",
+        "report_wait": "Slanje izvješća…",
+        "report_success": "Izvješće je uspješno poslano. Bit će pregledano što je prije moguće.",
+        "report_failure": "Došlo je do pogreške prilikom izrade izvješća: {e}. Pokušaj ponovno kasnije.",
+        "indoor_switch": "Unutarnje karte",
+        "indoor_selector_expand": "Klikni za uvid u sve dostupne razine",
+        "indoor_selector_shrink": "Klikni za smanjivanje",
+        "indoor_selector_levelup": "Idi na višu razinu",
+        "indoor_selector_leveldown": "Idi na nižu razinu",
+        "indoor_selector_scrollup": "Pomakni popis razina prema gore",
+        "indoor_selector_scrolldown": "Pomakni popis razina prema dolje",
+        "visibility_logged-only": "Članovi",
+        "visibility_title_logged-only": "Samo osobe s računom mogu vijeti ovu sliku",
+        "visibility_owner-only": "Skirveno",
+        "visibility_title_owner-only": "Samo ti možeš vidjeti ovu sliku",
+        "report_auth": "Ovaj izvještaj će biti poslan upotrebom tvog računa \"{a}\""
+    },
+    "map": {
+        "thumbnail": "Sličica lebdeće slike",
+        "not_public": "Nije javno vidljivo",
+        "slow_loading": "Karta se sporo učitava i mogla bi izgledati neispravna",
+        "map_data": "Karta se temelji na {m}",
+        "more_panoramax": "Otkrij više o Panoramaxu",
+        "loading": "Učitavanje…"
     }
 }

package/build/utils/map.js

@@ -1,10 +1,10 @@
 import {
 	COLORS, GPS_VALUES, QUALITYSCORE_GPS_VALUES,
 	QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES, QUALITYSCORE_RES_360_VALUES,
-	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId
+	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId, svgToImg,
 } from "./utils.js";
 
-const LoaderImg = new URL("../img/marker.svg", import.meta.url).href;
+const LoaderImg = await fetch(new URL("../img/marker.svg", import.meta.url).href).then(res => res.text());
 
 export const RASTER_LAYER_ID = "pnx-aerial";
 
@@ -217,7 +217,7 @@ export const MAP_THEMES_STYLES = {
  */
 export function getThumbGif(lang) {
 	const thumbGif = document.createElement("img");
-	thumbGif.src = LoaderImg;
+	svgToImg(LoaderImg, thumbGif);
 	thumbGif.alt = lang.loading;
 	thumbGif.title = lang.loading;
 	thumbGif.classList.add("pnx-map-thumb", "pnx-map-thumb-loader");

package/build/utils/picture.js

@@ -1,5 +1,4 @@
 import { COLORS, getArrow, getDistance, getSimplifiedAngle, svgToPSVLink } from "./utils.js";
-
 const ArrowTriangleSVG = await fetch(new URL("../img/arrow_triangle.svg", import.meta.url).href).then(res => res.text());
 const ArrowTurnSVG = await fetch(new URL("../img/arrow_turn.svg", import.meta.url).href).then(res => res.text());
 const ArrowTriangle = svgToPSVLink(ArrowTriangleSVG, "white");

package/build/utils/semantics.js

@@ -2,8 +2,8 @@ import { html } from "lit";
 import { OSMURL, OSMWikiURL, PanoramaxPresetsURL, WikidataAPIURL, WikidataURL } from "./services.js";
 import { getBestLabel } from "./i18n.js";
 
-const logoOsm = new URL("../img/osm.svg", import.meta.url).href;
-const logoWd = new URL("../img/wd.svg", import.meta.url).href;
+const logoOsm = await fetch(new URL("../img/osm.svg", import.meta.url).href).then(res => res.text());
+const logoWd = await fetch(new URL("../img/wd.svg", import.meta.url).href).then(res => res.text());
 
 
 // List of [ Overlay ID, API filter, Maplibre Style, Sprites ]

package/build/utils/utils.js

@@ -92,6 +92,26 @@ export function getDistance(from, to) {
 	return Math.sqrt(dx*dx + dy*dy);
 }
 
+export function svgToImg(svg, img = null) {
+	if(svg.constructor.name === "HTMLImageElement") {
+		if(img) {
+			svg.width = img.width;
+			svg.height = img.height;
+			svg.onload = img.onload;
+		}
+		return svg;
+	}
+	else if(typeof svg === "string") {
+		if(!img) {
+			img = new Image();
+			img.alt = "";
+		}
+		if(svg.startsWith("<?xml")) { svg = URL.createObjectURL(new Blob([svg], {type: 'image/svg+xml'})); }
+		img.src = svg;
+		return img;
+	}
+}
+
 /**
  * Transforms a Base64 SVG string into a DOM img element.
  * @param {string} svg The SVG as Base64 string
@@ -100,6 +120,7 @@ export function getDistance(from, to) {
  */
 export function svgToPSVLink(svg, fillColor) {
 	try {
+		if(svg.startsWith("data:image/svg+xml,")) { svg = decodeURIComponent(svg.replace("data:image/svg+xml,", "")); }
 		if(!svg.startsWith("<svg")) { throw new Error(); }
 		const svgXml = (new DOMParser()).parseFromString(svg, "image/svg+xml").childNodes[0];
 		const btn = document.createElement("button");
@@ -110,10 +131,7 @@ export function svgToPSVLink(svg, fillColor) {
 	}
 	 
 	catch(e) {
-		const img = document.createElement("img");
-		img.src = svg;
-		img.alt = "";
-		return img;
+		return svgToImg(svg);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.4.0-develop-26884d68",
+  "version": "4.4.0-develop-877a2f40",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/index.js",
   "type": "module",
@@ -38,6 +38,13 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-url": "^8.0.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
     "eslint": "^9.39.4",
@@ -50,6 +57,9 @@
     "jest-environment-jsdom": "^30.3.0",
     "jest-fixed-jsdom": "^0.0.11",
     "jsdoc-to-markdown": "^9.1.1",
+    "rollup": "^4.60.2",
+    "rollup-plugin-import-css": "^4.2.1",
+    "rollup-plugin-lit-css": "^6.0.1",
     "rollup-plugin-postcss": "^4.0.2",
     "whatwg-url": "^16.0.1"
   },
@@ -131,7 +141,9 @@
       "<rootDir>"
     ],
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
+      "\\.(jpg|jpeg|png|gif|webp)$": "<rootDir>/config/jest/imgMock.js",
+      "\\.svg$": "<rootDir>/config/jest/svgMock.js",
       "\\.css$": "identity-obj-proxy"
     },
     "setupFilesAfterEnv": [