From c6e1f63a85406f19a79c0a48ffbada95d792355f Mon Sep 17 00:00:00 2001 From: evlist Date: Sat, 10 Dec 2022 16:23:10 +0100 Subject: [PATCH] Adding arrows to trksegs. --- src/components/gpx/styles.ts | 45 ++++++++++++++++--- src/components/map/Map.tsx | 5 ++- src/components/map/index.ts | 2 +- ...lack-arrowhead-pointing-up-svgrepo-com.svg | 12 +++++ src/icons/right-arrow-svgrepo-com.svg | 10 +++++ 5 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 src/icons/black-arrowhead-pointing-up-svgrepo-com.svg create mode 100644 src/icons/right-arrow-svgrepo-com.svg diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 0dc11ad..23179ae 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -10,11 +10,14 @@ import cheeseIcon from '../../icons/cheese-svgrepo-com.svg'; import trainIcon from '../../icons/train-svgrepo-com.svg'; import picnicIcon from '../../icons/picnic-svgrepo-com.svg'; import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg'; +import leftArrowIcon from '../../icons/right-arrow-svgrepo-com.svg'; +import blackArrowheadPointingUp from '../../icons/black-arrowhead-pointing-up-svgrepo-com.svg'; import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg'; import { Feature } from 'ol'; import memoize from 'memoizee'; -import { getState } from '../map'; +import { getMap, getState } from '../map'; import { Point } from 'ol/geom'; +import { Coordinate } from 'ol/coordinate'; interface StyleParameters { type: string; @@ -172,6 +175,7 @@ const styles = { image: new Icon(icon), text: new Text({ font: '16px Calibri,sans-serif', + overflow: true, text: text, fill: isSelected ? textFillSel : textFill, stroke: isSelected ? textStrokeSel : textStroke, @@ -184,19 +188,50 @@ const styles = { getParameters: (feature: Feature) => { return { isSelected: feature.get('isSelected') ?? false, - feature: zoom() >= 15 ? feature : undefined, + feature: zoom() >= 7 ? feature : undefined, + zoom: zoom() >= 7 ? Math.floor(zoom()) : undefined, }; }, getStyle: memoize((params: any) => { console.log({ caller: 'getStyle', params }); - const { isSelected, feature } = params; + const { isSelected, feature, zoom } = params; const styles = [ new Style({ stroke: isSelected ? trksegStrokeSel : trksegStroke }), ]; if (feature) { + const map = getMap(); const geometry = feature.getGeometry(); - geometry.forEachSegment((start: any, end: any) => { - styles.push(new Style({ geometry: new Point(end), image: circle })); + const coordinates = geometry.getCoordinates(); + let start = coordinates[0]; + let startPixels = map?.getPixelFromCoordinate(start); + coordinates.slice(1).forEach((end: Coordinate) => { + const endPixels = map?.getPixelFromCoordinate(end); + if ( + startPixels !== undefined && + endPixels !== undefined && + Math.sqrt( + (startPixels[0] - endPixels[0]) ** 2 + + (startPixels[1] - endPixels[1]) ** 2 + ) > 80 + ) { + const dx = end[0] - start[0]; + const dy = end[1] - start[1]; + const rotation = Math.atan2(dy, dx) - Math.PI / 2; + styles.push( + new Style({ + geometry: new Point(end), + image: new Icon({ + src: blackArrowheadPointingUp, + scale: 1 / 20, + anchor: [0.5, 0.5], + rotateWithView: true, + rotation: -rotation, + }), + }) + ); + startPixels = endPixels; + start = end; + } }); } return styles; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 52ecd13..a55eec5 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -46,8 +46,11 @@ const [getState, setState] = createSignal({ export { getState }; +const [getMap, setMap] = createSignal(null); + +export { getMap }; + const Map: Component = () => { - const [getMap, setMap] = createSignal(null); const params = useParams(); const navigate = useNavigate(); diff --git a/src/components/map/index.ts b/src/components/map/index.ts index 718cf08..e8cfac3 100644 --- a/src/components/map/index.ts +++ b/src/components/map/index.ts @@ -1 +1 @@ -export { default, getState } from './Map'; +export { default, getState, getMap } from './Map'; diff --git a/src/icons/black-arrowhead-pointing-up-svgrepo-com.svg b/src/icons/black-arrowhead-pointing-up-svgrepo-com.svg new file mode 100644 index 0000000..918514d --- /dev/null +++ b/src/icons/black-arrowhead-pointing-up-svgrepo-com.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/src/icons/right-arrow-svgrepo-com.svg b/src/icons/right-arrow-svgrepo-com.svg new file mode 100644 index 0000000..f708c05 --- /dev/null +++ b/src/icons/right-arrow-svgrepo-com.svg @@ -0,0 +1,10 @@ + + + + + + + +