layerchart 0.32.0 → 0.32.1

package/dist/components/Circle.svelte

@@ -5,7 +5,7 @@ export let cx = 0;
 export let initialCx = cx;
 export let cy = 0;
 export let initialCy = cy;
-export let r;
+export let r = 1;
 export let initialR = r;
 export let spring = undefined;
 export let tweened = undefined;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialCx?: number | undefined;
         cy?: number | undefined;
         initialCy?: number | undefined;
-        r: number;
+        r?: number | undefined;
         initialR?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/GeoEdgeFade.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { scaleLinear } from 'd3-scale';
+import { geoDistance } from 'd3-geo';
+import { geoContext } from './GeoContext.svelte';
+export let link;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
+const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
+// $: center = $geo.invert([$width / 2, $height / 2]);
+$: center = $geo.invert($geo.translate());
+$: source = link.source;
+$: target = link.target;
+$: startDistance = 1.57 - geoDistance(source, center);
+$: endDistance = 1.57 - geoDistance(target, center);
+$: distance = startDistance < endDistance ? startDistance : endDistance;
+$: opacity = clamper(fade(distance));
+</script>
+
+<g {opacity}>
+  <slot />
+</g>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GeoEdgeFadeProps = typeof __propDef.props;
+export type GeoEdgeFadeEvents = typeof __propDef.events;
+export type GeoEdgeFadeSlots = typeof __propDef.slots;
+export default class GeoEdgeFade extends SvelteComponentTyped<GeoEdgeFadeProps, GeoEdgeFadeEvents, GeoEdgeFadeSlots> {
+}
+export {};

package/dist/components/GeoPoint.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { scaleCanvas } from 'layercake';
 import { geoContext } from './GeoContext.svelte';
+import Circle from './Circle.svelte';
 /** Latitude */
 export let lat;
 /** Longitude */
@@ -22,7 +23,11 @@ $: if (renderContext === 'canvas' && $ctx) {
 </script>
 
 {#if renderContext === 'svg'}
-  <g transform="translate({x},{y})">
-    <slot />
-  </g>
+  {#if $$slots.default}
+    <g transform="translate({x},{y})">
+      <slot />
+    </g>
+  {:else}
+    <Circle cx={x} cy={y} {...$$restProps} />
+  {/if}
 {/if}

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        /** Latitude */ lat: number;
-        /** Longitude */ long: number;
-        /** Render to canvas */ render?: ((ctx: CanvasRenderingContext2D, coords: {
+        [x: string]: any;
+        lat: number;
+        long: number;
+        render?: ((ctx: CanvasRenderingContext2D, coords: {
             x: number;
             y: number;
         }) => any) | undefined;

package/dist/components/GeoSpline.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from 'svelte';
+import { geoOrthographic, geoInterpolate } from 'd3-geo';
+import { curveNatural } from 'd3-shape';
+import { geoContext } from './GeoContext.svelte';
+import Spline from './Spline.svelte';
+export let link;
+/** Amount of loft to apply to the midle of the curve */
+export let loft = 1.0;
+/**
+ * Curve of spline drawn. Imported via d3-shape.
+ *
+ * @example
+ * import { curveNatural } from 'd3-shape';
+ * <GeoSpline curve={curveNatrual} />
+ *
+ * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+ */
+export let curve = curveNatural;
+const { width, height } = getContext('LayerCake');
+const geo = geoContext();
+$: loftedProjection = geoOrthographic()
+    .translate($geo.translate())
+    .rotate($geo.rotate())
+    .scale($geo.scale() * loft);
+$: source = $geo(link.source);
+$: target = $geo(link.target);
+$: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
+</script>
+
+<Spline
+  data={[source, middle, target]}
+  x={(d) => d[0]}
+  y={(d) => d[1]}
+  defined={(d) => $geo.invert(d)}
+  {curve}
+  {...$$restProps}
+/>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        link: {
+            source: [number, number];
+            target: [number, number];
+        };
+        loft?: number | undefined;
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoSplineProps = typeof __propDef.props;
+export type GeoSplineEvents = typeof __propDef.events;
+export type GeoSplineSlots = typeof __propDef.slots;
+export default class GeoSpline extends SvelteComponentTyped<GeoSplineProps, GeoSplineEvents, GeoSplineSlots> {
+}
+export {};

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

@@ -8,7 +8,7 @@ declare const __propDef: {
             initialCx?: number | undefined;
             cy?: number | undefined;
             initialCy?: number | undefined;
-            r: number;
+            r?: number | undefined;
             initialR?: number | undefined;
             spring?: boolean | import("svelte/motion").SpringOpts | undefined;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;

package/dist/components/Zoom.svelte

@@ -2,7 +2,7 @@
 import { motionStore } from '../stores/motionStore.js';
 const { width, height, padding } = getContext('LayerCake');
 export let mode = 'svg';
-export let translateOnScale;
+export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;
 export let disablePointer = false;

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

@@ -3,7 +3,7 @@ import { motionStore } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: "svg" | "manual" | undefined;
-        translateOnScale: false;
+        translateOnScale?: boolean | undefined;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;

package/dist/components/index.d.ts

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/dist/components/index.js

@@ -15,8 +15,10 @@ export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -83,7 +83,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.108.3",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.61.1",
+    "svelte-ux": "^0.61.2",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {