From 3002d87f0dfe5df47063f35eaac3c84be64e4d21 Mon Sep 17 00:00:00 2001 From: trash-and-fire <69399722+trash-and-fire@users.noreply.github.com> Date: Sat, 14 Oct 2023 18:27:59 +0300 Subject: [PATCH] 82: series primitive component --- src/package/components/internal/utils.ts | 23 +++++++++++++++ .../components/series-primitive.interface.ts | 10 +++++++ .../components/series-primitive.svelte | 11 +++++++ src/package/index.ts | 2 ++ src/package/internal/series-primitive.ts | 29 +++++++++++++++++++ 5 files changed, 75 insertions(+) create mode 100644 src/package/components/series-primitive.interface.ts create mode 100644 src/package/components/series-primitive.svelte create mode 100644 src/package/internal/series-primitive.ts diff --git a/src/package/components/internal/utils.ts b/src/package/components/internal/utils.ts index 2046c17..55c7f70 100644 --- a/src/package/components/internal/utils.ts +++ b/src/package/components/internal/utils.ts @@ -3,12 +3,14 @@ import type {PriceLineActionResult, PriceLineParams} from '../../internal/lines' import type {Reference} from '../../internal/utils.js'; import type {PriceScaleActionResult, PriceScaleParams} from '../../internal/price-scale'; import type {TimeScaleActionResult, TimeScaleParams} from '../../internal/time-scale'; +import type {SeriesPrimitiveActionResult, SeriesPrimitiveParams} from '../../internal/series-primitive'; import {afterUpdate, getContext, onMount, setContext} from 'svelte'; import {series, SeriesActionResult, SeriesParams} from '../../internal/series.js'; import {line} from '../../internal/lines.js'; import {timeScale} from '../../internal/time-scale.js'; import {priceScale} from '../../internal/price-scale.js'; +import {seriesPrimitive} from '../../internal/series-primitive.js'; export type Context = IChartApi | ISeriesApi; @@ -109,3 +111,24 @@ export function usePriceScaleEffect(callback: () => [params: PriceScaleParams, r subject?.updateReference(ref); }); } + +export function useSeriesPrimitiveEffect(callback: () => [params: SeriesPrimitiveParams]): void { + let subject: SeriesPrimitiveActionResult | null = null; + + const api = context>(); + + onMount(() => { + const [params] = callback(); + subject = seriesPrimitive(api as unknown as ISeriesApi, params); + + return () => { + subject?.destroy(); + subject = null; + } + }); + + afterUpdate(() => { + const [params] = callback(); + subject?.update(params); + }); +} diff --git a/src/package/components/series-primitive.interface.ts b/src/package/components/series-primitive.interface.ts new file mode 100644 index 0000000..34443a4 --- /dev/null +++ b/src/package/components/series-primitive.interface.ts @@ -0,0 +1,10 @@ +import type {Time, ISeriesPrimitive} from 'lightweight-charts'; + +export interface $$PROPS { + view: ISeriesPrimitive; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface $$EVENTS { + +} diff --git a/src/package/components/series-primitive.svelte b/src/package/components/series-primitive.svelte new file mode 100644 index 0000000..6811bfb --- /dev/null +++ b/src/package/components/series-primitive.svelte @@ -0,0 +1,11 @@ + + + diff --git a/src/package/index.ts b/src/package/index.ts index 874c228..fa6b4d6 100644 --- a/src/package/index.ts +++ b/src/package/index.ts @@ -9,6 +9,7 @@ export {default as CustomSeries} from './components/custom-series.svelte'; export {default as PriceLine} from './components/price-line.svelte'; export {default as PriceScale} from './components/price-scale.svelte'; export {default as TimeScale} from './components/time-scale.svelte'; +export {default as SeriesPrimitiv} from './components/series-primitive.svelte'; export type {$$PROPS as ChartProps, $$EVENTS as ChartEventArgs, $$EVENTS_DETAIL as ChartEventDetails} from './components/chart.interface.js'; export type {$$PROPS as AreaSeriesProps} from './components/area-series.interface.js'; @@ -21,4 +22,5 @@ export type {$$PROPS as CustomSeriesProps} from './components/custom-series.inte export type {$$PROPS as PriceLineProps} from './components/price-line.interface.js'; export type {$$PROPS as PriceScaleProps} from './components/price-scale.interface.js'; export type {$$PROPS as TimeScaleProps, $$EVENTS as TimeScaleEventArgs, $$EVENTS_DETAIL as TimeScaleEventDetails} from './components/time-scale.interface.js'; +export type {$$PROPS as SeriesPrimitiveProps} from './components/series-primitive.interface.js'; export type {Reference} from './internal/utils.js'; diff --git a/src/package/internal/series-primitive.ts b/src/package/internal/series-primitive.ts new file mode 100644 index 0000000..35765f9 --- /dev/null +++ b/src/package/internal/series-primitive.ts @@ -0,0 +1,29 @@ +import type {ISeriesApi, ISeriesPrimitive, SeriesType, Time} from 'lightweight-charts'; +import type {ActionResult} from './utils.js'; + +export interface SeriesPrimitiveParams { + view: ISeriesPrimitive; +} + +export type SeriesPrimitiveActionResult = ActionResult>; + +export function seriesPrimitive( + target: ISeriesApi, + params: SeriesPrimitiveParams +): SeriesPrimitiveActionResult { + let { view } = params; + target.attachPrimitive(view); + + return { + update(nextParams: SeriesPrimitiveParams): void { + if (nextParams.view !== view) { + target.detachPrimitive(view); + view = nextParams.view; + target.attachPrimitive(view); + } + }, + destroy(): void { + target.detachPrimitive(view); + } + }; +}