layerchart 2.0.0-next.5 → 2.0.0-next.51

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/TransformControls.svelte

@@ -1,179 +0,0 @@
-<script lang="ts" module>
-  import type { Placement } from './types.js';
-
-  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
-
-  export type TransformControlsPropsWithoutHTML = {
-    /**
-     * @default 'top-right'
-     */
-    placement?: Placement;
-
-    /**
-     * @default 'vertical'
-     */
-    orientation?: 'horizontal' | 'vertical';
-
-    /**
-     * @default 'md'
-     */
-    size?: ComponentProps<Button>['size'];
-
-    /**
-     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
-     */
-    show?: Actions[];
-  };
-
-  export type TransformControlsProps = TransformControlsPropsWithoutHTML &
-    Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
-  import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-  import { cls } from '@layerstack/tailwind';
-
-  // TODO: maybe we include the icons as I think importing them like this
-  // will bog down the dev server
-  import {
-    mdiArrowULeftTop,
-    mdiMagnifyPlusOutline,
-    mdiMagnifyMinusOutline,
-    mdiImageFilterCenterFocus,
-    mdiChevronDown,
-    mdiResize,
-    mdiArrowExpandAll,
-    mdiCancel,
-  } from '@mdi/js';
-
-  import { getTransformContext } from './TransformContext.svelte';
-  import type { Without } from '../utils/types.js';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  let {
-    placement = 'top-right',
-    orientation = 'vertical',
-    size = 'md',
-    show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'],
-    class: className,
-  }: TransformControlsProps = $props();
-
-  const menuPlacementByOrientationAndPlacement = $derived({
-    horizontal: {
-      'top-left': 'bottom-end',
-      top: 'bottom-end',
-      'top-right': 'bottom-end',
-      left: 'bottom-end',
-      center: 'bottom-end',
-      right: 'bottom-end',
-      'bottom-left': 'top-end',
-      bottom: 'top-end',
-      'bottom-right': 'top-end',
-    },
-    vertical: {
-      'top-left': 'right-start',
-      top: 'right-start',
-      'top-right': 'left-start',
-      left: 'right-start',
-      center: 'right-start',
-      right: 'left-start',
-      'bottom-left': 'right-end',
-      bottom: 'right-end',
-      'bottom-right': 'left-end',
-    },
-  } as const);
-
-  const transform = getTransformContext();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
-    orientation === 'vertical' && 'flex-col',
-    {
-      'top-left': 'absolute top-0 left-0',
-      top: 'absolute top-0 left-1/2 -translate-x-1/2',
-      'top-right': 'absolute top-0 right-0',
-      left: 'absolute top-1/2 left-0 -translate-y-1/2',
-      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-      right: 'absolute top-1/2 right-0 -translate-y-1/2',
-      'bottom-left': 'absolute bottom-0 left-0',
-      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0',
-    }[placement],
-    className
-  )}
-  ondblclick={(e) => {
-    // Stop from propagating to TransformContext
-    e.stopPropagation();
-  }}
->
-  {#if show.includes('zoomIn')}
-    <Tooltip title="Zoom in">
-      <Button
-        icon={mdiMagnifyPlusOutline}
-        on:click={() => transform.zoomIn()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('zoomOut')}
-    <Tooltip title="Zoom out">
-      <Button
-        icon={mdiMagnifyMinusOutline}
-        on:click={() => transform.zoomOut()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('center')}
-    <Tooltip title="Center">
-      <Button
-        icon={mdiImageFilterCenterFocus}
-        on:click={() => transform.translateCenter()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('reset')}
-    <Tooltip title="Reset">
-      <Button
-        icon={mdiArrowULeftTop}
-        on:click={() => transform.reset()}
-        {size}
-        class="text-surface-content p-2"
-      />
-    </Tooltip>
-  {/if}
-
-  {#if show.includes('scrollMode')}
-    <Tooltip title="Scroll mode">
-      <MenuButton
-        iconOnly
-        options={[
-          { label: 'None', value: 'none', icon: mdiCancel },
-          { label: 'Zoom', value: 'scale', icon: mdiResize },
-          { label: 'Move', value: 'translate', icon: mdiArrowExpandAll },
-        ]}
-        menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
-        menuIcon={null}
-        {size}
-        value={transform.scrollMode}
-        on:change={(e) => transform.setScrollMode(e.detail.value)}
-        class="text-surface-content"
-      >
-        <svelte:fragment slot="selection" let:value>
-          <Icon data={value?.icon ?? mdiChevronDown} />
-        </svelte:fragment>
-      </MenuButton>
-    </Tooltip>
-  {/if}
-</div>

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

@@ -1,28 +0,0 @@
-import type { Placement } from './types.js';
-type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
-export type TransformControlsPropsWithoutHTML = {
-    /**
-     * @default 'top-right'
-     */
-    placement?: Placement;
-    /**
-     * @default 'vertical'
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * @default 'md'
-     */
-    size?: ComponentProps<Button>['size'];
-    /**
-     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
-     */
-    show?: Actions[];
-};
-export type TransformControlsProps = TransformControlsPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
-import { type ComponentProps } from 'svelte';
-import { Button } from 'svelte-ux';
-import type { Without } from '../utils/types.js';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const TransformControls: import("svelte").Component<TransformControlsProps, {}, "">;
-type TransformControls = ReturnType<typeof TransformControls>;
-export default TransformControls;

package/dist/components/charts/utils.svelte.d.ts

@@ -1,30 +0,0 @@
-import type { Component, ComponentProps } from 'svelte';
-import { SelectionState } from '@layerstack/svelte-state';
-import type { SeriesData } from './types.js';
-import type Legend from '../Legend.svelte';
-export declare class HighlightKey<TData, SeriesComponent extends Component> {
-    current: string | null;
-    set: (seriesKey: typeof this.current) => void;
-}
-export declare class SeriesState<TData, TComponent extends Component> {
-    #private;
-    selectedSeries: SelectionState<unknown>;
-    selectedKeys: SelectionState<unknown>;
-    highlightKey: HighlightKey<TData, TComponent>;
-    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
-    get series(): SeriesData<TData, TComponent>[];
-    get isDefaultSeries(): boolean;
-    get allSeriesData(): Array<TData & {
-        seriesKey: string;
-    }>;
-    get visibleSeries(): SeriesData<TData, TComponent>[];
-}
-type CreateLegendPropsOptions<TData, TComponent extends Component> = {
-    seriesState: SeriesState<TData, TComponent>;
-    props: Partial<ComponentProps<typeof Legend>>;
-};
-/**
- * A prop builder for the legend component shared between the simplified charts.
- */
-export declare function createLegendProps<TData, TComponent extends Component>(opts: CreateLegendPropsOptions<TData, TComponent>): ComponentProps<typeof Legend>;
-export {};

package/dist/components/charts/utils.svelte.js

@@ -1,55 +0,0 @@
-import { SelectionState } from '@layerstack/svelte-state';
-import { scaleOrdinal } from 'd3-scale';
-export class HighlightKey {
-    current = $state(null);
-    set = (seriesKey) => {
-        this.current = seriesKey;
-    };
-}
-export class SeriesState {
-    #series = $state.raw([]);
-    selectedSeries = new SelectionState();
-    selectedKeys = new SelectionState();
-    highlightKey = new HighlightKey();
-    constructor(getSeries) {
-        this.#series = getSeries();
-    }
-    get series() {
-        return this.#series;
-    }
-    get isDefaultSeries() {
-        return this.#series.length === 1 && this.#series[0].key === 'default';
-    }
-    get allSeriesData() {
-        return this.#series
-            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-            .filter((d) => d);
-    }
-    get visibleSeries() {
-        return this.#series.filter((s) => this.selectedSeries.isEmpty() || this.selectedSeries.isSelected(s.key));
-    }
-}
-/**
- * A prop builder for the legend component shared between the simplified charts.
- */
-export function createLegendProps(opts) {
-    return {
-        scale: opts.seriesState.isDefaultSeries
-            ? undefined
-            : scaleOrdinal(opts.seriesState.series.map((s) => s.key), opts.seriesState.series.map((s) => s.color)),
-        tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
-        placement: 'bottom',
-        variant: 'swatches',
-        onclick: (_, item) => opts.seriesState.selectedSeries.toggleSelected(item.value),
-        onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
-        onpointerleave: () => (opts.seriesState.highlightKey.current = null),
-        ...opts.props,
-        classes: {
-            item: (item) => opts.seriesState.visibleSeries.length &&
-                !opts.seriesState.visibleSeries.some((s) => s.key === item.value)
-                ? 'opacity-50'
-                : '',
-            ...opts.props?.classes,
-        },
-    };
-}