dyomedea/src/components/trkseg/Trkseg.tsx

import { Component, createEffect, createSignal, onCleanup } from 'solid-js';

import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import {
  createCachedSignal,
  destroyCachedSignal,
} from '../../workers/cached-signals';
import { fromLonLat } from 'ol/proj';

interface Props {
  trksegId: string;
  vectorSources: VectorSource[];
  context: any;
  tags: any;
}

export const Trkseg: Component<Props> = ({
  vectorSources,
  trksegId,
  context,
  tags,
}) => {
  const params = {
    id: trksegId,
    method: 'getTrkseg',
  };
  const trkseg = createCachedSignal(params);

  const clearFeatures = () => {
    [`${trksegId}/start`, trksegId, `${trksegId}/end`].forEach((id) => {
      vectorSources.forEach((vectorSource) => {
        const feature = vectorSource.getFeatureById(id);
        if (feature) {
          vectorSource.removeFeature(feature);
        }
      });
    });
  };

  const positions = () => {
    let result = new Set<string>();
    if (context.trk && context.gpx) {
      const trkId = context.trkId;
      if (trkId === context.gpx().trk.at(0)) {
        result.add('gpx-start');
      }
      if (trkId === context.gpx().trk.at(-1)) {
        result.add('gpx-end');
      }
      if (trksegId === context.trk().trkseg.at(0)) {
        result.add('trk-start');
      }
      if (trksegId === context.trk().trkseg.at(-1)) {
        result.add('trk-end');
      }
    }
    return result;
  };

  onCleanup(() => {
    console.log({
      caller: 'Trkseg / onCleanup',
      trksegId,
      trkseg: trkseg(),
      params,
      context,
    });
    destroyCachedSignal(params);
    clearFeatures();
  });

  createEffect(() => {
    console.log({
      caller: 'Trkseg',
      vectorSources,
      trksegId,
      trkseg: trkseg(),
      context,
      trk: context.trk(),
    });

    clearFeatures();

    if (trkseg() && trkseg().trkpt && trkseg().trkpt.length > 0) {
      let geoCluttered: any = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: fromLonLat([
                trkseg().trkpt[0].$.lon,
                trkseg().trkpt[0].$.lat,
              ]),
            },
            properties: {
              type: 'trkseg-start',
              id: trksegId,
              context: { ...context, trkseg, trksegId },
              positions: positions(),
              tags,
            },
            id: `${trksegId}/start`,
          },
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: trkseg().trkpt.map((trkpt: any) =>
                fromLonLat([trkpt.$.lon, trkpt.$.lat])
              ),
            },
            properties: {
              type: 'trkseg',
              id: trksegId,
              context: { ...context, trkseg, trksegId },
              positions: positions(),
              tags,
            },
            id: trksegId,
          },
        ],
      };

      let geoUnCluttered: any = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: fromLonLat([
                trkseg().trkpt.at(-1).$.lon,
                trkseg().trkpt.at(-1).$.lat,
              ]),
            },
            properties: {
              type: 'trkseg-finish',
              id: trksegId,
              context: { ...context, trkseg, trksegId },
              positions: positions(),
              tags,
            },
            id: `${trksegId}/end`,
          },
        ],
      };

      vectorSources[0].addFeatures(new GeoJSON().readFeatures(geoCluttered));
      vectorSources[1].addFeatures(new GeoJSON().readFeatures(geoUnCluttered));
    }
  });

  return <></>;
};

export default Trkseg;