layerchart 0.40.3 → 0.41.1

package/dist/components/GeoPath.svelte

@@ -79,6 +79,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

@@ -18,6 +18,7 @@ declare const __propDef: {
         pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
+        pointerdown: PointerEvent;
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Highlight.svelte

@@ -20,6 +20,8 @@ export let lines = false;
 export let area = false;
 /** Show bar and pass props to Rect */
 export let bar = false;
+/** Set to false to disable spring transitions */
+export let motion = true;
 // TODO: Fix circle points being backwards for stack (see AreaStack)
 let _points = [];
 let _lines = [];
@@ -167,7 +169,7 @@ $: if (highlightData) {
   {#if area}
     <slot name="area" area={_area}>
       <Rect
-        spring
+        spring={motion}
         {..._area}
         {...typeof area === 'object' ? area : null}
         class={cls(
@@ -182,7 +184,7 @@ $: if (highlightData) {
   {#if bar}
     <slot name="bar" {bar}>
       <Bar
-        spring
+        spring={motion}
         x={typeof bar === 'object' ? bar.x : null}
         y={typeof bar === 'object' ? bar.y : null}
         inset={typeof bar === 'object' ? bar.inset : null}
@@ -200,7 +202,7 @@ $: if (highlightData) {
     <slot name="lines" lines={_lines}>
       {#each _lines as line}
         <Line
-          spring
+          spring={motion}
           x1={line.x1}
           y1={line.y1}
           x2={line.x2}
@@ -221,7 +223,7 @@ $: if (highlightData) {
         <!-- TODO: Improve color with stacked data -->
         {@const fill = $config.r ? $rGet(highlightData) : null}
         <Circle
-          spring
+          spring={motion}
           cx={point.x}
           cy={point.y}
           r={4}

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

@@ -61,6 +61,7 @@ declare const __propDef: {
                 [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
             } | undefined;
         }> | undefined;
+        /** Set to false to disable spring transitions */ motion?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Tooltip.svelte

@@ -1,9 +1,8 @@
 <script>import { getContext } from 'svelte';
-import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
-import { writable } from 'svelte/store';
 import { cls } from 'svelte-ux';
 import { tooltipContext } from './TooltipContext.svelte';
+import { motionStore } from '../stores/motionStore.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
 export let x = 'pointer';
 /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
@@ -14,16 +13,17 @@ export let xOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
-export let animate = true;
 export let variant = 'default';
+/** Set to `false` to disable spring transitions */
+export let motion = true;
 export let header = undefined;
 export let classes = {};
 const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;
-const xPos = animate ? spring($tooltip.x) : writable($tooltip.x);
-const yPos = animate ? spring($tooltip.y) : writable($tooltip.y);
+const xPos = motionStore($tooltip.x, { spring: motion });
+const yPos = motionStore($tooltip.y, { spring: motion });
 function alignValue(value, align, addlOffset, tooltipSize) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
     return value + (align === 'end' ? -addlOffset : addlOffset) - alignOffset;

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         yOffset?: number | undefined;
         anchor?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: false | "container" | undefined;
-        animate?: boolean | undefined;
         variant?: "default" | "none" | "invert" | undefined;
+        motion?: boolean | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string | undefined;

package/dist/components/TooltipContext.svelte

@@ -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.40.3",
+  "version": "0.41.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",