layerchart 0.41.1 → 0.41.3

package/dist/components/GeoPath.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import {} from 'd3-geo';
+import { geoTransform as d3geoTransform, } from 'd3-geo';
 import { cls } from 'svelte-ux';
 import { geoContext } from './GeoContext.svelte';
 import { curveLinearClosed } from 'd3-shape';
@@ -30,7 +30,13 @@ const dispatch = createEventDispatcher();
 const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
-$: geoPath = geoCurvePath($geo, curve);
+/**
+ * Apply geo transform to projection.  Useful to draw straight lines with `geoMercator` projection.
+ * See: https://d3js.org/d3-geo/projection#geoTransform and https://stackoverflow.com/a/56409480/191902
+ **/
+export let geoTransform = undefined;
+$: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
+$: geoPath = geoCurvePath(_projection, curve);
 const DEFAULT_FILL = 'rgb(0, 0, 0)';
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
@@ -44,13 +50,13 @@ $: if (renderContext === 'canvas' && $ctx) {
     // console.count('render');
     $ctx.clearRect(0, 0, $width, $height);
     if (render) {
-        geoPath = geoCurvePath($geo, curve, $ctx);
+        geoPath = geoCurvePath(_projection, curve, $ctx);
         render($ctx, { geoPath });
     }
     else {
         $ctx.beginPath();
         // Set the context here since setting it in `$: geoPath` is a circular reference
-        geoPath = geoCurvePath($geo, curve, $ctx);
+        geoPath = geoCurvePath(_projection, curve, $ctx);
         geoPath(geojson);
         $ctx.fillStyle =
             fill ??

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
+import { type GeoIdentityTransform, type GeoPath, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
 import type { TooltipContextValue } from './TooltipContext.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 declare const __propDef: {
@@ -13,6 +13,7 @@ declare const __propDef: {
         tooltip?: TooltipContextValue | undefined;
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
         class?: string | undefined;
+        geoTransform?: ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype) | undefined;
     };
     events: {
         pointerenter: PointerEvent;

package/dist/components/GeoTile.svelte

@@ -1,19 +1,21 @@
 <script>import { getContext } from 'svelte';
 import { tile as d3Tile } from 'd3-tile';
 import { geoContext } from './GeoContext.svelte';
+import Group from './Group.svelte';
 import TileImage from './TileImage.svelte';
 export let url;
 export let zoomDelta = 0;
 export let tileSize = 256;
 export let disableCache = false;
 export let debug = false;
-const { width, height } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
+$: center = $geo([0, 0]) ?? [0, 0];
 $: tile = d3Tile()
-    .size([$width, $height])
+    .size([$containerWidth, $containerHeight])
+    .translate([center[0] + $padding.left, center[1] + $padding.top])
     .scale($geo.scale() * 2 * Math.PI)
-    .translate($geo([0, 0]) ?? [0, 0]) // TODO: Only works with Mercator
     .tileSize(tileSize)
     .zoomDelta(zoomDelta);
 $: tiles = tile();
@@ -38,8 +40,10 @@ $: if (renderContext === 'canvas' && $ctx && url) {
 
 {#if renderContext === 'svg' && url}
   <slot {tiles}>
-    {#each tiles as [x, y, z] (url(x, y, z))}
-      <TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
-    {/each}
+    <Group x={-$padding.left} y={-$padding.top}>
+      {#each tiles as [x, y, z] (url(x, y, z))}
+        <TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
+      {/each}
+    </Group>
   </slot>
 {/if}

package/dist/components/TooltipContext.svelte

@@ -20,7 +20,7 @@ import { writable } from 'svelte/store';
 import { bisector, max, min } from 'd3-array';
 import { quadtree as d3Quadtree } from 'd3-quadtree';
 import { cls, sortFunc } from 'svelte-ux';
-import { Svg, Html } from './Chart.svelte';
+import { Svg } from './Chart.svelte';
 import ChartClipPath from './ChartClipPath.svelte';
 import Voronoi from './Voronoi.svelte';
 import { localPoint } from '../utils/event.js';

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.41.1",
+  "version": "0.41.3",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -35,10 +35,10 @@
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
     "autoprefixer": "^10.4.19",
-    "marked": "^12.0.2",
+    "marked": "^13.0.0",
     "mdsvex": "^0.11.2",
     "posthog-js": "^1.95.1",
-    "prettier": "^3.3.1",
+    "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.4",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
@@ -49,7 +49,7 @@
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
     "svelte-json-tree": "^2.2.0",
-    "svelte-preprocess": "^5.1.4",
+    "svelte-preprocess": "^6.0.0",
     "svelte2tsx": "^0.7.9",
     "tailwindcss": "^3.4.4",
     "topojson-client": "^3.1.0",
@@ -85,9 +85,9 @@
     "date-fns": "^3.6.0",
     "layercake": "^8.3.0",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.138.3",
+    "posthog-js": "^1.139.1",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.66.6",
+    "svelte-ux": "^0.66.7",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {