layerchart 2.0.0-next.6 → 2.0.0-next.61

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { TileImageProps } from './TileImage.shared.svelte.js';
+export type TileImageBaseLayerComponents = {
+    Text: Component<any>;
+};
+export type TileImageBaseProps = TileImageProps & TileImageBaseLayerComponents;
+declare const TileImage: Component<TileImageBaseProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;

package/dist/components/geo/TileImage/TileImage.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import TileImageBase from './TileImage.base.svelte';
+  import Text from '../../Text/Text.canvas.svelte';
+  import type { TileImageProps } from './TileImage.shared.svelte.js';
+
+  let props: TileImageProps = $props();
+</script>
+
+<TileImageBase {Text} {...props} />

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

@@ -0,0 +1,5 @@
+export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+import type { TileImageProps } from './TileImage.shared.svelte.js';
+declare const TileImage: import("svelte").Component<TileImageProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;

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

@@ -0,0 +1,17 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../../utils/types.js';
+export declare const tileCache: Map<string, Promise<string>>;
+export type TileImagePropsWithoutHTML = {
+    x: number;
+    y: number;
+    z: number;
+    tx: number;
+    ty: number;
+    scale: number;
+    /** @default false */
+    disableCache?: boolean;
+    /** @default false */
+    debug?: boolean;
+    url: (x: number, y: number, z: number) => string;
+};
+export type TileImageProps = TileImagePropsWithoutHTML & Omit<Without<SVGAttributes<SVGImageElement>, TileImagePropsWithoutHTML>, 'href'>;

package/dist/components/geo/TileImage/TileImage.shared.svelte.js

@@ -0,0 +1 @@
+export const tileCache = new Map();

package/dist/components/geo/TileImage/TileImage.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../../contexts/layer.js';
+  import TileImageSvg from './TileImage.svg.svelte';
+  import TileImageCanvas from './TileImage.canvas.svelte';
+  import type { TileImageProps } from './TileImage.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: TileImageProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <TileImageSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <TileImageCanvas {...props} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+import type { TileImageProps } from './TileImage.shared.svelte.js';
+declare const TileImage: import("svelte").Component<TileImageProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;

package/dist/components/geo/TileImage/TileImage.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import TileImageBase from './TileImage.base.svelte';
+  import Text from '../../Text/Text.svg.svelte';
+  import type { TileImageProps } from './TileImage.shared.svelte.js';
+
+  let props: TileImageProps = $props();
+</script>
+
+<TileImageBase {Text} {...props} />

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

@@ -0,0 +1,5 @@
+export type { TileImageProps, TileImagePropsWithoutHTML } from './TileImage.shared.svelte.js';
+import type { TileImageProps } from './TileImage.shared.svelte.js';
+declare const TileImage: import("svelte").Component<TileImageProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;

package/dist/components/geo/index.d.ts

@@ -0,0 +1,26 @@
+export { default as GeoCircle } from './GeoCircle/GeoCircle.svelte';
+export * from './GeoCircle/GeoCircle.svelte';
+export { default as GeoClipPath } from './GeoClipPath/GeoClipPath.svelte';
+export * from './GeoClipPath/GeoClipPath.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade/GeoEdgeFade.svelte';
+export * from './GeoEdgeFade/GeoEdgeFade.svelte';
+export { default as GeoLegend } from './GeoLegend/GeoLegend.svelte';
+export * from './GeoLegend/GeoLegend.svelte';
+export { default as GeoPath } from './GeoPath/GeoPath.svelte';
+export * from './GeoPath/GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint/GeoPoint.svelte';
+export * from './GeoPoint/GeoPoint.svelte';
+export { default as GeoProjection } from './GeoProjection/GeoProjection.svelte';
+export * from './GeoProjection/GeoProjection.svelte';
+export { default as GeoRaster } from './GeoRaster/GeoRaster.svelte';
+export * from './GeoRaster/GeoRaster.svelte';
+export { default as GeoSpline } from './GeoSpline/GeoSpline.svelte';
+export * from './GeoSpline/GeoSpline.svelte';
+export { default as GeoTile } from './GeoTile/GeoTile.svelte';
+export * from './GeoTile/GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible/GeoVisible.svelte';
+export * from './GeoVisible/GeoVisible.svelte';
+export { default as Graticule } from './Graticule/Graticule.svelte';
+export * from './Graticule/Graticule.svelte';
+export { default as TileImage } from './TileImage/TileImage.svelte';
+export * from './TileImage/TileImage.svelte';

package/dist/components/geo/index.js

@@ -0,0 +1,26 @@
+export { default as GeoCircle } from './GeoCircle/GeoCircle.svelte';
+export * from './GeoCircle/GeoCircle.svelte';
+export { default as GeoClipPath } from './GeoClipPath/GeoClipPath.svelte';
+export * from './GeoClipPath/GeoClipPath.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade/GeoEdgeFade.svelte';
+export * from './GeoEdgeFade/GeoEdgeFade.svelte';
+export { default as GeoLegend } from './GeoLegend/GeoLegend.svelte';
+export * from './GeoLegend/GeoLegend.svelte';
+export { default as GeoPath } from './GeoPath/GeoPath.svelte';
+export * from './GeoPath/GeoPath.svelte';
+export { default as GeoPoint } from './GeoPoint/GeoPoint.svelte';
+export * from './GeoPoint/GeoPoint.svelte';
+export { default as GeoProjection } from './GeoProjection/GeoProjection.svelte';
+export * from './GeoProjection/GeoProjection.svelte';
+export { default as GeoRaster } from './GeoRaster/GeoRaster.svelte';
+export * from './GeoRaster/GeoRaster.svelte';
+export { default as GeoSpline } from './GeoSpline/GeoSpline.svelte';
+export * from './GeoSpline/GeoSpline.svelte';
+export { default as GeoTile } from './GeoTile/GeoTile.svelte';
+export * from './GeoTile/GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible/GeoVisible.svelte';
+export * from './GeoVisible/GeoVisible.svelte';
+export { default as Graticule } from './Graticule/Graticule.svelte';
+export * from './Graticule/Graticule.svelte';
+export { default as TileImage } from './TileImage/TileImage.svelte';
+export * from './TileImage/TileImage.svelte';

package/dist/components/graph/Chord.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { ChordGroup, Chord } from 'd3-chord';
+
+  export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+
+    children?: Snippet<
+      [
+        {
+          groups: ChordGroup[];
+          chords: Chord[];
+          innerRadius: number;
+          outerRadius: number;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { chord as d3Chord, chordDirected, chordTranspose } from 'd3-chord';
+
+  import { getChartContext } from '../../contexts/chart.js';
+
+  let {
+    matrix,
+    variant = 'default',
+    padAngle = 0,
+    sortGroups = null,
+    sortSubgroups = null,
+    sortChords = null,
+    innerRadiusRatio = 0.9,
+    children,
+  }: ChordProps = $props();
+
+  const ctx = getChartContext();
+
+  const outerRadius = $derived(Math.max(0, Math.min(ctx.width, ctx.height) / 2));
+  const innerRadius = $derived(outerRadius * innerRadiusRatio);
+
+  const chordLayout = $derived.by(() => {
+    const generator =
+      variant === 'directed'
+        ? chordDirected()
+        : variant === 'transpose'
+          ? chordTranspose()
+          : d3Chord();
+
+    generator.padAngle(padAngle);
+
+    if (sortGroups != null) {
+      generator.sortGroups(sortGroups);
+    }
+    if (sortSubgroups != null) {
+      generator.sortSubgroups(sortSubgroups);
+    }
+    if (sortChords != null) {
+      generator.sortChords(sortChords);
+    }
+
+    return generator(matrix);
+  });
+</script>
+
+{@render children?.({
+  groups: chordLayout.groups,
+  chords: chordLayout,
+  innerRadius,
+  outerRadius,
+})}

package/dist/components/graph/Chord.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { ChordGroup, Chord } from 'd3-chord';
+export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+    children?: Snippet<[
+        {
+            groups: ChordGroup[];
+            chords: Chord[];
+            innerRadius: number;
+            outerRadius: number;
+        }
+    ]>;
+};
+declare const Chord: import("svelte").Component<ChordProps, {}, "">;
+type Chord = ReturnType<typeof Chord>;
+export default Chord;

package/dist/components/graph/Dagre.svelte

@@ -0,0 +1,246 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+  import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
+
+  import { dagreGraph } from '../../utils/graph/dagre.js';
+
+  export type DagreGraphData = {
+    nodes: Array<{ id: string; parent?: string; label?: string | dagre.Label }>;
+    edges: Array<{ source: string; target: string; label?: string }>;
+  };
+
+  export const RankDir = {
+    'top-bottom': 'TB',
+    'bottom-top': 'BT',
+    'left-right': 'LR',
+    'right-left': 'RL',
+  };
+
+  export const Align = {
+    none: undefined,
+    'up-left': 'UL',
+    'up-right': 'UR',
+    'down-left': 'DL',
+    'down-right': 'DR',
+  };
+
+  export const EdgeLabelPosition = {
+    left: 'l',
+    center: 'c',
+    right: 'r',
+  };
+
+  export type DagreProps = {
+    /**
+     * Data of nodes and edges to build graph
+     */
+    data: DagreGraphData;
+
+    /**
+     * Function to extract nodes from data
+     * @default (d: any) => d.nodes
+     */
+    nodes?: (d: any) => any;
+
+    /**
+     * Function to extract node ID from node data
+     * @default (d: any) => d.id
+     */
+    nodeId?: (d: any) => any;
+
+    /**
+     * Function to extract edges from data
+     * @default (d: any) => d.edges
+     */
+    edges?: (d: any) => any;
+
+    /**
+     * Set graph as directed (true, default) or undirected (false),
+     * which does not treat the order of nodes in an edge as significant
+     * @default true
+     */
+    directed?: boolean;
+
+    /**
+     * Allow a graph to have multiple edges between the same pair of nodes
+     * @default false
+     */
+    multigraph?: boolean;
+
+    /**
+     * Allow a graph to have compound nodes - nodes which can be the
+     * `parent` of other nodes
+     * @default false
+     */
+    compound?: boolean;
+
+    /**
+     * Type of algorithm to assigns a rank to each node in the input graph
+     * @default 'network-simplex'
+     */
+    ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
+
+    /**
+     * Direction for rank nodes
+     * @default 'top-bottom'
+     */
+    direction?: keyof typeof RankDir;
+
+    /**
+     * Alignment for rank nodes
+     * @default undefined
+     */
+    align?: keyof typeof Align | undefined;
+
+    /**
+     * Number of pixels between each rank in the layout
+     * @default 50
+     */
+    rankSeparation?: number;
+
+    /**
+     * Number of pixels that separate nodes horizontally in the layout
+     * @default 50
+     */
+    nodeSeparation?: number;
+
+    /**
+     * Number of pixels that separate edges horizontally in the layout
+     * @default 10
+     */
+    edgeSeparation?: number;
+
+    /**
+     * Default node width if not defined on node
+     * @default 100
+     */
+    nodeWidth?: number;
+
+    /**
+     * Default node height if not defined on node
+     * @default 50
+     */
+    nodeHeight?: number;
+
+    /**
+     * Default link label width if not defined on edge
+     * @default 100
+     */
+    edgeLabelWidth?: number;
+
+    /**
+     * Default edge label height if not defined on edge
+     * @default 20
+     */
+    edgeLabelHeight?: number;
+
+    /**
+     * Default edge label position
+     * @default 'center'
+     */
+    edgeLabelPosition?: keyof typeof EdgeLabelPosition;
+
+    /**
+     * Default pixels to move the label away from the edge if not defined on edge
+     * Applies only when labelpos is l or r
+     * @default 10
+     */
+    edgeLabelOffset?: number;
+
+    /**
+     * Filter nodes
+     * @default () => true
+     */
+    filterNodes?: (nodeId: string, graph: dagre.graphlib.Graph) => boolean;
+
+    /**
+     * Exposed to access to Dagre Graph instance via `bind:graph`
+     */
+    graph?: dagre.graphlib.Graph;
+
+    children?: Snippet<
+      [
+        {
+          nodes: Array<dagre.Node>;
+          edges: Array<Edge & EdgeConfig & GraphEdge>;
+          graph: dagre.graphlib.Graph;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+
+  const ctx = getChartContext();
+  ctx.registerComponent({ name: 'Dagre', kind: 'composite-mark' });
+
+  let {
+    data,
+    nodes = (d: any) => d.nodes,
+    nodeId = (d: any) => d.id,
+    edges = (d: any) => d.edges,
+    directed = true,
+    multigraph = false,
+    compound = false,
+    ranker = 'network-simplex',
+    direction = 'top-bottom',
+    align,
+    rankSeparation = 50,
+    nodeSeparation = 50,
+    edgeSeparation = 10,
+    nodeWidth = 100,
+    nodeHeight = 50,
+    edgeLabelWidth = 100,
+    edgeLabelHeight = 20,
+    edgeLabelPosition = 'center',
+    edgeLabelOffset = 10,
+    filterNodes = () => true,
+    graph: graphProp = $bindable(),
+    children,
+  }: DagreProps = $props();
+
+  const graph = $derived(
+    dagreGraph(data, {
+      nodes,
+      nodeId,
+      edges,
+      directed,
+      multigraph,
+      compound,
+      ranker,
+      direction,
+      align,
+      rankSeparation,
+      nodeSeparation,
+      edgeSeparation,
+      nodeWidth,
+      nodeHeight,
+      edgeLabelWidth,
+      edgeLabelHeight,
+      edgeLabelPosition,
+      edgeLabelOffset,
+      filterNodes,
+    })
+  );
+
+  $effect.pre(() => {
+    graphProp = graph;
+  });
+
+  const graphNodes = $derived.by(() => {
+    if (typeof document === 'undefined' || !graph) return [];
+    return graph!.nodes().map((id) => graph!.node(id));
+  });
+
+  const graphEdges = $derived.by(() => {
+    if (typeof document === 'undefined' || !graph) return [];
+    return graph!.edges().map((edge) => ({ ...edge, ...graph!.edge(edge) })) as Array<
+      Edge & EdgeConfig & GraphEdge // `EdgeConfig` is excluded when inferred from usage
+    >;
+  });
+</script>
+
+<!-- TODO: are we sure we want to force these types? -->
+{@render children?.({ nodes: graphNodes, edges: graphEdges, graph: graph! })}

package/dist/components/graph/Ribbon/Ribbon.base.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  export type RibbonBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type RibbonBaseProps = RibbonProps & RibbonBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler } from 'svelte/elements';
+  import { ribbon as d3ribbon, ribbonArrow as d3ribbonArrow } from 'd3-chord';
+
+  import { getChartContext } from '../../../contexts/chart.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    Path,
+    chord,
+    radius,
+    directed = false,
+    headRadius,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    data,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    ontouchmove,
+    tooltip,
+    motion,
+    class: className,
+    ...restProps
+  }: RibbonBaseProps = $props();
+
+  const ctx = getChartContext();
+
+  const ribbonGenerator = $derived.by(() => {
+    if (directed) {
+      const gen = d3ribbonArrow();
+      if (radius != null) gen.radius(radius);
+      if (headRadius != null) gen.headRadius(headRadius);
+      return gen;
+    } else {
+      const gen = d3ribbon();
+      if (radius != null) gen.radius(radius);
+      return gen;
+    }
+  });
+
+  // @ts-expect-error - Chord type is compatible with Ribbon at runtime; radius is set on the generator
+  const pathData = $derived(ribbonGenerator(chord) ?? undefined);
+
+  const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) ctx.tooltip.hide();
+  };
+</script>
+
+<Path
+  {pathData}
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {opacity}
+  {motion}
+  {...restProps}
+  class={cls('lc-ribbon', className)}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  ontouchmove={(e: TouchEvent & { currentTarget: SVGPathElement }) => {
+    ontouchmove?.(e);
+    if (tooltip) {
+      e.preventDefault();
+    }
+  }}
+/>

package/dist/components/graph/Ribbon/Ribbon.base.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { RibbonProps } from './Ribbon.shared.svelte.js';
+export type RibbonBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type RibbonBaseProps = RibbonProps & RibbonBaseLayerComponents;
+declare const Ribbon: Component<RibbonBaseProps, {}, "">;
+type Ribbon = ReturnType<typeof Ribbon>;
+export default Ribbon;

package/dist/components/graph/Ribbon/Ribbon.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { RibbonProps, RibbonPropsWithoutHTML } from './Ribbon.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import RibbonBase from './Ribbon.base.svelte';
+  import Path from '../../Path/Path.canvas.svelte';
+  import type { RibbonProps } from './Ribbon.shared.svelte.js';
+
+  let props: RibbonProps = $props();
+</script>
+
+<RibbonBase {Path} {...props} />