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 wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
import { Feature } from 'ol'; import { Feature } from 'ol';
import memoize from 'memoizee'; import memoize from 'memoizee';
import { getState } from '../map';
interface StyleParameters { interface StyleParameters {
type: string; type: string;
@ -113,19 +114,28 @@ const styles = {
}), }),
}, },
wpt: { 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 customIcon = icons[feature.get('sym') as keyof typeof icons];
const icon = customIcon ?? wptIconObj; const icon = customIcon ?? wptIconObj;
return new Icon(icon); return new Icon(icon);
}, },
text: (feature: Feature) => text: (feature: Feature, zoom: number) => {
new Text({ const minZoom = feature.get('extensions')?.['dyo:minZoom'];
if (minZoom && zoom < minZoom) {
return null;
}
return new Text({
font: '16px Calibri,sans-serif', font: '16px Calibri,sans-serif',
text: feature.get('name'), text: feature.get('name'),
fill: textFill, fill: textFill,
stroke: textStroke, stroke: textStroke,
offsetY: -40, offsetY: -40,
}), });
},
}, },
}, },
selected: { 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 styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
const defaults = styles.default[type]; const defaults = styles.default[type];
const selected = styles.selected[type]; const selected = styles.selected[type];
const all = { ...defaults, ...selected }; const all = { ...selected, ...defaults };
for (const key of Object.keys(all)) { for (const key of Object.keys(all)) {
if (all[key] instanceof Function) { if (all[key] instanceof Function) {
return true; return true;
@ -170,7 +194,8 @@ const getStyle = memoize(
( (
type: keyof typeof styles.default, type: keyof typeof styles.default,
isSelected: boolean = false, isSelected: boolean = false,
params: any feature: any,
zoom: any
) => { ) => {
const defaults = styles.default[type]; const defaults = styles.default[type];
const selected = styles.selected[type]; const selected = styles.selected[type];
@ -186,22 +211,26 @@ const getStyle = memoize(
// }); // });
for (const key of Object.keys(all)) { for (const key of Object.keys(all)) {
if (all[key] instanceof Function) { if (all[key] instanceof Function) {
all[key] = all[key](params); all[key] = all[key](feature, zoom);
} }
} }
return new Style(all); 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 type = feature.get('type');
const isSelected = feature.get('isSelected') === true; const isSelected = feature.get('isSelected') === true;
// console.log({ caller: 'style', type, isSelected }); // console.log({ caller: 'style', type, isSelected });
if (styleRequiresFeature(type)) { if (styleRequiresFeatureAndZoom(type)) {
return getStyle(type, isSelected, feature); 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; export default style;

View File

@ -160,6 +160,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
setEditedWpt({ ...editedWpt(), sym: value }); 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' }}> <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
<Button variant='outlined' color='secondary' onClick={closeHandler}> <Button variant='outlined' color='secondary' onClick={closeHandler}>
{t('cancel')} {t('cancel')}

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

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

View File

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

View File

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