layerchart 0.40.3 → 0.41.0

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/package.json

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