@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3",
+  "version": "4.0.0-develop-39167b4d",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -9,7 +9,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "npx eslint --fix src/*.js src/**/*.js",
-    "doc": "documentation build src -f md --markdown-toc-max-depth 2 -o ./docs/02_Usage.md",
+    "doc": "node scripts/doc.js",
     "coverage": "node scripts/test.js --coverage --watchAll=false",
     "trypublish": "npm publish || true"
   },
@@ -60,6 +60,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^29.4.1",
     "jest-watch-typeahead": "^2.1.1",
+    "jsdoc-to-markdown": "^9.1.1",
     "mini-css-extract-plugin": "^2.7.2",
     "postcss": "^8.4.21",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -88,17 +89,20 @@
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@photo-sphere-viewer/core": "5.11.0-beta.1",
-    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.11.0-beta.1",
-    "@photo-sphere-viewer/gallery-plugin": "5.11.0-beta.1",
-    "@photo-sphere-viewer/markers-plugin": "5.11.0-beta.1",
-    "@photo-sphere-viewer/virtual-tour-plugin": "5.11.0-beta.1",
-    "documentation": "^14.0.1",
-    "maplibre-gl": "^4.7.1",
-    "pmtiles": "^3.2.0"
+    "@fontsource/atkinson-hyperlegible-next": "^5.2.2",
+    "@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.12.1",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.12.1",
+    "@photo-sphere-viewer/gallery-plugin": "5.12.1",
+    "@photo-sphere-viewer/markers-plugin": "5.12.1",
+    "@photo-sphere-viewer/virtual-tour-plugin": "5.12.1",
+    "json5": "^2.2.3",
+    "lit": "^3.2.1",
+    "maplibre-gl": "^5.3.0",
+    "pmtiles": "^4.3.0",
+    "query-selector-shadow-dom": "^1.0.1"
   },
   "eslintConfig": {
     "env": {
@@ -188,10 +192,11 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
-    "setupFilesAfterEnv": [],
+    "setupFilesAfterEnv": [
+      "<rootDir>/config/jest/mocks.js"
+    ],
     "testMatch": [
-      "<rootDir>/tests/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}"
+      "<rootDir>/tests/**/*.test.js"
     ],
     "testEnvironment": "jsdom",
     "transform": {
@@ -252,4 +257,4 @@
       ]
     ]
   }
-}
+}

package/public/editor.html

@@ -13,10 +13,7 @@
     }
     #editor.fullpage {
       position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       height: unset;
       width: unset;
       margin: 0;
@@ -27,30 +24,25 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="editor" class="fullpage"></div>
-<script>
-  var editor;
-  window.onload = () => {
-    editor = new Panoramax.Editor(
-      "editor",
-      "https://panoramax.openstreetmap.fr/api",
-      {
-        selectedSequence: "ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8",
-        selectedPicture:  "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_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-          ],
-          minzoom: 0,
-          maxzoom: 21,
-          attribution: "&copy; IGN",
-          tileSize: 256
-        }
-      }
-    );
-  };
-</script>
+
+<pnx-editor
+  id="editor"
+  class="fullpage"
+  endpoint="https://panoramax.openstreetmap.fr/api"
+  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_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+    ],
+    minzoom: 0,
+    maxzoom: 21,
+    attribution: "&copy; IGN",
+    tileSize: 256
+  }'
+></pnx-editor>
+
 </body>
 </html>

package/public/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <title>Panoramax JS Library</title>
   <style>
     body {
@@ -18,9 +18,8 @@
     }
     .oneView {
       text-align: center;
-      flex-grow: 1;
-      flex-shrink: 1;
-      min-width: 30%;
+      flex: 1;
+      min-width: 400px;
     }
     iframe {
       width: 100%;
@@ -34,24 +33,30 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <h1>Panoramax JavaScript Client</h1>
-  <p>Panoramax JS library offers different views to suit your needs.</p>
+  <p>Panoramax JS library offers different views to suit your needs.<br />You can also give a look at the <a href="./widgets.html">widgets test page</a>.</p>
 
   <div class="allViews">
     <div class="oneView">
-      <h2 id="viewer">Viewer</h2>
-      <p>General-purpose map and picture display.<br /><a href="./viewer.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#viewer">Docs</a></p>
+      <h2>Viewer</h2>
+      <p>General-purpose map and picture display.<br /><a href="./viewer.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Viewer/">Docs</a></p>
       <iframe src="./viewer.html?server=meta"></iframe>
     </div>
 
     <div class="oneView">
-      <h2 id="map">Standalone Map</h2>
-      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#standalonemap">Docs</a></p>
+      <h2>Photo Viewer</h2>
+      <p>Picture-only display.<br /><a href="./photo.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/PhotoViewer/">Docs</a></p>
+      <iframe src="./photo.html?server=meta"></iframe>
+    </div>
+
+    <div class="oneView">
+      <h2>Coverage Map</h2>
+      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/CoverageMap/">Docs</a></p>
       <iframe src="./map.html"></iframe>
     </div>
 
     <div class="oneView">
-      <h2 id="editor">Editor</h2>
-      <p>A map and picture view, focused around metadata editing.<br /><a href="./editor.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#editor">Docs</a></p>
+      <h2>Editor</h2>
+      <p>A map and picture view, focused around metadata editing.<br /><a href="./editor.html">Full page</a> | <a href="https://viewer.geovisio.fr/docs/reference/components/core/Editor/">Docs</a></p>
       <iframe src="./editor.html"></iframe>
     </div>
   </div>

package/public/map.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Panoramax Standalone Map</title>
+  <title>Panoramax Coverage Map</title>
   <style>
     #map {
       position: relative;
@@ -27,27 +27,28 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="map" class="fullpage"></div>
+
+<pnx-coverage-map
+  id="coverage"
+  class="fullpage"
+  endpoint="https://api.panoramax.xyz/api"
+/>
+
 <script>
-  var map;
-  window.onload = () => {
-    map = new Panoramax.StandaloneMap(
-      "map",
-      "https://api.panoramax.xyz/api",
-    );
+  // Retrieve component from DOM
+  var coverage = document.getElementById("coverage");
 
-    map.addEventListener("ready", () => {
-      // Show in console selected seq/pic
-      map.addEventListener("select", e => {
-        console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
-      });
+  coverage.addEventListener("ready", () => {
+    // Listen to sequence hovered on map
+    coverage.map.on("sequence-hover", e => {
+      console.log("Hovered sequence", e.seqId);
+    });
 
-      // Show in console hovered seq
-      map.addEventListener("map:sequence-hover", e => {
-        console.log("Hovered sequence", e.detail.seqId);
-      });
+    // Listen to user clicks on map
+    coverage.addEventListener("select", e => {
+      console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
     });
-  };
+  }, {once: true});
 </script>
 </body>
 </html>

package/public/photo.html

@@ -0,0 +1,55 @@
+<!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 Photo Viewer</title>
+  <style>
+    #viewer {
+      position: relative;
+      width: 95%;
+      margin: 2.5%;
+      height: 400px;
+    }
+    #viewer.fullpage {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: unset;
+      width: unset;
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
+
+<pnx-photo-viewer
+  id="viewer"
+  class="fullpage"
+  sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
+  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
+/>
+
+<script>
+  var servers = {
+    meta: "https://api.panoramax.xyz/api",
+    ign: "https://panoramax.ign.fr/api",
+    osm: "https://panoramax.openstreetmap.fr/api",
+    local: "http://localhost:5000/api",
+    dev: "https://panoramax.codeureusesenliberte.fr/api",
+  };
+  var urlParams = new URLSearchParams(window.location.search);
+  var server = servers[urlParams.get("server") || "meta"];
+
+  window.onload = () => {
+    var viewer = document.getElementById("viewer");
+    viewer.setAttribute("endpoint", server);
+  };
+</script>
+</body>
+</html>

package/public/viewer.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <title>Panoramax Web Viewer</title>
   <style>
     #viewer {
@@ -27,9 +27,25 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="viewer" class="fullpage"></div>
+
+<pnx-viewer
+  id="viewer"
+  class="fullpage"
+  map='{
+    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_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+      ],
+      minzoom: 0,
+      maxzoom: 21,
+      attribution: "&copy; IGN",
+      tileSize: 256
+    }
+  }'
+/>
+
 <script>
-  var viewer;
   var servers = {
     meta: "https://api.panoramax.xyz/api",
     ign: "https://panoramax.ign.fr/api",
@@ -41,28 +57,8 @@
   var server = servers[urlParams.get("server") || "meta"];
 
   window.onload = () => {
-    viewer = new Panoramax.Viewer(
-      "viewer",
-      server,
-      {
-        widgets: {
-          iframeBaseURL: "https://api.panoramax.xyz/"
-        },
-        map: {
-          startWide: true,
-          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_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-            ],
-            minzoom: 0,
-            maxzoom: 21,
-            attribution: "&copy; IGN",
-            tileSize: 256
-          }
-        }
-      }
-    );
+    var viewer = document.getElementById("viewer");
+    viewer.setAttribute("endpoint", server);
   };
 </script>
 </body>