layerchart 0.38.0 → 0.38.2

package/dist/components/Chart.svelte

@@ -122,6 +122,7 @@ onMount(() => {
   {#key isMounted}
     <TransformContext
       bind:this={transformContext}
+      mode={transform?.mode ?? geo?.applyTransform?.length ? 'manual' : 'none'}
       initialTranslate={initialTransform?.translate}
       initialScale={initialTransform?.scale}
       processTranslate={geo

package/dist/components/HitCanvas.svelte

@@ -1,8 +1,9 @@
-<script>import { beforeUpdate, createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+<script>import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
 import Canvas from './layout/Canvas.svelte';
+import { transformContext } from './TransformContext.svelte';
 const { width, height } = getContext('LayerCake');
 export let context = undefined;
 /** Show canvas for debugging */
@@ -31,9 +32,14 @@ function* rgbColorGenerator(step = 500) {
 }
 $: colorGenerator = rgbColorGenerator();
 // Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
-beforeUpdate(() => {
+const { translate, scale } = transformContext();
+$: {
+    $width;
+    $height;
+    $translate;
+    $scale;
     colorGenerator = rgbColorGenerator();
-});
+}
 const dataByColor = new Map();
 function setColorData(color, data) {
     dataByColor.set(color, data);

package/dist/components/RadialGradient.svelte

@@ -0,0 +1,50 @@
+<script>import { uniqueId } from 'svelte-ux';
+/** Unique id for linearGradient */
+export let id = uniqueId('radialGradient-');
+/** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */
+export let stops = [
+    'var(--tw-gradient-from)',
+    'var(--tw-gradient-to)',
+];
+export let cx = '50%';
+export let cy = '50%';
+export let fx = cx;
+export let fy = cy;
+export let r = '50%';
+export let fr = '0%';
+/** Indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient */
+export let spreadMethod = 'pad';
+export let transform = undefined;
+/** Define the coordinate system for attributes (i.e. gradientUnits) */
+export let units = 'objectBoundingBox';
+</script>
+
+<defs>
+  <radialGradient
+    {id}
+    {cx}
+    {cy}
+    {fx}
+    {fy}
+    {r}
+    {fr}
+    {spreadMethod}
+    gradientTransform={transform}
+    gradientUnits={units}
+    {...$$restProps}
+  >
+    <slot name="stops">
+      {#if stops}
+        {#each stops as stop, i}
+          {#if Array.isArray(stop)}
+            <stop offset={stop[0]} stop-color={stop[1]} />
+          {:else}
+            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+          {/if}
+        {/each}
+      {/if}
+    </slot>
+  </radialGradient>
+</defs>
+
+<slot {id} url="url(#{id})" />

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

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string | undefined;
+        stops?: string[] | [string | number, string][] | undefined;
+        cx?: string | undefined;
+        cy?: string | undefined;
+        fx?: string | undefined;
+        fy?: string | undefined;
+        r?: string | undefined;
+        fr?: string | undefined;
+        spreadMethod?: "pad" | "reflect" | "repeat" | undefined;
+        transform?: string | null | undefined;
+        units?: "objectBoundingBox" | "userSpaceOnUse" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        stops: {};
+        default: {
+            id: string;
+            url: string;
+        };
+    };
+};
+export type RadialGradientProps = typeof __propDef.props;
+export type RadialGradientEvents = typeof __propDef.events;
+export type RadialGradientSlots = typeof __propDef.slots;
+export default class RadialGradient extends SvelteComponentTyped<RadialGradientProps, RadialGradientEvents, RadialGradientSlots> {
+}
+export {};

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

@@ -14,7 +14,7 @@ declare const __propDef: {
     props: {
         /**
            * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
-           */ mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual" | undefined;
+           */ mode?: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | undefined;
         /**
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "left" | "right" | "closest" | undefined;

package/dist/components/TransformContext.svelte

@@ -33,7 +33,7 @@ export let processTranslate = (x, y, deltaX, deltaY, scale) => {
         y: y + deltaY / scale,
     };
 };
-/** Disable pointer events including move/dragging */
+/** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */
 export let disablePointer = false;
 /** Action to take during wheel scroll */
 export let scroll = 'none';
@@ -88,7 +88,7 @@ setTransformContext({
     zoomTo,
 });
 function onPointerDown(e) {
-    if (disablePointer)
+    if (mode === 'none' || disablePointer)
         return;
     e.preventDefault();
     pointerDown = true;
@@ -125,13 +125,13 @@ function onClick(e) {
     }
 }
 function onDoubleClick(e) {
-    if (disablePointer)
+    if (mode === 'none' || disablePointer)
         return;
     const point = localPoint(e);
     scaleTo(e.shiftKey ? 0.5 : 2, point);
 }
 function onWheel(e) {
-    if (scroll === 'none' || disablePointer)
+    if (mode === 'none' || disablePointer || scroll === 'none')
         return;
     e.preventDefault();
     const point = (startPoint = localPoint(e));

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type Readable, type Writable } from 'svelte/store';
 export declare const transformContextKey: unique symbol;
 export type TransformContextValue = {
-    mode: 'canvas' | 'none';
+    mode: 'canvas' | 'manual' | 'none';
     scale: Writable<number>;
     translate: Writable<{
         x: number;
@@ -26,7 +26,7 @@ export declare function transformContext(): TransformContext;
 import { motionStore } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
-        mode?: "none" | "canvas" | undefined;
+        mode?: "none" | "canvas" | "manual" | undefined;
         translateOnScale?: boolean | undefined;
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
@@ -34,7 +34,7 @@ declare const __propDef: {
             x: number;
             y: number;
         }) | undefined;
-        /** Disable pointer events including move/dragging */ disablePointer?: boolean | undefined;
+        /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */ disablePointer?: boolean | undefined;
         /** Action to take during wheel scroll */ scroll?: "none" | "scale" | "translate" | undefined;
         /** Distance/threshold to consider drag vs click (disable click propagation) */ clickDistance?: number | undefined;
         initialTranslate?: {

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

@@ -1,6 +1,6 @@
 <script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
-import { transformContext } from '../components/TransformContext.svelte';
+import { transformContext } from './TransformContext.svelte';
 export let placement = 'top-right';
 export let orientation = 'vertical';
 const transform = transformContext();

package/dist/components/index.d.ts

@@ -43,6 +43,7 @@ export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
 export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
+export { default as RadialGradient } from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
@@ -56,6 +57,7 @@ export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as TransformContext, transformContext } from './TransformContext.svelte';
+export { default as TransformControls } from './TransformControls.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';

package/dist/components/index.js

@@ -44,6 +44,7 @@ export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
 export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
+export { default as RadialGradient } from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
@@ -57,6 +58,7 @@ export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as TransformContext, transformContext } from './TransformContext.svelte';
+export { default as TransformControls } from './TransformControls.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';

package/dist/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './math.js';
 export * from './pivot.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './threshold.js';

package/dist/utils/index.js

@@ -5,3 +5,4 @@ export * from './math.js';
 export * from './pivot.js';
 export * from './stack.js';
 export * from './ticks.js';
+export * from './threshold.js';

package/dist/utils/threshold.js

@@ -5,7 +5,7 @@ import { scaleTime } from 'd3-scale';
  * https://observablehq.com/@d3/d3-bin-time-thresholds
  */
 export function thresholdTime(n) {
-    // TODO: Unable to satifiy `ThresholdNumberArrayGenerator<Value extends number>` with `Date`
+    // TODO: Unable to satisfy `ThresholdNumberArrayGenerator<Value extends number>` with `Date`
     return (data, min, max) => {
         return scaleTime().domain([min, max]).ticks(n);
     };

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.38.0",
+  "version": "0.38.2",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -28,7 +28,7 @@
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/d3-time": "^3.0.2",
+    "@types/d3-time": "^3.0.3",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.4",
     "@types/shapefile": "^0.6.4",
@@ -87,7 +87,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.136.2",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.66.0",
+    "svelte-ux": "^0.66.4",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {