@panoramax/web-viewer 4.1.0-develop-c921ed43 → 4.1.0-develop-c175bf43

package/config/paths.js

@@ -56,6 +56,7 @@ module.exports = {
   appHtmlPhotoViewer: resolveApp('public/photo.html'),
   appHtmlWidgets: resolveApp('public/widgets.html'),
   appLibIndexJs: resolveModule(resolveApp, 'src/index'),
+  appLibPhotoViewerJs: resolveModule(resolveApp, 'src/index_photoviewer'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appSrcLib: resolveApp('src'),

package/config/webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -211,6 +212,34 @@ module.exports = function (webpackEnv) {
     return loaders;
   };
 
+  const getHtmlPlugin = (filename, template) => new HtmlWebpackPlugin(
+    Object.assign(
+      {},
+      {
+        inject: true,
+        filename: filename,
+        template: template,
+        chunks: ["index"],
+      },
+      isEnvProduction
+        ? {
+            minify: {
+              removeComments: true,
+              collapseWhitespace: true,
+              removeRedundantAttributes: true,
+              useShortDoctype: true,
+              removeEmptyAttributes: true,
+              removeStyleLinkTypeAttributes: true,
+              keepClosingSlash: true,
+              minifyJS: true,
+              minifyCSS: true,
+              minifyURLs: true,
+            },
+          }
+        : undefined
+    )
+  );
+
   return {
     target: ['browserslist'],
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
@@ -223,7 +252,10 @@ module.exports = function (webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: paths.appLibIndexJs,
+    entry: Object.assign(
+      { index: paths.appLibIndexJs },
+      isEnvProduction ? { photoviewer: paths.appLibPhotoViewerJs } : {},
+    ),
     output: {
       globalObject: 'this',
       // The build folder.
@@ -233,7 +265,7 @@ module.exports = function (webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: isEnvProduction
-        ? 'index.js'
+        ? '[name].js'
         : isEnvDevelopment && 'static/js/bundle.js',
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
@@ -608,168 +640,15 @@ module.exports = function (webpackEnv) {
       new webpack.DefinePlugin({
         __COMMIT_HASH__: JSON.stringify(commitHash)
       }),
-      // isEnvDevelopment &&
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // isEnvDevelopment &&
-      // Generates a `map.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            filename: "map.html",
-            template: paths.appHtmlMap,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // isEnvDevelopment &&
-      // Generates a `map.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            filename: "editor.html",
-            template: paths.appHtmlEditor,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // isEnvDevelopment &&
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            filename: "viewer.html",
-            template: paths.appHtmlViewer,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            filename: "widgets.html",
-            template: paths.appHtmlWidgets,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            filename: "photo.html",
-            template: paths.appHtmlPhotoViewer,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
+
+      // HTML demo pages
+      getHtmlPlugin("index.html", paths.appHtml),
+      getHtmlPlugin("map.html", paths.appHtmlMap),
+      getHtmlPlugin("editor.html", paths.appHtmlEditor),
+      getHtmlPlugin("viewer.html", paths.appHtmlViewer),
+      getHtmlPlugin("photo.html", paths.appHtmlPhotoViewer),
+      getHtmlPlugin("widgets.html", paths.appHtmlWidgets),
+
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
       // https://github.com/facebook/create-react-app/issues/5358
@@ -807,7 +686,7 @@ module.exports = function (webpackEnv) {
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
-          filename: 'index.css',
+          filename: '[name].css',
           chunkFilename: 'index.[contenthash:8].chunk.css',
         }),
       // Generate an asset manifest file with the following content:

package/docs/index.md

@@ -31,9 +31,9 @@ Many options are available for installing the viewer.
 	You can rely on various providers offering hosted NPM packages, for example JSDelivr.
 
 	```html
-	<!-- You may use another version than 4.0.0, just change the release in URL -->
-	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.css" />
-	<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.js"></script>
+	<!-- You may use another version than 4.1.0, just change the release in URL -->
+	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.1.0/build/index.css" />
+	<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.1.0/build/index.js"></script>
 	```
 
 === ":material-code-tags: Source code"
@@ -62,6 +62,10 @@ First, you need to import Panoramax code:
 	<!-- Change the actual path depending of where you installed the library -->
 	<link rel="stylesheet" type="text/css" href="web-viewer/build/index.css" />
 	<script src="web-viewer/build/index.js"></script>
+
+	<!-- You can use the lightweight version with only PhotoViewer as well -->
+	<link rel="stylesheet" type="text/css" href="web-viewer/build/photoviewer.css" />
+	<script src="web-viewer/build/photoviewer.js"></script>
 	```
 
 === ":fontawesome-brands-node-js: New-style JS"
@@ -73,6 +77,13 @@ First, you need to import Panoramax code:
 	import '@panoramax/web-viewer/build/index.css';
 	```
 
+	If you prefer the lightweight version, only containing PhotoViewer component:
+
+	```js
+	import Panoramax from '@panoramax/web-viewer/build/photoviewer';
+	import '@panoramax/web-viewer/build/photoviewer.css';
+	```
+
 Once ready, you can create for example a viewer. We use web components to do so, you can create it in HTML or in other web components:
 
 ```html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.1.0-develop-c921ed43",
+  "version": "4.1.0-develop-c175bf43",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -93,11 +93,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@photo-sphere-viewer/core": "5.13.3",
-    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.13.3",
-    "@photo-sphere-viewer/gallery-plugin": "5.13.3",
-    "@photo-sphere-viewer/markers-plugin": "5.13.3",
-    "@photo-sphere-viewer/virtual-tour-plugin": "5.13.3",
+    "@photo-sphere-viewer/core": "5.13.4",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.13.4",
+    "@photo-sphere-viewer/gallery-plugin": "5.13.4",
+    "@photo-sphere-viewer/markers-plugin": "5.13.4",
+    "@photo-sphere-viewer/virtual-tour-plugin": "5.13.4",
     "iconify-icon": "^3.0.0",
     "json5": "^2.2.3",
     "lit": "^3.2.1",

package/src/components/core/Basic.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import API from "../../utils/API";
 import { getTranslations } from "../../utils/i18n";
-import { DEFAULT_TILES } from "../../utils/map";
+import { MapTiles } from "../../utils/services";
 import { createWebComp } from "../../utils/widgets";
 import { isInIframe, isInternetFast } from "../../utils/utils";
 import JSON5 from "json5";
@@ -57,7 +57,7 @@ export default class Basic extends LitElement {
 
 		// Some defaults
 		this.users = ["geovisio"];
-		this.mapstyle = this.getAttribute("mapstyle") || DEFAULT_TILES;
+		this.mapstyle = this.getAttribute("mapstyle") || MapTiles();
 		this.lang = this.getAttribute("lang") || null;
 		this.endpoint = this.getAttribute("endpoint") || null; // No default
 		this.picture = this.getAttribute("picture") || null;

package/src/components/core/Viewer.js

@@ -14,7 +14,6 @@ import { querySelectorDeep } from "query-selector-shadow-dom";
 import { default as InitParameters, alterMapState, alterViewerState } from "../../utils/InitParameters";
 
 
-export const PSV_ZOOM_DELTA = 20;
 const MAP_MOVE_DELTA = 100;
 
 

package/src/components/index.js

@@ -7,7 +7,7 @@
 
 import * as core from "./core";
 import * as layout from "./layout";
-import * as menus from "./menus";
-import * as ui from "./ui";
+import * as menus from "./menus/index";
+import * as ui from "./ui/index";
 
 export {core, layout, menus, ui};

package/src/components/index_photoviewer.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+import * as layout from "./layout";
+import * as menus from "./menus/index_photoviewer";
+import * as ui from "./ui/index_photoviewer";
+
+export {layout, menus, ui};

package/src/components/menus/index_photoviewer.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+export {default as AnnotationsList} from "./AnnotationsList";
+export {default as PictureLegend} from "./PictureLegend";
+export {default as PictureMetadata} from "./PictureMetadata";
+export {default as PlayerOptions} from "./PlayerOptions";
+export {default as QualityScoreDoc} from "./QualityScoreDoc";
+export {default as ReportForm} from "./ReportForm";
+export {default as SemanticsMetadata} from "./SemanticsMetadata";
+export {default as Share} from "./Share";

package/src/components/ui/Photo.js

@@ -93,6 +93,7 @@ export default class Photo extends PSViewer {
 				baseBlur: false,
 				resolution: parent.isWidthSmall() ? 32 : 64,
 				shouldGoFast: options.shouldGoFast,
+				useXmpData: false,
 			}],
 			withCredentials: parent.api._getPSVWithCredentials(),
 			requestHeaders: parent?.fetchOptions?.headers,

package/src/components/ui/index.js

@@ -22,5 +22,5 @@ export {default as SearchBar} from "./SearchBar";
 export {default as SemanticsEditor} from "./SemanticsEditor";
 export {default as SemanticsTable} from "./SemanticsTable";
 export {default as TogglableGroup} from "./TogglableGroup";
-import * as widgets from "./widgets";
+import * as widgets from "./widgets/index";
 export {widgets};

package/src/components/ui/index_photoviewer.js

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

package/src/components/ui/widgets/Zoom.js

@@ -1,6 +1,6 @@
 import { LitElement, html } from "lit";
 import { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../Photo";
-import { PSV_ZOOM_DELTA } from "../../core/Viewer";
+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";

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

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+export {default as CopyCoordinates} from "./CopyCoordinates";
+export {default as Legend} from "./Legend";
+export {default as OSMEditors} from "./OSMEditors";
+export {default as PictureLegendActions} from "./PictureLegendActions";
+export {default as Player} from "./Player";
+export {default as Zoom} from "./Zoom";

package/src/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unused-modules */
 
-export * as components from "./components";
-export * as utils from "./utils";
+export * as components from "./components/index";
+export * as utils from "./utils/index";
 export {default as Viewer} from "./components/core/Viewer";
 export {default as CoverageMap} from "./components/core/CoverageMap";
 export {default as Editor} from "./components/core/Editor";

package/src/index_photoviewer.js

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+export * as components from "./components/index_photoviewer";
+export * as utils from "./utils/index_photoviewer";
+export {default as PhotoViewer} from "./components/core/PhotoViewer";

package/src/utils/API.js

@@ -1,6 +1,8 @@
-import { TILES_PICTURES_ZOOM } from "./map";
 import { isNullId } from "./utils";
 
+// Do not use ./map import to avoid bundling Maplibre for PhotoViewer
+const TILES_PICTURES_ZOOM = 15;
+
 /**
  * API contains various utility functions to communicate with Panoramax/STAC API
  *

package/src/utils/geocoder.js

@@ -1,6 +1,3 @@
-// DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import maplibregl from "!maplibre-gl";
-
 import { NominatimBaseUrl, AdresseDataGouvBaseURL } from "./services";
 
 const PLACETYPE_ZOOM =  {
@@ -58,7 +55,7 @@ export function forwardGeocodingNominatim(config) {
 					finalRes.features.push({
 						place_type: ["place"],
 						place_name: plname,
-						center: new maplibregl.LngLat(...f.geometry.coordinates),
+						center: f.geometry.coordinates,
 						zoom: PLACETYPE_ZOOM[f.properties?.geocoding?.type],
 					});
 					listedNames.push(plname);
@@ -195,7 +192,7 @@ export function forwardGeocodingStandard(config, endpoint) {
 					finalRes.features.push({
 						place_type: ["place"],
 						place_name: plname,
-						center: new maplibregl.LngLat(...f.geometry.coordinates),
+						center: f.geometry.coordinates,
 						zoom: PLACETYPE_ZOOM[f.properties.type],
 					});
 					listedNames.push(plname);

package/src/utils/index_photoviewer.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+import * as i18n from "./i18n";
+import * as picture from "./picture";
+import * as semantics from "./semantics";
+import * as services from "./services";
+import * as utils from "./utils";
+import * as widgets from "./widgets";
+
+export { i18n, picture, semantics, services, utils, widgets };
+export {default as API} from "./API";
+export {default as PhotoAdapter} from "./PhotoAdapter";
+export {default as PresetsManager} from "./PresetsManager";
+export {default as URLHandler} from "./URLHandler";

package/src/utils/map.js

@@ -3,7 +3,6 @@ import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUAL
 import { autoDetectLocale } from "./i18n";
 import { isNullId } from "./utils";
 
-export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "pnx-aerial";
 
 export const TILES_PICTURES_ZOOM = 15;

package/src/utils/picture.js

@@ -143,10 +143,11 @@ export function getSphereCorrection(picture) {
 /**
  * Compute PSV panoData for cropped panorama based on picture metadata & EXIF tags.
  * @param {object} picture The GeoJSON picture feature
+ * @param {object} [img] The loaded image file, with width, height properties for possible resizing
  * @returns {object} The PSV panoData values
  * @private
  */
-export function getCroppedPanoData(picture) {
+export function getCroppedPanoData(picture, img) {
 	let res;
 
 	if(picture.properties?.["pers:interior_orientation"]) {
@@ -182,6 +183,10 @@ export function getCroppedPanoData(picture) {
 				croppedWidth: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaImageWidthPixels"]),
 				croppedHeight: parseInt(picture.properties.exif?.["Xmp.GPano.CroppedAreaImageHeightPixels"]),
 			};
+
+			// Fix images with cropped size higher than full size
+			if(res.croppedWidth > res.fullWidth) { res.fullWidth = res.croppedWidth; }
+			if(res.croppedHeight > res.fullHeight) { res.fullHeight = res.croppedHeight; }
 		}
 		catch(e) {
 			console.warn("Invalid XMP.GPano values for cropped panorama "+picture.id);
@@ -201,6 +206,19 @@ export function getCroppedPanoData(picture) {
 		}
 	}
 
+	// Resize if image given
+	if(res?.fullWidth && img?.width) {
+		let ratio = img.width / (res?.croppedWidth || res.fullWidth);
+		res = {
+			fullWidth: res.fullWidth !== undefined ? Math.floor(res.fullWidth * ratio) : undefined,
+			fullHeight: res.fullHeight !== undefined ? Math.floor(res.fullHeight * ratio) : undefined,
+			croppedWidth: res.croppedWidth !== undefined ? Math.floor(res.croppedWidth * ratio) : undefined,
+			croppedHeight: res.croppedHeight !== undefined ? Math.floor(res.croppedHeight * ratio) : undefined,
+			croppedX: res.croppedX !== undefined ? Math.floor(res.croppedX * ratio) : undefined,
+			croppedY: res.croppedY !== undefined ? Math.floor(res.croppedY * ratio) : undefined,
+		};
+	}
+
 	return res || {};
 }
 
@@ -326,7 +344,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 			origBaseUrl: fastInternet ? hdUrl : baseUrl,
 			hdUrl,
 			thumbUrl,
-			basePanoData: croppedPanoData,
+			basePanoData: fastInternet ? croppedPanoData : (img) => getCroppedPanoData(f, img),
 			// This is only to mock loading of tiles (which are not available for flat pictures)
 			cols: 2, rows: 1, width: 2, tileUrl: () => null
 		};

package/src/utils/services.js

@@ -4,6 +4,14 @@
  */
 
 
+/**
+ * Default map background tiles
+ * @returns {string} The website URL
+ */
+export function MapTiles() {
+	return "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
+}
+
 /**
  * Panoramax website URL
  * @returns {string} The website URL

package/tests/utils/__snapshots__/geocoder.test.js.snap

@@ -4,10 +4,10 @@ exports[`forwardGeocodingBAN works 1`] = `
 Object {
   "features": Array [
     Object {
-      "center": Object {
-        "lat": 47.8,
-        "lng": -1.7,
-      },
+      "center": Array [
+        2.290084,
+        49.897443,
+      ],
       "place_name": "8 Boulevard du Port, Amiens",
       "place_type": Array [
         "place",
@@ -22,10 +22,10 @@ exports[`forwardGeocodingNominatim works 1`] = `
 Object {
   "features": Array [
     Object {
-      "center": Object {
-        "lat": 47.8,
-        "lng": -1.7,
-      },
+      "center": Array [
+        2.3483915,
+        48.8534951,
+      ],
       "place_name": "Paris, Île-de-France",
       "place_type": Array [
         "place",