layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/Connector.svelte

@@ -1,149 +0,0 @@
-<script lang="ts" module>
-  export type ConnectorPropsWithoutHTML = {
-    /**
-     * The coordinates of the start point of the connector.
-     * @default { x: 0, y: 0 }
-     */
-    source: ConnectorCoords;
-
-    /**
-     * The coordinates of the end point of the connector.
-     *
-     * @default { x: 100, y: 100 }
-     */
-    target: ConnectorCoords;
-
-    /**
-     * The sweep direction of the connector.
-     *
-     * @default 'horizontal-vertical'
-     */
-    sweep?: ConnectorSweep;
-
-    /**
-     * The type of the connector.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'rounded'
-     */
-    type?: ConnectorType;
-
-    /**
-     * The radius of the connector.
-     *
-     * Only used when type is `'beveled'` or `'rounded'`
-     *
-     * @default 20
-     */
-    radius?: number;
-
-    /**
-     * The D3 curve function to use for the connector.
-     *
-     * Only used when type is `'d3'`
-     *
-     * @default `d3.curveLinear`
-     */
-    curve?: CurveFactory;
-  } & SplinePropsWithoutHTML;
-
-  export type ConnectorProps = ConnectorPropsWithoutHTML &
-    Without<SplineProps, ConnectorPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { type CurveFactory, curveLinear } from 'd3-shape';
-  import {
-    getConnectorD3Path,
-    getConnectorPresetPath,
-    type ConnectorCoords,
-    type ConnectorSweep,
-    type ConnectorType,
-  } from '../utils/connectorUtils.js';
-  import Spline, { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
-  import type { Without } from '../utils/types.js';
-  import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import MarkerWrapper from './MarkerWrapper.svelte';
-  import {
-    createMotion,
-    extractTweenConfig,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
-  import { interpolatePath } from 'd3-interpolate-path';
-
-  const uid = $props.id();
-
-  let {
-    source = { x: 0, y: 0 },
-    target = { x: 100, y: 100 },
-    sweep: sweepProp,
-    type = 'rounded',
-    radius = 20,
-    curve = curveLinear,
-    splineRef = $bindable(),
-    pathData: pathDataProp,
-    marker,
-    markerStart,
-    markerMid,
-    markerEnd,
-    motion,
-    ...restProps
-  }: ConnectorProps = $props();
-
-  const sweep = $derived.by(() => {
-    if (sweepProp) return sweepProp;
-    if (type === 'd3') return 'none';
-    return 'horizontal-vertical';
-  });
-
-  const markerStartId = $derived(markerStart || marker ? createId('marker-start', uid) : '');
-  const markerMidId = $derived(markerMid || marker ? createId('marker-mid', uid) : '');
-  const markerEndId = $derived(markerEnd || marker ? createId('marker-end', uid) : '');
-
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: {
-          interpolate: interpolatePath,
-          ...extractedTween.options,
-        },
-      }
-    : undefined;
-
-  const pathData = $derived.by(() => {
-    if (pathDataProp) return pathDataProp;
-    if (type === 'd3') {
-      return getConnectorD3Path({
-        source,
-        target,
-        sweep,
-        curve,
-      });
-    } else {
-      return getConnectorPresetPath({ source, target, sweep, type, radius });
-    }
-  });
-
-  const motionPath = createMotion(
-    '',
-    () => pathData,
-    tweenOptions ? tweenOptions : { type: 'none' }
-  );
-</script>
-
-<Spline
-  pathData={motionPath.current}
-  bind:splineRef
-  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {...extractLayerProps(restProps, 'connector')}
-  {...restProps}
-/>
-<MarkerWrapper id={markerStartId} marker={markerStart} />
-<MarkerWrapper id={markerMidId} marker={markerMid} />
-<MarkerWrapper id={markerEndId} marker={markerEnd} />

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

@@ -1,51 +0,0 @@
-export type ConnectorPropsWithoutHTML = {
-    /**
-     * The coordinates of the start point of the connector.
-     * @default { x: 0, y: 0 }
-     */
-    source: ConnectorCoords;
-    /**
-     * The coordinates of the end point of the connector.
-     *
-     * @default { x: 100, y: 100 }
-     */
-    target: ConnectorCoords;
-    /**
-     * The sweep direction of the connector.
-     *
-     * @default 'horizontal-vertical'
-     */
-    sweep?: ConnectorSweep;
-    /**
-     * The type of the connector.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'rounded'
-     */
-    type?: ConnectorType;
-    /**
-     * The radius of the connector.
-     *
-     * Only used when type is `'beveled'` or `'rounded'`
-     *
-     * @default 20
-     */
-    radius?: number;
-    /**
-     * The D3 curve function to use for the connector.
-     *
-     * Only used when type is `'d3'`
-     *
-     * @default `d3.curveLinear`
-     */
-    curve?: CurveFactory;
-} & SplinePropsWithoutHTML;
-export type ConnectorProps = ConnectorPropsWithoutHTML & Without<SplineProps, ConnectorPropsWithoutHTML>;
-import { type CurveFactory } from 'd3-shape';
-import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
-import { type SplineProps, type SplinePropsWithoutHTML } from './Spline.svelte';
-import type { Without } from '../utils/types.js';
-declare const Connector: import("svelte").Component<ConnectorProps, {}, "splineRef">;
-type Connector = ReturnType<typeof Connector>;
-export default Connector;

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

@@ -1,84 +0,0 @@
-import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
-import type { Snippet } from 'svelte';
-type Forces = Record<string, Force<any, any>>;
-export type LinkPosition = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
-export type ForceSimulationProps = {
-    /**
-     * Force simulation parameters
-     */
-    forces: Forces;
-    /**
-     * An array of links to be used for position calculation.
-     */
-    links?: any[];
-    /**
-     * Current alpha value of the simulation
-     * @default 1
-     */
-    alpha?: number;
-    /**
-     * Target alpha value for the simulation
-     * @default 0
-     */
-    alphaTarget?: number;
-    /**
-     * Alpha decay rate per tick
-     * @default 1 - Math.pow(0.001, 1 / 300)
-     */
-    alphaDecay?: number;
-    /**
-     * Minimum alpha value at which simulation stops
-     * @default 0.01
-     */
-    alphaMin?: number;
-    /**
-     * Velocity decay factor applied to nodes each tick
-     * @default 0.4
-     */
-    velocityDecay?: number;
-    /**
-     * Stop simulation
-     * @default false
-     */
-    stopped?: boolean;
-    /**
-     * If true, will only update nodes after simulation has completed
-     * @default false
-     */
-    static?: boolean;
-    /**
-     * Clone nodes since simulation mutates original
-     * @default false
-     */
-    cloneNodes?: boolean;
-    /**
-     * Callback function triggered when simulation starts
-     */
-    onStart?: () => void;
-    /**
-     * Callback function triggered on each simulation tick
-     */
-    onTick?: (e: {
-        alpha: number;
-        alphaTarget: number;
-    }) => void;
-    /**
-     * Callback function triggered when simulation ends
-     */
-    onEnd?: () => void;
-    children?: Snippet<[
-        {
-            nodes: any[];
-            simulation: Simulation<SimulationNodeDatum, undefined>;
-            linkPositions: LinkPosition[];
-        }
-    ]>;
-};
-declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
-type ForceSimulation = ReturnType<typeof ForceSimulation>;
-export default ForceSimulation;

package/dist/components/GeoContext.svelte

@@ -1,176 +0,0 @@
-<script lang="ts" module>
-  import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-  import { getTransformContext } from './TransformContext.svelte';
-  import { Context } from 'runed';
-  import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
-
-  export type GeoContextValue = {
-    projection: GeoProjection | undefined;
-  };
-
-  /**
-   * Access or set the current GeoContext.
-   */
-  const _GeoContext = new Context<GeoContextValue>('GeoContext');
-
-  export function getGeoContext() {
-    return _GeoContext.getOr({ projection: undefined } as GeoContextValue);
-  }
-
-  export function setGeoContext(geo: GeoContextValue) {
-    return _GeoContext.set(geo);
-  }
-
-  export type GeoContextProps = {
-    /**
-     * A d3 projection function. Pass this in as an uncalled function, e.g.
-     * `projection={geoAlbersUsa}`.
-     */
-    projection?: () => GeoProjection;
-    fitGeojson?: GeoPermissibleObjects;
-    /**
-     * By default, the map fills to fit the $width and $height. If instead you want a
-     * fixed-aspect ratio, like for a server-side rendered map, set that here.
-     */
-    fixedAspectRatio?: number;
-    clipAngle?: number;
-    clipExtent?: [[number, number], [number, number]];
-    rotate?: {
-      /** Lambda (Center Meridian) */
-      yaw: number;
-      /** Phi */
-      pitch: number;
-      /** Gamma */
-      roll: number;
-    };
-    scale?: number;
-    translate?: [number, number];
-    center?: [number, number];
-    /**
-     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
-     * mutually selected
-     */
-    applyTransform?: ('scale' | 'translate' | 'rotate')[];
-    reflectX?: boolean;
-    reflectY?: boolean;
-    /**
-     * Exposed to allow binding in Chart
-     *
-     * @bindable
-     */
-    geoContext?: GeoContextValue;
-
-    children: Snippet<[{ geoContext: GeoContextValue }]>;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    projection: projectionProp,
-    fitGeojson,
-    fixedAspectRatio,
-    clipAngle,
-    clipExtent,
-    rotate,
-    scale,
-    translate,
-    center,
-    applyTransform = [],
-    reflectX,
-    reflectY,
-    geoContext: geoContextProp = $bindable() as GeoContextValue,
-    children,
-  }: GeoContextProps = $props();
-
-  const ctx = getChartContext();
-  const transformCtx = getTransformContext();
-
-  let projection = $state<GeoProjection>();
-
-  const geoContext = {
-    get projection() {
-      return projection;
-    },
-    set projection(v: GeoProjection | undefined) {
-      projection = v;
-    },
-  };
-
-  geoContextProp = geoContext;
-
-  setGeoContext(geoContext);
-
-  const fitSizeRange = $derived(
-    fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [ctx.width, ctx.height]
-  ) as [number, number];
-
-  $effect.pre(() => {
-    if (!projectionProp) return;
-    const _projection = projectionProp();
-
-    if (fitGeojson && 'fitSize' in _projection) {
-      _projection.fitSize(fitSizeRange, fitGeojson);
-    }
-
-    if ('scale' in _projection) {
-      if (scale) {
-        _projection.scale(scale);
-      }
-
-      if (applyTransform.includes('scale')) {
-        _projection.scale(transformCtx.scale);
-      }
-    }
-
-    if ('rotate' in _projection) {
-      if (rotate) {
-        _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
-      }
-
-      if (applyTransform.includes('rotate')) {
-        _projection.rotate([
-          transformCtx.translate.x, // yaw
-          transformCtx.translate.y, // pitch
-          // TODO: `roll` from `transformContext`?
-        ]);
-      }
-    }
-
-    if ('translate' in _projection) {
-      if (translate) {
-        _projection.translate(translate);
-      }
-
-      if (applyTransform.includes('translate')) {
-        _projection.translate([transformCtx.translate.x, transformCtx.translate.y]);
-      }
-    }
-
-    if (center && 'center' in _projection) {
-      _projection.center(center);
-    }
-
-    if (reflectX) {
-      _projection.reflectX(reflectX);
-    }
-
-    if (reflectY) {
-      _projection.reflectY(reflectY);
-    }
-
-    if (clipAngle && 'clipAngle' in _projection) {
-      _projection.clipAngle(clipAngle);
-    }
-
-    if (clipExtent && 'clipExtent' in _projection) {
-      _projection.clipExtent(clipExtent);
-    }
-
-    geoContext.projection = _projection;
-  });
-</script>
-
-{@render children({
-  geoContext,
-})}

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

@@ -1,52 +0,0 @@
-import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
-import type { Snippet } from 'svelte';
-export type GeoContextValue = {
-    projection: GeoProjection | undefined;
-};
-export declare function getGeoContext(): GeoContextValue;
-export declare function setGeoContext(geo: GeoContextValue): GeoContextValue;
-export type GeoContextProps = {
-    /**
-     * A d3 projection function. Pass this in as an uncalled function, e.g.
-     * `projection={geoAlbersUsa}`.
-     */
-    projection?: () => GeoProjection;
-    fitGeojson?: GeoPermissibleObjects;
-    /**
-     * By default, the map fills to fit the $width and $height. If instead you want a
-     * fixed-aspect ratio, like for a server-side rendered map, set that here.
-     */
-    fixedAspectRatio?: number;
-    clipAngle?: number;
-    clipExtent?: [[number, number], [number, number]];
-    rotate?: {
-        /** Lambda (Center Meridian) */
-        yaw: number;
-        /** Phi */
-        pitch: number;
-        /** Gamma */
-        roll: number;
-    };
-    scale?: number;
-    translate?: [number, number];
-    center?: [number, number];
-    /**
-     * Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
-     * mutually selected
-     */
-    applyTransform?: ('scale' | 'translate' | 'rotate')[];
-    reflectX?: boolean;
-    reflectY?: boolean;
-    /**
-     * Exposed to allow binding in Chart
-     *
-     * @bindable
-     */
-    geoContext?: GeoContextValue;
-    children: Snippet<[{
-        geoContext: GeoContextValue;
-    }]>;
-};
-declare const GeoContext: import("svelte").Component<GeoContextProps, {}, "geoContext">;
-type GeoContext = ReturnType<typeof GeoContext>;
-export default GeoContext;

package/dist/components/GeoPath.svelte

@@ -1,197 +0,0 @@
-<script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { Snippet } from 'svelte';
-  import type { PointerEventHandler, SVGAttributes } from 'svelte/elements';
-  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-  import {
-    geoTransform as d3geoTransform,
-    type GeoIdentityTransform,
-    type GeoPermissibleObjects,
-    type GeoProjection,
-    type GeoTransformPrototype,
-  } from 'd3-geo';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
-
-  export type GeoPathPropsWithoutHTML = {
-    /**
-     * GeoJSON data to render
-     */
-    geojson?: GeoPermissibleObjects | null;
-
-    /**
-     * Tooltip context to setup pointer events to show tooltip for related data
-     */
-    tooltipContext?: TooltipContextValue | undefined;
-
-    /**
-     * Click event handler
-     */
-    onclick?:
-      | ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath> | undefined) => void)
-      | undefined;
-
-    /**
-     * Curve of path drawn. Imported via d3-shape.
-     *
-     * @example
-     * import { curveCatmullRom } from 'd3-shape';
-     * <GeoPath curve={curveCatmullRom} />
-     *
-     * @default curveLinearClosed
-     */
-    curve?: CurveFactory | CurveFactoryLineOnly;
-
-    /**
-     * Apply geo transform to projection.
-     * Useful to draw straight lines with `geoMercator` projection.
-     *
-     * @see https://d3js.org/d3-geo/projection#geoTransform
-     * @see https://stackoverflow.com/a/56409480/191902
-     **/
-    geoTransform?: (projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype;
-
-    /**
-     * A reference to the underlying `<path>` element
-     * @bindable
-     */
-    ref?: SVGPathElement;
-
-    children?: Snippet<[{ geoPath: ReturnType<typeof geoCurvePath> | undefined }]>;
-  } & CommonStyleProps;
-
-  export type GeoPathProps = GeoPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
-
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
-  import { geoCurvePath } from '../utils/geo.js';
-  import { getGeoContext } from './GeoContext.svelte';
-  import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
-
-  let {
-    fill,
-    stroke,
-    strokeWidth,
-    opacity,
-    geoTransform,
-    geojson,
-    tooltipContext,
-    curve = curveLinearClosed,
-    onclick,
-    class: className,
-    ref: refProp = $bindable(),
-    children,
-    ...restProps
-  }: GeoPathProps = $props();
-
-  let ref = $state<SVGPathElement>();
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  const geo = getGeoContext();
-
-  const projection = $derived(
-    geoTransform && geo.projection ? d3geoTransform(geoTransform(geo.projection)) : geo.projection
-  );
-
-  const geoPath = $derived.by(() => {
-    geojson;
-    if (!projection) return;
-    return geoCurvePath(projection, curve);
-  });
-
-  const renderCtx = getRenderContext();
-
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    if (!geojson) return;
-    const pathData = geoPath?.(geojson);
-    renderPathData(
-      ctx,
-      pathData,
-      styleOverrides
-        ? merge({ styles: { strokeWidth } }, styleOverrides)
-        : {
-            styles: { fill, stroke, strokeWidth, opacity },
-            classes: className,
-          }
-    );
-  }
-
-  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
-
-  // Hide `geoPath` and `tooltip` reactivity
-  function _onClick(e: MouseEvent) {
-    onclick?.(e, geoPath);
-  }
-
-  const _onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointerenter?.(e);
-    tooltipContext?.show(e, geojson);
-  };
-
-  const _onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointermove?.(e);
-    tooltipContext?.show(e, geojson);
-  };
-
-  const _onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
-    restProps.onpointerleave?.(e);
-    tooltipContext?.hide();
-  };
-
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'GeoPath',
-      render,
-      events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
-        pointerdown: restProps.onpointerdown,
-        touchmove: restProps.ontouchmove,
-      },
-      deps: () => [
-        geojson,
-        projection,
-        fillKey.current,
-        strokeKey.current,
-        strokeWidth,
-        opacity,
-        className,
-      ],
-    });
-  }
-</script>
-
-{#if children}
-  {@render children({ geoPath })}
-{:else if renderCtx === 'svg'}
-  <path
-    bind:this={ref}
-    {...restProps}
-    d={geojson ? geoPath?.(geojson) : ''}
-    {fill}
-    {stroke}
-    stroke-width={strokeWidth}
-    {opacity}
-    onclick={_onClick}
-    onpointerenter={_onPointerEnter}
-    onpointermove={_onPointerMove}
-    onpointerleave={_onPointerLeave}
-    class={cls(layerClass('geo-path'), fill == null && 'fill-transparent', className)}
-  />
-{/if}