layerchart 2.0.0-next.1 → 2.0.0-next.2

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

@@ -1,23 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
+import { type SplineProps } from './Spline.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        link: {
-            source: [number, number];
-            target: [number, number];
-        };
-        loft?: number | undefined;
-        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+import type { Without } from '../utils/types.js';
+export type GeoSplinePropsWithoutHTML = {
+    /**
+     * Link between two points on the globe.
+     */
+    link: {
+        source: [number, number];
+        target: [number, number];
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+    /**
+     * The amount of loft to apply to the middle of the curve.
+     *
+     * @default 1.0
+     */
+    loft?: number;
+    /**
+     * Curve of spline drawn. Imported via d3-shape.
+     *
+     * @example
+     * import { curveNatural } from 'd3-shape';
+     * <GeoSpline curve={curveNatural} />
+     *
+     * @default curveNatural
+     */
+    curve?: CurveFactory | CurveFactoryLineOnly;
 };
-export type GeoSplineProps = typeof __propDef.props;
-export type GeoSplineEvents = typeof __propDef.events;
-export type GeoSplineSlots = typeof __propDef.slots;
-export default class GeoSpline extends SvelteComponentTyped<GeoSplineProps, GeoSplineEvents, GeoSplineSlots> {
-}
-export {};
+export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "splineRef">;
+type GeoSpline = ReturnType<typeof GeoSpline>;
+export default GeoSpline;

package/dist/components/GeoTile.svelte

@@ -1,75 +1,126 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  export type GeoTilePropsWithoutHTML = {
+    url: (x: number, y: number, z: number) => string;
+    /**
+     * The zoom delta for the tile.
+     *
+     * @default 0
+     */
+    zoomDelta?: number;
+
+    /**
+     * The tile size for the tile.
+     *
+     * @default 256
+     */
+    tileSize?: number;
+
+    /**
+     * Whether to disable the cache for the tile.
+     *
+     * @default false
+     */
+    disableCache?: boolean;
+
+    /**
+     * Additional props to apply to the `Group` component.
+     */
+    group?: Partial<ComponentProps<typeof Group>>;
+
+    /**
+     * Whether to enable debug mode for the tile.
+     *
+     * @default false
+     */
+    debug?: boolean;
+
+    children?: Snippet<[{ tiles: any[] }]>;
+  };
+</script>
+
 <script lang="ts">
-  import { onDestroy } from 'svelte';
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { chartContext } from './ChartContext.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
-  import { geoContext } from './GeoContext.svelte';
+  import { getRenderContext, getChartContext } from './Chart.svelte';
+  import { registerCanvasComponent } from './layout/Canvas.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
+  import { getGeoContext } from './GeoContext.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  export let url: (x: number, y: number, z: number) => string;
-  export let zoomDelta = 0;
-  export let tileSize = 256;
-  export let disableCache = false;
-  export let debug = false;
+  let {
+    url,
+    zoomDelta = 0,
+    tileSize = 256,
+    disableCache = false,
+    debug = false,
+    group,
+    children,
+  }: GeoTilePropsWithoutHTML = $props();
 
-  const { containerWidth, containerHeight, padding } = chartContext();
-  const geo = geoContext();
+  const ctx = getChartContext();
+  const geoCtx = getGeoContext();
+  const renderCtx = getRenderContext();
 
-  $: center = $geo([0, 0]) ?? [0, 0];
+  const center = $derived(geoCtx.projection?.([0, 0]) ?? [0, 0]);
 
-  $: tile = d3Tile()
-    .size([$containerWidth, $containerHeight])
-    .translate([center[0] + $padding.left, center[1] + $padding.top])
-    .scale($geo.scale() * 2 * Math.PI)
-    .tileSize(tileSize)
-    .zoomDelta(zoomDelta);
+  const tiles = $derived(
+    d3Tile()
+      .size([ctx.containerWidth, ctx.containerHeight])
+      .translate([center[0] + ctx.padding.left, center[1] + ctx.padding.top])
+      // TODO: is this fine to add the 0 as a default?
+      .scale(geoCtx.projection ? geoCtx.projection.scale() * 2 * Math.PI : undefined)
+      .tileSize(tileSize)
+      .zoomDelta(zoomDelta)()
+  );
 
-  $: tiles = tile();
-  $: ({
-    translate: [tx, ty],
-    scale,
-  } = tiles);
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
+  const translate = $derived(tiles.translate);
+  const scale = $derived(tiles.scale);
 
   function render(ctx: CanvasRenderingContext2D) {
-    tiles.forEach(([x, y, z]: number[]) => {
+    for (const [x, y, z] of tiles) {
       const image = new Image();
       image.onload = () => {
-        ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
+        ctx.drawImage(image, (x + translate[0]) * scale, (y + translate[1]) * scale, scale, scale);
       };
       image.src = url(x, y, z);
-    });
-  }
-
-  $: if (renderContext === 'canvas') {
-    tile;
-    canvasContext.invalidate();
+    }
   }
 
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
+  if (renderCtx === 'canvas') {
+    registerCanvasComponent({
+      name: 'GeoTile',
+      render,
+      deps: () => [tiles],
+    });
   }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
-{#if renderContext === 'svg' && url}
-  <slot {tiles}>
-    <Group x={-$padding.left} y={-$padding.top}>
+{#if renderCtx === 'svg' && url}
+  {#if children}
+    {@render children({ tiles })}
+  {:else}
+    <Group
+      x={-ctx.padding.left}
+      y={-ctx.padding.top}
+      {...extractLayerProps(group, 'geo-tile-group')}
+    >
       {#each tiles as [x, y, z] (url(x, y, z))}
-        <TileImage {url} {x} {y} {z} {tx} {ty} {scale} {disableCache} {debug} />
+        <TileImage
+          {url}
+          {x}
+          {y}
+          {z}
+          tx={translate[0]}
+          ty={translate[1]}
+          {scale}
+          {disableCache}
+          {debug}
+        />
       {/each}
     </Group>
-  </slot>
+  {/if}
 {/if}

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

@@ -1,24 +1,39 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        url: (x: number, y: number, z: number) => string;
-        zoomDelta?: number;
-        tileSize?: number;
-        disableCache?: boolean;
-        debug?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            tiles: any;
-        };
-    };
+import type { ComponentProps, Snippet } from 'svelte';
+export type GeoTilePropsWithoutHTML = {
+    url: (x: number, y: number, z: number) => string;
+    /**
+     * The zoom delta for the tile.
+     *
+     * @default 0
+     */
+    zoomDelta?: number;
+    /**
+     * The tile size for the tile.
+     *
+     * @default 256
+     */
+    tileSize?: number;
+    /**
+     * Whether to disable the cache for the tile.
+     *
+     * @default false
+     */
+    disableCache?: boolean;
+    /**
+     * Additional props to apply to the `Group` component.
+     */
+    group?: Partial<ComponentProps<typeof Group>>;
+    /**
+     * Whether to enable debug mode for the tile.
+     *
+     * @default false
+     */
+    debug?: boolean;
+    children?: Snippet<[{
+        tiles: any[];
+    }]>;
 };
-export type GeoTileProps = typeof __propDef.props;
-export type GeoTileEvents = typeof __propDef.events;
-export type GeoTileSlots = typeof __propDef.slots;
-export default class GeoTile extends SvelteComponentTyped<GeoTileProps, GeoTileEvents, GeoTileSlots> {
-}
-export {};
+import Group from './Group.svelte';
+declare const GeoTile: import("svelte").Component<GeoTilePropsWithoutHTML, {}, "">;
+type GeoTile = ReturnType<typeof GeoTile>;
+export default GeoTile;

package/dist/components/GeoVisible.svelte

@@ -1,15 +1,23 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type GeoVisibleProps = {
+    /** Latitude */
+    lat: number;
+    /** Longitude */
+    long: number;
+    children?: Snippet;
+  };
+</script>
+
 <script lang="ts">
-  import { geoContext } from './GeoContext.svelte';
   import { isVisible } from '../utils/geo.js';
+  import { getGeoContext } from './GeoContext.svelte';
 
-  /** Latitude */
-  export let lat: number;
-  /** Longitude */
-  export let long: number;
-
-  const geo = geoContext();
+  let { lat, long, children }: GeoVisibleProps = $props();
+  const geoCtx = getGeoContext();
 </script>
 
-{#if isVisible($geo)([long, lat])}
-  <slot />
+{#if geoCtx.projection && isVisible(geoCtx.projection)([long, lat])}
+  {@render children?.()}
 {/if}

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

@@ -1,19 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Latitude */ lat: number;
-        /** Longitude */ long: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+export type GeoVisibleProps = {
+    /** Latitude */
+    lat: number;
+    /** Longitude */
+    long: number;
+    children?: Snippet;
 };
-export type GeoVisibleProps = typeof __propDef.props;
-export type GeoVisibleEvents = typeof __propDef.events;
-export type GeoVisibleSlots = typeof __propDef.slots;
-export default class GeoVisible extends SvelteComponentTyped<GeoVisibleProps, GeoVisibleEvents, GeoVisibleSlots> {
-}
-export {};
+declare const GeoVisible: import("svelte").Component<GeoVisibleProps, {}, "">;
+type GeoVisible = ReturnType<typeof GeoVisible>;
+export default GeoVisible;

package/dist/components/Graticule.svelte

@@ -1,32 +1,47 @@
-<script lang="ts">
-  import { geoGraticule } from 'd3-geo';
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
   import type { ComponentProps } from 'svelte';
+  import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
 
-  import GeoPath from './GeoPath.svelte';
+  export type GraticulePropsWithoutHTML = {
+    lines?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
+    outline?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
+    step?: [number, number];
+  };
+
+  export type GraticuleProps = GraticulePropsWithoutHTML &
+    Without<GeoPathProps, Omit<GraticulePropsWithoutHTML, 'ref'>>;
+</script>
+
+<script lang="ts">
+  import { geoGraticule } from 'd3-geo';
+  import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
-  // TODO: Support full api (stepMinor/Major, extent[Minor/Major], etc
-  export let lines: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
-  export let outline: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
-  export let step: [number, number] = [10, 10];
+  let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
 
-  $: graticule = geoGraticule();
+  const graticule = geoGraticule();
 
-  $: graticule.step(step);
+  $effect(() => {
+    graticule.step(step);
+  });
 </script>
 
-<g class="graticule">
+<g class={layerClass('graticule-g')}>
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
-    <GeoPath geojson={graticule()} {...$$restProps} />
+    <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
   {/if}
 
   {#if lines}
     {#each graticule.lines() as line}
-      <GeoPath geojson={line} {...typeof lines === 'object' ? lines : null} />
+      <GeoPath geojson={line} {...extractLayerProps(lines, 'graticule-geo-line')} />
     {/each}
   {/if}
 
   {#if outline}
-    <GeoPath geojson={graticule.outline()} {...typeof outline === 'object' ? outline : null} />
+    <GeoPath
+      geojson={graticule.outline()}
+      {...extractLayerProps(outline, 'graticule-geo-outline')}
+    />
   {/if}
 </g>

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

@@ -1,53 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        lines?: boolean | Partial<{
-            [x: string]: any;
-            geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
-            fill?: string | undefined | undefined;
-            stroke?: string | undefined | undefined;
-            strokeWidth?: number | undefined | undefined;
-            opacity?: number | undefined | undefined;
-            tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
-            onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
-            onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
-            ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
-            curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
-            class?: string | undefined | undefined;
-            geoTransform?: ((projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform) => import("d3-geo").GeoTransformPrototype) | undefined | undefined;
-        }> | undefined;
-        outline?: boolean | Partial<{
-            [x: string]: any;
-            geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
-            fill?: string | undefined | undefined;
-            stroke?: string | undefined | undefined;
-            strokeWidth?: number | undefined | undefined;
-            opacity?: number | undefined | undefined;
-            tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
-            onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
-            onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-            onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
-            ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
-            curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
-            class?: string | undefined | undefined;
-            geoTransform?: ((projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform) => import("d3-geo").GeoTransformPrototype) | undefined | undefined;
-        }> | undefined;
-        step?: [number, number] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+import type { ComponentProps } from 'svelte';
+import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
+export type GraticulePropsWithoutHTML = {
+    lines?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
+    outline?: Partial<ComponentProps<typeof GeoPath>> | boolean | undefined;
+    step?: [number, number];
 };
-export type GraticuleProps = typeof __propDef.props;
-export type GraticuleEvents = typeof __propDef.events;
-export type GraticuleSlots = typeof __propDef.slots;
-export default class Graticule extends SvelteComponentTyped<GraticuleProps, GraticuleEvents, GraticuleSlots> {
-}
-export {};
+export type GraticuleProps = GraticulePropsWithoutHTML & Without<GeoPathProps, Omit<GraticulePropsWithoutHTML, 'ref'>>;
+declare const Graticule: import("svelte").Component<GraticuleProps, {}, "">;
+type Graticule = ReturnType<typeof Graticule>;
+export default Graticule;