layerchart 0.32.2 → 0.33.0

package/dist/components/Chart.svelte

@@ -91,32 +91,8 @@ export let geo = undefined;
   let:flatData
 >
   <GeoContext {...geo} let:projection>
-    {#if tooltip}
-      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-      <TooltipContext {...tooltipProps} let:tooltip>
-        <slot
-          {aspectRatio}
-          {containerHeight}
-          {containerWidth}
-          {height}
-          {width}
-          {element}
-          {projection}
-          {tooltip}
-          {xScale}
-          {xGet}
-          {yScale}
-          {yGet}
-          {zScale}
-          {zGet}
-          {rScale}
-          {rGet}
-          {padding}
-          {data}
-          {flatData}
-        />
-      </TooltipContext>
-    {:else}
+    {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+    <TooltipContext {...tooltipProps} let:tooltip>
       <slot
         {aspectRatio}
         {containerHeight}
@@ -125,6 +101,7 @@ export let geo = undefined;
         {width}
         {element}
         {projection}
+        {tooltip}
         {xScale}
         {xGet}
         {yScale}
@@ -137,6 +114,6 @@ export let geo = undefined;
         {data}
         {flatData}
       />
-    {/if}
+    </TooltipContext>
   </GeoContext>
 </LayerCake>

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

@@ -31,6 +31,13 @@ declare const __propDef: {
             width: number;
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
+            tooltip: {
+                y: number;
+                x: number;
+                data: null;
+                show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
+                hide: () => void;
+            };
             xScale: any;
             xGet: any;
             yScale: any;

package/dist/components/GeoContext.svelte

@@ -13,7 +13,7 @@ function setGeoContext(geo) {
 <script>const { width, height } = getContext('LayerCake');
 /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
 export let projection = undefined;
-export let fitGeojson;
+export let fitGeojson = undefined;
 /** 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. */
 export let fixedAspectRatio = undefined;
 export let clipAngle = undefined;
@@ -22,6 +22,8 @@ export let rotate = undefined;
 export let scale = undefined;
 export let translate = undefined;
 export let center = undefined;
+export let reflectX = undefined;
+export let reflectY = undefined;
 const geo = writable(projection?.());
 setGeoContext(geo);
 $: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
@@ -42,6 +44,12 @@ $: if (projection) {
     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);
     }

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

@@ -7,7 +7,7 @@ export declare function geoContext(): GeoContext;
 declare const __propDef: {
     props: {
         /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection | GeoIdentityTransform) | undefined;
-        fitGeojson: GeoPermissibleObjects;
+        fitGeojson?: GeoPermissibleObjects | undefined;
         /** 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 | undefined;
         clipAngle?: number | undefined;
         clipExtent?: [[number, number], [number, number]] | undefined;
@@ -22,6 +22,8 @@ declare const __propDef: {
         scale?: number | undefined;
         translate?: [number, number] | undefined;
         center?: [number, number] | undefined;
+        reflectX?: boolean | undefined;
+        reflectY?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Group.svelte

@@ -20,16 +20,13 @@ export let tweened = undefined;
 let tweened_x = motionStore(initialX, { spring, tweened });
 let tweened_y = motionStore(initialY, { spring, tweened });
 $: tick().then(() => {
-    tweened_x.set(x);
-    tweened_y.set(y);
+    tweened_x.set(x ?? (center === 'x' || center === true ? $width / 2 : 0));
+    tweened_y.set(y ?? (center === 'y' || center === true ? $height / 2 : 0));
 });
 let transform = undefined;
-$: if (x != null || y != null) {
+$: if (center || x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
 }
-$: if (center) {
-    transform = `translate(${$width / 2}, ${$height / 2})`;
-}
 </script>
 
 <g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialX?: number | undefined;
         y?: number | undefined;
         initialY?: number | undefined;
-        center?: boolean | undefined;
+        center?: boolean | "x" | "y" | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };

package/dist/components/Pie.svelte

@@ -40,6 +40,7 @@ export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
 // export let padRadius = 0;
+export let placement = 'center';
 export let spring = undefined;
 export let tweened = undefined;
 /**
@@ -50,7 +51,7 @@ export let offset = 0;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { data: contextData, x, y, xRange, rGet, config } = getContext('LayerCake');
+const { data: contextData, x, y, xRange, rGet, config, width, height } = getContext('LayerCake');
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
@@ -61,9 +62,20 @@ $: pie = d3pie()
     .value($x);
 $: arcs = pie(data ?? $contextData);
 // $: console.log({ arcs, $yRange });
+$: radius = Math.min($width / 2, $height / 2);
+$: coords = {
+    x: placement === 'left'
+        ? radius
+        : placement === 'center'
+            ? $width / 2
+            : placement === 'right'
+                ? $width - radius
+                : 0,
+    y: placement === 'none' ? 0 : $height / 2,
+};
 </script>
 
-<Group center>
+<Group x={coords.x} y={coords.y}>
   <slot {arcs}>
     {#each arcs as arc, index}
       <Arc

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

@@ -25,6 +25,7 @@ declare const __propDef: {
            */ outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
+        placement?: "center" | "left" | "right" | "none" | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**

package/dist/components/TooltipContext.svelte

@@ -40,7 +40,7 @@ const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, heigh
 /**
  * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
  */
-export let mode = 'bisect-x';
+export let mode = 'manual';
 /**
  * @type {'closest' | 'left' | 'right'}
  */

package/dist/components/{Zoom.svelte → Transform.svelte}

@@ -22,10 +22,10 @@ export function reset() {
     $translate = initialTranslate;
     $scale = initialScale;
 }
-export function increase() {
+export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
 }
-export function decrease() {
+export function zoomOut() {
     scaleTo(0.8, { x: $width / 2, y: $height / 2 });
 }
 export function translateCenter() {
@@ -47,17 +47,21 @@ export function zoomTo(center, rect) {
 function onMouseDown(e) {
     if (disablePointer)
         return;
+    e.preventDefault();
     dragging = true;
     moved = false;
     svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
     startPoint = localPoint(svgEl, e);
     startTranslate = $translate;
-    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mousemove', onMouseMove, { capture: true });
     window.addEventListener('mouseup', onMouseUp);
+    dispatch('dragstart');
 }
 function onMouseMove(e) {
     if (!dragging)
         return;
+    e.preventDefault(); // Stop text selection
+    e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
     const endPoint = localPoint(svgEl, e);
     const deltaX = endPoint.x - startPoint.x;
     const deltaY = endPoint.y - startPoint.y;
@@ -74,6 +78,7 @@ function onMouseUp(e) {
     dragging = false;
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
+    dispatch('dragend');
 }
 function onClick(e) {
     if (moved) {
@@ -159,7 +164,7 @@ $: if (mode === 'svg') {
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
 }
-$: dispatch('zoom', { scale: $scale, translate: $translate });
+$: dispatch('transform', { scale: $scale, translate: $translate });
 </script>
 
 <g

package/dist/components/{Zoom.svelte.d.ts → Transform.svelte.d.ts}

@@ -15,8 +15,8 @@ declare const __propDef: {
         } | undefined;
         initialScale?: number | undefined;
         reset?: (() => void) | undefined;
-        increase?: (() => void) | undefined;
-        decrease?: (() => void) | undefined;
+        zoomIn?: (() => void) | undefined;
+        zoomOut?: (() => void) | undefined;
         translateCenter?: (() => void) | undefined;
         zoomTo?: ((center: {
             x: number;
@@ -31,7 +31,9 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
-        zoom: CustomEvent<{
+        dragstart: CustomEvent<null>;
+        dragend: CustomEvent<null>;
+        transform: CustomEvent<{
             scale: number;
             translate: {
                 x: number;
@@ -55,13 +57,13 @@ declare const __propDef: {
         };
     };
 };
-export type ZoomProps = typeof __propDef.props;
-export type ZoomEvents = typeof __propDef.events;
-export type ZoomSlots = typeof __propDef.slots;
-export default class Zoom extends SvelteComponentTyped<ZoomProps, ZoomEvents, ZoomSlots> {
+export type TransformProps = typeof __propDef.props;
+export type TransformEvents = typeof __propDef.events;
+export type TransformSlots = typeof __propDef.slots;
+export default class Transform extends SvelteComponentTyped<TransformProps, TransformEvents, TransformSlots> {
     get reset(): () => void;
-    get increase(): () => void;
-    get decrease(): () => void;
+    get zoomIn(): () => void;
+    get zoomOut(): () => void;
     get translateCenter(): () => void;
     get zoomTo(): (center: {
         x: number;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import * as d3 from 'd3-hierarchy';
 declare const __propDef: {
     props: {
-        tile?: "slice" | "binary" | "dice" | d3.RatioSquarifyTilingFactory | "squarify" | "resquarify" | "sliceDice" | undefined;
+        tile?: "slice" | d3.RatioSquarifyTilingFactory | "binary" | "squarify" | "resquarify" | "dice" | "sliceDice" | undefined;
         padding?: number | undefined;
         paddingInner?: number | undefined;
         paddingOuter?: number | undefined;

package/dist/components/index.d.ts

@@ -50,4 +50,4 @@ export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
-export { default as Zoom } from './Zoom.svelte';
+export { default as Transform } from './Transform.svelte';

package/dist/components/index.js

@@ -50,4 +50,4 @@ export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
-export { default as Zoom } from './Zoom.svelte';
+export { default as Transform } from './Transform.svelte';

package/dist/docs/{ZoomControls.svelte → TransformControls.svelte}

@@ -1,6 +1,6 @@
 <script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
-export let zoom;
+export let transform;
 export let placement = 'top-right';
 export let orientation = 'vertical';
 </script>
@@ -25,28 +25,28 @@ export let orientation = 'vertical';
   <Tooltip title="Zoom in">
     <Button
       icon={mdiMagnifyPlusOutline}
-      on:click={() => zoom.increase()}
+      on:click={() => transform.zoomIn()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Zoom out">
     <Button
       icon={mdiMagnifyMinusOutline}
-      on:click={() => zoom.decrease()}
+      on:click={() => transform.zoomOut()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Center">
     <Button
       icon={mdiImageFilterCenterFocus}
-      on:click={() => zoom.translateCenter()}
+      on:click={() => transform.translateCenter()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Reset">
     <Button
       icon={mdiArrowULeftTop}
-      on:click={() => zoom.reset()}
+      on:click={() => transform.reset()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type Transform from '../components/Transform.svelte';
+declare const __propDef: {
+    props: {
+        transform: Transform;
+        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TransformControlsProps = typeof __propDef.props;
+export type TransformControlsEvents = typeof __propDef.events;
+export type TransformControlsSlots = typeof __propDef.slots;
+export default class TransformControls extends SvelteComponentTyped<TransformControlsProps, TransformControlsEvents, TransformControlsSlots> {
+}
+export {};

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.32.2",
+  "version": "0.33.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -46,17 +46,17 @@
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.3",
+    "svelte2tsx": "^0.7.4",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   },
   "type": "module",
   "dependencies": {
@@ -65,7 +65,7 @@
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
-    "d3-geo": "^3.1.0",
+    "d3-geo": "^3.1.1",
     "d3-geo-voronoi": "^2.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
@@ -74,16 +74,16 @@
     "d3-random": "^3.0.1",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^3.4.0",
-    "layercake": "^8.0.3",
+    "date-fns": "^3.6.0",
+    "layercake": "^8.1.1",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.113.0",
+    "posthog-js": "^1.116.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.61.5",
+    "svelte-ux": "^0.61.10",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

package/dist/docs/ZoomControls.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type Zoom from '../components/Zoom.svelte';
-declare const __propDef: {
-    props: {
-        zoom: Zoom;
-        placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        orientation?: "horizontal" | "vertical" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ZoomControlsProps = typeof __propDef.props;
-export type ZoomControlsEvents = typeof __propDef.events;
-export type ZoomControlsSlots = typeof __propDef.slots;
-export default class ZoomControls extends SvelteComponentTyped<ZoomControlsProps, ZoomControlsEvents, ZoomControlsSlots> {
-}
-export {};