@swr-data-lab/components 2.30.0 → 2.31.1

package/dist/Caption/Caption.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">let { weight = 'regular', as = 'div', children } = $props();
+<script lang="ts">let { weight = 'regular', as = 'div', children, ...rest } = $props();
 export {};
 </script>
 
-<svelte:element this={as} class={['container', weight]}>
+<svelte:element this={as} class={['container', weight]} {...rest}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/Copy/Copy.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">let { as = 'div', weight = 'regular', children } = $props();
+<script lang="ts">let { as = 'div', weight = 'regular', children, ...rest } = $props();
 export {};
 </script>
 
-<svelte:element this={as} class={['container', weight]}>
+<svelte:element this={as} class={['container', weight]} {...rest}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/Headline/Headline.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">let { as = 'h2', children } = $props();
+<script lang="ts">let { as = 'h2', children, ...rest } = $props();
 export {};
 </script>
 
-<svelte:element this={as} class="container">
+<svelte:element this={as} class="container" {...rest}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/Note/Note.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">let { as = 'div', children } = $props();
+<script lang="ts">let { as = 'div', children, ...rest } = $props();
 export {};
 </script>
 
-<svelte:element this={as} class="container">
+<svelte:element this={as} class="container" {...rest}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/maplibre/ArrowSource/ArrowSource.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import {} from 'maplibre-gl';
+import { onDestroy, onMount } from 'svelte';
 import MapSource from '../Source';
 import { getMapContext } from '../context.svelte.js';
 import quadraticToPoints from './quadraticToPoints';
-import { onDestroy } from 'svelte';
 const { map } = $derived(getMapContext());
 const { id, arrows = [], attribution = '' } = $props();
 const ars = arrows.map((a) => {
     return {
         width: a.width || 10,
-        points: quadraticToPoints(a.a, a.b, a.c, 10),
+        points: quadraticToPoints(a.a, a.b, a.c),
         headScale: a.headScale
     };
 });
@@ -58,7 +58,7 @@ let sourceSpec = $state({
 const onZoom = () => {
     sourceSpec = { ...sourceSpec, data: arrowsToJson(ars) };
 };
-$effect(() => {
+onMount(() => {
     map?.on('zoom', onZoom);
 });
 onDestroy(() => {

package/dist/maplibre/ArrowSource/ArrowSource.svelte.d.ts

@@ -1,4 +1,4 @@
-type V2 = [number, number];
+import type { V2 } from '../types';
 interface ArrowSpec {
     a: V2;
     b: V2;

package/dist/maplibre/ArrowSource/quadraticToPoints.d.ts

@@ -1,12 +1,11 @@
+import type { V2 } from '../types';
 /**
-Given a quadratic bezier defined by points a, b and c,
-returns a series of n points on the curve
-
-The quadratic bezier is: B(t) = (1-t)[(1-t)P0 + tP1] + t[(1-t)P1+tP2]
-Source: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
-
-Below is a naive implementation but good enough for now. For a better approach see:
-https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
+ * Given a quadratic Bezier defined by points a, b and c
+ * returns a series of evenly-spaced points on the curve
+ *
+ * Sources:
+ * - https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
+ * - https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
  */
-declare const quadraticToPoints: (a: [number, number], b: [number, number], c: [number, number], n?: number) => [number, number][];
+declare const quadraticToPoints: (a: V2, b: V2, c: V2, n?: number) => V2[];
 export default quadraticToPoints;

package/dist/maplibre/ArrowSource/quadraticToPoints.js

@@ -1,21 +1,64 @@
 /**
-Given a quadratic bezier defined by points a, b and c,
-returns a series of n points on the curve
-
-The quadratic bezier is: B(t) = (1-t)[(1-t)P0 + tP1] + t[(1-t)P1+tP2]
-Source: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
-
-Below is a naive implementation but good enough for now. For a better approach see:
-https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
+ * Returns the euclidian distance between two points
  */
-const quadraticToPoints = (a, b, c, n = 10) => {
+const distance = (a, b) => {
+    return Math.sqrt((b[0] - a[0]) ** 2 + (b[1] - a[1]) ** 2);
+};
+/**
+ * Given a sorted array arr and a value, returns the index i of arr
+ * such that arr[i] < value && arr[i + 1] > value using binary search
+ */
+const getSortedIndex = (arr, v) => {
+    let low = 0, high = arr.length;
+    while (low < high) {
+        let mid = (low + high) >>> 1; // === Math.abs((low + high) * .5) but faster
+        if (arr[mid] < v)
+            low = mid + 1;
+        else
+            high = mid;
+    }
+    return low;
+};
+/**
+ * Given a polyline, returns n evenly-spaced points on the polyline
+ */
+const interpolatePolyline = (points, n) => {
+    let res = [], totalLength = 0, segments = [0];
+    for (let i = 0; i < points.length - 2; i++) {
+        totalLength += distance(points[i], points[i + 1]);
+        segments.push(totalLength);
+    }
+    for (let i = 0; i < n; i++) {
+        const d = totalLength * (i / n);
+        const si = getSortedIndex(segments, d);
+        const p0 = points[si];
+        const p1 = points[si + 1];
+        const sn = [p1[0] - p0[0], p1[1] - p0[1]];
+        const segmentFraction = (d - segments[si]) / distance(p0, p1);
+        res.push([p1[0] + sn[0] * segmentFraction, p1[1] + sn[1] * segmentFraction]);
+    }
+    return res;
+};
+/**
+ * Given a quadratic Bezier defined by points a, b and c
+ * returns a series of evenly-spaced points on the curve
+ *
+ * Sources:
+ * - https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves
+ * - https://bit-101.com/blog/posts/2024-09-29/evenly-placed-points-on-bezier-curves
+ */
+const quadraticToPoints = (a, b, c, n = 25) => {
     let points = [];
+    // 1. Interpolate the quadratic bezier function to obtain an uneven polyline
     for (let i = 0; i < n; i++) {
         const t = i / n;
-        const x = (1 - t) * ((1 - t) * a[0] + t * c[0]) + t * ((1 - t) * c[0] + t * b[0]);
-        const y = (1 - t) * ((1 - t) * a[1] + t * c[1]) + t * ((1 - t) * c[1] + t * b[1]);
-        points.push([x, y]);
+        points.push([
+            (1 - t) * ((1 - t) * a[0] + t * c[0]) + t * ((1 - t) * c[0] + t * b[0]),
+            (1 - t) * ((1 - t) * a[1] + t * c[1]) + t * ((1 - t) * c[1] + t * b[1])
+        ]);
     }
-    return [...points, b];
+    // 2. Interpolate the polyline from (1) to get evenly-spaced points
+    points = interpolatePolyline([...points, b], n);
+    return points;
 };
 export default quadraticToPoints;

package/dist/maplibre/types.d.ts

@@ -3,6 +3,7 @@ export type Layer = LineLayerSpecification | FillLayerSpecification | FillExtrus
 export type GeocodingService = 'maptiler';
 export type GeocodingCountry = 'de' | 'at';
 export type GeocodingLanguage = 'de' | 'en';
+export type V2 = [number, number];
 export interface Location {
     lat: number;
     lng: number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.30.0",
+	"version": "2.31.1",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",