Adding minZoom extension property for Wpts

This commit is contained in:
Eric van der Vlist 2022-12-07 15:09:08 +01:00
parent 008ca2ce3b
commit 38224d73da
5 changed files with 56 additions and 13 deletions

View File

@ -13,6 +13,7 @@ import caveIcon from '../../icons/cave-entrance-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';
interface StyleParameters {
type: string;
@ -113,19 +114,28 @@ const styles = {
}),
},
wpt: {
image: (feature: Feature) => {
image: (feature: Feature, zoom: number) => {
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
if (minZoom && zoom < minZoom) {
return null;
}
const customIcon = icons[feature.get('sym') as keyof typeof icons];
const icon = customIcon ?? wptIconObj;
return new Icon(icon);
},
text: (feature: Feature) =>
new Text({
text: (feature: Feature, zoom: number) => {
const minZoom = feature.get('extensions')?.['dyo:minZoom'];
if (minZoom && zoom < minZoom) {
return null;
}
return new Text({
font: '16px Calibri,sans-serif',
text: feature.get('name'),
fill: textFill,
stroke: textStroke,
offsetY: -40,
}),
});
},
},
},
selected: {
@ -154,10 +164,24 @@ const styles = {
},
};
const styleRequiresFeatureAndZoom = memoize(
(type: keyof typeof styles.default) => {
const defaults = styles.default[type];
const selected = styles.selected[type];
const all = { ...selected, ...defaults };
for (const key of Object.keys(all)) {
if (all[key] instanceof Function && all[key].length > 1) {
return true;
}
}
return false;
}
);
const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
const defaults = styles.default[type];
const selected = styles.selected[type];
const all = { ...defaults, ...selected };
const all = { ...selected, ...defaults };
for (const key of Object.keys(all)) {
if (all[key] instanceof Function) {
return true;
@ -170,7 +194,8 @@ const getStyle = memoize(
(
type: keyof typeof styles.default,
isSelected: boolean = false,
params: any
feature: any,
zoom: any
) => {
const defaults = styles.default[type];
const selected = styles.selected[type];
@ -186,22 +211,26 @@ const getStyle = memoize(
// });
for (const key of Object.keys(all)) {
if (all[key] instanceof Function) {
all[key] = all[key](params);
all[key] = all[key](feature, zoom);
}
}
return new Style(all);
},
{ length: 3, max: 1024 }
{ length: 4, max: 1024 }
);
export const style = (feature: Feature, resolution: number) => {
export const style = (feature: Feature) => {
const type = feature.get('type');
const isSelected = feature.get('isSelected') === true;
// console.log({ caller: 'style', type, isSelected });
if (styleRequiresFeature(type)) {
return getStyle(type, isSelected, feature);
if (styleRequiresFeatureAndZoom(type)) {
const zoom = Math.floor(getState().zoom);
return getStyle(type, isSelected, feature, zoom);
}
return getStyle(type, isSelected, null);
if (styleRequiresFeature(type)) {
return getStyle(type, isSelected, feature, null);
}
return getStyle(type, isSelected, null, null);
};
export default style;

View File

@ -160,6 +160,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
setEditedWpt({ ...editedWpt(), sym: value });
}}
/>
<TextField
label={t('minZoom')}
defaultValue={wpt()?.extensions?.['dyo:minZoom']?.toString()}
onChange={(event: any, value: string) => {
const extensions = {
...editedWpt()?.extensions,
'dyo:minZoom': parseFloat(value),
};
setEditedWpt({ ...editedWpt(), extensions });
}}
/>
<Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
<Button variant='outlined' color='secondary' onClick={closeHandler}>
{t('cancel')}

2
src/db/types.d.ts vendored
View File

@ -48,6 +48,7 @@ interface Extensions {
'dyo:accuracy'?: number;
'dyo:batterylevel'?: number;
'dyo:useragent'?: string;
'dyo:minZoom'?: number;
}
interface Trk {
@ -116,4 +117,3 @@ interface Rte {
extensions?: Extensions;
rtept?: Wpt[];
}

View File

@ -14,6 +14,8 @@ const dict = {
name: 'Name',
sym: 'Symbol',
minZoom: 'Minimum zoom level',
save: 'SAVE',
cancel: 'CANCEL',
};

View File

@ -15,6 +15,7 @@ const dict = {
name: 'Nom',
sym: 'Symbole',
minZoom: 'Niveau de zoom minimum',
save: 'SAUVEGARDER',
cancel: 'ANNULER',