fix: add dev page

.eslintignore

@@ -2,3 +2,4 @@ build/*
 __mocks__/*
 node_modules/*
 src/types/*.d.ts
+dev.js

MIGRATION-V3.md

@@ -1,6 +1,6 @@
 # Migration v3
 
-This version contains a lot of breaking changes.
+This version contains some breaking changes.
 
 The native OpenLayers and Maplibre APIs are now used to add/remove layers and controls. This makes the library more flexible and easier to use.
 
@@ -22,6 +22,8 @@ Here is an exhaustive list of what you need to change in your application code.
 - `Layer` has been removed , simply use the `ol/layer/Layer` class directly instead
 - `WMSLayer` has been removed , simply use the `ol/layer/WMSLayer` class directly instead
 - `VectorLayer` has been removed , simply use the `ol/layer/VectorLayer` class directly instead
+- `RoutingLayer` has been removed , simply use the `ol/layer/VectorLayer` class directly instead
+- `layer.getFeatureAtCoordinate()` has been removed, use `map.getFeaturesAtPixel()` instead or the util function `getFeaturesAtCoordinate()`
 
 ### for all Layer classes
 
@@ -63,6 +65,20 @@ const layer = new Layer({
   myProperty: 'myProperty'
 });
 ```
+We have removed the onClick, onHover properties, since we never used them.
+
+```js
+// Before:
+layer.onClick(([feature])=> {
+  setFeature(feature);
+});
+
+// after
+map.on('singleclick', (evt) => {
+  const [feature] = map.getFeaturesAtPixel(evt.pixel, {layerFilter: l => l=== layer}) || [];
+  setFeature(feature);
+});
+```
 
 ### for all Control classes
 
@@ -95,21 +111,6 @@ layer.attachToMap(map);
 map.addLayer(layer);
 ```
 
-We also have removed the onClick, onHover properties, since we never used them.
-
-```js
-// Before:
-layer.onClick(([feature])=> {
-  setFeature(feature);
-});
-
-// after
-map.on('singleclick', (evt) => {
-  const [feature] = map.getFeaturesAtPixel(evt.pixel, {layerFilter: l => l=== layer}) || [];
-  setFeature(feature);
-});
-```
-
 ### for all Control classes
 
 Controls classes impments now the  [`IControl`](https://maplibre.org/maplibre-gl-js/docs/API/interfaces/IControl/) interface directly.

README.md

@@ -10,7 +10,7 @@ The tools in this library have been inspired by many projects realized for publi
 
 ## Documentation and examples
 
-Visit https://mobility-toolbox-js.vercel.app/
+Visit https://mobility-toolbox-js.geops.io/
 
 ## Demos
 
@@ -24,7 +24,7 @@ Visit https://mobility-toolbox-js.vercel.app/
 Install the library and the peer dependencies:
 
 ```bash
-yarn add mobility-toolbox-js ol maplibre-gl
+yarn add ol maplibre-gl mobility-toolbox-js
 ```
 
 ## Development
@@ -34,9 +34,17 @@ yarn install
 yarn dev
 ```
 
+`yarn dev` starts a vite server using the `index.html` file at the root of the project.
+This html file loads the `dev.js` file. Use this file to develop the library.
+Each time you modifiy the library code you have to run `yarn build:tsc` to see the changes.
+
+## Development documentation
+
+The documentations website is located in the `doc/`  folder.
+It's a nextJS website that use the mobility-toolbox-js library built from the `build/` folder.
+
 ## Deploy
 
 This library website is deployed automatically using [Vercel](https://vercel.com/geops).
 For Vercel we have to add the nextjs and raw-loader modules in the dev dependencies of the main package.json.
 But those 2 librairies are not needed to build the library.
-

dev.js

@@ -0,0 +1,97 @@
+import View from 'ol/View';
+import Map from 'ol/Map';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import LineString from 'ol/geom/LineString';
+import Modify from 'ol/interaction/Modify';
+import { MaplibreLayer, RoutingControl, routingStyle } from './build/ol';
+import 'ol/ol.css';
+
+window.apiKey = '5cc87b12d7c5370001c1d655f23526a2a5b14ff5bf1c6c4eb6c4c9b4';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [950690.34, 6003962.67],
+    zoom: 15,
+  }),
+});
+
+const baseLayer = new MaplibreLayer({
+  apiKey: window.apiKey,
+});
+map.addLayer(baseLayer);
+
+const routingLayer = new VectorLayer({
+  source: new VectorSource(),
+  style: routingStyle,
+});
+// map.addLayer(routingLayer);
+
+// const control = new RoutingControl({
+//   element: document.createElement('div'),
+//   apiKey: window.apiKey,
+//   routingLayer: routingLayer,
+// });
+// map.addControl(control);
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource(),
+});
+vectorLayer.getSource().addFeature(
+  new Feature({
+    geometry: new LineString([
+      // [950476.4055933182, 6003322.253698345],
+      // [950389.0813034325, 6003656.659274571],
+      // [
+      [950478.7985399539, 6003320.7265438335],
+      [950483.7500754321, 6003337.644331005],
+      [950518.7823191849, 6003431.357665203],
+      [950420.9547506756, 6003448.256090432],
+      [950349.999707244, 6003582.770702608],
+      [950351.0015826611, 6003608.825650063],
+      [950361.1427882726, 6003611.801014977],
+      [950368.5900622065, 6003616.61749184],
+      [950379.0986221373, 6003626.80936295],
+      [950388.2936120768, 6003641.22594949],
+      [950393.3361623707, 6003652.514778154],
+      // ]
+    ]),
+  }),
+);
+map.addLayer(vectorLayer);
+
+const modify = new Modify({
+  source: vectorLayer.getSource(),
+  hitDetection: vectorLayer,
+});
+map.addInteraction(modify);
+
+control.addViaPoint([950476.4055933182, 6003322.253698345]);
+control.addViaPoint([950389.0813034325, 6003656.659274571]);
+// control.addViaPoint('29563461696e881d');
+
+// Add example button to toggle the RoutingControl.
+// document.getElementById('control-button').addEventListener('click', (e) => {
+//   e.target.innerHTML = control.active
+//     ? 'Activate RoutingControl'
+//     : 'Deactivate RoutingControl';
+//   if (control.active) {
+//     control.active = false;
+//   } else {
+//     control.active = true;
+//   }
+// });
+
+// // Add example button to toggle the RoutingControl mot.
+// document.getElementById('mot-button').addEventListener('click', (e) => {
+//   e.target.innerHTML =
+//     control.mot === 'bus' ? 'Switch to bus routing' : 'Switch to foot routing';
+//   control.mot = control.mot === 'bus' ? 'foot' : 'bus';
+// });
+
+// // Add example button to toggle the RoutingControl mot.
+// document.getElementById('reset-button').addEventListener('click', () => {
+//   control.reset();
+// });

index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mobility-toolbox-js</title>
+  </head>
+  <body>
+    <div id="app">
+      <div id="map" style="width:600px;height:400px;"></div>
+    </div>
+    <script type="module" src="/dev.js"></script>
+  </body>
+</html>

package.json

@@ -82,7 +82,8 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-scss": "6.10.0",
     "ts-jest": "^29.2.5",
-    "typescript": "5.6.3"
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
   },
   "scripts": {
     "apidoc": "esdoc && cp apidoc/index.json doc/src/components/Esdoc",
@@ -95,19 +96,17 @@
     "cy:test:chrome": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser chrome'",
     "cy:test:edge": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser edge'",
     "cy:test:firefox": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser firefox'",
-    "dev": "yarn clean && yarn build && yarn apidoc && yarn dev:examples",
-    "dev:examples": "yarn clean && yarn build && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn dev",
+    "dev": "vite",
     "doc": "yarn build && yarn apidoc && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn build",
+    "doc:dev": "yarn clean && yarn build && yarn apidoc && yarn dev:examples",
+    "doc:dev:examples": "yarn clean && yarn build && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn dev",
     "esbuild": "yarn esbuild:all && yarn esbuild:iife",
     "esbuild:all": "esbuild src/index.js src/**/*.js src/**/*.ts src/**/**/*.js src/**/**/*.ts --target=chrome100 --outdir=build/ --loader:.js=jsx",
     "esbuild:iife": "yarn esbuild:iife:unminify && yarn esbuild:iife:minify",
     "esbuild:iife:base": "esbuild src/iife.js --bundle --sourcemap --target=chrome100",
     "esbuild:iife:minify": "yarn esbuild:iife:base --minify --outfile=build/mbt.min.js",
     "esbuild:iife:unminify": "yarn esbuild:iife:base --outfile=build/mbt.js",
     "format": "prettier --write 'src/**/*.js' 'src/**/*.test.js' && eslint src/**/*.js src/**/*.test.js src/**/*.ts --fix && stylelint 'src/**/*.css' 'src/**/*.scss' --fix --allow-empty-input",
-    "lib": "REACT_APP_LIB_MODE=1  webpack --mode production",
-    "lib:dev": "REACT_APP_LIB_MODE=1  webpack --mode development",
-    "link2": "cmdToAdd=$(node ./scripts/read-pkg-json.js add) && $cmdToAdd && yarn build && cmdToRemove=$(node ./scripts/read-pkg-json.js remove) && $cmdToRemove && cd build && yarn link",
     "lint": "eslint src/**/*.js src/**/*.ts && stylelint src/**/*.css src/**/*.scss --allow-empty-input",
     "prepare": "is-ci || husky",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog  && yarn run build && cd build && HUSKY=0 yarn publish --tag beta && git push origin HEAD && git push --tags ",

src/ol/controls/RoutingControl.ts

@@ -383,7 +383,7 @@ class RoutingControl extends Control {
      */
     // Define and add modify interaction
     this.modifyInteraction = new Modify({
-      // hitDetection: this.routingLayer, // Create a bug, the first point is always selected even if the mous eis far away
+      // hitDetection: this.routingLayer, // TODO: wait for ol, fixed in https://github.com/openlayers/openlayers/pull/16393
       deleteCondition: (e) => {
         const feats =
           (e.target?.getFeaturesAtPixel(e.pixel, {
@@ -400,7 +400,6 @@ class RoutingControl extends Control {
         }
         return false;
       },
-      hitDetection: this.routingLayer,
       pixelTolerance: 6,
       source: this.routingLayer?.getSource() || undefined,
     });

tsconfig.json

@@ -19,5 +19,5 @@
   },
   "allowSyntheticDefaultImports": true,
   "include": ["./src/**/*"],
-  "exclude": ["./node_modules/**/**/*","./node_modules/**/*", "./node_modules/*", "./__mocks__/maplibre-gl.js","ol"]
+  "exclude": ["dev.js","/node_modules/**/**/*","./node_modules/**/*", "./node_modules/*", "./__mocks__/maplibre-gl.js","ol"]
 }