Merge pull request #18 from trash-and-fire/chart-events-fix

Chart events fix

src/demo/app.svelte

@@ -16,6 +16,7 @@
         SeriesActionParams
     } from 'svelte-lightweight-charts/types';
     import type {ChartActionParams} from 'svelte-lightweight-charts';
+    import type {$$EVENTS as ChartEvents} from 'svelte-lightweight-charts/components/chart.svelte'
     import type {$$EVENTS as TimeScaleEvents} from 'svelte-lightweight-charts/components/time-scale.svelte';
 
     import {LineStyle} from 'lightweight-charts';
@@ -94,7 +95,7 @@
         updateVolumeData(volumeComponent, day);
     }
 
-    let action = true;
+    let action = false;
     let components = true;
 
     let showVolume = true;
@@ -113,7 +114,6 @@
         series: showVolume ? [mainProps, volumeProps] : [mainProps],
         reference: handleReference,
         onClick: handleClick,
-        onCrosshairMove: handleCrosshairMove,
     };
 
     let api: IChartApi | null = null;
@@ -161,9 +161,9 @@
         }
     }
 
-    function handleCrosshairMove(): void {
+    function handleCrosshairMove(e: ChartEvents['crosshairMove']): void {
         // eslint-disable-next-line no-console
-        console.log('move');
+        console.log('move', e.detail);
     }
 
     function handleReference(ref: IChartApi | null): void {
@@ -435,6 +435,7 @@
                     // eslint-disable-next-line no-console
                     ref: console.log
                 }}
+                on:crosshairMove={handleCrosshairMove}
             >
                 <TimeScale
                     visible={timeScaleVisible}

src/package/components/chart.interface.ts

@@ -15,7 +15,9 @@ export interface $$PROPS extends DeepPartial<ChartOptions> {
     }
 }
 
-export interface $$EVENTS {
+export interface $$EVENTS_DETAIL {
     crosshairMove: MouseEventParams,
     click: MouseEventParams,
 }
+
+export type $$EVENTS = { [K in keyof $$EVENTS_DETAIL]: CustomEvent<$$EVENTS_DETAIL[K]> & { type: K } };

src/package/components/chart.svelte

@@ -2,15 +2,15 @@
 
 <script lang="ts">
     import type {ChartOptions, IChartApi, DeepPartial, MouseEventParams} from 'lightweight-charts';
-    import type {$$EVENTS, $$PROPS} from './chart.interface';
+    import type {$$EVENTS_DETAIL, $$PROPS} from './chart.interface';
     import type {Reference} from '../types';
 
     import {createEventDispatcher} from 'svelte';
     import {element} from './internal/element';
     import ContextProvider from './internal/context-provider.svelte';
     import {chart} from '../index';
 
-    const dispatch = createEventDispatcher<$$EVENTS>();
+    const dispatch = createEventDispatcher<$$EVENTS_DETAIL>();
 
     export let container: $$PROPS['container'] = undefined;
 

src/package/index.ts

@@ -76,11 +76,11 @@ export function chart<T extends Array<SeriesActionParams>>(
 
             if (nextOnClick !== onClick) {
                 if (onClick) {
-                    chart.subscribeClick(onClick);
+                    chart.unsubscribeClick(onClick);
                 }
                 onClick = nextOnClick;
                 if (onClick) {
-                    chart.unsubscribeClick(onClick);
+                    chart.subscribeClick(onClick);
                 }
             }