layerchart 0.37.2 → 0.37.3

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

@@ -30,7 +30,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            value: any;
+            value: number;
             centroid: [number, number];
             boundingBox: any;
         };

package/dist/components/Chart.svelte

@@ -15,12 +15,14 @@ export const Svg = _Svg;
 export const WebGL = _WebGL;
 </script>
 
-<script>import { max, min } from 'd3-array';
+<script>import { onMount } from 'svelte';
+import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales.js';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
+import { geoFitObjectTransform } from '../utils/geo.js';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -73,7 +75,16 @@ export let tooltip = undefined;
 /** Props passed to TransformContext */
 export let transform = undefined;
 export let transformContext = undefined;
+/** Set transformContext's initial translate and scale based on geo object.  Requires `geo.projection` to also be set */
+export let fitGeoObject = undefined;
+// Binded for access within TransformContext
 let geoProjection = undefined;
+// Track when mounted since LayerCake initializes width/height with `100` until binded `clientWidth`/`clientWidth` can run
+// Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
+let isMounted = false;
+onMount(() => {
+    isMounted = true;
+});
 </script>
 
 <LayerCake
@@ -103,60 +114,69 @@ let geoProjection = undefined;
   let:data
   let:flatData
 >
-  <TransformContext
-    bind:this={transformContext}
-    processTranslate={geo
-      ? (x, y, deltaX, deltaY, scale) => {
-          if (geo.applyTransform?.includes('rotate')) {
-            // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
-            // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
-            const projectionScale = $geoProjection.scale();
-            const sensitivity = 75;
-            return {
-              x: x + deltaX * (sensitivity / projectionScale),
-              y: y + deltaY * (sensitivity / projectionScale) * -1,
-            };
-          } else if (geo.applyTransform?.includes('translate')) {
-            // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
-            return { x: x + deltaX, y: y + deltaY };
-          } else {
-            // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
-            return { x: x + deltaX / scale, y: y + deltaY / scale };
-          }
-        }
+  {@const initialTransform =
+    fitGeoObject && geo?.projection
+      ? geoFitObjectTransform(geo.projection(), [width, height], fitGeoObject)
       : undefined}
-    {...transform}
-    let:transform={_transform}
-    on:transform
-    on:dragstart
-    on:dragend
-  >
-    <GeoContext {...geo} bind:geo={geoProjection} let:projection>
-      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-      <TooltipContext {...tooltipProps} let:tooltip>
-        <slot
-          {aspectRatio}
-          {containerHeight}
-          {containerWidth}
-          {height}
-          {width}
-          {element}
-          {projection}
-          transform={_transform}
-          {tooltip}
-          {xScale}
-          {xGet}
-          {yScale}
-          {yGet}
-          {zScale}
-          {zGet}
-          {rScale}
-          {rGet}
-          {padding}
-          {data}
-          {flatData}
-        />
-      </TooltipContext>
-    </GeoContext>
-  </TransformContext>
+
+  {#key isMounted}
+    <TransformContext
+      bind:this={transformContext}
+      initialTranslate={initialTransform?.translate}
+      initialScale={initialTransform?.scale}
+      processTranslate={geo
+        ? (x, y, deltaX, deltaY, scale) => {
+            if (geo.applyTransform?.includes('rotate')) {
+              // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
+              // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
+              const projectionScale = $geoProjection.scale();
+              const sensitivity = 75;
+              return {
+                x: x + deltaX * (sensitivity / projectionScale),
+                y: y + deltaY * (sensitivity / projectionScale) * -1,
+              };
+            } else if (geo.applyTransform?.includes('translate')) {
+              // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
+              return { x: x + deltaX, y: y + deltaY };
+            } else {
+              // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
+              return { x: x + deltaX / scale, y: y + deltaY / scale };
+            }
+          }
+        : undefined}
+      {...transform}
+      let:transform={_transform}
+      on:transform
+      on:dragstart
+      on:dragend
+    >
+      <GeoContext {...geo} bind:geo={geoProjection} let:projection>
+        {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+        <TooltipContext {...tooltipProps} let:tooltip>
+          <slot
+            {aspectRatio}
+            {containerHeight}
+            {containerWidth}
+            {height}
+            {width}
+            {element}
+            {projection}
+            transform={_transform}
+            {tooltip}
+            {xScale}
+            {xGet}
+            {yScale}
+            {yGet}
+            {zScale}
+            {zGet}
+            {rScale}
+            {rGet}
+            {padding}
+            {data}
+            {flatData}
+          />
+        </TooltipContext>
+      </GeoContext>
+    </TransformContext>
+  {/key}
 </LayerCake>

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

@@ -6,10 +6,11 @@ export declare const Canvas: typeof _Canvas;
 export declare const Html: typeof _Html;
 export declare const Svg: typeof _Svg;
 export declare const WebGL: typeof _WebGL;
-import type { ComponentProps } from 'svelte';
+import { type ComponentProps } from 'svelte';
 import GeoContext from './GeoContext.svelte';
 import TooltipContext from './TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
+import { geoFitObjectTransform } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -23,6 +24,7 @@ declare const __propDef: {
         tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         transform?: Partial<ComponentProps<TransformContext>> | undefined;
         transformContext?: TransformContext | undefined;
+        fitGeoObject?: Parameters<typeof geoFitObjectTransform>[2] | undefined;
     };
     events: {
         transform: CustomEvent<{
@@ -47,8 +49,25 @@ declare const __propDef: {
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             transform: {
-                scale: any;
-                translate: any;
+                scale: number;
+                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                translate: {
+                    x: number;
+                    y: number;
+                };
+                setTranslate: ((new_value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").TweenedOptions<{
+                    x: number;
+                    y: number;
+                }> | undefined) => Promise<void>) | ((this: void, value: {
+                    x: number;
+                    y: number;
+                }) => void);
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -61,7 +80,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null;
+                data: null; /** Props passed to TransformContext */
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

package/dist/components/TransformContext.svelte

@@ -42,15 +42,17 @@ export let clickDistance = 10;
 const dispatch = createEventDispatcher();
 let pointerDown = false;
 const dragging = writable(false);
-export let initialTranslate = { x: 0, y: 0 };
-export const translate = motionStore(initialTranslate, { spring, tweened });
-export let initialScale = 1;
-export const scale = motionStore(initialScale, { spring, tweened });
+const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+export let initialTranslate = undefined;
+export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
+const DEFAULT_SCALE = 1;
+export let initialScale = undefined;
+export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
 let startPoint = { x: 0, y: 0 };
 let startTranslate = { x: 0, y: 0 };
 export function reset() {
-    $translate = initialTranslate;
-    $scale = initialScale;
+    $translate = initialTranslate ?? DEFAULT_TRANSLATE;
+    $scale = initialScale ?? DEFAULT_SCALE;
 }
 export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
@@ -197,5 +199,14 @@ $: dispatch('transform', { scale: $scale, translate: $translate });
   on:keypress
   class="h-full"
 >
-  <slot transform={{ scale: $scale, translate: $translate, zoomTo, reset }} />
+  <slot
+    transform={{
+      scale: $scale,
+      setScale: scale.set,
+      translate: $translate,
+      setTranslate: translate.set,
+      zoomTo,
+      reset,
+    }}
+  />
 </div>

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

@@ -41,9 +41,18 @@ declare const __propDef: {
             x: number;
             y: number;
         } | undefined;
-        translate?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        translate?: import("svelte/motion").Spring<{
+            x: number;
+            y: number;
+        }> | import("svelte/motion").Tweened<{
+            x: number;
+            y: number;
+        }> | Writable<{
+            x: number;
+            y: number;
+        }> | undefined;
         initialScale?: number | undefined;
-        scale?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined;
         reset?: (() => void) | undefined;
         zoomIn?: (() => void) | undefined;
         zoomOut?: (() => void) | undefined;
@@ -76,8 +85,25 @@ declare const __propDef: {
     slots: {
         default: {
             transform: {
-                scale: any;
-                translate: any;
+                scale: number;
+                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                translate: {
+                    x: number;
+                    y: number;
+                };
+                setTranslate: ((new_value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
+                    x: number;
+                    y: number;
+                }, opts?: import("svelte/motion").TweenedOptions<{
+                    x: number;
+                    y: number;
+                }> | undefined) => Promise<void>) | ((this: void, value: {
+                    x: number;
+                    y: number;
+                }) => void);
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -94,8 +120,17 @@ export type TransformContextProps = typeof __propDef.props;
 export type TransformContextEvents = typeof __propDef.events;
 export type TransformContextSlots = typeof __propDef.slots;
 export default class TransformContext extends SvelteComponentTyped<TransformContextProps, TransformContextEvents, TransformContextSlots> {
-    get translate(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
-    get scale(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
+    get translate(): NonNullable<import("svelte/motion").Spring<{
+        x: number;
+        y: number;
+    }> | import("svelte/motion").Tweened<{
+        x: number;
+        y: number;
+    }> | Writable<{
+        x: number;
+        y: number;
+    }> | undefined>;
+    get scale(): NonNullable<import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined>;
     get reset(): () => void;
     get zoomIn(): () => void;
     get zoomOut(): () => void;

package/dist/docs/TransformDebug.svelte

@@ -12,10 +12,6 @@ const { translate, scale } = transform;
       <span class="opacity-50">translate:</span>
       <div class="text-right">{format($translate.x, 'decimal')}</div>
       <div class="text-right">{format($translate.y, 'decimal')}</div>
-
-      <span class="opacity-50">delta:</span>
-      <div class="text-right">{format($translate.deltaX, 'decimal')}</div>
-      <div class="text-right">{format($translate.deltaY, 'decimal')}</div>
     </div>
   </div>
 </div>

package/dist/stores/motionStore.d.ts

@@ -17,7 +17,7 @@ export type PropMotionOptions = {
 /**
  * Convenient wrapper to create a motion store (spring(), tweened()) based on properties, or fall back to basic writable() store
  */
-export declare function motionStore<T = any>(value: any, options: MotionOptions): import("svelte/motion").Spring<T> | import("svelte/motion").Tweened<T> | import("svelte/store").Writable<T>;
+export declare function motionStore<T = any>(value: T, options: MotionOptions): import("svelte/motion").Spring<T> | import("svelte/motion").Tweened<T> | import("svelte/store").Writable<T>;
 /**
  * Helper to resolve motion options with specific property option (useful for specifying per-prop delays)
  */

package/dist/utils/geo.d.ts

@@ -16,3 +16,10 @@ export declare function antipode([longitude, latitude]: [number, number]): [numb
  * @see: https://observablehq.com/@d3/testing-projection-visibility
  */
 export declare function isVisible(projection: GeoProjection | GeoStreamWrapper): ([x, y]: [any, any]) => boolean;
+export declare function geoFitObjectTransform(projection: GeoProjection, size: [number, number], object: Parameters<typeof projection.fitSize>[1]): {
+    translate: {
+        x: number;
+        y: number;
+    };
+    scale: number;
+};

package/dist/utils/geo.js

@@ -59,3 +59,8 @@ export function isVisible(projection) {
     });
     return ([x, y]) => ((visible = false), stream.point(x, y), visible);
 }
+export function geoFitObjectTransform(projection, size, object) {
+    const newProjection = projection.fitSize(size, object);
+    const translate = newProjection.translate();
+    return { translate: { x: translate[0], y: translate[1] }, scale: newProjection.scale() };
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.37.2",
+  "version": "0.37.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",