dyomedea/src/components/gpx/styles.ts

208 lines
4.7 KiB
TypeScript
Raw Normal View History

2022-11-29 18:49:05 +00:00
import { Fill, Text, Icon, Stroke, Style } from 'ol/style';
2022-11-28 07:38:21 +00:00
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
2022-11-29 20:07:46 +00:00
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
2022-12-07 12:30:46 +00:00
import houseIcon from '../../icons/house-svgrepo-com.svg';
import houseFlatIcon from '../../icons/houseFlat-svgrepo-com.svg';
import campingIcon from '../../icons/camping-14-svgrepo-com.svg';
import farmPigIcon from '../../icons/farm-pig-svgrepo-com.svg';
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';
2022-11-29 20:07:46 +00:00
import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
2022-11-28 07:38:21 +00:00
import { Feature } from 'ol';
2022-11-29 18:49:05 +00:00
import memoize from 'memoizee';
2022-11-28 07:38:21 +00:00
2022-11-29 18:49:05 +00:00
interface StyleParameters {
type: string;
isSelected: boolean;
}
2022-11-28 07:38:21 +00:00
2022-12-07 12:30:46 +00:00
const icons = {
house: {
src: houseIcon,
scale: 1 / 15,
opacity: 0.9,
anchor: [0.5, 1],
},
houseFlat: {
src: houseFlatIcon,
scale: 1 / 15,
opacity: 0.9,
anchor: [0.5, 1],
},
camping: {
src: campingIcon,
scale: 2,
opacity: 0.9,
anchor: [0.5, 1],
},
farmPig: {
src: farmPigIcon,
scale: 1 / 12,
opacity: 0.9,
anchor: [0.5, 1],
},
cheese: {
src: cheeseIcon,
scale: 3 / 4,
opacity: 0.9,
anchor: [0.5, 1],
},
train: {
src: trainIcon,
scale: 1 / 10,
opacity: 0.9,
anchor: [0.5, 1],
},
picnic: {
src: picnicIcon,
scale: 1 / 15,
opacity: 0.9,
anchor: [0.5, 1],
},
cave: {
src: caveIcon,
scale: 1 / 7,
opacity: 0.9,
anchor: [0.5, 1],
},
};
const wptIconObj = {
src: wptIcon,
scale: 0.1,
opacity: 0.9,
anchor: [0.5, 1],
};
2022-11-28 11:14:09 +00:00
const textStroke = new Stroke({
color: '#fff',
width: 3,
});
const textFill = new Fill({
color: '#000',
});
2022-11-29 20:07:46 +00:00
const textFillSel = new Fill({
color: 'red',
});
2022-11-28 11:14:09 +00:00
2022-11-29 18:49:05 +00:00
const styles = {
default: {
trkseg: {
stroke: new Stroke({
color: 'blue',
width: 3,
}),
},
'trkseg-start': {
image: new Icon({
src: startIcon,
scale: 0.2,
opacity: 0.6,
anchor: [0.5, 1],
}),
},
'trkseg-finish': {
image: new Icon({
src: finishIcon,
scale: 0.2,
opacity: 0.6,
anchor: [0.5, 1],
}),
},
wpt: {
2022-12-07 12:30:46 +00:00
image: (feature: Feature) => {
const customIcon = icons[feature.get('sym') as keyof typeof icons];
const icon = customIcon ?? wptIconObj;
return new Icon(icon);
},
2022-11-29 18:49:05 +00:00
text: (feature: Feature) =>
new Text({
font: '16px Calibri,sans-serif',
text: feature.get('name'),
fill: textFill,
stroke: textStroke,
offsetY: -40,
}),
},
},
selected: {
trkseg: {
stroke: new Stroke({
color: 'red',
width: 3,
}),
},
2022-11-29 20:07:46 +00:00
wpt: {
image: new Icon({
src: wptIconSel,
scale: 0.1,
opacity: 0.9,
anchor: [0.5, 1],
}),
text: (feature: Feature) =>
new Text({
font: '16px Calibri,sans-serif',
text: feature.get('name'),
fill: textFillSel,
stroke: textStroke,
offsetY: -40,
}),
},
2022-11-29 18:49:05 +00:00
},
};
2022-11-28 11:14:09 +00:00
2022-11-29 18:49:05 +00:00
const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
const defaults = styles.default[type];
const selected = styles.selected[type];
const all = { ...defaults, ...selected };
for (const key of Object.keys(all)) {
if (all[key] instanceof Function) {
return true;
}
}
return false;
});
2022-11-28 07:38:21 +00:00
2022-11-29 18:49:05 +00:00
const getStyle = memoize(
(
type: keyof typeof styles.default,
isSelected: boolean = false,
params: any
) => {
const defaults = styles.default[type];
const selected = styles.selected[type];
const all = isSelected ? { ...defaults, ...selected } : { ...defaults };
2022-11-29 20:07:46 +00:00
// console.log({
// caller: 'style / getStyle',
// type,
// isSelected,
// params,
// defaults,
// selected,
// all,
// });
2022-11-29 18:49:05 +00:00
for (const key of Object.keys(all)) {
if (all[key] instanceof Function) {
all[key] = all[key](params);
}
}
return new Style(all);
},
{ length: 3, max: 1024 }
);
2022-11-28 10:52:50 +00:00
2022-11-28 07:38:21 +00:00
export const style = (feature: Feature, resolution: number) => {
const type = feature.get('type');
2022-11-29 18:49:05 +00:00
const isSelected = feature.get('isSelected') === true;
2022-11-29 20:07:46 +00:00
// console.log({ caller: 'style', type, isSelected });
2022-11-29 18:49:05 +00:00
if (styleRequiresFeature(type)) {
return getStyle(type, isSelected, feature);
2022-11-28 10:52:50 +00:00
}
2022-11-29 18:49:05 +00:00
return getStyle(type, isSelected, null);
2022-11-28 07:38:21 +00:00
};
export default style;