layerchart 0.38.0 → 0.38.1

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

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