@panoramax/web-viewer 4.4.0-develop-3839b5a4 → 4.4.0-develop-f91f6758

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

@@ -1,11 +1,10 @@
-import { LitElement, html, css, nothing } from "lit";
-import { fa, onceParentAvailable } from "../../utils/widgets";
-import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
-import { hasAnnotations } from "../../utils/picture";
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faTags, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { hasAnnotations } from "../../utils/picture.js";
 import { classMap } from "lit/directives/class-map.js";
-import { panel } from "../styles";
-import { DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils";
+import { panel } from "../styles.js";
+import { DISABLE_ANNOTATIONS_PARAM } from "../../utils/utils.js";
 
 /**
  * AnnotationsSwitch component allows to switch on/off pictures annotations.
@@ -129,7 +128,6 @@ export default class AnnotationsSwitch extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		const panelClasses = {
 			"pnx-panel": true,
 			"pnx-hidden": !this._warnNoAnnotTooltip,

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

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { btn } from "../styles";
+import { btn } from "../styles.js";
 
 /**
  * Button element displays a direct action button.

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

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
-import "./ButtonGroup.css";
+import ButtonGroupStyles from "./ButtonGroup.css" with { type: "css" };
+document.adoptedStyleSheets.push(ButtonGroupStyles);
 
 /**
  * Button Group element allows to merge many button in a single bar.

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

@@ -1,8 +1,7 @@
-import { LitElement, html, css } from "lit";
-import { fa } from "../../utils/widgets";
-import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
-import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
-import { btn, faSvg } from "../styles";
+import { LitElement, css, html } from "lit";
+import { fa } from "../../utils/widgets.js";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { btn, faSvg } from "../styles.js";
 import { classMap } from "lit/directives/class-map.js";
 
 /**
@@ -91,7 +90,6 @@ export default class CopyButton extends LitElement {
 
 	/** @private */
 	render() {
-		/* eslint-disable indent */
 		const classes = {
 			"pnx-btn": !this.unstyled,
 			"pnx-btn-full": !this.unstyled,

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

@@ -1,8 +1,8 @@
-import { LitElement, html, css } from "lit";
-import { fa } from "../../utils/widgets";
-import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
-import { faStar as farStar } from "@fortawesome/free-regular-svg-icons/faStar";
-import { faSvg } from "../styles";
+import { LitElement, css, html } from "lit";
+import { fa } from "../../utils/widgets.js";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
+import { faSvg } from "../styles.js";
 
 /**
  * Grade element displays a 5-star rating.

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

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from "lit";
-import { fa } from "../../utils/widgets";
-import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
+import { LitElement, css, html } from "lit";
+import { fa } from "../../utils/widgets.js";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Grade Filter allows to filter picture by their grade (for example, precision grade)

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

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

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

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { btn } from "../styles";
+import { btn } from "../styles.js";
 
 /**
  * Link Button element displays a HTML `<a>` anchor with a button style.

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

@@ -1,9 +1,9 @@
-import { LitElement, html, css } from "lit";
-import { panel } from "../styles";
+import { LitElement, css, html } from "lit";
+import { panel } from "../styles.js";
 
 /**
  * List Group element displays a menu having a list of rapid actions (links, buttons).
- * 
+ *
  * Note that you may only want to use basic HTML elements (`a`, `button`) instead of Panoramax ones.
  * The list group overrides style, so using `pnx-*` component may conflict on styling.
  * @class Panoramax.components.ui.ListGroup

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 
 /**
  * ListItem is a list entry, in a Material Design fashion.

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

@@ -1,7 +1,8 @@
-import { LitElement, html, css, unsafeCSS, nothing } from "lit";
-import LogoDead from "../../img/logo_dead.svg";
-import LoaderBg from "../../img/loader_base.jpg";
-import { inRangeRandom } from "../../utils/utils";
+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;
 
 /**
  * Loader component display a full page covering for user waiting.
@@ -27,7 +28,7 @@ export default class Loader extends LitElement {
 			background-image: url('${unsafeCSS(LoaderBg)}');
 			background-repeat: no-repeat;
 			background-size: cover;
-			background-position: center; 
+			background-position: center;
 			z-index: 200;
 			font-family: var(--font-family);
 			font-weight: 550;
@@ -115,7 +116,7 @@ export default class Loader extends LitElement {
 			/**
 			 * Event when component is ready to use.
 			 * This happens when loader screen disappear, with picture and map loaded.
-			 * 
+			 *
 			 * To follow more precisely loading steps, you can also watch for sub-components `ready` events.
 			 * ```js
 			 * // Watch API-readiness
@@ -150,7 +151,7 @@ export default class Loader extends LitElement {
 
 			/**
 			 * Event for viewer failing to initially load.
-			 * 
+			 *
 			 * To follow more precisely loading failures, you can also watch for sub-components `broken` events.
 			 * ```js
 			 * // Watch API breaks

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

@@ -1,33 +1,37 @@
-import "./Map.css";
 import {
 	TILES_PICTURES_ZOOM, getThumbGif, isNullCoordinates,
-} from "../../utils/map";
-import MarkerBaseSVG from "../../img/marker.svg";
-import MarkerSelectedSVG from "../../img/marker_blue.svg";
-import SemanticsMapProtocol from "../../utils/SemanticsMapProtocol";
-import PanoraMapProtocol from "../../utils/PanoraMapProtocol";
-import { initIndoorEqualOnMap, DISABLED_LEVEL } from "../../utils/indoor";
+} from "../../utils/map.js";
+import SemanticsMapProtocol from "../../utils/SemanticsMapProtocol.js";
+import PanoraMapProtocol from "../../utils/PanoraMapProtocol.js";
+import { DISABLED_LEVEL, initIndoorEqualOnMap } from "../../utils/indoor.js";
+import MapStyles from "./Map.css" with { type: "css" };
+document.adoptedStyleSheets.push(MapStyles);
 
 // MapLibre imports
-import "maplibre-gl/dist/maplibre-gl.css";
-import maplibregl from "!maplibre-gl"; // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import maplibreglWorker from "maplibre-gl/dist/maplibre-gl-csp-worker";
+import "maplibre-gl";
+//Import maplibreglWorker from "maplibre-gl/dist/maplibre-gl-csp-worker.js";
 import * as pmtiles from "pmtiles";
-maplibregl.workerClass = maplibreglWorker;
+//Maplibregl.workerClass = maplibreglWorker;
+// eslint-disable-next-line no-undef
 maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
+// eslint-disable-next-line no-undef
 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;
+
 
 /**
  * Map is the component showing pictures and sequences geolocation.
- * 
+ *
  * Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available.
- * 
+ *
  * A more complete version of Map (with filters & themes) is available through [MapMore class](#Panoramax.components.ui.MapMore)
- * 
+ *
  * ℹ️ Many style management is done in [MapStyleComposer](#Panoramax.utils.MapStyleComposer), which is available as a property of parent component.
- * 
+ *
  * ⚠️ This class doesn't inherit from [EventTarget](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), so it doesn't have `addEventListener` and `dispatchEvent` functions.
  * It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and `fire` functions from MapLibre Map class.
  * `fire` function doesn't take directly [`Event`](https://developer.mozilla.org/fr/docs/Web/API/Event) objects, but a string and object data.
@@ -52,6 +56,7 @@ maplibregl.addProtocol("panoras", new PanoraMapProtocol().tile());
  * @example
  * const map = new Panoramax.components.ui.Map(viewer, mapNode, {center: {lat: 48.7, lng: -1.7}});
  */
+// eslint-disable-next-line no-undef
 export default class Map extends maplibregl.Map {
 	constructor(parent, container, options = {}) {
 		super({
@@ -76,6 +81,7 @@ export default class Map extends maplibregl.Map {
 		});
 
 		this._semMapProtocol = new SemanticsMapProtocol(parent);
+		// eslint-disable-next-line no-undef
 		maplibregl.addProtocol("sem", this._semMapProtocol.tile());
 		this._loadMarkerImages();
 
@@ -101,6 +107,7 @@ export default class Map extends maplibregl.Map {
 
 		initIndoorEqualOnMap(this, ![undefined, DISABLED_LEVEL].includes(this._options.level));
 
+		// eslint-disable-next-line no-undef
 		this._attribution = new maplibregl.AttributionControl({ compact: false, ...options.attributionControl });
 		this.addControl(this._attribution);
 
@@ -112,6 +119,7 @@ export default class Map extends maplibregl.Map {
 
 		// Popup
 		this._picPreviewTimer = null;
+		// eslint-disable-next-line no-undef
 		this._picPopup = new maplibregl.Popup({
 			closeButton: false,
 			closeOnClick: !this._parent.isWidthSmall(),
@@ -144,7 +152,7 @@ export default class Map extends maplibregl.Map {
 	/**
 	 * @private
 	 */
-	async _postLoad() {
+	_postLoad() {
 		this.resize();
 
 		// Map background click
@@ -276,6 +284,7 @@ export default class Map extends maplibregl.Map {
 				let bbox = this._parent?.api?.getDataBbox();
 				if(bbox) {
 					try {
+						// eslint-disable-next-line no-undef
 						bbox = new maplibregl.LngLatBounds(bbox);
 						if(this.loaded()) { this.fitBounds(bbox, { "animate": false }); }
 						else { this.waitForEnoughMapLoaded().then(() => this.fitBounds(bbox, { "animate": false })); }
@@ -373,7 +382,7 @@ export default class Map extends maplibregl.Map {
 
 	/**
 	 * Shows on map a picture position and heading.
-	 * 
+	 *
 	 * If no longitude & latitude are set, marker is removed from map.
 	 * @memberof Panoramax.components.ui.Map#
 	 * @param {number} lon The longitude
@@ -396,7 +405,7 @@ export default class Map extends maplibregl.Map {
 		else {
 			this._picMarker.remove();
 		}
-		
+
 		// Update map style to see selected sequence
 		this._parent.mapStyleComposer.updateMapStyle();
 
@@ -460,12 +469,12 @@ export default class Map extends maplibregl.Map {
 					this._attachPreviewToPictures(eCopy, gridLayerId);
 				}
 			});
-	
+
 			this.on("mouseleave", gridLayerId, () => {
 				this._dropPreview();
 				this.getCanvas().style.cursor = "";
 			});
-	
+
 			this.on("click", gridLayerId, e => {
 				e.preventDefault();
 				this.flyTo({ center: e.lngLat, zoom: TILES_PICTURES_ZOOM-6 });
@@ -482,6 +491,7 @@ export default class Map extends maplibregl.Map {
 	 */
 	_attachPreviewToPictures(e, from) {
 		let f = e.features.pop();
+		// eslint-disable-next-line eqeqeq
 		if(!f || f.properties.id == this._picPopup._picId) { return; }
 
 		clearTimeout(this._picPreviewTimer);
@@ -491,7 +501,7 @@ export default class Map extends maplibregl.Map {
 		delete this._picPopup._seqId;
 
 		if(!e.lngLat) { e.lngLat = this.getCenter(); }
-		
+
 
 		/*
 		 * Display picture preview marker
@@ -505,6 +515,7 @@ export default class Map extends maplibregl.Map {
 			// Look for nearest sequence point
 			let prevDist = null;
 			for(let i=0; i < f.geometry.coordinates.length; i++) {
+				// eslint-disable-next-line no-undef
 				let dist = e.lngLat.distanceTo(new maplibregl.LngLat(...f.geometry.coordinates[i]));
 				if(!prevDist || dist < prevDist) {
 					picPreview = {
@@ -538,7 +549,7 @@ export default class Map extends maplibregl.Map {
 		this._picPopup
 			.setLngLat(thumbCoords)
 			.addTo(this);
-		
+
 		// Only show GIF loader if thumbnail is not in browser cache
 		if(!picPreview && !this._picThumbUrl[f.properties.id]) {
 			this._picPopup.setDOMContent(getThumbGif(this._parent._t));
@@ -629,7 +640,7 @@ export default class Map extends maplibregl.Map {
 			return p ? this._parent.getAPI().findThumbnailInPictureFeature(p) : null;
 		});
 	}
-	
+
 
 	/**
 	 * Get picture thumbnail URL for a given sequence ID
@@ -706,11 +717,12 @@ export default class Map extends maplibregl.Map {
 		const img = document.createElement("img");
 		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
 		img.alt = "";
+		// eslint-disable-next-line no-undef
 		return new maplibregl.Marker({
 			element: img,
 			picId: null
 		})
-			// only picMarker could be draggable, don't for picMarkerPreview.
+			// Only picMarker could be draggable, don't for picMarkerPreview.
 			.setDraggable(selected && this._options.picMarkerDraggable)
 		;
 	}
@@ -749,10 +761,10 @@ export default class Map extends maplibregl.Map {
 		if(this._parent.psv?.getPicturesNavigation() === "pic") {
 			return;
 		}
-		
+
 		if(e.features.length > 0) {
 			let seq = e.features[0];
-			
+
 			// If clicks on many sequences, prefer the one corresponding to picture thumbnail preview
 			if(e.features.length > 1 && this._picPopup._seqId) {
 				seq = e.features.find(s => s.properties.id === this._picPopup._seqId) || seq;

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

@@ -1,17 +1,17 @@
-import Map from "./Map";
-import { SEMANTICS_OVERLAYS } from "../../utils/semantics";
-import { SEMANTICS_OVERLAY_MINZOOM, SEMANTICS_OVERLAY_MAXZOOM } from "../../utils/SemanticsMapProtocol";
+import Map from "./Map.js";
+import { SEMANTICS_OVERLAYS } from "../../utils/semantics.js";
+import { SEMANTICS_OVERLAY_MAXZOOM, SEMANTICS_OVERLAY_MINZOOM } from "../../utils/SemanticsMapProtocol.js";
 
 
 /**
  * MapMore is a more complete version of [Map UI component](#Panoramax.components.ui.Map).
- * 
+ *
  * It offers advanced features filters and semantic overlays.
- * 
+ *
  * Note that all functions of [MapLibre GL JS class Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) are also available.
- * 
+ *
  * ℹ️ Many style management is done in [MapStyleComposer](#Panoramax.utils.MapStyleComposer), which is available as a property of parent component.
- * 
+ *
  * ⚠️ This class doesn't inherit from [EventTarget](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), so it doesn't have `addEventListener` and `dispatchEvent` functions.
  * It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on) and `fire` functions from MapLibre Map class.
  * `fire` function doesn't take directly [`Event`](https://developer.mozilla.org/fr/docs/Web/API/Event) objects, but a string and object data.

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

@@ -1,22 +1,20 @@
-import "./Photo.css";
-import LoaderImgBase from "../../img/loader_base.jpg";
-import LogoDead from "../../img/logo_dead.svg";
 import {
-	getDistance, positionToXYZ, xyzToPosition,
-	getRelativeHeading, BASE_PANORAMA_ID, isNullId,
-	getRoadAbsoluteHeading,
-} from "../../utils/utils";
-import { apiFeatureToPSVNode } from "../../utils/picture";
+	BASE_PANORAMA_ID, getDistance, getRelativeHeading,
+	getRoadAbsoluteHeading, isNullId, positionToXYZ,
+	xyzToPosition,
+} from "../../utils/utils.js";
+import { apiFeatureToPSVNode } from "../../utils/picture.js";
 
 // Photo Sphere Viewer imports
-import "@photo-sphere-viewer/core/index.css";
-import "@photo-sphere-viewer/virtual-tour-plugin/index.css";
-import "@photo-sphere-viewer/gallery-plugin/index.css";
-import "@photo-sphere-viewer/markers-plugin/index.css";
-import { Viewer as PSViewer, CONSTANTS } from "@photo-sphere-viewer/core";
+import { CONSTANTS, Viewer as PSViewer } from "@photo-sphere-viewer/core";
 import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
 import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
-import PhotoAdapter from "../../utils/PhotoAdapter";
+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;
 
 
 // Default panorama (logo)
@@ -39,7 +37,7 @@ const BASE_PANORAMA_NODE = {
 	properties: {},
 };
 
-export const PSV_DEFAULT_ZOOM = 30; // eslint-disable-line import/no-unused-modules
+export const PSV_DEFAULT_ZOOM = 30;
 export const PSV_ANIM_DURATION = 250;
 export const PIC_MAX_STAY_DURATION = 3000;
 
@@ -239,6 +237,7 @@ export default class Photo extends PSViewer {
 
 		const animationDuration = this._shouldGoFast() ? 0 : Math.min(PSV_ANIM_DURATION, this._transitionDuration);
 		const animated = animationDuration > 100;
+		// eslint-disable-next-line eqeqeq
 		const following = (fromLink || fromNode?.links.find(a => a.nodeId == toNode.id)) != null;
 		const sameSequence = fromNode && toNode.sequence.id === fromNode.sequence.id;
 		const fromNodeHeading = (fromNode?.properties?.["view:azimuth"] || 0) * (Math.PI / 180);
@@ -257,6 +256,7 @@ export default class Photo extends PSViewer {
 		};
 
 		// Going to 360
+		// eslint-disable-next-line eqeqeq
 		if(toNode.horizontalFov == 360) {
 			// No previous sequence -> Point to center + no animation
 			if(!fromNode) {
@@ -277,7 +277,7 @@ export default class Photo extends PSViewer {
 						rotateTo: this.getPosition()
 					};
 					// Constant direction related to North
-					// nodeTransition.rotateTo.yaw += fromNodeHeading - toNodeHeading;
+					// NodeTransition.rotateTo.yaw += fromNodeHeading - toNodeHeading;
 				}
 			}
 		}
@@ -336,6 +336,7 @@ export default class Photo extends PSViewer {
 				picId: toNode.id,
 				lon: toNode.gps[0],
 				lat: toNode.gps[1],
+				// eslint-disable-next-line eqeqeq
 				first: this._parent._initParams?.getParentPostInit().picture == toNode.id,
 			}
 		});
@@ -464,6 +465,7 @@ export default class Photo extends PSViewer {
 		}
 
 		if(e.node.id) {
+			// eslint-disable-next-line eqeqeq
 			const isFirst = this._parent._initParams?.getParentPostInit().picture == e.node.id;
 			this._parent.select(e.node?.sequence?.id, e.node.id);
 			const picMeta = this.getPictureMetadata();
@@ -628,7 +630,7 @@ export default class Photo extends PSViewer {
 			throw new Error("No picture currently selected");
 		}
 
-		if(this._picturesNavigation == "pic") {
+		if(this._picturesNavigation === "pic") {
 			throw new Error("Pictures navigation is locked to current picture");
 		}
 
@@ -651,7 +653,7 @@ export default class Photo extends PSViewer {
 			throw new Error("No picture currently selected");
 		}
 
-		if(this._picturesNavigation == "pic") {
+		if(this._picturesNavigation === "pic") {
 			throw new Error("Pictures navigation is locked to current picture");
 		}
 
@@ -674,11 +676,11 @@ export default class Photo extends PSViewer {
 	 * @reject {Error} If no picture found
 	 */
 	async goToPosition(lat, lon) {
-		if(this._picturesNavigation == "pic") {
+		if(this._picturesNavigation === "pic") {
 			throw new Error("Pictures navigation is locked to current picture");
 		}
 
-		return this._parent.getAPI().getPicturesAroundCoordinates(lat, lon)
+		return await this._parent.getAPI().getPicturesAroundCoordinates(lat, lon)
 			.then(res => {
 				if(res.features.length > 0) {
 					const f = res.features.pop();
@@ -974,7 +976,7 @@ export default class Photo extends PSViewer {
 		// Immediate switch of navigation arrows
 		const arrows = this.container.querySelector(".psv-virtual-tour-arrows");
 		if(arrows) {
-			arrows.style.display = pn == "pic" ? "none" : null;
+			arrows.style.display = pn === "pic" ? "none" : null;
 		}
 
 		/**
@@ -1033,7 +1035,7 @@ export default class Photo extends PSViewer {
 	 */
 	toggleAllAnnotations(visible) {
 		const meta = this.getPictureMetadata();
-		const skipEvent = this._annotationsVisible == visible;
+		const skipEvent = this._annotationsVisible === visible;
 		if(!meta) {
 			this._myMarkers.clearMarkers();
 			throw new Error("No picture currently selected");
@@ -1246,7 +1248,7 @@ export default class Photo extends PSViewer {
 					style: { cursor: "grab" },
 				});
 
-				if(this._drawingAnnotation.length == 2 && this._myMarkers.markers[DRAW_ANNOT_RECT]) {
+				if(this._drawingAnnotation.length === 2 && this._myMarkers.markers[DRAW_ANNOT_RECT]) {
 					this._myMarkers.updateMarker({
 						id: DRAW_ANNOT_RECT,
 						polygon: [
@@ -1295,7 +1297,7 @@ export default class Photo extends PSViewer {
 			// Click on first vertex
 			if(this._drawingMoves !== 2 && e.marker.id === DRAW_ANNOT_1ST) {
 				// First time ? Start moving second vertex
-				if(this._drawingAnnotation.length == 0) {
+				if(this._drawingAnnotation.length === 0) {
 					this._drawingAnnotation.push({ yaw: e.marker.config.position.yaw, pitch: e.marker.config.position.pitch });
 					this.parent.removeEventListener("mousemove", firstMove);
 					this._myMarkers.updateMarker({
@@ -1331,7 +1333,7 @@ export default class Photo extends PSViewer {
 			// Click on second vertex
 			else if(this._drawingMoves !== 1 && e.marker.id === DRAW_ANNOT_2ND) {
 				// First time ? Fix rectangle
-				if(this._drawingAnnotation.length == 1) {
+				if(this._drawingAnnotation.length === 1) {
 					this._drawingAnnotation.push({ yaw: e.marker.config.position.yaw, pitch: e.marker.config.position.pitch });
 					this.parent.removeEventListener("mousemove", secMove);
 					this._myMarkers.updateMarker({
@@ -1418,7 +1420,7 @@ export default class Photo extends PSViewer {
 	fixDrawAnnotation() {
 		[DRAW_ANNOT_1ST, DRAW_ANNOT_2ND].forEach(mid => {
 			try { this._myMarkers.removeMarker(mid); }
-			catch(e) {} // eslint-disable-line no-empty
+			catch(e) {}
 		});
 		(this._drawListeners || []).forEach(l => this.parent.removeEventListener("mousemove", l));
 		this._myMarkers.removeEventListener("select-marker", this._drawListenerClick);
@@ -1441,7 +1443,7 @@ export default class Photo extends PSViewer {
 	stopDrawAnnotation() {
 		[DRAW_ANNOT_1ST, DRAW_ANNOT_2ND, DRAW_ANNOT_RECT].forEach(mid => {
 			try { this._myMarkers.removeMarker(mid); }
-			catch(e) {} // eslint-disable-line no-empty
+			catch(e) {}  
 		});
 		(this._drawListeners || []).forEach(l => this.parent.removeEventListener("mousemove", l));
 		this._myMarkers.removeEventListener("select-marker", this._drawListenerClick);

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

@@ -1,7 +1,7 @@
-import { LitElement, html, css } from "lit";
-import { fa } from "../../utils/widgets";
-import { panel, faSvg } from "../styles";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+import { LitElement, css, html } from "lit";
+import { fa } from "../../utils/widgets.js";
+import { faSvg, panel } from "../styles.js";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Popup Element displays a full overlay container.

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

@@ -1,5 +1,5 @@
-import { LitElement, html, css } from "lit";
-import { QUALITYSCORE_VALUES } from "../../utils/utils";
+import { LitElement, css, html } from "lit";
+import { QUALITYSCORE_VALUES } from "../../utils/utils.js";
 
 /**
  * Quality Score element displays the picture quality grade.
@@ -11,7 +11,7 @@ import { QUALITYSCORE_VALUES } from "../../utils/utils";
  * ```html
  * <!-- Read-only -->
  * <pnx-quality-score grade="5" ._t=${viewer._t} />
- * 
+ *
  * <!-- Input -->
  * <pnx-quality-score grade="5" input="pnx-qs-input" @change=${() => alert('changed')} ._t=${viewer._t} />
  * ```
@@ -28,7 +28,7 @@ export default class QualityScore extends LitElement {
 			align-items: center;
 			color: white;
 		}
-	
+
 		/* Single letter */
 		span, label {
 			width: 1.2em;

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

@@ -1,12 +1,11 @@
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
-import { fa, listenForMenuClosure } from "../../utils/widgets";
-import { faSvg } from "../styles";
-import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons/faMagnifyingGlass";
-import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+import { fa, listenForMenuClosure } from "../../utils/widgets.js";
+import { faSvg } from "../styles.js";
+import {
+	faCircleExclamation, faCircleNotch, faMagnifyingGlass, faXmark
+} from "@fortawesome/free-solid-svg-icons";
 
 
 /**