@panoramax/web-viewer 4.4.0-develop-26884d68 → 4.4.0-develop-e873def3

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__ = "e873def";
 
 /**
  * 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/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-e873def3",
   "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": [