layerchart 0.80.0 → 0.81.0

package/dist/components/Brush.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { extent, min, max } from 'd3-array';
   import { clamp } from '@layerstack/utils';
@@ -17,12 +17,6 @@
 
   const { xScale, yScale, width, height, padding } = chartContext();
 
-  const dispatch = createEventDispatcher<{
-    change: { xDomain?: DomainType; yDomain?: DomainType };
-    brushStart: { xDomain?: DomainType; yDomain?: DomainType };
-    brushEnd: { xDomain?: DomainType; yDomain?: DomainType };
-  }>();
-
   /** Axis to apply brushing */
   export let axis: 'x' | 'y' | 'both' = 'x';
 
@@ -61,6 +55,10 @@
     labels?: string;
   } = {};
 
+  export let onChange: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  export let onBrushStart: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+  export let onBrushEnd: (e: { xDomain?: DomainType; yDomain?: DomainType }) => void = () => {};
+
   let frameEl: SVGRectElement;
 
   function handler(
@@ -83,7 +81,7 @@
         },
       };
 
-      dispatch('brushStart', { xDomain, yDomain });
+      onBrushStart({ xDomain, yDomain });
 
       const onPointerMove = (e: PointerEvent) => {
         fn(start, {
@@ -95,17 +93,17 @@
         //   // Ignore?
         //   // TODO: What about when using `x` or `y` axis?
         // } else {
-        dispatch('change', { xDomain, yDomain });
+        onChange({ xDomain, yDomain });
         // }
       };
 
       const onPointerUp = (e: PointerEvent) => {
         if (e.target === frameEl) {
           reset();
-          dispatch('change', { xDomain, yDomain });
+          onChange({ xDomain, yDomain });
         }
 
-        dispatch('brushEnd', { xDomain, yDomain });
+        onBrushEnd({ xDomain, yDomain });
 
         if (resetOnEnd) {
           reset();
@@ -258,7 +256,7 @@
         on:dblclick={() => {
           if (yDomain) {
             yDomain[0] = yDomainMin;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >
@@ -303,7 +301,7 @@
         on:dblclick={() => {
           if (xDomain) {
             xDomain[0] = xDomainMin;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >
@@ -325,7 +323,7 @@
         on:dblclick={() => {
           if (xDomain) {
             xDomain[1] = xDomainMax;
-            dispatch('change', { xDomain, yDomain });
+            onChange({ xDomain, yDomain });
           }
         }}
       >

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

@@ -23,21 +23,20 @@ declare const __propDef: {
             handle?: string;
             labels?: string;
         } | undefined;
-    };
-    events: {
-        change: CustomEvent<{
+        onChange?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-        brushStart: CustomEvent<{
+        }) => void) | undefined;
+        onBrushStart?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-        brushEnd: CustomEvent<{
+        }) => void) | undefined;
+        onBrushEnd?: ((e: {
             xDomain?: DomainType;
             yDomain?: DomainType;
-        }>;
-    } & {
+        }) => void) | undefined;
+    };
+    events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/charts/AreaChart.svelte

@@ -398,15 +398,16 @@
 
     {#if brush && brush.mode === 'integrated'}
       <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
         <Brush
           axis="x"
           resetOnEnd
           {xDomain}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/dist/components/charts/LineChart.svelte

@@ -324,15 +324,16 @@
 
     {#if brush && brush.mode === 'integrated'}
       <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
         <Brush
           axis="x"
           resetOnEnd
           {xDomain}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/dist/components/charts/ScatterChart.svelte

@@ -272,17 +272,18 @@
     <!-- TODO: Determine how to coordinate with `tooltip={{ mode: 'voronoi' }} -->
     {#if brush && brush.mode === 'integrated'}
       <Svg>
+        {@const brushProps = { ...(typeof brush === 'object' ? brush : null), ...props.brush }}
         <Brush
           axis="both"
           resetOnEnd
           {xDomain}
           {yDomain}
-          on:brushEnd={(e) => {
-            xDomain = e.detail.xDomain;
-            yDomain = e.detail.yDomain;
+          {...brushProps}
+          onBrushEnd={(e) => {
+            xDomain = e.xDomain;
+            yDomain = e.yDomain;
+            brushProps.onBrushEnd?.(e);
           }}
-          {...typeof brush === 'object' ? brush : null}
-          {...props.brush}
         />
       </Svg>
     {/if}

package/package.json

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