geoblocks · fredj · Feb 14, 2024
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,9 +1,10 @@
 extends:
-- 'eslint:recommended'
-- 'plugin:@typescript-eslint/recommended'
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:prettier/recommended
 parser: '@typescript-eslint/parser'
 plugins:
-- '@typescript-eslint'
+  - '@typescript-eslint'
 root: true
 rules:
   no-console: 0

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ on:
       - master
 
 env:
-  IN_CI: "1"
+  IN_CI: '1'
 
 jobs:
   build:

diff --git a/.mocharc.json b/.mocharc.json
@@ -2,10 +2,6 @@
   "require": "ts-node/register",
   "loader": "ts-node/esm",
   "extensions": ["ts", "tsx"],
-  "spec": [
-    "test/*.test.*"
-  ],
-  "watch-files": [
-    "src"
-  ]
+  "spec": ["test/*.test.*"],
+  "watch-files": ["src"]
 }
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -0,0 +1,2 @@
+bracketSpacing: false
+singleQuote: true
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,10 +1,12 @@
 # @geoblocks/edittrack changes
 
 ## v1.3.1
+
 - sort POIs when updating index
 - Do not clone in getPOIS, getControlPoints(), getSegments()
 
 ## v1.3.0
+
 - publish a transpiled ES6 library + types
 - add inline source maps
 - finish migration to typescript

diff --git a/demos/schm/demo.js b/demos/schm/demo.js
@@ -1,17 +1,19 @@
-
 import TrackManager from '../../src/interaction/TrackManager.ts';
 import GraphHopperRouter from '../../src/router/GraphHopper.ts';
-import {ExtractFromSegmentProfiler, FallbackProfiler, SwisstopoProfiler} from '../../src/profiler/index.ts';
+import {
+  ExtractFromSegmentProfiler,
+  FallbackProfiler,
+  SwisstopoProfiler,
+} from '../../src/profiler/index.ts';
 import {styleFunction} from './style';
 import {createMap} from './swisstopo';
 import {getTrack, getPOIs} from './track';
 import {doubleClick, singleClick} from 'ol/events/condition';
 
-const ROUTING_URL = 'https://graphhopper-all.schweizmobil.ch/route?vehicle=schmneutral&type=json&weighting=fastest&elevation=true&way_point_max_distance=0&instructions=false&points_encoded=true';
-
+const ROUTING_URL =
+  'https://graphhopper-all.schweizmobil.ch/route?vehicle=schmneutral&type=json&weighting=fastest&elevation=true&way_point_max_distance=0&instructions=false&points_encoded=true';
 
 async function main() {
-
   const {map, trackLayer, shadowTrackLayer} = createMap('map');
 
   const projection = map.getView().getProjection();
@@ -26,16 +28,16 @@ async function main() {
       new ExtractFromSegmentProfiler(),
       new SwisstopoProfiler({
         projection: projection,
-      })
-    ]
+      }),
+    ],
   });
 
   /**
    * @param {MapBrowserEvent} mapBrowserEvent
    * @param {string} pointType
    * @return {boolean}
    */
-  const deleteCondition = function(mapBrowserEvent, pointType) {
+  const deleteCondition = function (mapBrowserEvent, pointType) {
     return doubleClick(mapBrowserEvent) && pointType !== 'POI';
   };
 
@@ -47,7 +49,7 @@ async function main() {
     shadowTrackLayer: shadowTrackLayer,
     style: styleFunction,
     deleteCondition: deleteCondition,
-    addLastPointCondition: singleClick,  // we have to use single click otherwise the double click is not fired
+    addLastPointCondition: singleClick, // we have to use single click otherwise the double click is not fired
     addControlPointCondition: doubleClick,
     hitTolerance: 15,
   });
@@ -56,8 +58,8 @@ async function main() {
   const trackId = search.get('trackId');
   if (trackId) {
     trackManager.restoreFeatures([
-      ...await getTrack(trackId, projection),
-      ...await getPOIs(trackId, projection),
+      ...(await getTrack(trackId, projection)),
+      ...(await getPOIs(trackId, projection)),
     ]);
     map.getView().fit(trackLayer.getSource().getExtent(), {
       padding: [50, 50, 50, 50],

diff --git a/demos/schm/schm.html b/demos/schm/schm.html
@@ -1,9 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Edit track demo</title>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1"
+    />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/8.2.0/ol.css"

diff --git a/demos/schm/shadowtrack.js b/demos/schm/shadowtrack.js
@@ -2,15 +2,14 @@ import {Style, Stroke} from 'ol/style';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
 
-
 /**
  * @type {Style}
  */
- export const style = new Style({
+export const style = new Style({
   stroke: new Stroke({
     color: '#00cc33aa',
-    width: 6
-  })
+    width: 6,
+  }),
 });
 
 /**

diff --git a/demos/schm/style.js b/demos/schm/style.js
@@ -1,6 +1,6 @@
-import { Fill, Stroke, Style, Icon, Text, Circle } from "ol/style";
-import { toString } from "ol/color";
-import Point from "ol/geom/Point";
+import {Fill, Stroke, Style, Icon, Text, Circle} from 'ol/style';
+import {toString} from 'ol/color';
+import Point from 'ol/geom/Point';
 
 const tourColor = [55, 97, 164];
 const lightTourColor = [...tourColor, 0.6];
@@ -21,7 +21,7 @@ const poiSvgSketchHit = `
 </svg>
 `;
 
-const withPointerDevice = window.matchMedia("(pointer: coarse)").matches;
+const withPointerDevice = window.matchMedia('(pointer: coarse)').matches;
 
 export const controlPoint = new Style({
   zIndex: 100,
@@ -31,14 +31,14 @@ export const controlPoint = new Style({
     }),
     stroke: new Stroke({
       width: 2,
-      color: "#fff",
+      color: '#fff',
     }),
     radius: 8,
   }),
   text: new Text({
-    font: "bold 11px Inter",
+    font: 'bold 11px Inter',
     fill: new Fill({
-      color: "#fff",
+      color: '#fff',
     }),
   }),
 });
@@ -68,35 +68,40 @@ export const controlPointSketchHit = controlPoint.clone();
 controlPointSketchHit.getImage().getFill().setColor(focusRed);
 
 // mouse over a control point or dragging a new control point on a segment
-export const sketchControlPointHint = sketchControlPoint.map((style) => style.clone());
-sketchControlPointHint[1].getImage().setStroke(new Stroke({
-  width: 2,
-  color: "#fff",
-}));
+export const sketchControlPointHint = sketchControlPoint.map((style) =>
+  style.clone(),
+);
+sketchControlPointHint[1].getImage().setStroke(
+  new Stroke({
+    width: 2,
+    color: '#fff',
+  }),
+);
 
 export const segmentIntermediatePoint = controlPoint.clone();
 segmentIntermediatePoint.getImage().setRadius(4);
 
 export const firstControlPoint = controlPoint.clone();
-firstControlPoint.getText().setText("A");
+firstControlPoint.getText().setText('A');
 
 export const lastControlPoint = controlPoint.clone();
-lastControlPoint.getText().setText("B");
+lastControlPoint.getText().setText('B');
 
-export const profileHover = sketchControlPointHint.map((style) => style.clone());
+export const profileHover = sketchControlPointHint.map((style) =>
+  style.clone(),
+);
 profileHover[1].getImage().setRadius(6);
 profileHover[0].getImage().getFill().setColor([0, 0, 0, 0.3]);
 
-
 export const poiPoint = new Style({
   image: new Icon({
     src: `data:image/svg+xml;utf8,${poiSvg}`,
   }),
   text: new Text({
-    font: "11px Inter",
+    font: '11px Inter',
     offsetY: -10,
     fill: new Fill({
-      color: "#fff",
+      color: '#fff',
     }),
   }),
 });
@@ -107,31 +112,30 @@ export const poiPointSketchHit = new Style({
     src: `data:image/svg+xml;utf8,${poiSvgSketchHit}`,
   }),
   text: new Text({
-    font: "11px Inter",
+    font: '11px Inter',
     offsetY: -10,
     fill: new Fill({
-      color: "#fff",
+      color: '#fff',
     }),
   }),
 });
 
 const sketchLabel = new Style({
   text: new Text({
-    font: "16px Inter",
+    font: '16px Inter',
     padding: [4, 4, 4, 4],
     offsetX: 24,
-    textAlign: "left",
+    textAlign: 'left',
     backgroundFill: new Fill({
-      color: "#fff",
+      color: '#fff',
     }),
   }),
-})
-
+});
 
 const sketchLabelText = {
-  POI: "drag to move POI",
-  controlPoint: "double click to delete\ndrag to move point",
-  segment: "drag to create point",
+  POI: 'drag to move POI',
+  controlPoint: 'double click to delete\ndrag to move point',
+  segment: 'drag to create point',
 };
 
 export const trackLine = new Style({
@@ -150,51 +154,55 @@ trackLineModifying.getStroke().setLineDash([1, 12]);
  * @return {?Style}
  */
 export function styleFunction(feature) {
-  const type = feature.get("type");
-  const subtype = feature.get("subtype");
-  const sketchHitGeometry = feature.get("sketchHitGeometry");
+  const type = feature.get('type');
+  const subtype = feature.get('subtype');
+  const sketchHitGeometry = feature.get('sketchHitGeometry');
 
   switch (type) {
-    case "sketch":
+    case 'sketch':
       if (!withPointerDevice && subtype) {
         sketchLabel.getText().setText(sketchLabelText[subtype]);
         return sketchLabel;
       }
       return withPointerDevice ? null : sketchControlPoint;
-    case "POI": {
+    case 'POI': {
       if (sketchHitGeometry) {
-        return poiPointSketchHit
+        return poiPointSketchHit;
       }
-      const index = feature.get("index");
+      const index = feature.get('index');
       if (index !== undefined) {
         poiPoint.getText().setText((index + 1).toString());
       }
       return poiPoint;
     }
-    case "controlPoint":
+    case 'controlPoint':
       if (!withPointerDevice && sketchHitGeometry) {
         return sketchControlPointHint;
       }
       switch (subtype) {
-        case "first":
+        case 'first':
           return firstControlPoint;
-        case "last":
+        case 'last':
           return lastControlPoint;
         default:
           return controlPoint;
       }
-    case "segment": {
+    case 'segment': {
       switch (subtype) {
-        case "modifying": {
+        case 'modifying': {
           return trackLineModifying;
         }
         default: {
           const intermediatePoint = segmentIntermediatePoint.clone();
-          intermediatePoint.setGeometry(new Point(feature.getGeometry().getFlatMidpoint()));
+          intermediatePoint.setGeometry(
+            new Point(feature.getGeometry().getFlatMidpoint()),
+          );
           const styles = [trackLine, intermediatePoint];
           if (!withPointerDevice && sketchHitGeometry) {
-            const dragging = feature.get("dragging");
-            const pointStyle = (dragging ? sketchControlPointHint : sketchControlPoint).map((style) => style.clone());
+            const dragging = feature.get('dragging');
+            const pointStyle = (
+              dragging ? sketchControlPointHint : sketchControlPoint
+            ).map((style) => style.clone());
             pointStyle.forEach((style) => style.setGeometry(sketchHitGeometry));
             styles.push(...pointStyle);
           }

diff --git a/demos/schm/swisstopo.js b/demos/schm/swisstopo.js
@@ -9,14 +9,13 @@ import {createShadowLayer} from './shadowtrack';
 
 const RESOLUTIONS = [650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1];
 
-
 function createSwisstopoLayer(layer, format = 'image/jpeg') {
   const swisstopoLayer = new SwisstopoSource({
     layer,
     format,
     timestamp: 'current',
     projection: EPSG_2056,
-    crossOrigin: 'anonymous'
+    crossOrigin: 'anonymous',
   });
   return new TileLayer({source: swisstopoLayer});
 }
@@ -45,11 +44,7 @@ export function createMap(target) {
   const map = new OLMap({
     target,
     view,
-    layers: [
-      bgLayer,
-      shadowTrackLayer,
-      trackLayer
-    ]
+    layers: [bgLayer, shadowTrackLayer, trackLayer],
   });
   window['mymap'] = map;
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ on: @@
           - master
     env:
-      IN_CI: "1"
+      IN_CI: '1'
     jobs:
       build:
@@ Expand Down @@