Implementing a selection mechanism to define what should be drawn: GPX all/none

src/components/drawing-selector/DrawingSelector.tsx

@@ -7,6 +7,8 @@ import { createCachedSignal } from '../../workers/cached-signals';
 import { FormControlLabel, Radio, RadioGroup } from '@suid/material';
 import { getDrawingSelections } from '../../db/drawing-selections';
 import dispatch from '../../workers/dispatcher-main';
+import { Feature } from 'ol';
+import uri from '../../lib/ids';
 
 const id = getUri('drawingSelections', undefined);
 
@@ -59,6 +61,23 @@ const AllNoneCurrent: Component<{}> = (props) => {
   );
 };
 
+export const mustBeDrawn = (feature: Feature) => {
+  const id = feature.getId();
+  const type = feature.get('type');
+  const idObj = uri(type, id);
+  const gpxId = idObj.gpx;
+  console.log({
+    caller: 'DrawingSelector / mustBeDrawn',
+    feature,
+    type,
+    id,
+    idObj,
+    gpxId,
+  });
+  if (drawingSelections().gpxSelection === 'ALL') return true;
+  return false;
+};
+
 const handleGpxSelectionChange = (ev: any) => {
   const value = ev.target.value;
   console.log({

src/components/drawing-selector/index.ts

@@ -1 +1,3 @@
-export { default } from './DrawingSelector';
+import { mustBeDrawn } from './DrawingSelector';
+
+export { default, mustBeDrawn } from './DrawingSelector';

src/components/gpx/styles.ts

@@ -27,6 +27,7 @@ import {
   getTagType,
 } from '../overlays/overlay-definitions';
 import { Category } from '../wpt/WptEditDialog';
+import { mustBeDrawn } from '../drawing-selector';
 
 interface StyleParameters {
   type: string;
@@ -163,6 +164,7 @@ const memoizeOptions = {
 const styles = {
   wpt: {
     getParameters: (feature: Feature) => {
+      if (!mustBeDrawn(feature)) return null;
       const extensions = feature.get('extensions');
       const minZoom = extensions?.['dyo:minZoom'];
       const category = extensions?.category;
@@ -201,6 +203,7 @@ const styles = {
   },
   trkseg: {
     getParameters: (feature: Feature) => {
+      if (!mustBeDrawn(feature)) return null;
       return {
         isSelected: feature.get('isSelected') ?? false,
         feature: getZoomInteger() >= 7 ? feature : undefined,
@@ -285,6 +288,7 @@ const styles = {
   },
   'trkseg-finish': {
     getParameters: (feature: Feature) => {
+      if (!mustBeDrawn(feature)) return null;
       const positions: Set<string> = feature.get('positions');
       return {
         isLast: positions.has('gpx-end') && positions.has('trk-end'),
@@ -308,6 +312,7 @@ const styles = {
   },
   rte: {
     getParameters: (feature: Feature) => {
+      if (!mustBeDrawn(feature)) return null;
       return {
         isSelected: feature.get('isSelected') ?? false,
       };
@@ -566,6 +571,7 @@ const styles = {
       if (getZoomInteger() < 16) {
         return null;
       }
+      edt;
       const tagType = getTagType(feature);
       const isHighlightedFeature = isHighlightedTagType(tagType);
       if (

src/lib/ids.ts

@@ -34,9 +34,14 @@ const routes = {
   gpx: route('gpx/:gpx', coding),
   wpt: route('gpx/:gpx/1wpt/:wpt', coding),
   rte: route('gpx/:gpx/2rte/:rte', coding),
+  'rte-start': route('gpx/:gpx/2rte/:rte/start', coding),
+  'rte-end': route('gpx/:gpx/2rte/:rte/end', coding),
   rtept: route('gpx/:gpx/2rte/:rte/:rtept', coding),
   trk: route('gpx/:gpx/3trk/:trk', coding),
   trkseg: route('gpx/:gpx/3trk/:trk/:trkseg', coding),
+  'trkseg-start': route('gpx/:gpx/3trk/:trk/:trkseg/start', coding),
+  'trkseg-end': route('gpx/:gpx/3trk/:trk/:trkseg/end', coding),
+  'trkseg-finish': route('gpx/:gpx/3trk/:trk/:trkseg/end', coding),
   trkpt: route('gpx/:gpx/3trk/:trk/:trkseg/:trkpt', coding),
   extensions: route('gpx/:gpx/4extensions', coding),
 };