From 327f0a69109e7c1e78d7b41c31322e9db06d80be Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 10 Dec 2022 12:16:46 +0100
Subject: [PATCH] Mechanism to add style functions

---
 src/components/gpx/styles.ts | 41 ++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts
index f4c3e48..0dc11ad 100644
--- a/src/components/gpx/styles.ts
+++ b/src/components/gpx/styles.ts
@@ -1,4 +1,4 @@
-import { Fill, Text, Icon, Stroke, Style } from 'ol/style';
+import { Fill, Text, Icon, Stroke, Style, Circle } from 'ol/style';
 import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
 import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
 import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
@@ -14,6 +14,7 @@ import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
 import { Feature } from 'ol';
 import memoize from 'memoizee';
 import { getState } from '../map';
+import { Point } from 'ol/geom';
 
 interface StyleParameters {
   type: string;
@@ -113,8 +114,30 @@ const rteStrokeSel = new Stroke({
   width: 3,
 });
 
+const circleFill = new Fill({
+  color: 'rgba(255,255,255,0.4)',
+});
+
+const circleStroke = new Stroke({
+  color: '#3399CC',
+  width: 1.25,
+});
+
+const circle = new Circle({
+  fill: circleFill,
+  stroke: circleStroke,
+  radius: 5,
+});
+
+const replacer = (key: string, value: any) => {
+  if (key === 'feature' && typeof value === 'object') {
+    return { id: value.get('id'), rev: value.getRevision() };
+  }
+  return value;
+};
+
 const normalizer = (params: any) => {
-  const key = JSON.stringify(params);
+  const key = JSON.stringify(params, replacer);
   //  console.log({ caller: 'getStyle / normalizer', key });
   return key;
 };
@@ -161,12 +184,22 @@ const styles = {
     getParameters: (feature: Feature) => {
       return {
         isSelected: feature.get('isSelected') ?? false,
+        feature: zoom() >= 15 ? feature : undefined,
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected } = params;
-      return new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke });
+      const { isSelected, feature } = params;
+      const styles = [
+        new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }),
+      ];
+      if (feature) {
+        const geometry = feature.getGeometry();
+        geometry.forEachSegment((start: any, end: any) => {
+          styles.push(new Style({ geometry: new Point(end), image: circle }));
+        });
+      }
+      return styles;
     }, memoizeOptions),
   },
   rte: {