import { Component, createEffect, createResource, 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 { setBranch, tree } from '../map'; import { Feature } from 'ol'; interface Props { wptId: string; vectorSource: VectorSource; } export const Wpt: Component = ({ vectorSource, wptId: wptId }) => { const [wpt, setWpt] = createSignal(); const [dispatchId, setDispatchId] = createSignal(-1); const wptCallBack = (error: any, result: any, id?: number) => { if (error) { console.error({ caller: 'wptCallBack', error }); } else { console.log({ caller: 'wptCallBack', result }); setWpt(result); } if (id) { setDispatchId(id); } }; dispatch( { action: 'getAndWatch', params: { id: wptId, method: 'getWpt', }, }, wptCallBack, true ); onCleanup(() => { dispatch({ action: 'cancelWatch', params: { id: wptId, method: 'getWpt', }, }); cancelDispatch(dispatchId()); }); createEffect(() => { console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() }); if (wpt() && !tree[wptId]) { let geo: any = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [wpt().$.lon, wpt().$.lat], }, properties: { type: 'wpt', ...wpt(), id: wptId }, }, ], }; const features = new GeoJSON().readFeatures(geo); console.log({ caller: 'Wpt', features }); vectorSource.addFeatures(features); setBranch(wptId, { features, updateHandler }); } }); const updateHandler = (feature: Feature) => { console.log({ caller: 'Wpt / updateHandler / clicked', feature, }); }; return <>; }; export default Wpt;