Improvements

.eslintrc.yml

@@ -3,3 +3,12 @@ rules:
   no-console: 0
   comma-dangle: 0
   valid-jsdoc: 0
+env:
+  es6: true,
+
+parserOptions:
+  ecmaVersion: 11
+  ecmaFeatures:
+    generators: false
+    objectLiteralDuplicateProperties: false
+  sourceType: module

.github/workflows/ci.yml

@@ -0,0 +1,41 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+env:
+  IN_CI: "1"
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    timeout-minutes: 5
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Npm setup
+        run: npm ci && du -sh node_modules
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Doc
+        run: npm run doc

.gitignore

@@ -1,3 +1,2 @@
 /node_modules/
-/package-lock.json
 /dist/

demos/demo.js

@@ -0,0 +1,130 @@
+import SwisstopoSource from '@geoblocks/sources/src/Swisstopo.js';
+import EPSG_2056, {proj as proj2056} from '@geoblocks/proj/src/EPSG_2056.js';
+import TileLayer from 'ol/layer/Tile.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import {View, Map as OLMap} from 'ol';
+import TrackManager from '../src/interaction/TrackManager';
+import GraphHopperRouter from '../src/router/GraphHopper';
+import {ExtractFromSegmentProfiler, FallbackProfiler, SwisstopoProfiler} from '../src/profiler/index';
+import Profile from '../src/Profile';
+import {controlPoint, styleFunction} from './style';
+import {Style, Circle, Fill} from 'ol/style';
+
+const RESOLUTIONS = [650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1];
+const ROUTING_URL = 'https://graphhopper-wander.schweizmobil.ch/route?vehicle=schmwander&type=json&weighting=fastest&elevation=true&way_point_max_distance=0&instructions=false&points_encoded=true';
+
+
+function createSwisstopoLayer(layer, format = 'image/jpeg') {
+  const swisstopoLayer = new SwisstopoSource({
+    layer,
+    format,
+    timestamp: 'current',
+    projection: EPSG_2056,
+    crossOrigin: 'anonymous'
+  });
+  return new TileLayer({source: swisstopoLayer});
+}
+
+function createSwisstopoMap(target) {
+  const trackSource = new VectorSource();
+  const trackLayer = new VectorLayer({
+    source: trackSource,
+    style: styleFunction
+  });
+
+  const extent = proj2056.getExtent();
+  const view = new View({
+    projection: EPSG_2056,
+    resolutions: RESOLUTIONS,
+    extent: extent,
+    center: [2532661.0, 1151654.0],
+    zoom: 10,
+  });
+
+  const bgLayer = createSwisstopoLayer('ch.swisstopo.pixelkarte-farbe');
+
+  const map = window['mymap'] = new OLMap({
+    target,
+    view,
+    layers: [
+      bgLayer,
+      trackLayer
+    ]
+  });
+
+  return {map, trackLayer};
+}
+
+
+function main() {
+  const {map, trackLayer} = createSwisstopoMap('map');
+
+  const router = new GraphHopperRouter({
+    url: ROUTING_URL,
+    mapProjection: map.getView().getProjection()
+  });
+
+  const profiler = new FallbackProfiler({
+    profilers: [
+      new ExtractFromSegmentProfiler(),
+      new SwisstopoProfiler({
+        projection: map.getView().getProjection()
+      })
+    ]
+  });
+
+
+  const trackManager = new TrackManager({
+    map: map,
+    router: router,
+    profiler: profiler,
+    trackLayer: trackLayer,
+    style: controlPoint
+  });
+
+  /**
+   * @type {Profile}
+   */
+  const d3Profile = new Profile({
+    map: map,
+    profileTarget: '#profile',
+  });
+
+
+  trackManager.addTrackChangeEventListener(() => {
+    const segments = trackManager.getSegments();
+    d3Profile.refreshProfile(segments);
+  });
+
+  trackManager.addTrackHoverEventListener((distance) => {
+    if (distance !== undefined) {
+      d3Profile.highlight(distance);
+    } else {
+      d3Profile.clearHighlight();
+    }
+  });
+
+  trackManager.mode = 'edit';
+  const tmEl = document.querySelector('#trackmode');
+  // @ts-ignore
+  tmEl.addEventListener('change', evt => trackManager.mode = evt.target.value);
+
+  document.querySelector('#delete').addEventListener('click', () => {
+    trackManager.deleteLastPoint();
+  });
+  document.querySelector('#clear').addEventListener('click', () => {
+    trackManager.clear();
+  });
+
+  d3Profile.setTrackHoverStyle(new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: 'blue',
+      }),
+      radius: 9
+    })
+  }));
+}
+
+main();

demos/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Edit track demo</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
+  <script src="./demo.js" type="module"></script>
+  <style>
+    html, body, main {
+      height: 100%;
+      margin: 0;
+    }
+    main {
+      display: flex;
+    }
+    #map {
+      height: 100vh;
+      width: 100%;
+    }
+    #profile {
+      height: 150px;
+      width: 300px;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+    <div>
+      <div id="profile"></div>
+      <select id="trackmode">
+        <option value="edit">edit</option>
+        <option value="">view</option>
+      </select>
+      <a href="#" id="delete">delete last point</a>
+      <a href="#" id="clear">clear track</a>
+  </div>
+    <div id="map"></div>
+  </main>
+</body>
+
+</html>

demos/style.js

@@ -0,0 +1,128 @@
+import {Circle, Fill, Stroke, Style, Icon} from 'ol/style.js';
+
+
+/**
+ * @type {Style}
+ */
+export const controlPoint = new Style({
+  image: new Circle({
+    radius: 7,
+    fill: new Fill({
+      color: 'white'
+    })
+  })
+});
+
+/**
+ * @type {Style}
+ */
+export const firstControlPoint = new Style({
+  image: new Circle({
+    radius: 7,
+    fill: new Fill({
+      color: 'green'
+    })
+  })
+});
+
+
+/**
+ * @type {Style}
+ */
+export const lastControlPoint = new Style({
+  image: new Circle({
+    radius: 7,
+    fill: new Fill({
+      color: 'red'
+    })
+  })
+});
+
+/**
+ * @type {Style}
+ */
+export const trackLine = new Style({
+  stroke: new Stroke({
+    color: 'purple',
+    width: 6
+  })
+});
+
+/**
+ * @type {Style}
+ */
+export const trackLineModifying = new Style({
+  stroke: new Stroke({
+    color: 'blue',
+    width: 3,
+    lineDash: [0.5, 4]
+  })
+});
+
+
+/**
+ * @param {string} type
+ * @param {string} subtype
+ * @return {?Style}
+ */
+export function styleFromType(type, subtype) {
+  switch (type) {
+    case 'controlPoint':
+      switch (subtype) {
+        case 'first':
+          return firstControlPoint;
+        case 'last':
+          return lastControlPoint;
+        default:
+          return controlPoint;
+      }
+    case 'segment':
+      switch (subtype) {
+        case 'modifying':
+          return trackLineModifying;
+        default:
+          return trackLine;
+      }
+    default:
+      return null;
+  }
+}
+
+/**
+ * @param {import("ol/Feature").FeatureLike} feature
+ * @param {number} _
+ * @return {?Style}
+ */
+export function styleFunction(feature, _) {
+  return styleFromType(feature.get('type'), feature.get('subtype'));
+}
+
+/**
+ * @param {string=} strokeColor
+ * @return {Style}
+ */
+export function externalLayerStyle(strokeColor = '#e3ff00') {
+  return new Style({
+    stroke: new Stroke({
+      color: strokeColor,
+      width: 3
+    })
+  });
+}
+
+/**
+ * @typedef {Object} TrackHoverUrlOptions
+ * @property {string} src
+ * @property {[number, number]} imgSize
+ * @property {number} scale
+ */
+
+/**
+ * @param {TrackHoverUrlOptions} options
+ * @return {Style}
+ */
+export function createProfileHoverStyle(options) {
+  return new Style({
+    image: new Icon(options)
+  });
+}