fix ts error

update chartjs
new mapbox version
2026-01-15 14:18:41 +00:00 · 2025-12-24 10:23:15 +01:00 · 2025-12-24 10:11:43 +01:00 · 2025-12-24 08:48:50 +01:00 · 2025-12-24 08:48:21 +01:00 · 2025-12-23 17:34:34 +01:00
13 changed files with 252 additions and 358 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +0,0 @@
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-src/lib/components/ui
-*.mdx
--- a/gpx/package.json
+++ b/gpx/package.json
@@ -25,7 +25,7 @@
    "scripts": {
        "build": "tsc",
        "postinstall": "npm run build",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "format": "prettier --write . --config ../.prettierrc"
    }
 }
--- a/gpx/src/gpx.ts
+++ b/gpx/src/gpx.ts
@@ -1375,7 +1375,10 @@ export class TrackPoint {
            : undefined;
    }

-    setExtension(key: string, value: string) {
+    setExtensions(extensions: Record<string, string>) {
+        if (Object.keys(extensions).length === 0) {
+            return;
+        }
        if (!this.extensions) {
            this.extensions = {};
        }
@@ -1385,12 +1388,8 @@ export class TrackPoint {
        if (!this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']) {
            this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'] = {};
        }
-        this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'][key] = value;
-    }
-
-    setExtensions(extensions: Record<string, string>) {
        Object.entries(extensions).forEach(([key, value]) => {
-            this.setExtension(key, value);
+            this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions'][key] = value;
        });
    }

--- a/website/.prettierignore
+++ b/website/.prettierignore
@@ -0,0 +1,3 @@
+src/lib/components/ui
+src/lib/docs/**/*.mdx
+**/*.webmanifest
--- a/website/components.json
+++ b/website/components.json
@@ -1,17 +1,17 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"css": "src/app.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils",
-		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks",
-		"lib": "$lib"
-	},
-	"typescript": true,
-	"registry": "https://shadcn-svelte.com/registry"
+    "$schema": "https://shadcn-svelte.com/schema.json",
+    "style": "default",
+    "tailwind": {
+        "css": "src/app.css",
+        "baseColor": "slate"
+    },
+    "aliases": {
+        "components": "$lib/components",
+        "utils": "$lib/utils",
+        "ui": "$lib/components/ui",
+        "hooks": "$lib/hooks",
+        "lib": "$lib"
+    },
+    "typescript": true,
+    "registry": "https://shadcn-svelte.com/registry"
 }
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14,7 +14,7 @@
                "@mapbox/sphericalmercator": "^2.0.1",
                "@mapbox/tilebelt": "^2.0.2",
                "@types/mapbox__sphericalmercator": "^1.2.3",
-                "chart.js": "^4.4.9",
+                "chart.js": "^4.5.1",
                "chartjs-plugin-zoom": "^2.2.0",
                "clsx": "^2.1.1",
                "dexie": "^4.0.11",
@@ -22,7 +22,7 @@
                "gpx": "file:../gpx",
                "immer": "^10.1.1",
                "jszip": "^3.10.1",
-                "mapbox-gl": "^3.16.0",
+                "mapbox-gl": "^3.17.0",
                "mapillary-js": "^4.1.2",
                "png.js": "^0.2.1",
                "sanitize-html": "^2.17.0",
@@ -3664,9 +3664,9 @@
            }
        },
        "node_modules/chart.js": {
-            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
-            "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
            "license": "MIT",
            "dependencies": {
                "@kurkle/color": "^0.3.0"
@@ -6069,12 +6069,14 @@
            }
        },
        "node_modules/mapbox-gl": {
-            "version": "3.16.0",
-            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.16.0.tgz",
-            "integrity": "sha512-rluV1Zp/0oHf1Y9BV+nePRNnKyTdljko3E19CzO5rBqtQaNUYS0ePCMPRtxOuWRwSdKp3f9NWJkOCjemM8nmjw==",
+            "version": "3.17.0",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.17.0.tgz",
+            "integrity": "sha512-nCrDKRlr5di6xUksUDslNWwxroJ5yv1hT8pyVFtcpWJOOKsYQxF/wOFTMie8oxMnXeFkrz1Tl1TwA1XN1yX0KA==",
            "license": "SEE LICENSE IN LICENSE.txt",
            "workspaces": [
                "src/style-spec",
+                "test/build/vite",
+                "test/build/webpack",
                "test/build/typings"
            ],
            "dependencies": {
@@ -6102,7 +6104,6 @@
                "pbf": "^4.0.1",
                "potpack": "^2.0.0",
                "quickselect": "^3.0.0",
-                "serialize-to-js": "^3.1.2",
                "supercluster": "^8.0.1",
                "tinyqueue": "^3.0.0"
            }
@@ -7634,14 +7635,6 @@
                "node": ">=10"
            }
        },
-        "node_modules/serialize-to-js": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
-            "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
        "node_modules/set-cookie-parser": {
            "version": "2.7.0",
            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
--- a/website/package.json
+++ b/website/package.json
@@ -10,8 +10,8 @@
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "format": "prettier --write . --config ../.prettierrc"
    },
    "devDependencies": {
        "@lucide/svelte": "^0.544.0",
@@ -66,7 +66,7 @@
        "@mapbox/sphericalmercator": "^2.0.1",
        "@mapbox/tilebelt": "^2.0.2",
        "@types/mapbox__sphericalmercator": "^1.2.3",
-        "chart.js": "^4.4.9",
+        "chart.js": "^4.5.1",
        "chartjs-plugin-zoom": "^2.2.0",
        "clsx": "^2.1.1",
        "dexie": "^4.0.11",
@@ -74,7 +74,7 @@
        "gpx": "file:../gpx",
        "immer": "^10.1.1",
        "jszip": "^3.10.1",
-        "mapbox-gl": "^3.16.0",
+        "mapbox-gl": "^3.17.0",
        "mapillary-js": "^4.1.2",
        "png.js": "^0.2.1",
        "sanitize-html": "^2.17.0",
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -1,126 +1,126 @@
-@import "tailwindcss";
-@import "tw-animate-css";
- 
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
@custom-variant dark (&:is(.dark *));
- 
+
 :root {
- --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
- --foreground: hsl(240 10% 3.9%);
- --muted: hsl(240 4.8% 95.9%);
- --muted-foreground: hsl(240 3.8% 46.1%);
- --popover: hsl(0 0% 100%);
- --popover-foreground: hsl(240 10% 3.9%);
- --card: hsl(0 0% 100%);
- --card-foreground: hsl(240 10% 3.9%);
- --border: hsl(240 5.9% 90%);
- --input: hsl(240 5.9% 90%);
- --primary: hsl(240 5.9% 10%);
- --primary-foreground: hsl(0 0% 98%);
- --secondary: hsl(240 4.8% 95.9%);
- --secondary-foreground: hsl(240 5.9% 10%);
- --accent: hsl(240 4.8% 95.9%);
- --accent-foreground: hsl(240 5.9% 10%);
- --destructive: hsl(0 72.2% 50.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 10% 3.9%);
- --sidebar: hsl(0 0% 98%);
- --sidebar-foreground: hsl(240 5.3% 26.1%);
- --sidebar-primary: hsl(240 5.9% 10%);
- --sidebar-primary-foreground: hsl(0 0% 98%);
- --sidebar-accent: hsl(240 4.8% 95.9%);
- --sidebar-accent-foreground: hsl(240 5.9% 10%);
- --sidebar-border: hsl(220 13% 91%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+    --foreground: hsl(240 10% 3.9%);
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+    --destructive: hsl(0 72.2% 50.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 10% 3.9%);
+    --sidebar: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);

- --support: rgb(220 15 130);
- --link: rgb(0 110 180);
- --selection: hsl(240 4.8% 93%);
- 
- --radius: 0.5rem;
+    --support: rgb(220 15 130);
+    --link: rgb(0 110 180);
+    --selection: hsl(240 4.8% 93%);
+
+    --radius: 0.5rem;
 }
- 
+
 .dark {
- --background: hsl(240 10% 3.9%);
- --foreground: hsl(0 0% 98%);
- --muted: hsl(240 3.7% 15.9%);
- --muted-foreground: hsl(240 5% 64.9%);
- --popover: hsl(240 10% 3.9%);
- --popover-foreground: hsl(0 0% 98%);
- --card: hsl(240 10% 3.9%);
- --card-foreground: hsl(0 0% 98%);
- --border: hsl(240 3.7% 15.9%);
- --input: hsl(240 3.7% 15.9%);
- --primary: hsl(0 0% 98%);
- --primary-foreground: hsl(240 5.9% 10%);
- --secondary: hsl(240 3.7% 15.9%);
- --secondary-foreground: hsl(0 0% 98%);
- --accent: hsl(240 3.7% 15.9%);
- --accent-foreground: hsl(0 0% 98%);
- --destructive: hsl(0 62.8% 30.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 4.9% 83.9%);
- --sidebar: hsl(240 5.9% 10%);
- --sidebar-foreground: hsl(240 4.8% 95.9%);
- --sidebar-primary: hsl(224.3 76.3% 48%);
- --sidebar-primary-foreground: hsl(0 0% 100%);
- --sidebar-accent: hsl(240 3.7% 15.9%);
- --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
- --sidebar-border: hsl(240 3.7% 15.9%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 4.9% 83.9%);
+    --sidebar: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);

- --support: rgb(255 110 190);
- --link: rgb(80 190 255);
- --selection: hsl(240 3.7% 22%);
+    --support: rgb(255 110 190);
+    --link: rgb(80 190 255);
+    --selection: hsl(240 3.7% 22%);
 }
- 
+
@theme inline {
- /* Radius (for rounded-*) */
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- 
- /* Colors */
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-destructive-foreground: var(--destructive-foreground);
- --color-ring: var(--ring);
- --color-radius: var(--radius);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
- --color-support: var(--support);
- --color-link: var(--link);
+    /* Radius (for rounded-*) */
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);

- --breakpoint-xs: 540px;
+    /* Colors */
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-ring: var(--ring);
+    --color-radius: var(--radius);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-support: var(--support);
+    --color-link: var(--link);
+
+    --breakpoint-xs: 540px;
 }
- 
+
@layer base {
- * {
-  @apply border-border;
- }
- 
- body {
-  @apply bg-background text-foreground;
- }
-}
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -538,6 +538,7 @@
        let targetInput =
            e &&
            e.target &&
+            e.target instanceof HTMLElement &&
            (e.target.tagName === 'INPUT' ||
                e.target.tagName === 'TEXTAREA' ||
                e.target.tagName === 'SELECT' ||
--- a/website/src/lib/components/elevation-profile/elevation-profile.ts
+++ b/website/src/lib/components/elevation-profile/elevation-profile.ts
@@ -14,7 +14,12 @@ import {
    getTemperatureWithUnits,
    getVelocityWithUnits,
 } from '$lib/units';
-import Chart from 'chart.js/auto';
+import Chart, {
+    type ChartEvent,
+    type ChartOptions,
+    type ScriptableLineSegmentContext,
+    type TooltipItem,
+} from 'chart.js/auto';
 import mapboxgl from 'mapbox-gl';
 import { get, type Readable, type Writable } from 'svelte/store';
 import { map } from '$lib/components/map/map';
@@ -27,6 +32,20 @@ const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 Chart.defaults.font.family =
    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font

+interface ElevationProfilePoint {
+    x: number;
+    y: number;
+    time?: Date;
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+    extensions: Record<string, any>;
+    coordinates: [number, number];
+    index: number;
+}
+
 export class ElevationProfile {
    private _chart: Chart | null = null;
    private _canvas: HTMLCanvasElement;
@@ -90,7 +109,7 @@ export class ElevationProfile {
    }

    initialize() {
-        let options = {
+        let options: ChartOptions<'line'> = {
            animation: false,
            parsing: false,
            maintainAspectRatio: false,
@@ -98,8 +117,8 @@ export class ElevationProfile {
                x: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number) {
-                            return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                        callback: function (value: number | string) {
+                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
                        },
                        align: 'inner',
                        maxRotation: 0,
@@ -108,8 +127,8 @@ export class ElevationProfile {
                y: {
                    type: 'linear',
                    ticks: {
-                        callback: function (value: number) {
-                            return getElevationWithUnits(value, false);
+                        callback: function (value: number | string) {
+                            return getElevationWithUnits(value as number, false);
                        },
                    },
                },
@@ -140,8 +159,8 @@ export class ElevationProfile {
                        title: () => {
                            return '';
                        },
-                        label: (context: Chart.TooltipContext) => {
-                            let point = context.raw;
+                        label: (context: TooltipItem<'line'>) => {
+                            let point = context.raw as ElevationProfilePoint;
                            if (context.datasetIndex === 0) {
                                const map_ = get(map);
                                if (map_ && this._marker) {
@@ -165,10 +184,10 @@ export class ElevationProfile {
                                return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
                            }
                        },
-                        afterBody: (contexts: Chart.TooltipContext[]) => {
+                        afterBody: (contexts: TooltipItem<'line'>[]) => {
                            let context = contexts.filter((context) => context.datasetIndex === 0);
                            if (context.length === 0) return;
-                            let point = context[0].raw;
+                            let point = context[0].raw as ElevationProfilePoint;
                            let slope = {
                                at: point.slope.at.toFixed(1),
                                segment: point.slope.segment.toFixed(1),
@@ -227,6 +246,7 @@ export class ElevationProfile {
                        onPanStart: () => {
                            this._panning = true;
                            this._slicedGPXStatistics.set(undefined);
+                            return true;
                        },
                        onPanComplete: () => {
                            this._panning = false;
@@ -238,13 +258,13 @@ export class ElevationProfile {
                        },
                        mode: 'x',
                        onZoomStart: ({ chart, event }: { chart: Chart; event: any }) => {
+                            if (!this._chart) {
+                                return false;
+                            }
+                            const maxZoom = this._chart.getInitialScaleBounds()?.x?.max ?? 0;
                            if (
                                event.deltaY < 0 &&
-                                Math.abs(
-                                    this._chart.getInitialScaleBounds().x.max /
-                                        this._chart.options.plugins.zoom.limits.x.minRange -
-                                        this._chart.getZoomLevel()
-                                ) < 0.01
+                                Math.abs(maxZoom / this._chart.getZoomLevel()) < 0.01
                            ) {
                                // Disable wheel pan if zoomed in to the max, and zooming in
                                return false;
@@ -262,7 +282,6 @@ export class ElevationProfile {
                    },
                },
            },
-            stacked: false,
            onResize: () => {
                this.updateOverlay();
            },
@@ -270,7 +289,7 @@ export class ElevationProfile {

        let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
        datasets.forEach((id) => {
-            options.scales[`y${id}`] = {
+            options.scales![`y${id}`] = {
                type: 'linear',
                position: 'right',
                grid: {
@@ -291,7 +310,7 @@ export class ElevationProfile {
                {
                    id: 'toggleMarker',
                    events: ['mouseout'],
-                    afterEvent: (chart: Chart, args: { event: Chart.ChartEvent }) => {
+                    afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
                        if (args.event.type === 'mouseout') {
                            const map_ = get(map);
                            if (map_ && this._marker) {
@@ -305,7 +324,7 @@ export class ElevationProfile {

        let startIndex = 0;
        let endIndex = 0;
-        const getIndex = (evt) => {
+        const getIndex = (evt: PointerEvent) => {
            if (!this._chart) {
                return undefined;
            }
@@ -329,16 +348,16 @@ export class ElevationProfile {
                }
            }

-            let point = points.find((point) => point.element.raw);
+            const point = points.find((point) => (point.element as any).raw);
            if (point) {
-                return point.element.raw.index;
+                return (point.element as any).raw.index;
            } else {
                return points[0].index;
            }
        };

        let dragStarted = false;
-        const onMouseDown = (evt) => {
+        const onMouseDown = (evt: PointerEvent) => {
            if (evt.shiftKey) {
                // Panning interaction
                return;
@@ -347,7 +366,7 @@ export class ElevationProfile {
            this._canvas.style.cursor = 'col-resize';
            startIndex = getIndex(evt);
        };
-        const onMouseMove = (evt) => {
+        const onMouseMove = (evt: PointerEvent) => {
            if (dragStarted) {
                this._dragging = true;
                endIndex = getIndex(evt);
@@ -367,7 +386,7 @@ export class ElevationProfile {
                }
            }
        };
-        const onMouseUp = (evt) => {
+        const onMouseUp = (evt: PointerEvent) => {
            dragStarted = false;
            this._dragging = false;
            this._canvas.style.cursor = '';
@@ -463,8 +482,8 @@ export class ElevationProfile {
            normalized: true,
            yAxisID: 'ypower',
        };
-        this._chart.options.scales.x['min'] = 0;
-        this._chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
+        this._chart.options.scales!.x!['min'] = 0;
+        this._chart.options.scales!.x!['max'] = getConvertedDistance(data.global.distance.total);

        this.setVisibility();
        this.setFill();
@@ -513,21 +532,24 @@ export class ElevationProfile {
            return;
        }
        const elevationFill = get(this._elevationFill);
+        const dataset = this._chart.data.datasets[0];
+        let segment: any = {};
        if (elevationFill === 'slope') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.slopeFillCallback,
            };
        } else if (elevationFill === 'surface') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.surfaceFillCallback,
            };
        } else if (elevationFill === 'highway') {
-            this._chart.data.datasets[0]['segment'] = {
+            segment = {
                backgroundColor: this.highwayFillCallback,
            };
        } else {
-            this._chart.data.datasets[0]['segment'] = {};
+            segment = {};
        }
+        Object.assign(dataset, { segment });
    }

    updateOverlay() {
@@ -575,19 +597,22 @@ export class ElevationProfile {
        }
    }

-    slopeFillCallback(context) {
-        return getSlopeColor(context.p0.raw.slope.segment);
+    slopeFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSlopeColor(point.slope.segment);
    }

-    surfaceFillCallback(context) {
-        return getSurfaceColor(context.p0.raw.extensions.surface);
+    surfaceFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSurfaceColor(point.extensions.surface);
    }

-    highwayFillCallback(context) {
+    highwayFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
        return getHighwayColor(
-            context.p0.raw.extensions.highway,
-            context.p0.raw.extensions.sac_scale,
-            context.p0.raw.extensions.mtb_scale
+            point.extensions.highway,
+            point.extensions.sac_scale,
+            point.extensions.mtb_scale
        );
    }

--- a/website/src/lib/components/map/gpx-layer/gpx-layer.ts
+++ b/website/src/lib/components/map/gpx-layer/gpx-layer.ts
@@ -1,5 +1,5 @@
 import { get, type Readable } from 'svelte/store';
-import mapboxgl from 'mapbox-gl';
+import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
 import { map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
@@ -281,25 +281,23 @@ export class GPXLayer {
                }
            }

-            let visibleSegments: [number, number][] = [];
+            let visibleTrackSegmentIds: string[] = [];
            file.forEachSegment((segment, trackIndex, segmentIndex) => {
                if (!segment._data.hidden) {
-                    visibleSegments.push([trackIndex, segmentIndex]);
+                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
                }
            });
+            const segmentFilter: FilterSpecification = [
+                'in',
+                ['get', 'trackSegmentId'],
+                ['literal', visibleTrackSegmentIds],
+            ];

-            _map.setFilter(
-                this.fileId,
-                [
-                    'any',
-                    ...visibleSegments.map(([trackIndex, segmentIndex]) => [
-                        'all',
-                        ['==', 'trackIndex', trackIndex],
-                        ['==', 'segmentIndex', segmentIndex],
-                    ]),
-                ],
-                { validate: false }
-            );
+            _map.setFilter(this.fileId, segmentFilter, { validate: false });
+
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
+            }

            let visibleWaypoints: number[] = [];
            file.wpt.forEach((waypoint, waypointIndex) => {
@@ -313,21 +311,6 @@ export class GPXLayer {
                ['in', ['get', 'waypointIndex'], ['literal', visibleWaypoints]],
                { validate: false }
            );
-
-            if (_map.getLayer(this.fileId + '-direction')) {
-                _map.setFilter(
-                    this.fileId + '-direction',
-                    [
-                        'any',
-                        ...visibleSegments.map(([trackIndex, segmentIndex]) => [
-                            'all',
-                            ['==', 'trackIndex', trackIndex],
-                            ['==', 'segmentIndex', segmentIndex],
-                        ]),
-                    ],
-                    { validate: false }
-                );
-            }
        } catch (e) {
            // No reliable way to check if the map is ready to add sources and layers
            return;
@@ -686,6 +669,7 @@ export class GPXLayer {
            }
            feature.properties.trackIndex = trackIndex;
            feature.properties.segmentIndex = segmentIndex;
+            feature.properties.trackSegmentId = `${trackIndex}-${segmentIndex}`;

            segmentIndex++;
            if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -21,7 +21,7 @@
        SquareArrowUpLeft,
        SquareArrowOutDownRight,
    } from '@lucide/svelte';
-    import { routingProfiles } from '$lib/components/toolbar/tools/routing/routing';
+    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/routing';
    import { i18n } from '$lib/i18n.svelte';
    import { slide } from 'svelte/transition';
    import {
@@ -167,7 +167,7 @@
                                {i18n._(`toolbar.routing.activities.${$routingProfile}`)}
                            </Select.Trigger>
                            <Select.Content>
-                                {#each Object.keys(routingProfiles) as profile}
+                                {#each Object.keys(brouterProfiles) as profile}
                                    <Select.Item value={profile}
                                        >{i18n._(
                                            `toolbar.routing.activities.${profile}`
--- a/website/src/lib/components/toolbar/tools/routing/routing.ts
+++ b/website/src/lib/components/toolbar/tools/routing/routing.ts
@@ -6,141 +6,35 @@ import { get } from 'svelte/store';

 const { routing, routingProfile, privateRoads } = settings;

-export type RoutingProfile = {
-    engine: 'graphhopper' | 'brouter';
-    profile: string;
-};
-
-export const routingProfiles: { [key: string]: RoutingProfile } = {
-    bike: { engine: 'graphhopper', profile: 'bike' },
-    racing_bike: { engine: 'graphhopper', profile: 'racingbike' },
-    gravel_bike: { engine: 'brouter', profile: 'gravel' },
-    mountain_bike: { engine: 'graphhopper', profile: 'mtb' },
-    foot: { engine: 'graphhopper', profile: 'foot' },
-    motorcycle: { engine: 'graphhopper', profile: 'motorcycle' },
-    water: { engine: 'brouter', profile: 'river' },
-    railway: { engine: 'brouter', profile: 'rail' },
+export const brouterProfiles: { [key: string]: string } = {
+    bike: 'Trekking-dry',
+    racing_bike: 'fastbike',
+    gravel_bike: 'gravel',
+    mountain_bike: 'MTB',
+    foot: 'Hiking-Alpine-SAC6',
+    motorcycle: 'Car-FastEco',
+    water: 'river',
+    railway: 'rail',
 };

 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
    if (get(routing)) {
-        const profile = routingProfiles[get(routingProfile)];
-        if (profile.engine === 'graphhopper') {
-            return getGraphHopperRoute(points, profile.profile, get(privateRoads));
-        } else {
-            return getBRouterRoute(points, profile.profile);
-        }
+        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
    } else {
        return getIntermediatePoints(points);
    }
 }

-const graphhopperDetails = ['road_class', 'surface', 'hike_rating', 'mtb_rating'];
-const hikeRatingToSACScale: { [key: string]: string } = {
-    '1': 'hiking',
-    '2': 'mountain_hiking',
-    '3': 'demanding_mountain_hiking',
-    '4': 'alpine_hiking',
-    '5': 'demanding_alpine_hiking',
-    '6': 'difficult_alpine_hiking',
-};
-const mtbRatingToScale: { [key: string]: string } = {
-    '1': '0',
-    '2': '1',
-    '3': '2',
-    '4': '3',
-    '5': '4',
-    '6': '5',
-    '7': '6',
-};
-async function getGraphHopperRoute(
+async function getRoute(
    points: Coordinates[],
-    graphHopperProfile: string,
+    brouterProfile: string,
    privateRoads: boolean
 ): Promise<TrackPoint[]> {
-    let response = await fetch('https://graphhopper-a.gpx.studio/route', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            points: points.map((point) => [point.lon, point.lat]),
-            profile: graphHopperProfile,
-            elevation: true,
-            points_encoded: false,
-            details: graphhopperDetails,
-            custom_model: privateRoads
-                ? {}
-                : {
-                      priority: [
-                          {
-                              if: 'road_access == PRIVATE',
-                              multiply_by: '0.0',
-                          },
-                      ],
-                  },
-        }),
-    });
-
-    if (!response.ok) {
-        throw new Error(`${await response.text()}`);
-    }
-
-    let json = await response.json();
-
-    let route: TrackPoint[] = [];
-    let coordinates = json.paths[0].points.coordinates;
-    let details = json.paths[0].details;
-
-    for (let i = 0; i < coordinates.length; i++) {
-        route.push(
-            new TrackPoint({
-                attributes: {
-                    lat: coordinates[i][1],
-                    lon: coordinates[i][0],
-                },
-                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
-                extensions: {},
-            })
-        );
-    }
-
-    for (let key of graphhopperDetails) {
-        let detail = details[key];
-        for (let i = 0; i < detail.length; i++) {
-            for (let j = detail[i][0]; j < detail[i][1] + (i == detail.length - 1); j++) {
-                if (detail[i][2] !== undefined && detail[i][2] !== 'missing') {
-                    if (key === 'road_class') {
-                        route[j].setExtension('highway', detail[i][2]);
-                    } else if (key === 'hike_rating') {
-                        const sacScale = hikeRatingToSACScale[detail[i][2]];
-                        if (sacScale) {
-                            route[j].setExtension('sac_scale', sacScale);
-                        }
-                    } else if (key === 'mtb_rating') {
-                        const mtbScale = mtbRatingToScale[detail[i][2]];
-                        if (mtbScale) {
-                            route[j].setExtension('mtb_scale', mtbScale);
-                        }
-                    } else if (key === 'surface' && detail[i][2] !== 'other') {
-                        route[j].setExtension('surface', detail[i][2]);
-                    }
-                }
-            }
-        }
-    }
-
-    return route;
-}
-
-async function getBRouterRoute(
-    points: Coordinates[],
-    brouterProfile: string
-): Promise<TrackPoint[]> {
-    let url = `https://brouter.de/brouter?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile}&format=geojson&alternativeidx=0`;
+    let url = `https://brouter.gpx.studio?lonlats=${points.map((point) => `${point.lon.toFixed(8)},${point.lat.toFixed(8)}`).join('|')}&profile=${brouterProfile + (privateRoads ? '-private' : '')}&format=geojson&alternativeidx=0`;

    let response = await fetch(url);

+    // Check if the response is ok
    if (!response.ok) {
        throw new Error(`${await response.text()}`);
    }
@@ -158,13 +52,14 @@ async function getBRouterRoute(
    let tags = messageIdx < messages.length ? getTags(messages[messageIdx][tagIdx]) : {};

    for (let i = 0; i < coordinates.length; i++) {
+        let coord = coordinates[i];
        route.push(
            new TrackPoint({
                attributes: {
-                    lat: coordinates[i][1],
-                    lon: coordinates[i][0],
+                    lat: coord[1],
+                    lon: coord[0],
                },
-                ele: coordinates[i][2] ?? (i > 0 ? route[i - 1].ele : 0),
+                ele: coord[2] ?? (i > 0 ? route[i - 1].ele : 0),
            })
        );
Author	SHA1	Message	Date
vcoppe	e7a1d0488b	fix ts error	2025-12-24 10:23:15 +01:00
vcoppe	22b8e0edb4	update chartjs	2025-12-24 10:11:43 +01:00
vcoppe	d062a38e8f	new mapbox version	2025-12-24 08:48:50 +01:00
vcoppe	affa59130f	simplify filter for hiding layers	2025-12-24 08:48:21 +01:00
vcoppe	3c816567bc	use explicit path for prettierrc file, closes #289	2025-12-23 17:34:34 +01:00