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

package/dist/components/Polygon.svelte

@@ -1,538 +0,0 @@
-<script lang="ts" module>
-  import type { Without } from '../utils/types.js';
-  import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-
-  export type PolygonPropsWithoutHTML = {
-    /**
-     * The center x position of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    cx?: DataProp;
-
-    /**
-     * The initial center x position of the polygon (pixel mode only).
-     *
-     * @default cx
-     */
-    initialCx?: number;
-
-    /**
-     * The center y position of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    cy?: DataProp;
-
-    /**
-     * The initial center y position of the polygon (pixel mode only).
-     *
-     * @default cy
-     */
-    initialCy?: number;
-
-    /**
-     * The radius of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 1
-     */
-    r?: DataProp;
-
-    /**
-     * The initial radius of the polygon (pixel mode only).
-     *
-     * @default r
-     */
-    initialR?: 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;
-
-    /**
-     * The number of points or explicit points to create the polygon.
-     *
-     * @default 4
-     */
-    points?: number | { x: number; y: number }[];
-
-    /**
-     * The radius of the curve for rounded corners.
-     *
-     * @default 0
-     */
-    cornerRadius?: number;
-
-    /**
-     * The rotation of the polygon.
-     *
-     * @default 0
-     */
-    rotate?: number;
-
-    /**
-     * The percent to inset the odd points of the star (<1 inset, >1 outset)
-     *
-     * @default 0
-     */
-    inset?: number;
-
-    /**
-     * The horizontal stretch factor of the polygon.
-     *
-     * @default 1
-     */
-    scaleX?: number;
-
-    /**
-     * The vertical stretch factor of the polygon.
-     *
-     * @default 1
-     */
-    scaleY?: number;
-
-    /**
-     * The skew angle in degrees along the X axis.
-     *
-     * @default 0
-     */
-    skewX?: number;
-
-    /**
-     * The skew angle in degrees along the Y axis.
-     *
-     * @default 0
-     */
-    skewY?: number;
-
-    /**
-     * The tilt factor for x-coordinates.
-     *
-     * @default 1
-     */
-    tiltX?: number;
-
-    /**
-     * The tilt factor for y-coordinates.
-     *
-     * @default 1
-     */
-    tiltY?: number;
-
-    /**
-     * A bindable reference to the `<path>` element
-     *
-     * @bindable
-     */
-    ref?: SVGPathElement;
-
-    motion?: MotionProp;
-  } & DataDrivenStyleProps;
-
-  export type PolygonProps = PolygonPropsWithoutHTML &
-    Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import { cls } from '@layerstack/tailwind';
-  import { merge } from '@layerstack/utils';
-  import { interpolatePath } from 'd3-interpolate-path';
-
-  import { getLayerContext } from '../contexts/layer.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import {
-    createMotion,
-    createDataMotionMap,
-    extractTweenConfig,
-    type MotionProp,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-  import {
-    hasAnyDataProp,
-    resolveDataProp,
-    resolveColorProp,
-    resolveGeoDataPair,
-    resolveStyleProp,
-  } from '../utils/dataProp.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { chartDataArray } from '../utils/common.js';
-  import { createKey } from '../utils/key.svelte.js';
-  import { polygon } from '../utils/shape.js';
-  import { roundedPolygonPath } from '../utils/path.js';
-
-  let {
-    cx = 0,
-    initialCx: initialCxProp,
-    cy = 0,
-    initialCy: initialCyProp,
-    r = 1,
-    initialR: initialRProp,
-    data: dataProp,
-    key: keyFn = (_: any, i: number) => i,
-    points = 4,
-    cornerRadius = 0,
-    rotate = 0,
-    inset = 0,
-    scaleX = 1,
-    scaleY = 1,
-    skewX = 0,
-    skewY = 0,
-    tiltX = 0,
-    tiltY = 0,
-    motion,
-    fill,
-    fillOpacity,
-    stroke,
-    strokeWidth,
-    opacity,
-    class: className,
-    ref: refProp = $bindable(),
-    ...restProps
-  }: PolygonProps = $props();
-
-  let ref = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  // Chart context (safe to call outside Chart — returns fallback)
-  const chartCtx = getChartContext();
-  const geo = getGeoContext();
-
-  // Data mode detection: if any positional prop is a string or function
-  const dataMode = $derived(hasAnyDataProp(cx, cy, r));
-
-  // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
-
-  // Resolve a single data item to a polygon path string
-  function resolvePolygon(d: any) {
-    let resolvedCx: number, resolvedCy: number;
-    if (geo.projection) {
-      [resolvedCx, resolvedCy] = resolveGeoDataPair(cx, cy, d, geo.projection);
-    } else {
-      resolvedCx = resolveDataProp(cx, d, chartCtx.xScale, 0);
-      resolvedCy = resolveDataProp(cy, d, chartCtx.yScale, 0);
-    }
-    const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
-
-    const pts =
-      typeof points === 'number'
-        ? polygon({
-            cx: resolvedCx,
-            cy: resolvedCy,
-            count: points,
-            radius: resolvedR,
-            rotate,
-            inset,
-            scaleX,
-            scaleY,
-            skewX,
-            skewY,
-            tiltX,
-            tiltY,
-          })
-        : points;
-
-    return roundedPolygonPath(pts, cornerRadius);
-  }
-
-  // --- 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);
-        // Polygon resolve returns a path string, so resolve coords separately for motion
-        let resolvedCx: number, resolvedCy: number;
-        if (geo.projection) {
-          [resolvedCx, resolvedCy] = resolveGeoDataPair(cx, cy, d, geo.projection);
-        } else {
-          resolvedCx = resolveDataProp(cx, d, chartCtx.xScale, 0);
-          resolvedCy = resolveDataProp(cy, d, chartCtx.yScale, 0);
-        }
-        const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
-        untrack(() => dataMotionMap.update(key, { cx: resolvedCx, cy: resolvedCy, r: resolvedR }));
-      }
-      untrack(() => dataMotionMap.cleanup(activeKeys));
-    });
-  }
-
-  // TODO: Apply animated values from dataMotionMap to SVG/HTML/Canvas templates.
-  // Polygon uses a path string from resolvePolygon(), so animated cx/cy/r values
-  // need to be passed through the polygon generator to produce an animated path.
-
-  // 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);
-      let resolvedCx: number, resolvedCy: number;
-      if (geo.projection) {
-        [resolvedCx, resolvedCy] = resolveGeoDataPair(cx, cy, d, geo.projection);
-      } else {
-        resolvedCx = resolveDataProp(cx, d, chartCtx.xScale, 0);
-        resolvedCy = resolveDataProp(cy, d, chartCtx.yScale, 0);
-      }
-      const resolvedR = resolveDataProp(r, d, chartCtx.rScale, typeof r === 'number' ? r : 1);
-      const animated = dataMotionMap?.get(key);
-      return {
-        d,
-        key,
-        cx: animated?.cx ?? resolvedCx,
-        cy: animated?.cy ?? resolvedCy,
-        r: animated?.r ?? resolvedR,
-      };
-    });
-  });
-
-  // --- Pixel mode (motion only applies here) ---
-  const initialCx = initialCxProp ?? (typeof cx === 'number' ? cx : 0);
-  const initialCy = initialCyProp ?? (typeof cy === 'number' ? cy : 0);
-  const initialR = initialRProp ?? (typeof r === 'number' ? r : 1);
-
-  const motionCx = createMotion(initialCx, () => (typeof cx === 'number' ? cx : 0), motion);
-  const motionCy = createMotion(initialCy, () => (typeof cy === 'number' ? cy : 0), motion);
-  const motionR = createMotion(initialR, () => (typeof r === 'number' ? r : 1), motion);
-
-  let polygonPoints = $derived(
-    typeof points === 'number'
-      ? polygon({
-          cx: motionCx.current,
-          cy: motionCy.current,
-          count: points,
-          radius: motionR.current,
-          rotate,
-          inset,
-          scaleX,
-          scaleY,
-          skewX,
-          skewY,
-          tiltX,
-          tiltY,
-        })
-      : points
-  );
-  let d = $derived(roundedPolygonPath(polygonPoints, cornerRadius));
-
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenedOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: { interpolate: interpolatePath, ...extractedTween.options },
-      }
-    : undefined;
-
-  const tweenedState = createMotion(null, () => d, tweenedOptions);
-
-  const layerCtx = getLayerContext();
-
-  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
-  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
-  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
-  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
-  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
-  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
-
-  function getStyleOptions(
-    styleOverrides: ComputedStylesOptions | undefined,
-    itemFill?: string | undefined,
-    itemStroke?: string | undefined,
-    itemFillOpacity?: number | undefined,
-    itemStrokeWidth?: number | undefined,
-    itemOpacity?: number | undefined,
-    itemClass?: string | undefined
-  ) {
-    return styleOverrides
-      ? merge(
-          {
-            styles: {
-              strokeWidth:
-                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
-            },
-          },
-          styleOverrides
-        )
-      : {
-          styles: {
-            fill: itemFill ?? fill,
-            fillOpacity:
-              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
-            stroke: itemStroke ?? stroke,
-            strokeWidth:
-              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
-            opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
-          },
-          classes: cls(
-            'lc-polygon',
-            itemClass ?? (typeof className === 'string' ? className : undefined)
-          ),
-          style: restProps.style as string | undefined,
-        };
-  }
-
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    if (dataMode) {
-      for (const d of resolvedData) {
-        const pathData = resolvePolygon(d);
-        const resolvedFill = resolveColorProp(fill, d, chartCtx.cScale);
-        const resolvedStroke = resolveColorProp(stroke, d, chartCtx.cScale);
-        const resolvedFillOpacity = resolveStyleProp(fillOpacity, d);
-        const resolvedStrokeWidth = resolveStyleProp(strokeWidth, d);
-        const resolvedOpacity = resolveStyleProp(opacity, d);
-        const resolvedClass = resolveStyleProp(className, d);
-        const styleOpts = getStyleOptions(
-          styleOverrides,
-          resolvedFill,
-          resolvedStroke,
-          resolvedFillOpacity,
-          resolvedStrokeWidth,
-          resolvedOpacity,
-          resolvedClass
-        );
-        renderPathData(ctx, pathData, styleOpts);
-      }
-    } else {
-      const styleOpts = getStyleOptions(styleOverrides);
-      renderPathData(ctx, tweenedState.current, styleOpts);
-    }
-  }
-
-  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
-  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
-
-  chartCtx.registerComponent({
-    name: 'Polygon',
-    kind: 'mark',
-    markInfo: () => {
-      if (!dataMode) return {};
-      return {
-        data: dataProp,
-        x: typeof cx === 'string' ? cx : undefined,
-        y: typeof cy === 'string' ? cy : undefined,
-        color: typeof fill === 'string' ? fill : typeof stroke === 'string' ? stroke : undefined,
-      };
-    },
-    canvasRender:
-      layerCtx === 'canvas'
-        ? {
-            render,
-            events: {
-              click: restProps.onclick,
-              pointerenter: restProps.onpointerenter,
-              pointermove: restProps.onpointermove,
-              pointerleave: restProps.onpointerleave,
-              pointerdown: restProps.onpointerdown,
-              pointerover: restProps.onpointerover,
-              pointerout: restProps.onpointerout,
-              touchmove: restProps.ontouchmove,
-            },
-            deps: () => [
-              dataMode,
-              dataMode ? resolvedItems : null,
-              fillKey!.current,
-              fillOpacity,
-              strokeKey!.current,
-              strokeWidth,
-              opacity,
-              className,
-              tweenedState.current,
-              restProps.style,
-            ],
-          }
-        : undefined,
-  });
-</script>
-
-{#if layerCtx === 'svg'}
-  {#if dataMode}
-    {#each resolvedData as d, i (keyFn(d, i))}
-      {@const pathData = resolvePolygon(d)}
-      {@const resolvedFill = resolveColorProp(fill, d, chartCtx.cScale)}
-      {@const resolvedStroke = resolveColorProp(stroke, d, chartCtx.cScale)}
-      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, d)}
-      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, d)}
-      {@const resolvedOpacity = resolveStyleProp(opacity, d)}
-      {@const resolvedClass = resolveStyleProp(className, d)}
-      <path
-        d={pathData}
-        fill={resolvedFill}
-        fill-opacity={resolvedFillOpacity}
-        stroke={resolvedStroke}
-        stroke-width={resolvedStrokeWidth}
-        opacity={resolvedOpacity}
-        class={cls('lc-polygon', resolvedClass)}
-        {...restProps}
-      />
-    {/each}
-  {:else}
-    <path
-      d={tweenedState.current}
-      fill={staticFill}
-      fill-opacity={staticFillOpacity}
-      stroke={staticStroke}
-      stroke-width={staticStrokeWidth}
-      opacity={staticOpacity}
-      class={cls('lc-polygon', staticClassName)}
-      {...restProps}
-      bind:this={ref}
-    />
-  {/if}
-{/if}
-
-<style>
-  @layer base {
-    :global(:where(.lc-polygon)) {
-      --fill-color: var(--color-surface-content, currentColor);
-      --stroke-color: initial;
-    }
-
-    /* Svg | Canvas layers */
-    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([fill])) {
-      fill: var(--fill-color);
-    }
-    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([stroke])) {
-      stroke: var(--stroke-color);
-    }
-
-    /* Html layers */
-    :global(:where(.lc-layout-html .lc-polygon):not([background-color])) {
-      background-color: var(--fill-color);
-    }
-    :global(:where(.lc-layout-html .lc-polygon):not([border-color])) {
-      border-color: var(--stroke-color);
-    }
-  }
-</style>

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

@@ -1,136 +0,0 @@
-import type { Without } from '../utils/types.js';
-import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-export type PolygonPropsWithoutHTML = {
-    /**
-     * The center x position of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    cx?: DataProp;
-    /**
-     * The initial center x position of the polygon (pixel mode only).
-     *
-     * @default cx
-     */
-    initialCx?: number;
-    /**
-     * The center y position of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    cy?: DataProp;
-    /**
-     * The initial center y position of the polygon (pixel mode only).
-     *
-     * @default cy
-     */
-    initialCy?: number;
-    /**
-     * The radius of the polygon.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 1
-     */
-    r?: DataProp;
-    /**
-     * The initial radius of the polygon (pixel mode only).
-     *
-     * @default r
-     */
-    initialR?: 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;
-    /**
-     * The number of points or explicit points to create the polygon.
-     *
-     * @default 4
-     */
-    points?: number | {
-        x: number;
-        y: number;
-    }[];
-    /**
-     * The radius of the curve for rounded corners.
-     *
-     * @default 0
-     */
-    cornerRadius?: number;
-    /**
-     * The rotation of the polygon.
-     *
-     * @default 0
-     */
-    rotate?: number;
-    /**
-     * The percent to inset the odd points of the star (<1 inset, >1 outset)
-     *
-     * @default 0
-     */
-    inset?: number;
-    /**
-     * The horizontal stretch factor of the polygon.
-     *
-     * @default 1
-     */
-    scaleX?: number;
-    /**
-     * The vertical stretch factor of the polygon.
-     *
-     * @default 1
-     */
-    scaleY?: number;
-    /**
-     * The skew angle in degrees along the X axis.
-     *
-     * @default 0
-     */
-    skewX?: number;
-    /**
-     * The skew angle in degrees along the Y axis.
-     *
-     * @default 0
-     */
-    skewY?: number;
-    /**
-     * The tilt factor for x-coordinates.
-     *
-     * @default 1
-     */
-    tiltX?: number;
-    /**
-     * The tilt factor for y-coordinates.
-     *
-     * @default 1
-     */
-    tiltY?: number;
-    /**
-     * A bindable reference to the `<path>` element
-     *
-     * @bindable
-     */
-    ref?: SVGPathElement;
-    motion?: MotionProp;
-} & DataDrivenStyleProps;
-export type PolygonProps = PolygonPropsWithoutHTML & Without<SVGAttributes<Element>, PolygonPropsWithoutHTML>;
-import type { SVGAttributes } from 'svelte/elements';
-import { type MotionProp } from '../utils/motion.svelte.js';
-declare const Polygon: import("svelte").Component<PolygonProps, {}, "ref">;
-type Polygon = ReturnType<typeof Polygon>;
-export default Polygon;