layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/Grid.svelte

@@ -1,320 +0,0 @@
-<script lang="ts" module>
-  import type { Transition, TransitionParams, Without } from '../utils/types.js';
-  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
-  import type { SVGAttributes } from 'svelte/elements';
-
-  /** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
-  type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
-    stroke?: string;
-    strokeWidth?: number;
-    opacity?: number;
-    /** Dashed-line pattern. See `Line.dashArray`. */
-    dashArray?: number | number[] | string;
-  };
-
-  export type GridPropsWithoutHTML<In extends Transition = Transition> = {
-    /**
-     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
-     * opacity, dashArray) to forward onto the underlying line.
-     *
-     * @default false
-     */
-    x?: boolean | GridLineProps;
-
-    /**
-     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
-     * opacity, dashArray) to forward onto the underlying line.
-     *
-     * @default false
-     */
-    y?: boolean | GridLineProps;
-
-    /**
-     * Control the number of x-axis ticks
-     */
-    xTicks?: TicksConfig;
-
-    /**
-     * Control the number of y-axis ticks
-     *
-     * @default !isScaleBand(ctx.yScale) ? 4 : undefined
-     */
-    yTicks?: TicksConfig;
-
-    /**
-     * Line alignment when band scale is used (x or y axis)
-     *
-     * @default 'center'
-     */
-    bandAlign?: 'center' | 'between';
-
-    /**
-     * Render `y` lines with circles or linear splines
-     *
-     * @default 'circle'
-     */
-    radialY?: 'circle' | 'linear';
-
-    /**
-     * Stroke color for grid lines.
-     * Useful for server-side rendering where CSS variables are not available.
-     */
-    stroke?: string;
-
-    /**
-     * Classes to apply to the rendered elements.
-     *
-     * @default {}
-     */
-    classes?: {
-      root?: string;
-      line?: string;
-    };
-
-    /**
-     * Transition function for entering elements
-     * @default  defaults to fade if motion is tweened
-     */
-    transitionIn?: In;
-
-    /**
-     * Parameters for the transitionIn function
-     * @default { easing: cubicIn }
-     */
-    transitionInParams?: TransitionParams<In>;
-
-    /**
-     * A reference to the underlying outermost `<g>` element.
-     *
-     * @bindable
-     */
-    ref?: SVGGElement;
-
-    motion?: MotionProp;
-  };
-
-  export type GridProps<In extends Transition = Transition> = Omit<
-    GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>,
-    'children'
-  >;
-</script>
-
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
-
-  import { curveLinearClosed, pointRadial } from 'd3-shape';
-
-  import { cls } from '@layerstack/tailwind';
-
-  import { isScaleBand } from '../utils/scales.svelte.js';
-
-  import Circle from './Circle.svelte';
-  import Group, { type GroupProps } from './Group.svelte';
-  import Line from './Line.svelte';
-  import Rule from './Rule.svelte';
-  // Spline (used only for radial linear grid lines) is lazy-loaded inline
-  // via `{#await import(...)}` so non-radial grids don't pay for it.
-  import { getChartContext } from '../contexts/chart.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
-
-  const ctx = getChartContext();
-
-  // Mark as composite so child Splines (radial grid) don't register
-  ctx.registerComponent({ name: 'Grid', kind: 'composite-mark' });
-
-  let {
-    x = false,
-    y = false,
-    xTicks,
-    yTicks: yTicksProp,
-    bandAlign = 'center',
-    radialY = 'circle',
-    stroke,
-    motion,
-    transitionIn: transitionInProp,
-    transitionInParams = { easing: cubicIn },
-    classes = {},
-    class: className,
-    ref: refProp = $bindable(),
-    ...restProps
-  }: GridProps = $props();
-
-  let ref = $state<SVGGElement>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  const yTicks = $derived(yTicksProp ?? (!isScaleBand(ctx.yScale) ? 4 : undefined));
-
-  const tweenConfig = $derived(extractTweenConfig(motion));
-
-  const transitionIn = $derived((transitionInProp ?? tweenConfig?.options) ? fade : () => ({}));
-
-  const xTickVals = $derived(autoTickVals(ctx.xScale, xTicks));
-  const yTickVals = $derived(autoTickVals(ctx.yScale, yTicks));
-
-  const xBandOffset = $derived(
-    isScaleBand(ctx.xScale)
-      ? bandAlign === 'between'
-        ? -(ctx.xScale.padding() * ctx.xScale.step()) / 2 // before
-        : ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2 // center
-      : 0
-  );
-
-  const yBandOffset = $derived(
-    isScaleBand(ctx.yScale)
-      ? bandAlign === 'between'
-        ? -(ctx.yScale.padding() * ctx.yScale.step()) / 2 // before
-        : ctx.yScale.step() / 2 - (ctx.yScale.padding() * ctx.yScale.step()) / 2 // center
-      : 0
-  );
-</script>
-
-<Group bind:ref class={cls('lc-grid', classes.root, className)} {...restProps}>
-  {#if x}
-    {@const splineProps = extractLayerProps(x, 'lc-grid-x-line')}
-
-    <Group {transitionIn} {transitionInParams} class="lc-grid-x">
-      {#each xTickVals as x (x)}
-        {#if ctx.radial}
-          {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
-          {@const [x2, y2] = pointRadial(ctx.xScale(x), ctx.yRange[1])}
-          <Line
-            {x1}
-            {y1}
-            {x2}
-            {y2}
-            {stroke}
-            motion={tweenConfig}
-            {...splineProps}
-            class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
-          />
-        {:else}
-          <Rule
-            {x}
-            xOffset={xBandOffset}
-            {stroke}
-            {motion}
-            {...splineProps}
-            class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
-          />
-        {/if}
-      {/each}
-
-      <!-- Add extra rule after last band -->
-      {#if isScaleBand(ctx.xScale) && bandAlign === 'between' && !ctx.radial && xTickVals.length}
-        {@const x = ctx.xScale(xTickVals[xTickVals.length - 1])! + ctx.xScale.step() + xBandOffset}
-        <Rule
-          x={xTickVals[xTickVals.length - 1]}
-          xOffset={ctx.xScale.step() + xBandOffset}
-          {stroke}
-          {motion}
-          {...splineProps}
-          class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
-        />
-      {/if}
-    </Group>
-  {/if}
-
-  {#if y}
-    {@const splineProps = extractLayerProps(y, 'lc-grid-y-line')}
-    <Group {transitionIn} {transitionInParams} class="lc-grid-y">
-      {#each yTickVals as y (y)}
-        {#if ctx.radial}
-          {#if radialY === 'circle'}
-            <Circle
-              r={ctx.yScale(y) + yBandOffset}
-              {stroke}
-              {motion}
-              {...splineProps}
-              class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
-            />
-          {:else}
-            {#await import('./Spline.svelte') then { default: Spline }}
-              <Spline
-                data={xTickVals.map((x) => ({ x, y }))}
-                x="x"
-                y="y"
-                {stroke}
-                motion={tweenConfig}
-                curve={curveLinearClosed}
-                {...splineProps}
-                class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
-              />
-            {/await}
-          {/if}
-        {:else}
-          <Line
-            x1={ctx.xRange[0]}
-            y1={ctx.yScale(y) + yBandOffset}
-            x2={ctx.xRange[1]}
-            y2={ctx.yScale(y) + yBandOffset}
-            {stroke}
-            {motion}
-            {...splineProps}
-            class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
-          />
-        {/if}
-      {/each}
-
-      <!-- Add extra rule after last band -->
-      {#if isScaleBand(ctx.yScale) && bandAlign === 'between' && yTickVals.length}
-        {#if ctx.radial}
-          <Circle
-            r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
-            {stroke}
-            {motion}
-            {...splineProps}
-            class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
-          />
-        {:else}
-          {@const y =
-            ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
-          <Line
-            x1={ctx.xRange[0]}
-            y1={y}
-            x2={ctx.xRange[1]}
-            y2={y}
-            {stroke}
-            {motion}
-            {...splineProps}
-            class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}
-          />
-        {/if}
-      {/if}
-    </Group>
-  {/if}
-</Group>
-
-<style>
-  @layer components {
-    :global(
-      :where(
-        .lc-grid-x-rule,
-        .lc-grid-x-end-rule,
-        .lc-grid-x-radial-line,
-        .lc-grid-y-rule,
-        .lc-grid-y-end-rule,
-        .lc-grid-y-radial-line
-      )
-    ) {
-      --stroke-color: color-mix(
-        in oklab,
-        var(--color-surface-content, currentColor) 10%,
-        transparent
-      );
-    }
-
-    :global(:where(.lc-grid-y-radial-circle)) {
-      --fill-color: none;
-      --stroke-color: color-mix(
-        in oklab,
-        var(--color-surface-content, currentColor) 10%,
-        transparent
-      );
-    }
-  }
-</style>

package/dist/components/Group.svelte

@@ -1,325 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
-  import type { Transition, TransitionParams, Without } from '../utils/types.js';
-  import type { DataProp } from '../utils/dataProp.js';
-  import { createMotion, extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
-
-  export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
-    /**
-     * Translate x position of the group.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     */
-    x?: DataProp;
-
-    /**
-     * Initial translate x (pixel mode only).
-     *
-     * @default x
-     */
-    initialX?: number;
-
-    /**
-     * Translate y position of the group.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     */
-    y?: DataProp;
-
-    /**
-     * Initial translate y (pixel mode only).
-     *
-     * @default y
-     */
-    initialY?: number;
-
-    /**
-     * Data array to iterate over in data mode.
-     * Falls back to chart context data when not provided.
-     */
-    data?: any[];
-
-    /**
-     * Key function for keyed {#each} rendering in data mode.
-     *
-     * @default (d, i) => i
-     */
-    key?: (d: any, index: number) => any;
-
-    /**
-     * Center within chart
-     *
-     * @default false
-     */
-    center?: boolean | 'x' | 'y';
-
-    /**
-     * Prevent `touchmove` default, which can interfere with `pointermove` when
-     * used with `Tooltip`, for example.
-     *
-     * @default false
-     */
-    preventTouchMove?: boolean;
-
-    /**
-     * The opacity of the element. (0 to 1)
-     */
-    opacity?: number;
-
-    children?: Snippet;
-
-    /**
-     * A reference to the rendered DOM element, which could be
-     * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
-     * (when using `<Html>`).
-     *
-     * @bindable
-     */
-    ref?: Element;
-
-    motion?: MotionProp;
-
-    /**
-     * Transition function for entering elements
-     * @default defaults to fade if the motion prop is set to tweened
-     */
-    transitionIn?: In;
-
-    /**
-     * Parameters for the transitionIn function
-     * @default { easing: cubicIn }
-     */
-    transitionInParams?: TransitionParams<In>;
-  };
-
-  export type GroupProps = GroupPropsWithoutHTML &
-    Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
-</script>
-
-<script lang="ts" generics="T extends Transition = Transition">
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
-
-  import { untrack } from 'svelte';
-  import { getLayerContext } from '../contexts/layer.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { createDataMotionMap } from '../utils/motion.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair } from '../utils/dataProp.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { chartDataArray } from '../utils/common.js';
-
-  const chartCtx = getChartContext();
-  const geo = getGeoContext();
-
-  let {
-    x,
-    initialX: initialXProp,
-    y,
-    initialY: initialYProp,
-    data: dataProp,
-    key: keyFn = (_: any, i: number) => i,
-    center = false,
-    preventTouchMove = false,
-    opacity = undefined,
-    motion,
-    transitionIn: transitionInProp,
-    transitionInParams: transitionInParamsProp,
-    class: className,
-    children,
-    ref: refProp = $bindable(),
-    ...restProps
-  }: GroupProps = $props();
-
-  // Data mode detection: if any positional prop is a string or function
-  const dataMode = $derived(hasAnyDataProp(x, y));
-
-  // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
-
-  // Resolve a single data item to pixel coordinates
-  function resolveGroup(d: any) {
-    if (geo.projection) {
-      const [projX, projY] = resolveGeoDataPair(x, y, d, geo.projection);
-      return { x: projX, y: projY };
-    }
-    return {
-      x: resolveDataProp(x, d, chartCtx.xScale, 0),
-      y: resolveDataProp(y, d, chartCtx.yScale, 0),
-    };
-  }
-
-  // --- Data mode motion ---
-  const dataMotionMap = createDataMotionMap(motion);
-
-  if (dataMotionMap) {
-    $effect(() => {
-      if (!dataMode) return;
-      const activeKeys = new Set<any>();
-      for (let i = 0; i < resolvedData.length; i++) {
-        const d = resolvedData[i];
-        const key = keyFn(d, i);
-        activeKeys.add(key);
-        const resolved = resolveGroup(d);
-        untrack(() => dataMotionMap.update(key, resolved));
-      }
-      untrack(() => dataMotionMap.cleanup(activeKeys));
-    });
-  }
-
-  // Single source of truth: resolved values with animated overlay
-  const resolvedItems = $derived.by(() => {
-    if (!dataMode) return [];
-    return resolvedData.map((d, i) => {
-      const key = keyFn(d, i);
-      const resolved = resolveGroup(d);
-      const animated = dataMotionMap?.get(key);
-      return {
-        d,
-        key,
-        x: animated?.x ?? resolved.x,
-        y: animated?.y ?? resolved.y,
-      };
-    });
-  });
-
-  // --- Pixel mode (motion only applies here) ---
-  let ref = $state<Element>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  const initialX = initialXProp ?? (typeof x === 'number' ? x : undefined);
-  const initialY = initialYProp ?? (typeof y === 'number' ? y : undefined);
-
-  const trueX = $derived(
-    typeof x === 'number'
-      ? x
-      : x == null && (center === 'x' || center === true)
-        ? chartCtx.width / 2
-        : 0
-  );
-  const trueY = $derived(
-    typeof y === 'number'
-      ? y
-      : y == null && (center === 'y' || center === true)
-        ? chartCtx.height / 2
-        : 0
-  );
-  const motionX = createMotion(initialX, () => trueX, motion);
-  const motionY = createMotion(initialY, () => trueY, motion);
-
-  const transitionIn = $derived(
-    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
-  ) as T;
-  const transitionInParams = $derived(
-    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
-  );
-
-  const transform = $derived.by(() => {
-    if (center || x != null || y != null) {
-      return `translate(${motionX.current}px, ${motionY.current}px)`;
-    }
-  });
-
-  const layerCtx = getLayerContext();
-
-  if (layerCtx === 'canvas') {
-    chartCtx.registerComponent({
-      name: 'Group',
-      kind: 'group',
-      canvasRender: {
-        render: (ctx) => {
-          ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
-          if (opacity != null) {
-            ctx.globalAlpha *= opacity;
-          }
-        },
-        events: {
-          click: restProps.onclick,
-          dblclick: restProps.ondblclick,
-          pointerenter: restProps.onpointerenter,
-          pointermove: restProps.onpointermove,
-          pointerleave: restProps.onpointerleave,
-          pointerdown: restProps.onpointerdown,
-        },
-        deps: () => [motionX.current, motionY.current, opacity],
-      },
-    });
-  }
-
-  const handleTouchMove: TouchEventHandler<Element> = (e) => {
-    if (preventTouchMove) {
-      // Prevent touch to not interfere with pointer
-      e.preventDefault();
-    }
-    restProps.ontouchmove?.(e);
-  };
-</script>
-
-{#if layerCtx === 'canvas'}
-  {@render children?.()}
-{:else if layerCtx === 'svg'}
-  {#if dataMode}
-    {#each resolvedItems as item (item.key)}
-      <g
-        style:transform="translate({item.x}px, {item.y}px)"
-        class={['lc-group-g', className]}
-        {opacity}
-        {...restProps}
-        ontouchmove={handleTouchMove}
-      >
-        {@render children?.()}
-      </g>
-    {/each}
-  {:else}
-    <g
-      style:transform
-      class={['lc-group-g', className]}
-      in:transitionIn={transitionInParams}
-      {opacity}
-      {...restProps}
-      ontouchmove={handleTouchMove}
-      bind:this={ref}
-    >
-      {@render children?.()}
-    </g>
-  {/if}
-{:else if layerCtx === 'html'}
-  {#if dataMode}
-    {#each resolvedItems as item (item.key)}
-      <div
-        style:transform="translate({item.x}px, {item.y}px)"
-        style:opacity
-        {...restProps}
-        class={['lc-group-div', className]}
-        ontouchmove={handleTouchMove}
-      >
-        {@render children?.()}
-      </div>
-    {/each}
-  {:else}
-    <div
-      bind:this={ref}
-      style:transform
-      style:opacity
-      in:transitionIn={transitionInParams}
-      {...restProps}
-      class={['lc-group-div', className]}
-      ontouchmove={handleTouchMove}
-    >
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
-
-<style>
-  @layer base {
-    :where(.lc-group-div) {
-      position: absolute;
-    }
-  }
-</style>