diff --git a/public/assets/test.svg b/public/assets/test.svg new file mode 100644 index 0000000..ddcc8ed --- /dev/null +++ b/public/assets/test.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/components/map/Gpx.tsx b/src/components/map/Gpx.tsx new file mode 100644 index 0000000..2194bd0 --- /dev/null +++ b/src/components/map/Gpx.tsx @@ -0,0 +1,47 @@ +import react, { useEffect, useState } from 'react'; +import dispatch from '../../workers/dispatcher-main'; +import Trk from './Trk'; +import { TileKeyObject, Rectangle } from './types'; +import getUri from '../../lib/ids'; + +export interface GpxProperties { + id: string; + keyObject: TileKeyObject; + zoom: number; + viewPort: Rectangle; +} + +export const Gpx: react.FC = (props: GpxProperties) => { + const [gpx, setGpx] = useState([]); + useEffect(() => { + const getGpx = async () => { + const gpx = await dispatch({ + action: 'getGpx', + params: { + id: props.id, + }, + }); + console.log(`, gpx: ${JSON.stringify(gpx)}`); + setGpx(gpx); + }; + getGpx(); + }, [props.id]); + + return ( + + {gpx + .filter((row: any) => row.doc.type === 'trk') + .map((row: any) => ( + + ))} + + ); +}; + +export default Gpx; diff --git a/src/components/map/Gpxes.tsx b/src/components/map/Gpxes.tsx index 15883f3..30d37c9 100644 --- a/src/components/map/Gpxes.tsx +++ b/src/components/map/Gpxes.tsx @@ -1,5 +1,6 @@ import react, { useEffect, useState } from 'react'; import dispatch from '../../workers/dispatcher-main'; +import Gpx from './Gpx'; import { TileKeyObject, Rectangle } from './types'; export interface GpxesProperties { @@ -30,7 +31,19 @@ export const Gpxes: react.FC = (props: GpxesProperties) => { props.viewPort?.topLeft.y, props.keyObject?.zoomLevel, ]); - return <>; + return ( + <> + {visibleGpxes.map((id: string) => ( + + ))} + + ); }; export default Gpxes; diff --git a/src/components/map/Trk.tsx b/src/components/map/Trk.tsx new file mode 100644 index 0000000..b3ef309 --- /dev/null +++ b/src/components/map/Trk.tsx @@ -0,0 +1,47 @@ +import react, { useEffect, useState } from 'react'; +import dispatch from '../../workers/dispatcher-main'; +import { TileKeyObject, Rectangle } from './types'; +import getUri from '../../lib/ids'; +import Trkseg from './Trkseg'; + +export interface TrkProperties { + id: string; + keyObject: TileKeyObject; + zoom: number; + viewPort: Rectangle; +} + +export const Trk: react.FC = (props: TrkProperties) => { + const [trk, setTrk] = useState([]); + useEffect(() => { + const getTrk = async () => { + const trk = await dispatch({ + action: 'getTrk', + params: { + id: props.id, + }, + }); + console.log(`, gpx: ${JSON.stringify(trk)}`); + setTrk(trk); + }; + getTrk(); + }, [props.id]); + + return ( + + {trk + .filter((row: any) => row.doc.type === 'trkseg') + .map((row: any) => ( + + ))} + + ); +}; + +export default Trk; diff --git a/src/components/map/Trkseg.module.css b/src/components/map/Trkseg.module.css new file mode 100644 index 0000000..e115e70 --- /dev/null +++ b/src/components/map/Trkseg.module.css @@ -0,0 +1,8 @@ +.track { + fill: transparent; + stroke-width: 2px; + stroke-linecap: round; + stroke-linejoin: round; + stroke: rgba(10, 1, 51, 0.8); + vector-effect: non-scaling-stroke; +} diff --git a/src/components/map/Trkseg.tsx b/src/components/map/Trkseg.tsx new file mode 100644 index 0000000..169c65f --- /dev/null +++ b/src/components/map/Trkseg.tsx @@ -0,0 +1,74 @@ +import react, { useEffect, useState } from 'react'; +import { lon2tile, lat2tile } from '../../lib/geo'; +import dispatch from '../../workers/dispatcher-main'; +import { TileKeyObject, Rectangle } from './types'; + +import css from './Trkseg.module.css'; + +export interface TrksegProperties { + id: string; + keyObject: TileKeyObject; + zoom: number; + viewPort: Rectangle; +} + +export const Trkseg: react.FC = (props: TrksegProperties) => { + const [trkseg, setTrkseg] = useState([]); + useEffect(() => { + const getTrkseg = async () => { + const trk = await dispatch({ + action: 'getTrkseg', + params: { + id: props.id, + }, + }); + console.log(`, gpx: ${JSON.stringify(trk)}`); + setTrkseg(trk); + }; + getTrkseg(); + }, [props.id]); + + const d = trkseg + .slice(1) + .reduce((previous: string, current: any, index: number) => { + const action = index === 0 ? 'M' : index === 1 ? 'L' : ''; + const trkpt = current.doc.doc; + return `${previous} ${action} ${lon2tile( + trkpt.$.lon, + props.keyObject.zoomLevel + )}, ${lat2tile(trkpt.$.lat, props.keyObject.zoomLevel)}`; + }, ''); + + const widthFactor = () => { + return 2; + if (props.keyObject.zoomLevel <= 12) { + return 2; + } + if (props.keyObject.zoomLevel <= 17) { + return 4; + } + + if (props.keyObject.zoomLevel <= 18) { + return 8; + } + if (props.keyObject.zoomLevel <= 19) { + return 16; + } + + return 64; + }; + + // style={{ strokeWidth: widthFactor() / 256 / props.zoom }} + return ( + + + + ); +}; + +export default Trkseg; diff --git a/src/db/gpx.ts b/src/db/gpx.ts index e581d3f..f14f1bb 100644 --- a/src/db/gpx.ts +++ b/src/db/gpx.ts @@ -2,7 +2,7 @@ import { PureComponent } from 'react'; import { Point, Rectangle } from '../components/map/types'; import { lat2tile, lon2tile, rectanglesIntersect } from '../lib/geo'; import getUri, { intToGpxId } from '../lib/ids'; -import { get, getDocsByType, put, putAll } from './lib'; +import { get, getDocsByType, getFamily, put, putAll } from './lib'; const emptyGpx: Gpx = { $: { @@ -88,9 +88,9 @@ const prune = (id: any, object: any, docs: any[]) => { } }; -const techFromObject = ( +const extensionsFromObject = ( object: any, - tech = { + extensions = { viewport: { topLeft: {}, bottomRight: {} }, bbox: { minLon: undefined, @@ -105,56 +105,75 @@ const techFromObject = ( const attributes = object.$; if ('lat' in attributes) { const lat = +attributes.lat; - if (tech.bbox.minLat === undefined || lat < tech.bbox.minLat) { - tech.bbox.minLat = lat; + if ( + extensions.bbox.minLat === undefined || + lat < extensions.bbox.minLat + ) { + extensions.bbox.minLat = lat; } - if (tech.bbox.maxLat === undefined || lat > tech.bbox.maxLat) { - tech.bbox.maxLat = lat; + if ( + extensions.bbox.maxLat === undefined || + lat > extensions.bbox.maxLat + ) { + extensions.bbox.maxLat = lat; } } if ('lon' in attributes) { const lon = +attributes.lon; - if (tech.bbox.minLon === undefined || lon < tech.bbox.minLon) { - tech.bbox.minLon = lon; + if ( + extensions.bbox.minLon === undefined || + lon < extensions.bbox.minLon + ) { + extensions.bbox.minLon = lon; } - if (tech.bbox.maxLon === undefined || lon > tech.bbox.minLon) { - tech.bbox.maxLon = lon; + if ( + extensions.bbox.maxLon === undefined || + lon > extensions.bbox.minLon + ) { + extensions.bbox.maxLon = lon; } } } for (const key in object) { - techFromObject(object[key], tech); + extensionsFromObject(object[key], extensions); } } - return tech; + return extensions; }; -const techFromGpx = (gpx: Gpx) => { - const tech = techFromObject(gpx); - if (tech.bbox.maxLat !== undefined && tech.bbox.minLon !== undefined) { - tech.viewport.topLeft = { - x: lon2tile(tech.bbox.minLon, 0), - y: lat2tile(tech.bbox.maxLat, 0), +const extensionsFromGpx = (gpx: Gpx) => { + const extensions = { ...gpx.extensions, ...extensionsFromObject(gpx) }; + gpx.extensions = undefined; + if ( + extensions.bbox.maxLat !== undefined && + extensions.bbox.minLon !== undefined + ) { + extensions.viewport.topLeft = { + x: lon2tile(extensions.bbox.minLon, 0), + y: lat2tile(extensions.bbox.maxLat, 0), }; } - if (tech.bbox.minLat !== undefined && tech.bbox.maxLon !== undefined) { - tech.viewport.bottomRight = { - x: lon2tile(tech.bbox.maxLon, 0), - y: lat2tile(tech.bbox.minLat, 0), + if ( + extensions.bbox.minLat !== undefined && + extensions.bbox.maxLon !== undefined + ) { + extensions.viewport.bottomRight = { + x: lon2tile(extensions.bbox.maxLon, 0), + y: lat2tile(extensions.bbox.minLat, 0), }; } - return tech; + return extensions; }; export const pruneAndSaveImportedGpx = async (params: any) => { - const { id, gpx, tech } = params; + const { id, gpx, extensions } = params; let docs: any[] = [ { _id: getUri('gpx', id), type: 'gpx', doc: gpx }, { - _id: getUri('tech', id), - type: 'tech', - doc: { ...tech, ...techFromGpx(gpx) }, + _id: getUri('extensions', id), + type: 'extensions', + doc: { ...extensions, ...extensionsFromGpx(gpx) }, }, ]; prune(id, gpx, docs); @@ -179,11 +198,72 @@ export const getGpxesForViewport = async (params: any) => { y: (viewport.bottomRight.y + 1) / 2 ** zoomLevel, }, }; - const techs = await getDocsByType('tech'); - console.log(`getGpxesForViewport, techs: ${JSON.stringify(techs)}`); - return techs - .filter((tech: any) => { - return rectanglesIntersect(zoomedViewport, tech.doc.viewport); + const allExtensions = await getDocsByType('extensions'); + console.log( + `getGpxesForViewport, allExtensions: ${JSON.stringify(allExtensions)}` + ); + return allExtensions + .filter((extensions: any) => { + return rectanglesIntersect(zoomedViewport, extensions.doc.viewport); }) - .map((tech: any) => getUri('tech', tech._id)); + .map((extensions: any) => + getUri('gpx', getUri('extensions', extensions._id)) + ); +}; + +const appendToArray = (target: any, key: string, value: any) => { + if (!(key in target)) { + target[key] = []; + } + target[key].push(value); +}; + +export const getFullGpx = async (params: any) => { + const { id } = params; + const docs = await getFamily(id, { include_docs: true }); + let target: any[]; + let gpx: Gpx | undefined = undefined; + docs.rows.forEach((row: any) => { + // level 0 + if (row.doc.type === 'gpx') { + target = [row.doc.doc]; + gpx = row.doc.doc; + } + //level 1 + if ( + row.doc.type === 'wpt' || + row.doc.type === 'rte' || + row.doc.type === 'trk' || + row.doc.type === 'extensions' + ) { + target.splice(1); + appendToArray(target.at(-1), row.doc.type, row.doc.doc); + target.push(row.doc.doc); + } + // level 2 + if (row.doc.type === 'rtept' || row.doc.type === 'trkseg') { + target.splice(2); + appendToArray(target.at(-1), row.doc.type, row.doc.doc); + target.push(row.doc.doc); + } + // level 3 + if (row.doc.type === 'trkpt') { + appendToArray(target.at(-1), row.doc.type, row.doc.doc); + } + }); + return gpx; +}; + +export const getGpx = async (params: any) => { + const { id } = params; + const docs = await getFamily(id, { include_docs: true }); + console.log(`getGpx, uri: ${id} docs: ${JSON.stringify(docs)}`); + return docs.rows.filter( + (row: any) => + row.doc.type === 'gpx' || + row.doc.type === 'wpt' || + row.doc.type === 'rte' || + row.doc.type === 'trk' || + row.doc.type === 'extensions' + ); }; diff --git a/src/db/trk.ts b/src/db/trk.ts index 2f1b224..70f8f5c 100644 --- a/src/db/trk.ts +++ b/src/db/trk.ts @@ -1,6 +1,6 @@ import getUri from '../lib/ids'; import { putNewGpx } from './gpx'; -import { put } from './lib'; +import { getFamily, put } from './lib'; export const emptyTrk: Trk = { name: undefined, @@ -31,3 +31,12 @@ export const putNewTrk = async (id?: IdTrk | IdGpx) => { ); return finalId as IdTrk; }; + +export const getTrk = async (params: any) => { + const { id } = params; + const docs = await getFamily(id, { include_docs: true }); + console.log(`getTrk, uri: ${id} docs: ${JSON.stringify(docs)}`); + return docs.rows.filter( + (row: any) => row.doc.type === 'trk' || row.doc.type === 'trkseg' + ); +}; diff --git a/src/db/trkseg.ts b/src/db/trkseg.ts index 0a147cc..b6ad518 100644 --- a/src/db/trkseg.ts +++ b/src/db/trkseg.ts @@ -1,5 +1,5 @@ import getUri from '../lib/ids'; -import { put } from './lib'; +import { getFamily, put } from './lib'; import { putNewTrk } from './trk'; const emptyTrkseg: Trkseg = { @@ -24,3 +24,10 @@ export const putNewTrkseg = async (id?: IdTrk | IdGpx | IdTrkseg) => { ); return finalId as IdTrkseg; }; + +export const getTrkseg = async (params: any) => { + const { id } = params; + const docs = await getFamily(id, { include_docs: true }); + console.log(`getTrkseg, uri: ${id} docs: ${JSON.stringify(docs)}`); + return docs.rows; +}; diff --git a/src/lib/ids.ts b/src/lib/ids.ts index 67d151e..1d1ebd8 100644 --- a/src/lib/ids.ts +++ b/src/lib/ids.ts @@ -28,13 +28,13 @@ const routes = { dbdef: route('dbdef', coding), settings: route('settings', coding), gpx: route('gpx/:gpx', coding), - tech: route('gpx/:gpx/0tech', coding), wpt: route('gpx/:gpx/1wpt/:wpt', coding), rte: route('gpx/:gpx/2rte/:rte', coding), rtept: route('gpx/:gpx/2rte/:rte/:rtept', coding), trk: route('gpx/:gpx/3trk/:trk', coding), trkseg: route('gpx/:gpx/3trk/:trk/:trkseg', coding), trkpt: route('gpx/:gpx/3trk/:trk/:trkseg/:trkpt', coding), + extensions: route('gpx/:gpx/4extensions', coding), }; type RouteKey = keyof typeof routes; diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index 979ddd2..da2d311 100644 --- a/src/workers/dispatcher-worker.ts +++ b/src/workers/dispatcher-worker.ts @@ -4,8 +4,10 @@ import { existsGpx, pruneAndSaveImportedGpx, getGpxesForViewport, + getGpx, } from '../db/gpx'; -import { putNewTrk } from '../db/trk'; +import { getTrk, putNewTrk } from '../db/trk'; +import { getTrkseg } from '../db/trkseg'; const self = globalThis as unknown as SharedWorkerGlobalScope; @@ -16,6 +18,9 @@ const actions = { existsGpx, pruneAndSaveImportedGpx, getGpxesForViewport, + getGpx, + getTrk, + getTrkseg }; self.onconnect = function (e) {