diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 1c39c6b..e1336aa 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -124,16 +124,6 @@ const textFillSel = new Fill({ color: 'red', }); -const trksegStroke = new Stroke({ - color: [11, 16, 71, 0.8], - width: 3, -}); - -const trksegStrokeSel = new Stroke({ - color: 'red', - width: 3, -}); - const rteStroke = new Stroke({ color: [18, 71, 11, 0.8], width: 3, @@ -222,12 +212,43 @@ const styles = { zoom: getZoomInteger() >= 7 ? Math.floor(getZoomInteger()) : undefined, }; }, + ownStyles: { + normal: [ + new Style({ + stroke: new Stroke({ + color: [44, 64, 255, 0.8], + width: 2, + }), + }), + new Style({ + stroke: new Stroke({ + color: [44, 64, 255, 0.2], + width: 7, + }), + }), + ], + + selected: [ + new Style({ + stroke: new Stroke({ + color: [44, 64, 255, 0.8], + width: 2, + }), + }), + new Style({ + stroke: new Stroke({ + color: [255, 0, 0, 0.4], + width: 7, + }), + }), + ], + }, getStyle: memoize((params: any) => { // console.log({ caller: 'getStyle', params }); const { isSelected, feature, zoom } = params; - const styles = [ - new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }), - ]; + let currentStyles: any = isSelected + ? styles.trkseg.ownStyles.selected + : styles.trkseg.ownStyles.normal; if (feature) { const map = getMap(); const geometry = feature.getGeometry(); @@ -247,7 +268,7 @@ const styles = { const dx = end[0] - start[0]; const dy = end[1] - start[1]; const rotation = Math.atan2(dy, dx) - Math.PI / 2; - styles.push( + currentStyles.push( new Style({ geometry: new Point(end), image: new Icon({ @@ -264,7 +285,7 @@ const styles = { } }); } - return styles; + return currentStyles; }, memoizeOptions), }, 'trkseg-finish': {