layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/Voronoi.svelte

@@ -1,3 +1,58 @@
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  export type VoronoiPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+
+    /**
+     * Classes to apply to the root and path elements
+     *
+     * @default = {}
+     */
+    classes?: {
+      root?: string;
+      path?: string;
+    };
+
+    onclick?: (
+      e: MouseEvent,
+      details: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects }
+    ) => void;
+
+    onpointerenter?: (
+      e: PointerEvent,
+      details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+      }
+    ) => void;
+    onpointermove?: (
+      e: PointerEvent,
+      details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+      }
+    ) => void;
+    onpointerdown?: (
+      e: PointerEvent,
+      details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+      }
+    ) => void;
+  };
+
+  export type VoronoiProps = VoronoiPropsWithoutHTML &
+    Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
@@ -7,100 +62,72 @@
   import { pointRadial } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
   import GeoPath from './GeoPath.svelte';
-  import { geoContext, type GeoContext } from './GeoContext.svelte';
   import Spline from './Spline.svelte';
+  import { getChartContext } from './Chart.svelte';
+  import { getGeoContext } from './GeoContext.svelte';
+  import { layerClass } from '../utils/attributes.js';
 
-  const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
-  const geo = geoContext() as GeoContext | undefined;
-
-  /** Override data instead of using context */
-  export let data: any = undefined;
-
-  export let classes: {
-    root?: string;
-    path?: string;
-  } = {};
+  let {
+    data,
+    classes = {},
+    onclick,
+    onpointerenter,
+    onpointerdown,
+    onpointermove,
+    class: className,
+    ...restProps
+  }: VoronoiProps = $props();
 
-  export let onclick:
-    | ((
-        e: MouseEvent,
-        details: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects }
-      ) => void)
-    | undefined = undefined;
-  export let onpointerenter:
-    | ((
-        e: PointerEvent,
-        details: {
-          data: any;
-          point?: [number, number];
-          feature?: GeoPermissibleObjects;
-        }
-      ) => void)
-    | undefined = undefined;
-  export let onpointermove:
-    | ((
-        e: PointerEvent,
-        details: {
-          data: any;
-          point?: [number, number];
-          feature?: GeoPermissibleObjects;
-        }
-      ) => void)
-    | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerdown:
-    | ((
-        e: PointerEvent,
-        details: {
-          data: any;
-          point?: [number, number];
-          feature?: GeoPermissibleObjects;
-        }
-      ) => void)
-    | undefined = undefined;
+  const ctx = getChartContext();
+  const geo = getGeoContext();
 
-  $: points = (data ?? $flatData).map((d: any) => {
-    // geo voronoi needs raw latitude/longtude, not mapped to range (chart dimensions)
-    const xValue = $geo ? $xContext(d) : $xGet(d);
-    const yValue = $geo ? $yContext(d) : $yGet(d);
+  const points = $derived(
+    (data ?? ctx.flatData).map((d: any) => {
+      // geo voronoi needs raw latitude/longitude, not mapped to range (chart dimensions)
+      const xValue = geo.projection ? ctx.x(d) : ctx.xGet(d);
+      const yValue = geo.projection ? ctx.y(d) : ctx.yGet(d);
 
-    const x = Array.isArray(xValue) ? min(xValue) : xValue;
-    const y = Array.isArray(yValue) ? min(yValue) : yValue;
+      const x = Array.isArray(xValue) ? min(xValue) : xValue;
+      const y = Array.isArray(yValue) ? min(yValue) : yValue;
 
-    let point: [number, number];
-    if ($radial) {
-      const radialPoint = pointRadial(x, y);
-      // Assume radial is also centered
-      point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
-    } else {
-      point = [x, y];
-    }
-    // @ts-expect-error
-    point.data = d;
-    return point;
-  });
+      let point: [number, number];
+      if (ctx.radial) {
+        const radialPoint = pointRadial(x, y);
+        // Assume radial is also centered
+        point = [radialPoint[0] + ctx.width / 2, radialPoint[1] + ctx.height / 2];
+      } else {
+        point = [x, y];
+      }
+      // @ts-expect-error
+      point.data = d;
+      return point;
+    })
+  );
 
   // Width and/or height can sometimes be negative (when loading data remotely and updately)
-  $: boundWidth = Math.max($width, 0);
-  $: boundHeight = Math.max($height, 0);
+  const boundWidth = $derived(Math.max(ctx.width, 0));
+  const boundHeight = $derived(Math.max(ctx.height, 0));
 </script>
 
-<g {...$$restProps} class={cls(classes.root, $$props.class)}>
-  {#if $geo}
+<g {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+  {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
       <GeoPath
         geojson={feature}
-        class={cls('fill-transparent stroke-transparent', classes.path)}
+        class={cls(
+          layerClass('voronoi-geo-path'),
+          'fill-transparent stroke-transparent',
+          classes.path
+        )}
         onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
         onpointerenter={(e) => onpointerenter?.(e, { data: feature.properties.site.data, feature })}
         onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
         onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
         {onpointerleave}
         ontouchmove={(e) => {
-          // Prevent touch to not interfer with pointer
+          // Prevent touch to not interfere with pointer
           e.preventDefault();
         }}
       />
@@ -113,14 +140,18 @@
       {#if pathData}
         <Spline
           {pathData}
-          class={cls('fill-transparent stroke-transparent', classes.path)}
+          class={cls(
+            layerClass('voronoi-path'),
+            'fill-transparent stroke-transparent',
+            classes.path
+          )}
           onclick={(e) => onclick?.(e, { data: point.data, point })}
           onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
           onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
           {onpointerleave}
           onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
           ontouchmove={(e) => {
-            // Prevent touch to not interfer with pointer
+            // Prevent touch to not interfere with pointer
             e.preventDefault();
           }}
         />

package/dist/components/Voronoi.svelte.d.ts

@@ -1,43 +1,42 @@
-import { SvelteComponentTyped } from "svelte";
-import type { GeoPermissibleObjects } from 'd3-geo';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        data?: any;
-        classes?: {
-            root?: string;
-            path?: string;
-        } | undefined;
-        onclick?: ((e: MouseEvent, details: {
-            data: any;
-            point?: [number, number];
-            feature?: GeoPermissibleObjects;
-        }) => void) | undefined | undefined;
-        onpointerenter?: ((e: PointerEvent, details: {
-            data: any;
-            point?: [number, number];
-            feature?: GeoPermissibleObjects;
-        }) => void) | undefined | undefined;
-        onpointermove?: ((e: PointerEvent, details: {
-            data: any;
-            point?: [number, number];
-            feature?: GeoPermissibleObjects;
-        }) => void) | undefined | undefined;
-        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-        onpointerdown?: ((e: PointerEvent, details: {
-            data: any;
-            point?: [number, number];
-            feature?: GeoPermissibleObjects;
-        }) => void) | undefined | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+export type VoronoiPropsWithoutHTML = {
+    /**
+     * Override data instead of using context
+     */
+    data?: any;
+    /**
+     * Classes to apply to the root and path elements
+     *
+     * @default = {}
+     */
+    classes?: {
+        root?: string;
+        path?: string;
     };
-    slots: {};
+    onclick?: (e: MouseEvent, details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+    }) => void;
+    onpointerenter?: (e: PointerEvent, details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+    }) => void;
+    onpointermove?: (e: PointerEvent, details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+    }) => void;
+    onpointerdown?: (e: PointerEvent, details: {
+        data: any;
+        point?: [number, number];
+        feature?: GeoPermissibleObjects;
+    }) => void;
 };
-export type VoronoiProps = typeof __propDef.props;
-export type VoronoiEvents = typeof __propDef.events;
-export type VoronoiSlots = typeof __propDef.slots;
-export default class Voronoi extends SvelteComponentTyped<VoronoiProps, VoronoiEvents, VoronoiSlots> {
-}
-export {};
+export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+import type { GeoPermissibleObjects } from 'd3-geo';
+declare const Voronoi: import("svelte").Component<VoronoiProps, {}, "">;
+type Voronoi = ReturnType<typeof Voronoi>;
+export default Voronoi;