@panoramax/web-viewer 4.4.0-develop-746bcb00 → 4.4.0-develop-d8b38e70

package/{src → build}/components/ui/SemanticsEditor.js

@@ -1,14 +1,14 @@
-import { LitElement, html, css } from "lit";
-import Basic from "../core/Basic";
-import { parseSemanticsString, computeDiffTags, semanticsToString } from "../../utils/semantics";
-import { textarea } from "../styles";
+import { LitElement, css, html } from "lit";
+import Basic from "../core/Basic.js";
+import { computeDiffTags, parseSemanticsString, semanticsToString } from "../../utils/semantics.js";
+import { textarea } from "../styles.js";
 import JSON5 from "json5";
 
 /**
  * Semantics Editor offer an easy-to-use input for adding or editing semantics tags.
- * 
+ *
  * It manipulates list of `{key: "mypanokey", value: "myvalue"}` entries through `semantics` attribute.
- * 
+ *
  * @class Panoramax.components.ui.SemanticsEditor
  * @element pnx-semantics-editor
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
@@ -22,13 +22,13 @@ import JSON5 from "json5";
  *    ._t=${viewer._t}
  *    onchange=${e => console.log(e.detail.semantics)}
  * />
- * 
+ *
  * <!-- You can access editor and check its validity through native web browser functions -->
  * <script>
  *    const editor = document.getElementById("editor");
  *    console.log(editor.checkValidity()); // True if input is valid
  * </script>
- * 
+ *
  * <!-- You can change specifically style of textarea -->
  * <style>
  *   pnx-semantics-editor::part(text) {
@@ -82,7 +82,7 @@ export default class SemanticsEditor extends LitElement {
 	getDiff() {
 		return computeDiffTags(this._firstSemantics || [], this.semantics);
 	}
-	
+
 	/**
 	 * Check if input is having a valid value.
 	 * @memberof Panoramax.components.ui.SemanticsEditor#
@@ -112,7 +112,7 @@ export default class SemanticsEditor extends LitElement {
 		const txt = this.renderRoot.querySelector("textarea");
 		txt?.setCustomValidity("");
 		txt?.reportValidity();
-		
+
 		this._firstSemantics = baseSemantics;
 		this.semantics = baseSemantics;
 	}
@@ -126,7 +126,7 @@ export default class SemanticsEditor extends LitElement {
 		this._onInput({ target });
 		this._onBlur({ target });
 	}
-	
+
 	/** @private */
 	_onInput(e) {
 		const tarea = e.target;
@@ -138,7 +138,7 @@ export default class SemanticsEditor extends LitElement {
 			this._valid = false;
 		}
 	}
-	
+
 	/** @private */
 	_onBlur(e) {
 		const prevValidity = e.target.checkValidity();
@@ -148,7 +148,7 @@ export default class SemanticsEditor extends LitElement {
 
 			/**
 			 * Event for value change.
-			 * 
+			 *
 			 * Note that this event is launched only on valid input.
 			 *
 			 * @event Panoramax.components.ui.SemanticsEditor#change
@@ -168,10 +168,9 @@ export default class SemanticsEditor extends LitElement {
 			e.target.reportValidity();
 		}
 	}
-	
+
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		return html`
 			<textarea
 				part="text"

package/{src → build}/components/ui/SemanticsTable.js

@@ -1,10 +1,10 @@
-import { LitElement, html, css, nothing } from "lit";
-import { table } from "../styles";
-import { groupByPrefix } from "../../utils/semantics";
+import { LitElement, css, html, nothing } from "lit";
+import { table } from "../styles.js";
+import { groupByPrefix } from "../../utils/semantics.js";
 
 /**
  * Semantics Tables display all semantics tags from either a picture or an annotation.
- * 
+ *
  * @class Panoramax.components.ui.SemanticsTable
  * @element pnx-semantics-table
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
@@ -49,7 +49,6 @@ export default class SemanticsTable extends LitElement {
 	};
 
 	render() {
-		/* eslint-disable indent */
 		if(!this.source) { return nothing; }
 
 		const groups = groupByPrefix(this.source.semantics);

package/{src → build}/components/ui/Switch.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 
 /**
  * Switch button, based on a native checkbox.

package/{src → build}/components/ui/TogglableGroup.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from "lit";
-import { panel } from "../styles";
-import { listenForMenuClosure } from "../../utils/widgets";
+import { LitElement, css, html } from "lit";
+import { panel } from "../styles.js";
+import { listenForMenuClosure } from "../../utils/widgets.js";
 import { classMap } from "lit/directives/class-map.js";
 
 /**
@@ -114,7 +114,7 @@ export default class TogglableGroup extends LitElement {
 		else if(!fitsWidth && !fitsHeight) {
 			menu.style.right = `${window.innerWidth - btnRect.left + btnMenuMargin}px`;
 			menu.style.bottom = `${window.innerHeight - btnRect.bottom}px`;
-			
+
 			// Check if it doesn't overflow on top
 			menuRect = menu.getBoundingClientRect();
 			if(menuRect.top - borderMargin < 0) {

package/build/components/ui/index.js

@@ -0,0 +1,29 @@
+/**
+ * Smaller UI pieces components
+ * @module Panoramax:components:ui
+ */
+
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
+export {default as ButtonGroup} from "./ButtonGroup.js";
+export {default as Button} from "./Button.js";
+export {default as CopyButton} from "./CopyButton.js";
+export {default as Grade} from "./Grade.js";
+export {default as GradeFilter} from "./GradeFilter.js";
+export {default as IconSwitch} from "./IconSwitch.js";
+export {default as LinkButton} from "./LinkButton.js";
+export {default as ListGroup} from "./ListGroup.js";
+export {default as ListItem} from "./ListItem.js";
+export {default as Loader} from "./Loader.js";
+export {default as Map} from "./Map.js";
+export {default as MapMore} from "./MapMore.js";
+export {default as Photo} from "./Photo.js";
+export {default as Popup} from "./Popup.js";
+export {default as ProgressBar} from "./ProgressBar.js";
+export {default as QualityScore} from "./QualityScore.js";
+export {default as SearchBar} from "./SearchBar.js";
+export {default as SemanticsEditor} from "./SemanticsEditor.js";
+export {default as SemanticsTable} from "./SemanticsTable.js";
+export {default as Switch} from "./Switch.js";
+export {default as TogglableGroup} from "./TogglableGroup.js";
+import * as widgets from "./widgets/index.js";
+export {widgets};

package/build/components/ui/index_photoviewer.js

@@ -0,0 +1,21 @@
+// Lightweight export for PhotoViewer
+export {default as ButtonGroup} from "./ButtonGroup.js";
+export {default as Button} from "./Button.js";
+export {default as CopyButton} from "./CopyButton.js";
+export {default as Grade} from "./Grade.js";
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
+export {default as LinkButton} from "./LinkButton.js";
+export {default as ListGroup} from "./ListGroup.js";
+export {default as ListItem} from "./ListItem.js";
+export {default as Loader} from "./Loader.js";
+export {default as Photo} from "./Photo.js";
+export {default as Popup} from "./Popup.js";
+export {default as ProgressBar} from "./ProgressBar.js";
+export {default as QualityScore} from "./QualityScore.js";
+export {default as SearchBar} from "./SearchBar.js";
+export {default as SemanticsEditor} from "./SemanticsEditor.js";
+export {default as SemanticsTable} from "./SemanticsTable.js";
+export {default as Switch} from "./Switch.js";
+export {default as TogglableGroup} from "./TogglableGroup.js";
+import * as widgets from "./widgets/index_photoviewer.js";
+export {widgets};

package/{src → build}/components/ui/widgets/CopyCoordinates.js

@@ -1,8 +1,8 @@
-import { LitElement, html, css } from "lit";
-import { degToDms } from "../../../utils/utils";
-import { fa } from "../../../utils/widgets";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { btngroup } from "../../styles";
+import { LitElement, css, html } from "lit";
+import { degToDms } from "../../../utils/utils.js";
+import { fa } from "../../../utils/widgets.js";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { btngroup } from "../../styles.js";
 
 /**
  * Copy Coordinates button allows easy copy of several format of map coordinates.

package/{src → build}/components/ui/widgets/GeoSearch.js

@@ -1,10 +1,9 @@
-// DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import maplibregl from "!maplibre-gl";
-
+import "maplibre-gl";
 import { LitElement, html } from "lit";
-import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
-import { onceParentAvailable } from "../../../utils/widgets";
-import "./GeoSearch.css";
+import { forwardGeocodingBAN, forwardGeocodingNominatim, forwardGeocodingStandard } from "../../../utils/geocoder.js";
+import { onceParentAvailable } from "../../../utils/widgets.js";
+import GeoSearchStyles from "./GeoSearch.css" with { type: "css" };
+document.adoptedStyleSheets.push(GeoSearchStyles);
 
 const GEOCODER_ENGINES = {
 	"ban": forwardGeocodingBAN,
@@ -21,7 +20,7 @@ const GEOCODER_ENGINES = {
  * ```html
  * <!-- Default geocoder -->
  * <pnx-widget-geosearch _parent=${viewer} />
- * 
+ *
  * <!-- Custom-URL geocoder -->
  * <pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
  * ```
@@ -41,7 +40,8 @@ export default class GeoSearch extends LitElement {
 	constructor() {
 		super();
 		this.geocoder = "nominatim";
-		
+
+		// eslint-disable-next-line no-undef
 		this._geolocateCtrl = new maplibregl.GeolocateControl({
 			positionOptions: {
 				enableHighAccuracy: true,
@@ -78,7 +78,7 @@ export default class GeoSearch extends LitElement {
 		const coordsMatch = query.match(rgxCoords);
 		const rgxUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
 		const uuidMatch = query.match(rgxUuid);
-	
+
 		if(coordsMatch) {
 			const lat = parseFloat(coordsMatch[1]);
 			const lon = parseFloat(coordsMatch[2]);
@@ -96,7 +96,7 @@ export default class GeoSearch extends LitElement {
 			return this._geocoderEngine({
 				query,
 				limit: 5,
-				//bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
+				//Bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
 				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
 			}).then(data => {
 				data = data.features.map(f => ({

package/{src → build}/components/ui/widgets/Legend.js

@@ -1,10 +1,11 @@
-import { LitElement, html, css, nothing } from "lit";
-import { panel } from "../../styles";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import PanoramaxImg from "../../../img/panoramax.svg";
+import { LitElement, css, html, nothing } from "lit";
+import { panel } from "../../styles.js";
+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";
+import { PanoramaxWebsiteURL } from "../../../utils/services.js";
+
+const PanoramaxImg = new URL("../../../img/panoramax.svg", import.meta.url).href;
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -21,7 +22,7 @@ import { PanoramaxWebsiteURL } from "../../../utils/services";
  *   focus="map"
  *   picture="PICTURE-ID-IF-ANY"
  * ></pnx-widget-legend>
- * 
+ *
  * <!-- With custom editor links -->
  * <pnx-widget-legend
  *   _parent=${viewer}
@@ -30,7 +31,7 @@ import { PanoramaxWebsiteURL } from "../../../utils/services";
  * >
  *   <div slot="editors"><a href="http://my.own.tool">Edit in my own tool</a></div>
  * </pnx-widget-legend>
- * 
+ *
  * <!-- Lighter version -->
  * <pnx-widget-legend
  *   _parent=${viewer}

package/{src → build}/components/ui/widgets/LevelSelect.js

@@ -1,11 +1,13 @@
 import { LitElement, html, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { DISABLED_LEVEL } from "../../../utils/indoor";
-import { faCaretUp } from "@fortawesome/free-solid-svg-icons/faCaretUp";
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
-import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
-import "../ButtonGroup.css";
-import "./LevelSelect.css";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { DISABLED_LEVEL } from "../../../utils/indoor.js";
+import {
+	faCaretDown, faCaretUp, faTimes
+} from "@fortawesome/free-solid-svg-icons";
+import LevelSelectStyles from "./LevelSelect.css" with { type: "css" };
+import ButtonGroupStyles from "../ButtonGroup.css" with { type: "css" };
+document.adoptedStyleSheets.push(LevelSelectStyles);
+document.adoptedStyleSheets.push(ButtonGroupStyles);
 
 /**
  * Widget for indoor level selecting over map.

package/{src → build}/components/ui/widgets/MapFiltersButton.js

@@ -1,9 +1,9 @@
 import { LitElement, html, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faSliders } from "@fortawesome/free-solid-svg-icons/faSliders";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
-import { activeIcon } from "../../styles";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faSliders, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
 
 /**
  * Collapsible button showing off map filters menus.

package/{src → build}/components/ui/widgets/MapLayersButton.js

@@ -1,9 +1,9 @@
 import { LitElement, html, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
-import { activeIcon } from "../../styles";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faLayerGroup, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
 
 /**
  * Collapsible button showing off map filters menus.

package/{src → build}/components/ui/widgets/OSMEditors.js

@@ -1,10 +1,10 @@
-import { LitElement, html, nothing, css } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { josmBboxParameters } from "../../../utils/utils";
-import { IdEditorURL } from "../../../utils/services";
-import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
-import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { josmBboxParameters } from "../../../utils/utils.js";
+import { IdEditorURL } from "../../../utils/services.js";
+import {
+	faExternalLinkAlt, faLocationDot, faSatelliteDish
+} from "@fortawesome/free-solid-svg-icons";
 
 const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
 
@@ -78,7 +78,7 @@ export default class OSMEditors extends LitElement {
 						if(p2) {
 							// Next loadings : just zoom
 							//   This avoids desktop focus to go on JOSM instead of
-							//   staying on web browser
+							//   Staying on web browser
 							const url = `${JOSM_REMOTE_URL}/zoom?${p2}`;
 							fetch(url).catch(e => {
 								console.warn(e);

package/{src → build}/components/ui/widgets/PictureLegendActions.js

@@ -1,7 +1,7 @@
-import { LitElement, html, nothing, css } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
-import { noprint } from "../../styles";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import { noprint } from "../../styles.js";
 
 /**
  * Picture Legend Actions is a menu showing up complementary actions for picture legend.

package/{src → build}/components/ui/widgets/Player.js

@@ -1,11 +1,10 @@
 import { LitElement, html, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faBackward } from "@fortawesome/free-solid-svg-icons/faBackward";
-import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
-import { faPause } from "@fortawesome/free-solid-svg-icons/faPause";
-import { faForward } from "@fortawesome/free-solid-svg-icons/faForward";
-import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons/faEllipsisVertical";
-import "./Player.css";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faBackward, faEllipsisVertical, faForward, faPause, faPlay
+} from "@fortawesome/free-solid-svg-icons";
+import PlayerStyles from "./Player.css" with { type: "css" };
+document.adoptedStyleSheets.push(PlayerStyles);
 
 /**
  * Player widget shows prev/play/pause/next/more buttons in a unified toolbar.

package/{src → build}/components/ui/widgets/SemanticsFiltersButton.js

@@ -1,10 +1,9 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
-import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
-import { activeIcon } from "../../styles";
-import { onceParentAvailable } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faTags, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
 
 /**
  * Collapsible button showing off tags filters menus.
@@ -32,7 +31,7 @@ export default class SemanticsFiltersButton extends LitElement {
 	render() {
 		const o = this._parent.map?.getSemanticOverlays?.();
 		if(!o || o.length === 0) { return; }
-		
+
 		const active = o.filter(l => l.metadata && this._parent.mapStyleComposer.dataOverlays.has(l.source)).length > 0;
 		const isSmall = this._parent?.isWidthSmall() || this._parent?.isWidthMedium();
 		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});

package/{src → build}/components/ui/widgets/Zoom.js

@@ -1,10 +1,10 @@
 import { LitElement, html } from "lit";
-import { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../Photo";
-import { PSV_ZOOM_DELTA } from "../../core/PhotoViewer";
-import { fa, onceParentAvailable } from "../../../utils/widgets";
-import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
-import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
-import "../ButtonGroup.css";
+import { PSV_ANIM_DURATION, PSV_DEFAULT_ZOOM } from "../Photo.js";
+import { PSV_ZOOM_DELTA } from "../../core/PhotoViewer.js";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import ButtonGroupStyles from "../ButtonGroup.css" with { type: "css" };
+document.adoptedStyleSheets.push(ButtonGroupStyles);
 
 /**
  * Widget for +/- zoom on PSV or Map.

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

@@ -0,0 +1,16 @@
+/**
+ * Pre-assembled UI pieces components
+ * @module Panoramax:components:ui:widgets
+ */
+
+export {default as CopyCoordinates} from "./CopyCoordinates.js";
+export {default as GeoSearch} from "./GeoSearch.js";
+export {default as Legend} from "./Legend.js";
+export {default as LevelSelect} from "./LevelSelect.js";
+export {default as MapFiltersButton} from "./MapFiltersButton.js";
+export {default as MapLayersButton} from "./MapLayersButton.js";
+export {default as OSMEditors} from "./OSMEditors.js";
+export {default as PictureLegendActions} from "./PictureLegendActions.js";
+export {default as Player} from "./Player.js";
+export {default as SemanticsFiltersButton} from "./SemanticsFiltersButton.js";
+export {default as Zoom} from "./Zoom.js";

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

@@ -0,0 +1,7 @@
+// Lightweight export for PhotoViewer
+export {default as CopyCoordinates} from "./CopyCoordinates.js";
+export {default as Legend} from "./Legend.js";
+export {default as OSMEditors} from "./OSMEditors.js";
+export {default as PictureLegendActions} from "./PictureLegendActions.js";
+export {default as Player} from "./Player.js";
+export {default as Zoom} from "./Zoom.js";

package/build/editor.html

@@ -1,10 +1,94 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Panoramax Editor</title><style>#editor{position:relative;width:95%;margin:2.5%;height:400px}#editor.fullpage{position:fixed;inset:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-editor id="editor" class="fullpage" sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8" picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6" background="aerial" raster='{
-    type: "raster",
-    tiles: [
-      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-    ],
-    minzoom: 0,
-    maxzoom: 19,
-    attribution: "&copy; IGN",
-    tileSize: 256
-  }'></pnx-editor><script src="./servers.js"></script><script>var editor=document.getElementById("editor");editor.setAttribute("endpoint",server)</script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Panoramax Editor</title>
+  <style>
+    #editor {
+      position: relative;
+      width: 95%;
+      margin: 2.5%;
+      height: 400px;
+    }
+    #editor.fullpage {
+      position: fixed;
+      inset: 0;
+      height: unset;
+      width: unset;
+      margin: 0;
+    }
+  </style>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible-next/index.css" />
+</head>
+<body>
+  <script type="importmap">
+    {
+  "imports": {
+    "@fortawesome/fontawesome-svg-core": "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.7.2/index.mjs",
+    "@fortawesome/free-regular-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-regular-svg-icons@6.7.2/index.mjs",
+    "@fortawesome/free-solid-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.7.2/index.mjs",
+    "@maplibre/vt-pbf": "https://cdn.jsdelivr.net/npm/@maplibre/vt-pbf@4.3.0/dist/index.es.js",
+    "@mapbox/vector-tile": "https://cdn.jsdelivr.net/npm/@mapbox/vector-tile@2.0.4/index.js",
+    "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.module.js",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.1/index.module.js",
+    "@photo-sphere-viewer/gallery-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/markers-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/compass-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/compass-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/virtual-tour-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.module.js",
+    "geojson-vt": "https://cdn.jsdelivr.net/npm/geojson-vt@4.0.2/src/index.js",
+    "iconify-icon": "https://cdn.jsdelivr.net/npm/iconify-icon@3.0.2/dist/iconify-icon.mjs",
+    "json5": "https://cdn.jsdelivr.net/npm/json5@2.2.3/dist/index.min.mjs",
+    "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.2/index.js",
+    "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.2/",
+    "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/lit-html.js",
+    "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/",
+    "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.2/",
+    "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.js",
+    "pmtiles": "https://cdn.jsdelivr.net/npm/pmtiles@4.4.0/dist/esm/index.js",
+    "query-selector-shadow-dom": "https://cdn.jsdelivr.net/npm/query-selector-shadow-dom@1.0.0/dist/querySelectorShadowDom.js",
+    "@panoramax/web-viewer": "./src/index.js",
+    "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.2/reactive-element.js",
+    "@mapbox/point-geometry": "https://cdn.jsdelivr.net/npm/@mapbox/point-geometry@1.1.0/index.js",
+    "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js",
+    "pbf": "https://cdn.jsdelivr.net/npm/pbf@4.0.1/index.js",
+    "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js"
+  }
+}
+  </script>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+
+  <pnx-editor
+    id="editor"
+    class="fullpage"
+    sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
+    picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
+    background="aerial"
+    raster='{
+      type: "raster",
+      tiles: [
+        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+      ],
+      minzoom: 0,
+      maxzoom: 19,
+      attribution: "&copy; IGN",
+      tileSize: 256
+    }'
+  ></pnx-editor>
+
+  <script type="module" src="./index.js"></script>
+  <script src="./servers.js"></script>
+  <script>
+    var editor = document.getElementById("editor");
+    editor.setAttribute("endpoint", server);
+  </script>
+</body>
+</html>

package/{src → build}/img/arrow_triangle.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
 	viewBox="0 0 64 64"
 	width="64" height="64"

package/{src → build}/img/arrow_turn.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 64 192" width="64" height="192" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <circle
 	cx="32"