@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/mkdocs.yml

@@ -0,0 +1,45 @@
+site_name: 'Panoramax - Web viewer'
+site_url: https://docs.panoramax.fr
+
+theme:
+  name: material
+  logo: https://gitlab.com/panoramax/gitlab-profile/-/raw/main/images/panoramax_favicon.svg
+  features:
+    - navigation.footer
+    - navigation.tracking
+    - navigation.sections
+    - search.suggest
+    - search.share
+    - content.code.annotate
+    - content.code.copy
+    - content.code.select
+
+plugins:
+  - search
+
+markdown_extensions:
+  - admonition
+  - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - attr_list
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+
+nav:
+  - 'Quick start': '01_Start.md'
+  - Configuration:
+    - 'URL settings': '03_URL_settings.md'
+    - 'Advanced examples': '04_Advanced_examples.md'
+  - Developping:
+    - 'Where to start': '09_Develop.md'
+    - 'Viewer''s API reference': '02_Usage.md'
+    - 'STAC API compatibility': '05_Compatibility.md'
+    - 'Make a release': '90_Releases.md'

package/package.json

@@ -0,0 +1,254 @@
+{
+  "name": "@panoramax/web-viewer",
+  "version": "3.0.2-develop-a8ea8e60",
+  "description": "Panoramax web viewer for geolocated pictures",
+  "main": "build/index.js",
+  "author": "Panoramax team",
+  "scripts": {
+    "start": "node scripts/start.js",
+    "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",
+    "coverage": "node scripts/test.js --coverage --watchAll=false",
+    "trypublish": "npm publish || true"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/panoramax/clients/web-viewer"
+  },
+  "homepage": ".",
+  "keywords": [
+    "library",
+    "panoramax",
+    "pictures",
+    "geolocated"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@svgr/webpack": "^6.5.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "babel-jest": "^29.4.1",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.21.4",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "dotenv": "^16.0.2",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.33.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsdoc": "^40.0.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^29.4.1",
+    "jest-watch-typeahead": "^2.1.1",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss": "^8.4.21",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^7.0.2",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^8.0.1",
+    "prompts": "^2.4.2",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^18.2.0",
+    "react-refresh": "^0.14.0",
+    "resolve": "^1.22.1",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0",
+    "semver": "^7.3.8",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.4",
+    "terser-webpack-plugin": "^5.3.6",
+    "web-vitals": "^3.1.1",
+    "webpack": "^5.75.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-manifest-plugin": "^5.0.0",
+    "workbox-webpack-plugin": "^6.5.4"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@photo-sphere-viewer/core": "5.10.0",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.10.0",
+    "@photo-sphere-viewer/gallery-plugin": "5.10.0",
+    "@photo-sphere-viewer/markers-plugin": "5.10.0",
+    "@photo-sphere-viewer/virtual-tour-plugin": "5.10.0",
+    "documentation": "^14.0.1",
+    "maplibre-gl": "^3.6.2",
+    "pmtiles": "^2.11.0"
+  },
+  "eslintConfig": {
+    "env": {
+      "browser": true,
+      "es2021": true,
+      "node": true,
+      "jest/globals": true
+    },
+    "globals": {
+      "__COMMIT_HASH__": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+      {
+        "files": [
+          "tests/*.js"
+        ],
+        "plugins": [
+          "jest"
+        ],
+        "extends": [
+          "plugin:jest/recommended"
+        ],
+        "rules": {
+          "jest/prefer-expect-assertions": "off"
+        }
+      }
+    ],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "plugins": [
+      "jsdoc",
+      "jest",
+      "import"
+    ],
+    "rules": {
+      "indent": [
+        "error",
+        "tab"
+      ],
+      "linebreak-style": [
+        "error",
+        "unix"
+      ],
+      "quotes": [
+        "warn",
+        "double"
+      ],
+      "semi": [
+        "error",
+        "always"
+      ],
+      "import/no-unused-modules": [
+        1,
+        {
+          "unusedExports": true,
+          "ignoreExports": []
+        }
+      ]
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>"
+    ],
+    "globals": {
+      "__COMMIT_HASH__": true
+    },
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [],
+    "testMatch": [
+      "<rootDir>/tests/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+      "!(.*)": "$1"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "loose": true
+        }
+      ],
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-private-property-in-object",
+        {
+          "loose": true
+        }
+      ]
+    ]
+  }
+}

package/public/editor.html

@@ -0,0 +1,54 @@
+<!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;
+      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>
+<div id="editor" class="fullpage"></div>
+<script>
+  var editor;
+  window.onload = () => {
+    editor = new Panoramax.Editor(
+      "editor",
+      "https://api.panoramax.xyz/api",
+      {
+        selectedSequence: "561a5056-78a4-499d-9138-26b259f0765c",
+        selectedPicture: "b9c51504-b25c-40da-bb47-e696b93233fc",
+        background: "aerial",
+        raster: {
+          type: "raster",
+          tiles: [
+            "https://wxs.ign.fr/ortho/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg&STYLE=normal"
+          ],
+          attribution: "&copy; IGN",
+          tileSize: 256
+        }
+      }
+    );
+  };
+</script>
+</body>
+</html>

package/public/index.html

@@ -0,0 +1,59 @@
+<!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 JS Library</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      text-align: center;
+    }
+    .allViews {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+      align-items: flex-start;
+      gap: 10px;
+    }
+    .oneView {
+      text-align: center;
+      flex-grow: 1;
+      flex-shrink: 1;
+      min-width: 30%;
+    }
+    iframe {
+      width: 100%;
+      height: 300px;
+      border: none;
+    }
+  </style>
+</head>
+<body>
+  <noscript>
+    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>
+
+  <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>
+      <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>
+      <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>
+      <iframe src="./editor.html"></iframe>
+    </div>
+  </div>
+</body>
+</html>

package/public/map.html

@@ -0,0 +1,53 @@
+<!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 Standalone Map</title>
+  <style>
+    #map {
+      position: relative;
+      width: 95%;
+      margin: 2.5%;
+      height: 400px;
+    }
+    #map.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>
+<div id="map" class="fullpage"></div>
+<script>
+  var map;
+  window.onload = () => {
+    map = new Panoramax.StandaloneMap(
+      "map",
+      "https://api.panoramax.xyz/api",
+    );
+
+    map.addEventListener("ready", () => {
+      // Show in console selected seq/pic
+      map.addEventListener("select", e => {
+        console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
+      });
+
+      // Show in console hovered seq
+      map.addEventListener("map:sequence-hover", e => {
+        console.log("Hovered sequence", e.detail.seqId);
+      });
+    });
+  };
+</script>
+</body>
+</html>

package/public/viewer.html

@@ -0,0 +1,67 @@
+<!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 Web 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>
+<div id="viewer" class="fullpage"></div>
+<script>
+  var viewer;
+  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 = () => {
+    viewer = new Panoramax.Viewer(
+      "viewer",
+      server,
+      {
+        widgets: {
+          iframeBaseURL: "https://api.panoramax.xyz/"
+        },
+        map: {
+          startWide: true,
+          raster: {
+            type: "raster",
+            tiles: [
+              "https://wxs.ign.fr/ortho/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg&STYLE=normal"
+            ],
+            attribution: "&copy; IGN",
+            tileSize: 256
+          }
+        }
+      }
+    );
+  };
+</script>
+</body>
+</html>