layerchart 2.0.0-next.1 → 2.0.0-next.11

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

@@ -0,0 +1,136 @@
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+import { type MotionProp } from '../utils/motion.svelte.js';
+export type TextPropsWithoutHTML = {
+    /**
+     * text value
+     * @default 0
+     */
+    value?: string | number;
+    /**
+     * The fill color of the text
+     */
+    fill?: string;
+    /**
+     * Maximum width to occupy (approximate as words are not split)
+     */
+    width?: number;
+    /**
+     * x position of the text
+     *
+     * @default 0
+     */
+    x?: string | number;
+    /**
+     * Initial x position of the text
+     *
+     * @default x
+     */
+    initialX?: string | number;
+    /**
+     * y position of the text
+     *
+     * @default 0
+     */
+    y?: string | number;
+    /**
+     * Initial y position of the text
+     *
+     * @default y
+     */
+    initialY?: string | number;
+    /**
+     * dx offset of the text
+     *
+     * @default 0
+     */
+    dx?: string | number;
+    /**
+     * dy offset of the text
+     *
+     * @default 0
+     */
+    dy?: string | number;
+    /**
+     * Desired "line height" of the text, implemented as y offsets
+     *
+     * @default "1em"
+     */
+    lineHeight?: string;
+    /**
+     * Cap height of the text
+     * @default '0.71em'
+     */
+    capHeight?: string;
+    /**
+     * Whether to scale the fontSize to accommodate the specified width
+     *
+     * @default false
+     */
+    scaleToFit?: boolean;
+    /**
+     * Horizontal text anchor
+     *
+     * @default 'start'
+     */
+    textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+    /**
+     * Vertical text anchor
+     *
+     * @default 'end'
+     */
+    verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+    /**
+     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
+     *
+     * @default 'auto'
+     */
+    dominantBaseline?: 'auto' | 'text-before-edge' | 'text-after-edge' | 'middle' | 'hanging' | 'ideographic' | 'mathematical';
+    /**
+     * Rotational angle of the text
+     */
+    rotate?: number;
+    /**
+     * A bindable reference to the wrapping `<svg>` element.
+     *
+     * @bindable
+     */
+    svgRef?: SVGElement;
+    /**
+     * Props to pass to the wrapping `<svg>` element.
+     */
+    svgProps?: Omit<SVGAttributes<SVGElement>, 'children'>;
+    /**
+     * A bindable reference to the inner `<text>` element
+     *
+     * @bindable
+     */
+    ref?: SVGTextElement;
+    motion?: MotionProp;
+    /**
+     * Whether to enable text truncation
+     */
+    truncate?: boolean | TruncateTextOptions;
+    /**
+     * A unique identifier for the SVG path element.
+     * One is generated by default if not provided.
+     *
+     */
+    pathId?: string;
+    /**
+     * The path to render the text along.
+     */
+    path?: string | null;
+    /**
+     * Specify the offset for the start of the text along the path.
+     * Can be a percentage ('50%') or a length value.
+     *
+     * @default '0%'
+     */
+    startOffset?: string | number;
+} & CommonStyleProps;
+export type TextProps = TextPropsWithoutHTML & Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
+import { type TruncateTextOptions } from '../utils/string.js';
+declare const Text: import("svelte").Component<TextProps, {}, "ref" | "svgRef">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/Threshold.svelte

@@ -1,40 +1,72 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type { CurveFactory } from 'd3-shape';
+  export type ThresholdSnippetProps = {
+    curve?: CurveFactory;
+    defined?: ComponentProps<typeof Area>['defined'];
+  };
+
+  export type ThresholdProps = {
+    /**
+     * The curve factory to use for the area.
+     *
+     */
+    curve?: CurveFactory;
+
+    /**
+     * Function to determine if a point is defined.
+     *
+     */
+    defined?: ComponentProps<typeof Area>['defined'];
+
+    /**
+     * Content to render above the threshold area.
+     */
+    above?: Snippet<[ThresholdSnippetProps]>;
+
+    /**
+     * Content to render below the threshold area.
+     */
+    below?: Snippet<[ThresholdSnippetProps]>;
+
+    children?: Snippet<[ThresholdSnippetProps]>;
+  };
+</script>
+
 <script lang="ts">
   /*
     See also:
       - https://observablehq.com/@d3/difference-chart
       - https://github.com/airbnb/visx/issues/245
   */
-  import type { ComponentProps } from 'svelte';
-  import type { CurveFactory } from 'd3-shape';
+
   import { min } from 'd3-array';
 
-  import { chartContext } from './ChartContext.svelte';
   import Area from './Area.svelte';
   import ClipPath from './ClipPath.svelte';
+  import { getChartContext } from './Chart.svelte';
 
-  const { y, yDomain } = chartContext();
+  const ctx = getChartContext();
 
-  export let curve: CurveFactory | undefined = undefined;
-  export let defined: ComponentProps<Area>['defined'] | undefined = undefined;
+  let { curve, defined, below, above, children }: ThresholdProps = $props();
 </script>
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
 {#key curve}
   <ClipPath>
-    <svelte:fragment slot="clip">
-      <Area y0={(d) => $y(d)[0]} y1={(d) => min($yDomain)} {curve} {defined} />
-    </svelte:fragment>
-
-    <slot name="above" {curve} {defined} />
+    {#snippet clip()}
+      <Area y0={(d) => ctx.y(d)[0]} y1={(d) => min(ctx.yDomain)} {curve} {defined} />
+    {/snippet}
+    {@render above?.({ curve, defined })}
   </ClipPath>
 
   <ClipPath>
-    <svelte:fragment slot="clip">
-      <Area y0={(d) => min($yDomain)} y1={(d) => $y(d)[1]} {curve} {defined} />
-    </svelte:fragment>
+    {#snippet clip()}
+      <Area y0={(d) => min(ctx.yDomain)} y1={(d) => ctx.y(d)[1]} {curve} {defined} />
+    {/snippet}
 
-    <slot name="below" {curve} {defined} />
+    {@render below?.({ curve, defined })}
   </ClipPath>
 
-  <slot {curve} {defined} />
+  {@render children?.({ curve, defined })}
 {/key}

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

@@ -1,33 +1,31 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ComponentProps } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
 import type { CurveFactory } from 'd3-shape';
-import Area from './Area.svelte';
-declare const __propDef: {
-    props: {
-        curve?: CurveFactory | undefined;
-        defined?: ComponentProps<Area>["defined"] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        above: {
-            curve: CurveFactory | undefined;
-            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        };
-        below: {
-            curve: CurveFactory | undefined;
-            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        };
-        default: {
-            curve: CurveFactory | undefined;
-            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
-        };
-    };
+export type ThresholdSnippetProps = {
+    curve?: CurveFactory;
+    defined?: ComponentProps<typeof Area>['defined'];
+};
+export type ThresholdProps = {
+    /**
+     * The curve factory to use for the area.
+     *
+     */
+    curve?: CurveFactory;
+    /**
+     * Function to determine if a point is defined.
+     *
+     */
+    defined?: ComponentProps<typeof Area>['defined'];
+    /**
+     * Content to render above the threshold area.
+     */
+    above?: Snippet<[ThresholdSnippetProps]>;
+    /**
+     * Content to render below the threshold area.
+     */
+    below?: Snippet<[ThresholdSnippetProps]>;
+    children?: Snippet<[ThresholdSnippetProps]>;
 };
-export type ThresholdProps = typeof __propDef.props;
-export type ThresholdEvents = typeof __propDef.events;
-export type ThresholdSlots = typeof __propDef.slots;
-export default class Threshold extends SvelteComponentTyped<ThresholdProps, ThresholdEvents, ThresholdSlots> {
-}
-export {};
+import Area from './Area.svelte';
+declare const Threshold: import("svelte").Component<ThresholdProps, {}, "">;
+type Threshold = ReturnType<typeof Threshold>;
+export default Threshold;

package/dist/components/TileImage.svelte

@@ -1,35 +1,98 @@
-<script context="module" lang="ts">
+<script lang="ts" module>
+  import type { Without } from '../utils/types.js';
+
   let tileCache = new Map<string, Promise<string>>();
+
+  export type TileImagePropsWithoutHTML = {
+    /**
+     * x position of the tile
+     */
+    x: number;
+    /**
+     * y position of the tile
+     */
+    y: number;
+
+    /**
+     * z position of the tile
+     */
+    z: number;
+
+    /**
+     * translate x
+     */
+    tx: number;
+
+    /**
+   * translate y
+
+   */
+    ty: number;
+
+    /**
+     * scale of the tile
+     */
+    scale: number;
+
+    /**
+     * Whether to disable cache
+     *
+     * @default false
+     */
+    disableCache?: boolean;
+
+    /**
+     * Whether to enable debug mode
+     *
+     * @default false
+     */
+    debug?: boolean;
+
+    /**
+     * URL function to get the tile image
+     */
+    url: (x: number, y: number, z: number) => string;
+  };
+
+  export type TileImageProps = TileImagePropsWithoutHTML &
+    Omit<Without<SVGAttributes<SVGImageElement>, TileImagePropsWithoutHTML>, 'href'>;
 </script>
 
 <script lang="ts">
-  import Text from './Text.svelte';
+  import { extractLayerProps } from '../utils/attributes.js';
 
-  export let x: number;
-  export let y: number;
-  export let z: number;
-  /** translate x */
-  export let tx: number;
-  /** translate y */
-  export let ty: number;
-  export let scale: number;
-
-  export let disableCache = false;
-  export let debug = false;
+  import Text from './Text.svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
 
-  export let url: (x: number, y: number, z: number) => string;
+  let {
+    x,
+    y,
+    z,
+    tx,
+    ty,
+    scale,
+    disableCache = false,
+    debug = false,
+    url,
+    ...restProps
+  }: TileImageProps = $props();
 
   // if disable cache, set href immediately, otherwise set from cache / dataUri
-  let href = disableCache ? url(x, y, z) : '';
+  let href = $state(disableCache ? url(x, y, z) : '');
+
   function loadImage(url: string) {
     // const key = [x, y, z].join('-');
     const key = url;
 
     if (tileCache.has(key)) {
-      tileCache.get(key)?.then((dataUri) => {
-        // console.log('from cache', { x, y, z });
-        href = dataUri;
-      });
+      tileCache
+        .get(key)
+        ?.then((dataUri) => {
+          // console.log('from cache', { x, y, z });
+          href = dataUri;
+        })
+        .catch(() => {});
     } else {
       const promise = new Promise<string>((resolve, reject) => {
         const img = new Image();
@@ -58,21 +121,31 @@
     }
   }
 
-  $: if (!disableCache) {
-    // load using cache
+  $effect(() => {
+    if (disableCache) return;
     loadImage(url(x, y, z));
-  }
+  });
 </script>
 
 <!-- To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel -->
-<image
-  xlink:href={href}
-  x={(x + tx) * scale - 0.5}
-  y={(y + ty) * scale - 0.5}
-  width={scale + 1}
-  height={scale + 1}
-/>
-<image xlink:href={href} x={(x + tx) * scale} y={(y + ty) * scale} width={scale} height={scale} />
+{#key href}
+  <image
+    {href}
+    x={(x + tx) * scale - 0.5}
+    y={(y + ty) * scale - 0.5}
+    width={scale + 1}
+    height={scale + 1}
+    {...extractLayerProps(restProps, 'tile-image-lower')}
+  />
+  <image
+    {href}
+    x={(x + tx) * scale}
+    y={(y + ty) * scale}
+    width={scale}
+    height={scale}
+    {...extractLayerProps(restProps, 'tile-image')}
+  />
+{/key}
 {#if debug}
   <rect
     x={(x + tx) * scale}

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

@@ -1,24 +1,49 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        x: number;
-        y: number;
-        z: number;
-        /** translate x */ tx: number;
-        /** translate y */ ty: number;
-        scale: number;
-        disableCache?: boolean;
-        debug?: boolean;
-        url: (x: number, y: number, z: number) => string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Without } from '../utils/types.js';
+export type TileImagePropsWithoutHTML = {
+    /**
+     * x position of the tile
+     */
+    x: number;
+    /**
+     * y position of the tile
+     */
+    y: number;
+    /**
+     * z position of the tile
+     */
+    z: number;
+    /**
+     * translate x
+     */
+    tx: number;
+    /**
+   * translate y
+
+   */
+    ty: number;
+    /**
+     * scale of the tile
+     */
+    scale: number;
+    /**
+     * Whether to disable cache
+     *
+     * @default false
+     */
+    disableCache?: boolean;
+    /**
+     * Whether to enable debug mode
+     *
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * URL function to get the tile image
+     */
+    url: (x: number, y: number, z: number) => string;
 };
-export type TileImageProps = typeof __propDef.props;
-export type TileImageEvents = typeof __propDef.events;
-export type TileImageSlots = typeof __propDef.slots;
-export default class TileImage extends SvelteComponentTyped<TileImageProps, TileImageEvents, TileImageSlots> {
-}
-export {};
+export type TileImageProps = TileImagePropsWithoutHTML & Omit<Without<SVGAttributes<SVGImageElement>, TileImagePropsWithoutHTML>, 'href'>;
+import type { SVGAttributes } from 'svelte/elements';
+declare const TileImage: import("svelte").Component<TileImageProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;