layerchart 0.41.0 → 0.41.2

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 ??
@@ -79,6 +85,7 @@ $: if (renderContext === 'canvas' && $ctx) {
       on:pointermove
       on:pointerleave={(e) => tooltip?.hide()}
       on:pointerleave
+      on:pointerdown
       on:click={(event) => dispatch('click', { geoPath, event })}
       on:click
       class={cls(fill == null && 'fill-transparent', className)}

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,11 +13,13 @@ declare const __propDef: {
         tooltip?: TooltipContextValue | undefined;
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
         class?: string | undefined;
+        geoTransform?: ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype) | undefined;
     };
     events: {
         pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
+        pointerdown: PointerEvent;
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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';
@@ -310,6 +310,11 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
           on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
           on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
           on:pointerleave={hideTooltip}
+          on:pointerdown={(e) => {
+            if (e.target.hasPointerCapture(e.pointerId)) {
+              e.target.releasePointerCapture(e.pointerId);
+            }
+          }}
           on:click={(e) => {
             onClick({ data: e.detail.data });
           }}
@@ -329,6 +334,11 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
               on:pointerenter={(e) => showTooltip(e, rect.data)}
               on:pointermove={(e) => showTooltip(e, rect.data)}
               on:pointerleave={hideTooltip}
+              on:pointerdown={(e) => {
+                if (e.target.hasPointerCapture(e.pointerId)) {
+                  e.target.releasePointerCapture(e.pointerId);
+                }
+              }}
               on:click={(e) => {
                 onClick({ data: rect.data });
               }}

package/dist/components/Voronoi.svelte

@@ -33,6 +33,7 @@ $: boundHeight = Math.max($height, 0);
       <GeoPath
         geojson={feature}
         class={cls('fill-transparent', classes.path)}
+        on:pointerenter
         on:pointermove={(e) =>
           dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
         on:pointerleave
@@ -40,6 +41,7 @@ $: boundHeight = Math.max($height, 0);
           // Prevent touch to not interfer with pointer
           e.preventDefault();
         }}
+        on:pointerdown
         on:click={(e) => dispatch('click', { data: feature.properties.site.data, feature })}
       />
     {/each}
@@ -49,12 +51,14 @@ $: boundHeight = Math.max($height, 0);
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}
+        on:pointerenter
         on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
         on:pointerleave
         on:touchmove={(e) => {
           // Prevent touch to not interfer with pointer
           e.preventDefault();
         }}
+        on:pointerdown
         on:click={(e) => dispatch('click', { data: point.data, point })}
       />
     {/each}

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

@@ -10,7 +10,9 @@ declare const __propDef: {
         } | undefined;
     };
     events: {
+        pointerenter: PointerEvent;
         pointerleave: PointerEvent;
+        pointerdown: PointerEvent;
         click: CustomEvent<{
             data: any;
             point?: [number, number] | undefined;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "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": {