@geops/rvf-mobility-web-component 0.1.9 → 0.1.11

package/.github/CODEOWNERS

@@ -0,0 +1,37 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*       @danji90 @friedjoff @oterral 
+
+# Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+# *.js    @js-owner
+
+# You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+# *.go docs@example.com
+
+# In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+# /build/logs/ @doctocat
+
+# The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+# docs/*  docs@example.com
+
+# In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+# apps/ @octocat
+
+# In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository.
+# /docs/ @doctocat

package/.github/workflows/conventional-pr-title.yml

@@ -0,0 +1,36 @@
+name: Check PR title
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+# permissions for dependabot PRs
+permissions:
+  actions: read
+  checks: read
+  contents: read
+  deployments: read
+  id-token: write
+  issues: read
+  discussions: read
+  packages: read
+  pages: read
+  pull-requests: read
+  repository-projects: read
+  security-events: read
+  statuses: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: aslafy-z/conventional-pr-title-action@v3
+        with:
+          success-state: Title follows the specification.
+          failure-state: Title does not follow the specification.
+          context-name: conventional-pr-title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/CHANGELOG.md

@@ -2,6 +2,61 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.11](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.10...v0.1.11) (2024-12-17)
+
+
+### Features
+
+* add and hide pois layer ([f99d82a](https://github.com/geops/rvf-mobility-web-component/commit/f99d82a944d9daeb0acae9b0c3519cb8bbb608d7))
+* add copyright in export and add feature details on click ([#10](https://github.com/geops/rvf-mobility-web-component/issues/10)) ([3e2ed59](https://github.com/geops/rvf-mobility-web-component/commit/3e2ed597c374e2edfb2d1a8e4b3afe0e4dc80e0a))
+* add custom click listener ([74de9e4](https://github.com/geops/rvf-mobility-web-component/commit/74de9e42125ee068147d67a17324ba06fd1727a1))
+* add export pdf ([#7](https://github.com/geops/rvf-mobility-web-component/issues/7)) ([3409f8b](https://github.com/geops/rvf-mobility-web-component/commit/3409f8baf257dcacc3c823355209e3c44214a31b))
+* add rvf context and rvf print menu button ([37f6ddf](https://github.com/geops/rvf-mobility-web-component/commit/37f6ddfcec4a950539c41178575dc841c5824252))
+* added layers tree component ([#9](https://github.com/geops/rvf-mobility-web-component/issues/9)) ([ceb0220](https://github.com/geops/rvf-mobility-web-component/commit/ceb022025eeb7b4cf25ff9a38afe8950b7d1d651))
+
+
+### Bug Fixes
+
+* add better types ([c5ddf70](https://github.com/geops/rvf-mobility-web-component/commit/c5ddf7041036ab1c5e702b6d6c702bf9747df396))
+* add lonlat to singleclick event ([786c79b](https://github.com/geops/rvf-mobility-web-component/commit/786c79bdd2fae619c522f635217684c05347bfe9))
+* add mobidata bw layers as a group ([2aab2a5](https://github.com/geops/rvf-mobility-web-component/commit/2aab2a570c3e6214830895c146a5a95836a75516))
+* add selected state ([ea6e84e](https://github.com/geops/rvf-mobility-web-component/commit/ea6e84ee265d734a502e5e2299571bd977133433))
+* create a correct layer tree ([1d886b5](https://github.com/geops/rvf-mobility-web-component/commit/1d886b588821467db431bddc45821ba21b471946))
+* dispatch event on html element ([e36f61d](https://github.com/geops/rvf-mobility-web-component/commit/e36f61d8295193896aba57694a4de0141aa8d0f8))
+* display the copyright after an export ([cb957b7](https://github.com/geops/rvf-mobility-web-component/commit/cb957b71a528a2ad466e8bc0f0a1ddf8eb844920))
+* hide print menu for now ([43dc47f](https://github.com/geops/rvf-mobility-web-component/commit/43dc47fc3ba17f8af10b057d61cce33268ffdba6))
+* improve demo ([3ca67ea](https://github.com/geops/rvf-mobility-web-component/commit/3ca67eacf74b89cd396a66706b111d0e9d8963a0))
+* improve demo ([1ed0b7e](https://github.com/geops/rvf-mobility-web-component/commit/1ed0b7e078b23c1bc3d1bbe1743d45b318b129b5))
+* make realtime use the map pixel ratio ([dce1004](https://github.com/geops/rvf-mobility-web-component/commit/dce1004f9d945d5cd260e41660a71d49ce684e18))
+* manage boolean attributes ([be816a9](https://github.com/geops/rvf-mobility-web-component/commit/be816a9f005a6979af1b0bf02034e9fe1bb22218))
+* memoize onselect callback ([1d7e739](https://github.com/geops/rvf-mobility-web-component/commit/1d7e739e08da0d8d2ebb6594f83abdf9a655e658))
+* remove useless xyz ([926cca7](https://github.com/geops/rvf-mobility-web-component/commit/926cca7e235265ccc6ab1ffb8241aa65454500e0))
+* use also input.css for components ([1284687](https://github.com/geops/rvf-mobility-web-component/commit/128468703b3e1f50b851050870205364f43e5def))
+* use memo ([0a3f107](https://github.com/geops/rvf-mobility-web-component/commit/0a3f1074bbc75b371c6375f91a9c9975a9627ed4))
+* use proper rendercomplete event ([8cd5136](https://github.com/geops/rvf-mobility-web-component/commit/8cd51362b012bd7ce482355a11a6007ca705a12a))
+
+### [0.1.10](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.9...v0.1.10) (2024-12-05)
+
+
+### Features
+
+* add conventional pr title workflow ([711af06](https://github.com/geops/rvf-mobility-web-component/commit/711af0666a0882050f5e8aa9b5d8bb09c0e7d1c2))
+* add extent and maxextent attribute ([89675e0](https://github.com/geops/rvf-mobility-web-component/commit/89675e09cbbfd07e1a0c19accdb6eb226b335392))
+* add wfs layer ([#5](https://github.com/geops/rvf-mobility-web-component/issues/5)) ([48aa20c](https://github.com/geops/rvf-mobility-web-component/commit/48aa20cf07f50e3cd1cde977e462d617e824c5b5))
+* add zoom buttons ([#6](https://github.com/geops/rvf-mobility-web-component/issues/6)) ([25c7574](https://github.com/geops/rvf-mobility-web-component/commit/25c75749cce225b5c331191a46e2455f1e3141b7))
+
+
+### Bug Fixes
+
+* add extent and maxexten in doc and update deps ([aae94c4](https://github.com/geops/rvf-mobility-web-component/commit/aae94c47562b6ae3d797a6d114978c294836cf67))
+* block extent on rvf data ([1d77f73](https://github.com/geops/rvf-mobility-web-component/commit/1d77f736e6177f3999df1750c56e4abd9011649f))
+* constrain only center when maxextent is defined ([47c3ba8](https://github.com/geops/rvf-mobility-web-component/commit/47c3ba8a2c9f48a2fcc3f2d87757ab71aded22a1))
+* constraint to max extent ([a052df1](https://github.com/geops/rvf-mobility-web-component/commit/a052df1378e5478fc48c90908400f58394501baf))
+* constraint to max extent ([8d113e6](https://github.com/geops/rvf-mobility-web-component/commit/8d113e6f139d8b8fe3950e4d894f673b41e750f0))
+* fix default css in code example ([85f5ce9](https://github.com/geops/rvf-mobility-web-component/commit/85f5ce957f74c8a0c5f1939180bbe3dab9c71ff3))
+* remove default value ([0a2e48a](https://github.com/geops/rvf-mobility-web-component/commit/0a2e48ad70e6d93e8281fab5eee92e2540bfc9f3))
+* use maps prod url ([d3bb0d2](https://github.com/geops/rvf-mobility-web-component/commit/d3bb0d22aac819d866c3fe02ab8373f7743197f4))
+
 ### [0.1.9](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.8...v0.1.9) (2024-12-04)
 
 

package/README.md

@@ -34,8 +34,10 @@ Here an exhaustive list of the `<geops-mobility>` web component attributes avail
 - [`apikey="YOUR_API_KEY"`](https://mobility-web-component.geops.io/?apikey=YOUR_API_KEY): your [geOps API key](https://developer.geops.io/).
 - [`baselayer="travic_v2"`](https://mobility-web-component.geops.io/?baselayer=travic_v2): the style's name from the [geOps Maps API](https://developer.geops.io/apis/maps) (base_dark_v2, base_bright_v2, ...). Default to `travic_v2`.
 - [`center="831634,5933959"`](https://mobility-web-component.geops.io/?center=831634,5933959): the center of the map in EPSG:3857 coordinates. Default to `831634,5933959` (Bern).
+- [`extent="830634,5923959,831634,5933959"`](https://mobility-web-component.geops.io/?extent=830634,5923959,831634,5933959): the extent of the map of the map in EPSG:3857 coordinates. It has the priority over `center` and `zoom` attributes.
 - [`geolocation="false"`](https://mobility-web-component.geops.io/?geolocation=false): display the geolocation button or not (true or false). Default to true.
-- [`mapsurl="https://maps.geops.io"`](https://mobility-web-component.geops.io/?mapsurl=https://maps.geops.io): the [geOps Maps API](https://developer.geops.io/apis/maps) url to use. Default to `https://maps.geops.io`.
+- [`mapsurl="https://maps.geops.io"`](https://mobility-web-component.geops.io/?mapsurl=https://maps.geops.io): the [geOps Maps API](https://developer.geops.io/apis/maps) url to use.Default to `https://maps.geops.io`.
+- [`maxextent="830634,5923959,831634,5933959"`](https://mobility-web-component.geops.io/?extent=830634,5923959,831634,5933959): constraint the map in a specific extent  in EPSG:3857 coordinates, the user can not navigate outside this extent.
 - [`maxzoom="14"`](https://mobility-web-component.geops.io/?maxzoom=14): define the max zoom level of the map.
 - [`minzoom="2"`](https://mobility-web-component.geops.io/?minzoom=2): define the min zoom level of the map.
 - [`mots="rail,bus"`](https://mobility-web-component.geops.io/?mots=rail,bus): list of commas separated mots to display on the Realtime layer ( rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car).

package/doc/package.json

@@ -7,10 +7,10 @@
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@geops/geops-ui": "^0.3.4",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
     "@mui/material-nextjs": "^6.1.9",
-    "@mui/styles": "^6.1.9",
+    "@mui/styles": "^6.1.10",
     "next": "15.0.3",
     "prismjs": "^1.29.0",
     "react": "^18",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^8",
@@ -28,7 +28,7 @@
     "eslint-config-prettier": "^9.1.0",
     "generact": "^0.4.0",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2"
   },
   "scripts": {

package/doc/src/app/components/GeopsMobilityDoc.tsx

@@ -36,6 +36,16 @@ const attrsConfig: Record<string, AttrConfig> = {
     ),
     type: "textfield",
   },
+  extent: {
+    description: (
+      <Typography>
+        The extent of the map in EPSG:3857 coordinates (ex:
+        830634,5923959,831634,5933959). It has the priority over center and zoom
+        attributes.
+      </Typography>
+    ),
+    type: "textfield",
+  },
   geolocation: {
     defaultValue: "true",
     description: (
@@ -54,6 +64,15 @@ const attrsConfig: Record<string, AttrConfig> = {
     ),
     type: "textfield",
   },
+  maxextent: {
+    description: (
+      <Typography>
+        Constraint the map in a specific extent in EPSG:3857 coordinates, the
+        user can not navigate outside this extent.
+      </Typography>
+    ),
+    type: "textfield",
+  },
   maxzoom: {
     description: <Typography>Define the max zoom level of the map.</Typography>,
     props: {

package/docutils.js

@@ -0,0 +1,198 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function applyPermalinkParameters(wc) {
+  const params = new URLSearchParams(window.location.search);
+
+  // Apply fullscreen mode
+  if (params.get("fullscreen") === "true") {
+    wc.parentElement.removeChild(wc);
+    wc.className = "absolute w-full h-full inset-0";
+    document.body.appendChild(wc);
+    document.body.style = "padding:0;";
+  } else {
+    const doc = document.querySelectorAll("#doc");
+    doc.forEach((d) => {
+      return (d.style.display = "block");
+    });
+  }
+  // Apply x,y,z
+  if (
+    params.get("permalink") === "true" &&
+    params.get("x") &&
+    params.get("y")
+  ) {
+    wc.setAttribute("center", `${params.get("x")},${params.get("y")}`);
+    params.delete("x");
+    params.delete("y");
+  }
+
+  if (params.get("permalink") === "true" && params.get("z")) {
+    wc.setAttribute("zoom", params.get("z"));
+    params.delete("z");
+  }
+
+  // Apply all url parameters as attribute of the web component and fill the input fields.
+  params.forEach((value, key) => {
+    wc.setAttribute(key, value);
+    const input = document.querySelector(`[name=${key}]`);
+    if (input) {
+      if (input.type === "checkbox") {
+        input.checked = value !== "false";
+      } else {
+        input.value = value;
+      }
+    }
+  });
+
+  // Get an apikey if there is none defined
+  if (!wc.getAttribute("apikey")) {
+    fetch("https://backend.developer.geops.io/publickey")
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        if (data && data.success) {
+          wc.setAttribute("apikey", data.key);
+        }
+      });
+  }
+}
+
+// Generates a HTML table with all attributes of a web component
+function generateAttributesTable(wc, attrs, booleanAttrs = []) {
+  let innerHMTL = `<table class="table-auto w-full" >
+    <thead>
+      <tr>
+        <th class="border px-4 py-2">Name</th>
+        <!--th class="border px-4 py-2">Default</th>
+        <th class="border px-4 py-2">Description</th-->
+        <th class="border px-4 py-2">Value</th>
+      </tr>
+    </thead>
+    <tbody>`;
+  innerHMTL += attrs
+    .sort()
+    .map((key) => {
+      const isBoolean = booleanAttrs.includes(key);
+      return `
+    <tr>
+      <td class="border px-4 py-2">${key}</td>
+      <!--td class="border px-4 py-2"></td>
+      <td class="border px-4 py-2"></td-->
+      <td class="border px-4 py-2">
+      <div class="flex gap-4">
+      ${
+        isBoolean
+          ? `<input
+          type="checkbox"
+          class="border"
+          name="${key}"
+          ${wc.getAttribute(key) === "true" ? "checked" : ""}
+          onchange="document.querySelector('${wc.localName}').setAttribute('${key}', this.checked);onAttributeUpdate(document.querySelector('${wc.localName}'),this.name, this.checked);" 
+          />`
+          : `
+        <input
+          type="text"
+          class="border"
+          name="${key}"
+          value="${wc.getAttribute(key) || ""}" 
+          />
+        <button class="border p-2 bg-black hover:bg-gray-700 text-white" onclick="document.querySelector('${wc.localName}').setAttribute('${key}', this.previousElementSibling.value);onAttributeUpdate(document.querySelector('${wc.localName}'),this.previousElementSibling.name, this.previousElementSibling.value);">Update</button>`
+      }
+      </div>
+        </td>
+    </tr>
+  `;
+    })
+    .join("");
+
+  innerHMTL += `</tbody>
+  </table>`;
+  return innerHMTL;
+}
+
+// Generates a code text for the web component
+function generateCodeText(
+  wc,
+  attrs,
+  pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component",
+) {
+  let codeText = "";
+  codeText = `&lt;script\n\ttype="module"\n\tsrc="${pkgSrc}"&gt;
+&lt;/script&gt;
+&lt;${wc.localName} style="display:block;width:100%;height:500px;"`;
+
+  attrs.forEach((key) => {
+    const attributeValue = wc.getAttribute(key);
+    const inputValue = document.querySelector(`[name=${key}]`).value;
+    if (attributeValue !== null && attributeValue === inputValue) {
+      codeText += `\n\t${[key, '"' + wc.getAttribute(key) + '"'].join("=")}`;
+    }
+  });
+
+  return codeText + `&gt;\n&lt;/${wc.localName}&gt;`;
+}
+
+// Generates a HTML table with all events of a web component
+function generateEventsTable(wc, events) {
+  let innerHMTL = `<table class="table-auto w-full" >
+    <thead>
+      <tr>
+        <th class="border px-4 py-2">Name</th>
+        <th class="border px-4 py-2">Last data received</th>
+      </tr>
+    </thead>
+    <tbody>`;
+  innerHMTL += events
+    .sort()
+    .map((key) => {
+      wc.addEventListener(key, (event) => {
+        let stringify;
+        try {
+          stringify = JSON.stringify(event, undefined, 4);
+        } catch (e) {
+          stringify =
+            "Object not stringifyable, open the console (F12) to see the object received.";
+          console.log(key + " event", event);
+        }
+        if (key === "singleclick") {
+          stringify = "event.data.lonlat:\n";
+          stringify += JSON.stringify(event.data.lonlat, undefined, 4);
+          stringify += "\n";
+          stringify += "event.data.features:\n";
+          stringify += JSON.stringify(event.data.features, undefined, 4);
+        }
+
+        document.querySelector(`[name='${key}']`).value = stringify.toString();
+      });
+      return `
+        <tr>
+          <td class="border px-4 py-2">${key}</td>
+          <td class="border px-4 py-2">
+            <div class="flex gap-4">
+              <textarea
+                type="text"
+                class="border w-full h-300"
+                style="height:300px;"
+                name="${key}"
+              ></textarea>
+            </div>
+          </td>
+        </tr>
+      `;
+    })
+    .join("");
+
+  innerHMTL += `</tbody>
+  </table>`;
+
+  return innerHMTL;
+}
+
+// Update url on attributes update via inputs
+function onAttributeUpdate(wc, key, value) {
+  const params = new URLSearchParams(window.location.search);
+  params.set(key, value);
+  wc.setAttribute(key, value);
+  window.history.replaceState({}, "", `${window.location.pathname}?${params}`);
+}