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

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

@@ -1,44 +1,95 @@
-import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+import { type Force, type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
 import type { Snippet } from 'svelte';
-type Forces = Record<string, Force<any, any>>;
+export type Forces<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = Record<string, Force<NodeDatum, LinkDatum>>;
+export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+};
 export type LinkPosition = {
     x1: number;
     y1: number;
     x2: number;
     y2: number;
 };
-export type ForceSimulationProps = {
+export type OnStartEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnTickEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnEndEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnNodesChangeEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+/**
+ * Default initial alpha value of the simulation.
+ */
+export declare const DEFAULT_ALPHA: number;
+/**
+ * Default target alpha value for the simulation.
+ */
+export declare const DEFAULT_ALPHA_TARGET: number;
+/**
+ * Default alpha decay rate per tick.
+ *
+ * Formula: `1 - Math.pow(0.001, 1 / 300)`.
+ */
+export declare const DEFAULT_ALPHA_DECAY: number;
+/**
+ * Default minimum alpha value at which simulation stops.
+ */
+export declare const DEFAULT_ALPHA_MIN: number;
+/**
+ * Default velocity decay factor applied to nodes each tick.
+ */
+export declare const DEFAULT_VELOCITY_DECAY: number;
+export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
      * Force simulation parameters
      */
-    forces: Forces;
+    forces: Forces<NodeDatum, LinkDatum>;
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data<NodeDatum, LinkDatum>;
     /**
      * Current alpha value of the simulation
-     * @default 1
+     * @default DEFAULT_ALPHA
      */
     alpha?: number;
     /**
      * Target alpha value for the simulation
-     * @default 0
+     * @default DEFAULT_ALPHA_TARGET
      */
     alphaTarget?: number;
     /**
      * Alpha decay rate per tick
-     * @default 1 - Math.pow(0.001, 1 / 300)
+     * @default DEFAULT_ALPHA_DECAY
      */
     alphaDecay?: number;
     /**
      * Minimum alpha value at which simulation stops
-     * @default 0.01
+     * @default DEFAULT_ALPHA_MIN
      */
     alphaMin?: number;
     /**
      * Velocity decay factor applied to nodes each tick
-     * @default 0.4
+     * @default DEFAULT_VELOCITY_DECAY
      */
     velocityDecay?: number;
     /**
@@ -59,26 +110,49 @@ export type ForceSimulationProps = {
     /**
      * Callback function triggered when simulation starts
      */
-    onStart?: () => void;
+    onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
+    /**
+     * Callback function triggered right before nodes get passed to the simulation
+     */
+    onNodesChange?: (e: OnNodesChangeEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered on each simulation tick
      */
-    onTick?: (e: {
-        alpha: number;
-        alphaTarget: number;
-    }) => void;
+    onTick?: (e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered when simulation ends
      */
-    onEnd?: () => void;
+    onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
     children?: Snippet<[
         {
-            nodes: any[];
-            simulation: Simulation<SimulationNodeDatum, undefined>;
+            nodes: NodeDatum[];
+            links: LinkDatum[];
             linkPositions: LinkPosition[];
+            simulation: Simulation<NodeDatum, LinkDatum>;
         }
     ]>;
 };
-declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
-type ForceSimulation = ReturnType<typeof ForceSimulation>;
+declare function $$render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(): {
+    props: ForceSimulationProps<NodeDatum, LinkDatum>;
+    exports: {};
+    bindings: "alpha";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> {
+    props(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['props'];
+    events(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['events'];
+    slots(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['slots'];
+    bindings(): "alpha";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['bindings']>;
+    } & ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ForceSimulation: $$IsomorphicComponent;
+type ForceSimulation<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
 export default ForceSimulation;

package/dist/components/Frame.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let { ref: refProp = $bindable(), full = false, ...restProps }: FrameProps = $props();
@@ -37,5 +37,5 @@
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   bind:ref
-  {...extractLayerProps(restProps, 'frame')}
+  {...extractLayerProps(restProps, 'lc-frame')}
 />

package/dist/components/GeoCircle.svelte

@@ -34,4 +34,4 @@
   const geojson = $derived(geoCircle().radius(radius).center(center).precision(precision)());
 </script>
 
-<GeoPath {geojson} {...extractLayerProps(restProps, 'geo-circle')} />
+<GeoPath {geojson} {...extractLayerProps(restProps, 'lc-geo-circle')} />

package/dist/components/GeoEdgeFade.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
 
   export type GeoEdgeFadePropsWithoutHTML = {
     link: { source: [number, number]; target: [number, number] };
@@ -22,7 +21,7 @@
   import { scaleLinear } from 'd3-scale';
   import { geoDistance } from 'd3-geo';
 
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getGeoContext } from '../contexts/geo.js';
   import Group, { type GroupProps } from './Group.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
 
@@ -40,13 +39,13 @@
     refProp = ref;
   });
 
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 
   const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
   const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
 
   const center = $derived(
-    geoCtx.projection?.invert?.(geoCtx.projection?.translate()) ?? ([0, 0] as [number, number])
+    geo.projection?.invert?.(geo.projection?.translate()) ?? ([0, 0] as [number, number])
   );
   const source = $derived(link.source);
   const target = $derived(link.target);
@@ -56,6 +55,6 @@
   const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'lc-geo-edge-fade')}>
   {@render children?.()}
 </Group>

package/dist/components/GeoPath.svelte

@@ -1,17 +1,18 @@
 <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 type { SVGAttributes } from 'svelte/elements';
   import {
+    geoPath as d3GeoPath,
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
     type GeoPermissibleObjects,
     type GeoProjection,
     type GeoTransformPrototype,
   } from 'd3-geo';
-  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
+  import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+
+  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { PathProps } from './Path.svelte';
 
   export type GeoPathPropsWithoutHTML = {
     /**
@@ -20,9 +21,9 @@
     geojson?: GeoPermissibleObjects | null;
 
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue | undefined;
+    tooltip?: boolean;
 
     /**
      * Click event handler
@@ -58,7 +59,18 @@
     ref?: SVGPathElement;
 
     children?: Snippet<[{ geoPath: ReturnType<typeof geoCurvePath> | undefined }]>;
-  } & CommonStyleProps;
+  } & CommonStyleProps &
+    Pick<
+      PathProps,
+      | 'motion'
+      | 'draw'
+      | 'marker'
+      | 'markerStart'
+      | 'markerMid'
+      | 'markerEnd'
+      | 'startContent'
+      | 'endContent'
+    >;
 
   export type GeoPathProps = GeoPathPropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
@@ -66,36 +78,28 @@
 
 <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';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import Path from './Path.svelte';
 
   let {
-    fill,
-    stroke,
-    strokeWidth,
-    opacity,
     geoTransform,
     geojson,
-    tooltipContext,
+    tooltip,
     curve = curveLinearClosed,
     onclick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
     class: className,
     ref: refProp = $bindable(),
     children,
     ...restProps
   }: GeoPathProps = $props();
 
-  let ref = $state<SVGPathElement>();
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
+  const ctx = getChartContext();
   const geo = getGeoContext();
 
   const projection = $derived(
@@ -105,93 +109,53 @@
   const geoPath = $derived.by(() => {
     geojson;
     if (!projection) return;
+    // Only use geoCurvePath for custom curves (performance impact)
+    if (curve === curveLinearClosed) {
+      return d3GeoPath(projection);
+    }
     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);
+  const pathData = $derived(geojson ? (geoPath?.(geojson) ?? '') : '');
 
-  // Hide `geoPath` and `tooltip` reactivity
+  // Hide `geoPath` reactivity from onclick handler
   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,
-      ],
-    });
+  function _onPointerEnter(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointerenter?.(e);
+    if (tooltip) {
+      ctx?.tooltip.show(e, geojson);
+    }
+  }
+
+  function _onPointerMove(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointermove?.(e);
+    if (tooltip) {
+      ctx.tooltip.show(e, geojson);
+    }
+  }
+
+  function _onPointerLeave(e: PointerEvent & { currentTarget: EventTarget & SVGPathElement }) {
+    onpointerleave?.(e);
+    if (tooltip) {
+      ctx.tooltip.hide();
+    }
   }
 </script>
 
 {#if children}
   {@render children({ geoPath })}
-{:else if renderCtx === 'svg'}
-  <path
-    bind:this={ref}
+{:else}
+  <Path
+    {pathData}
     {...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)}
+    onclick={onclick ? _onClick : undefined}
+    onpointerenter={tooltip || onpointerenter ? _onPointerEnter : undefined}
+    onpointermove={tooltip || onpointermove ? _onPointerMove : undefined}
+    onpointerleave={tooltip || onpointerleave ? _onPointerLeave : undefined}
+    class={cls('lc-geo-path', className)}
+    pathRef={refProp}
   />
 {/if}

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

@@ -1,18 +1,18 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
 import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
-import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
-import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { PathProps } from './Path.svelte';
 export type GeoPathPropsWithoutHTML = {
     /**
      * GeoJSON data to render
      */
     geojson?: GeoPermissibleObjects | null;
     /**
-     * Tooltip context to setup pointer events to show tooltip for related data
+     * Setup pointer events to show tooltip for related data
      */
-    tooltipContext?: TooltipContextValue | undefined;
+    tooltip?: boolean;
     /**
      * Click event handler
      */
@@ -43,7 +43,7 @@ export type GeoPathPropsWithoutHTML = {
     children?: Snippet<[{
         geoPath: ReturnType<typeof geoCurvePath> | undefined;
     }]>;
-} & CommonStyleProps;
+} & CommonStyleProps & Pick<PathProps, 'motion' | 'draw' | 'marker' | 'markerStart' | 'markerMid' | 'markerEnd' | 'startContent' | 'endContent'>;
 export type GeoPathProps = GeoPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
 import { geoCurvePath } from '../utils/geo.js';
 declare const GeoPath: import("svelte").Component<GeoPathProps, {}, "ref">;

package/dist/components/GeoPoint.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import type { Without } from '../utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {
@@ -32,43 +31,53 @@
 
 <script lang="ts">
   import Group from './Group.svelte';
-  import { getRenderContext } from './Chart.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import { extractLayerProps } from '../utils/attributes.js';
 
-  let { lat, long, ref: refProp = $bindable(), children, ...restProps }: GeoPointProps = $props();
+  let {
+    lat,
+    long,
+    ref: refProp = $bindable(),
+    children,
+    opacity,
+    fillOpacity,
+    strokeWidth,
+    class: className,
+    ...restProps
+  }: GeoPointProps = $props();
 
   let ref = $state<Element>();
   $effect.pre(() => {
     refProp = ref;
   });
 
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
 
-  const points = $derived(geoCtx.projection?.([long, lat]) ?? [0, 0]);
+  const points = $derived(geo.projection?.([long, lat]) ?? [0, 0]);
   const x = $derived(points[0]);
   const y = $derived(points[1]);
 
-  const renderContext = getRenderContext();
+  const layerCtx = getLayerContext();
 </script>
 
-{#if renderContext === 'svg'}
+{#if layerCtx === 'svg'}
   {#if children}
-    <Group {x} {y} {...extractLayerProps(restProps, 'geo-point-group')}>
+    <Group {x} {y} opacity={opacity as number} class={className as string} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
       {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
+    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}
 
-{#if renderContext === 'canvas'}
+{#if layerCtx === 'canvas'}
   {#if children}
     <!-- TODO: Handle Canvas translation. Consolidate with svg use case above -->
     <!-- <Group {x} {y} {...$$restProps}> -->
     {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
+    <Circle cx={x} cy={y} {opacity} {fillOpacity} {strokeWidth} class={className} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}

package/dist/components/GeoProjection.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import { GeoState, type GeoStateProps } from '../states/geo.svelte.js';
+
+  export type GeoProjectionProps = GeoStateProps & {
+    children: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import { setGeoContext } from '../contexts/geo.js';
+  import { getChartContext } from '../contexts/chart.js';
+
+  let { children, ...props }: GeoProjectionProps = $props();
+
+  const ctx = getChartContext();
+
+  // Create GeoState instance
+  const geoState = new GeoState(() => props);
+
+  // Sync chart dimensions to geo state
+  $effect(() => {
+    geoState.chartWidth = ctx.width;
+    geoState.chartHeight = ctx.height;
+  });
+
+  setGeoContext(geoState);
+</script>
+
+{@render children()}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type GeoStateProps } from '../states/geo.svelte.js';
+export type GeoProjectionProps = GeoStateProps & {
+    children: Snippet;
+};
+declare const GeoProjection: import("svelte").Component<GeoProjectionProps, {}, "">;
+type GeoProjection = ReturnType<typeof GeoProjection>;
+export default GeoProjection;