@baron1996/klinecharts-runtime 0.2.3 → 0.4.0

package/dist/time-series-runtime.js

@@ -0,0 +1,301 @@
+import { parseTimeSeriesScene, TimeSeriesSceneError, } from '@baron1996/kline-scene-schema';
+import { TimeSeriesChartsAdapter, } from '@baron1996/klinecharts-adapter';
+import { TIME_SERIES_RUNTIME_STYLES } from './time-series-runtime-styles.js';
+function runtimeError() {
+    return new TimeSeriesSceneError('TIME_SERIES_RUNTIME_DESTROYED', '/runtime', 'The Time Series Runtime has been destroyed.');
+}
+function adapterError(error) {
+    if (error instanceof TimeSeriesSceneError) {
+        return error;
+    }
+    return new TimeSeriesSceneError('TIME_SERIES_ADAPTER_FAILED', '/runtime/adapter', 'The Time Series Adapter operation failed.');
+}
+function exportError(error) {
+    const issues = error instanceof TimeSeriesSceneError
+        ? error.issues.map((issue) => ({
+            ...issue,
+            code: 'TIME_SERIES_EXPORT_INVALID',
+        }))
+        : [{
+                code: 'TIME_SERIES_EXPORT_INVALID',
+                path: '/',
+                message: 'Time Series Scene export validation failed.',
+            }];
+    return new TimeSeriesSceneError('TIME_SERIES_EXPORT_INVALID', '/', 'Time Series Scene export validation failed.', issues);
+}
+function createSwatch(color) {
+    const swatch = document.createElement('span');
+    swatch.className = 'baron-time-series-runtime__swatch';
+    swatch.setAttribute('aria-hidden', 'true');
+    swatch.style.setProperty('--baron-time-series-color', color);
+    return swatch;
+}
+function notifyRuntimeListener(listener, event) {
+    try {
+        listener(structuredClone(event));
+    }
+    catch {
+        // 宿主回调异常不得改变 Runtime 已完成的状态变更或错误语义。
+    }
+}
+/** 独立的通用时间序列 Runtime，不公开或复用旧 K 线 Runtime 状态。 */
+class TimeSeriesRuntimeImplementation {
+    /** 唯一受控的时间序列 Adapter。 */
+    #adapter;
+    /** Runtime 纯数据事件监听器。 */
+    #listeners = new Set();
+    /** 图例按钮，按 Scene 中 series 的声明顺序保存。 */
+    #legendButtons = new Map();
+    /** 图例按钮事件解绑函数。 */
+    #legendCleanups = [];
+    /** Runtime 自有覆盖层根节点。 */
+    #root;
+    /** Runtime 自有样式节点。 */
+    #styleElement;
+    /** 十字线 Tooltip 节点。 */
+    #tooltip;
+    /** Adapter 十字线监听器解绑函数。 */
+    #unsubscribeCrosshair;
+    /** Adapter 容器。 */
+    #container;
+    /** 创建前容器内联 position，销毁时精确恢复。 */
+    #originalPosition;
+    /** 当前完整且通过校验的 Scene。 */
+    #scene;
+    /** 防止销毁后继续访问 Adapter。 */
+    #destroyed = false;
+    constructor(container, scene, adapter, options) {
+        this.#container = container;
+        this.#scene = scene;
+        this.#adapter = adapter;
+        this.#originalPosition = container.style.position;
+        if (getComputedStyle(container).position === 'static') {
+            container.style.position = 'relative';
+        }
+        if (options.onEvent !== undefined) {
+            this.#listeners.add(options.onEvent);
+        }
+        this.#styleElement = document.createElement('style');
+        this.#styleElement.dataset.baronTimeSeriesStyle = 'true';
+        this.#styleElement.textContent = TIME_SERIES_RUNTIME_STYLES;
+        this.#root = document.createElement('div');
+        this.#root.className = 'baron-time-series-runtime';
+        this.#root.style.setProperty('--baron-time-series-text', scene.chart.layout.textColor);
+        this.#root.style.setProperty('--baron-time-series-background', scene.chart.layout.backgroundColor);
+        this.#root.style.setProperty('--baron-time-series-font', scene.chart.layout.fontFamily);
+        const legend = document.createElement('div');
+        legend.className = 'baron-time-series-runtime__legend';
+        legend.setAttribute('aria-label', '时间序列图例');
+        for (const series of scene.series) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'baron-time-series-runtime__legend-button';
+            button.dataset.timeSeriesId = series.id;
+            button.setAttribute('aria-pressed', String(series.visible));
+            button.append(createSwatch(series.style.color), series.name);
+            const handleClick = () => {
+                this.setSeriesVisible(series.id, button.getAttribute('aria-pressed') !== 'true');
+            };
+            button.addEventListener('click', handleClick);
+            this.#legendCleanups.push(() => button.removeEventListener('click', handleClick));
+            this.#legendButtons.set(series.id, button);
+            legend.append(button);
+        }
+        this.#tooltip = document.createElement('div');
+        this.#tooltip.className = 'baron-time-series-runtime__tooltip';
+        this.#tooltip.hidden = true;
+        this.#tooltip.setAttribute('role', 'status');
+        this.#root.append(legend, this.#tooltip);
+        container.append(this.#styleElement, this.#root);
+        this.#unsubscribeCrosshair = adapter.subscribeCrosshair((event) => this.#handleCrosshair(event));
+    }
+    static async create(container, value, options = {}) {
+        let adapter = null;
+        try {
+            const scene = parseTimeSeriesScene(value);
+            adapter = await TimeSeriesChartsAdapter.create(container, scene);
+            const runtime = new TimeSeriesRuntimeImplementation(container, scene, adapter, options);
+            runtime.#emit({ type: 'scene-ready', scene: runtime.exportScene() });
+            return runtime;
+        }
+        catch (error) {
+            adapter?.dispose();
+            const normalized = adapterError(error);
+            if (options.onEvent !== undefined) {
+                notifyRuntimeListener(options.onEvent, {
+                    type: 'scene-error',
+                    issues: structuredClone(normalized.issues),
+                    sceneVersion: 1,
+                    runtimeVersion: '0.1.0',
+                });
+            }
+            throw normalized;
+        }
+    }
+    #assertActive() {
+        if (this.#destroyed) {
+            throw runtimeError();
+        }
+    }
+    #emit(payload) {
+        const event = {
+            ...structuredClone(payload),
+            sceneVersion: 1,
+            runtimeVersion: '0.1.0',
+        };
+        for (const listener of this.#listeners) {
+            notifyRuntimeListener(listener, event);
+        }
+    }
+    #emitError(error) {
+        this.#emit({ type: 'scene-error', issues: structuredClone(error.issues) });
+    }
+    #handleCrosshair(event) {
+        const tooltip = this.#tooltip;
+        const scene = this.#scene;
+        if (this.#destroyed || tooltip === null || scene === null) {
+            return;
+        }
+        tooltip.replaceChildren();
+        if (event.timestamp === null || event.values === null) {
+            tooltip.hidden = true;
+            this.#emit({
+                type: 'crosshair-changed',
+                timestamp: null,
+                values: null,
+            });
+            return;
+        }
+        const time = document.createElement('div');
+        time.className = 'baron-time-series-runtime__tooltip-time';
+        time.textContent = new Intl.DateTimeFormat(scene.chart.locale, {
+            timeZone: scene.chart.timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+        }).format(new Date(event.timestamp));
+        tooltip.append(time);
+        for (const series of scene.series) {
+            if (!series.visible) {
+                continue;
+            }
+            const row = document.createElement('div');
+            row.className = 'baron-time-series-runtime__tooltip-row';
+            const name = document.createElement('span');
+            name.className = 'baron-time-series-runtime__tooltip-name';
+            name.append(createSwatch(series.style.color), series.name);
+            const value = document.createElement('span');
+            value.className = 'baron-time-series-runtime__tooltip-value';
+            const raw = event.values[series.id];
+            value.textContent = raw === null || raw === undefined
+                ? '—'
+                : `${raw.toFixed(series.precision)} ${series.unit}`;
+            row.append(name, value);
+            tooltip.append(row);
+        }
+        tooltip.hidden = false;
+        this.#emit({
+            type: 'crosshair-changed',
+            timestamp: event.timestamp,
+            values: structuredClone(event.values),
+        });
+    }
+    setSeriesVisible(seriesId, visible) {
+        try {
+            this.#assertActive();
+            const adapter = this.#adapter;
+            if (adapter === null) {
+                throw runtimeError();
+            }
+            const scene = adapter.setSeriesVisible(seriesId, visible);
+            this.#scene = scene;
+            this.#legendButtons.get(seriesId)?.setAttribute('aria-pressed', String(visible));
+            const result = structuredClone(scene);
+            this.#emit({
+                type: 'series-visibility-changed',
+                seriesId,
+                visible,
+                scene: result,
+            });
+            return structuredClone(result);
+        }
+        catch (error) {
+            const normalized = adapterError(error);
+            this.#emitError(normalized);
+            throw normalized;
+        }
+    }
+    async replaceData(data) {
+        try {
+            this.#assertActive();
+            const adapter = this.#adapter;
+            if (adapter === null) {
+                throw runtimeError();
+            }
+            const scene = adapter.replaceData(structuredClone(data));
+            this.#scene = scene;
+            const result = structuredClone(scene);
+            this.#emit({
+                type: 'data-replaced',
+                dataCount: result.data.length,
+                scene: result,
+            });
+            return structuredClone(result);
+        }
+        catch (error) {
+            const normalized = adapterError(error);
+            this.#emitError(normalized);
+            throw normalized;
+        }
+    }
+    exportScene() {
+        this.#assertActive();
+        try {
+            const scene = this.#scene;
+            if (scene === null) {
+                throw runtimeError();
+            }
+            return parseTimeSeriesScene(structuredClone(scene));
+        }
+        catch (error) {
+            const normalized = exportError(error);
+            this.#emitError(normalized);
+            throw normalized;
+        }
+    }
+    subscribe(listener) {
+        this.#assertActive();
+        this.#listeners.add(listener);
+        return () => this.#listeners.delete(listener);
+    }
+    destroy() {
+        if (this.#destroyed) {
+            return;
+        }
+        this.#destroyed = true;
+        this.#unsubscribeCrosshair?.();
+        for (const cleanup of this.#legendCleanups) {
+            cleanup();
+        }
+        this.#legendCleanups.length = 0;
+        this.#legendButtons.clear();
+        this.#root?.remove();
+        this.#styleElement?.remove();
+        this.#adapter?.dispose();
+        this.#listeners.clear();
+        if (this.#container !== null && this.#originalPosition !== null) {
+            this.#container.style.position = this.#originalPosition;
+        }
+        this.#unsubscribeCrosshair = null;
+        this.#tooltip = null;
+        this.#root = null;
+        this.#styleElement = null;
+        this.#adapter = null;
+        this.#scene = null;
+        this.#container = null;
+        this.#originalPosition = null;
+    }
+}
+export async function createTimeSeriesRuntime(container, scene, options = {}) {
+    return TimeSeriesRuntimeImplementation.create(container, scene, options);
+}

package/dist/time-series-types.d.ts

@@ -0,0 +1,42 @@
+import type { TimeSeriesPoint, TimeSeriesScene, TimeSeriesSceneIssue } from '@baron1996/kline-scene-schema';
+export interface TimeSeriesRuntimeEventEnvelope {
+    readonly sceneVersion: 1;
+    readonly runtimeVersion: '0.1.0';
+}
+export type TimeSeriesRuntimeEventPayload = {
+    readonly type: 'scene-ready';
+    readonly scene: TimeSeriesScene;
+} | {
+    readonly type: 'series-visibility-changed';
+    readonly seriesId: string;
+    readonly visible: boolean;
+    readonly scene: TimeSeriesScene;
+} | {
+    readonly type: 'data-replaced';
+    readonly dataCount: number;
+    readonly scene: TimeSeriesScene;
+} | {
+    readonly type: 'crosshair-changed';
+    readonly timestamp: number;
+    readonly values: Readonly<Record<string, number | null>>;
+} | {
+    readonly type: 'crosshair-changed';
+    readonly timestamp: null;
+    readonly values: null;
+} | {
+    readonly type: 'scene-error';
+    readonly issues: readonly TimeSeriesSceneIssue[];
+};
+export type TimeSeriesRuntimeEvent = TimeSeriesRuntimeEventPayload & TimeSeriesRuntimeEventEnvelope;
+export type TimeSeriesRuntimeListener = (event: TimeSeriesRuntimeEvent) => void;
+export interface TimeSeriesRuntimeOptions {
+    readonly onEvent?: TimeSeriesRuntimeListener;
+}
+export interface TimeSeriesRuntime {
+    setSeriesVisible(seriesId: string, visible: boolean): TimeSeriesScene;
+    replaceData(data: readonly TimeSeriesPoint[]): Promise<TimeSeriesScene>;
+    exportScene(): TimeSeriesScene;
+    subscribe(listener: TimeSeriesRuntimeListener): () => void;
+    destroy(): void;
+}
+//# sourceMappingURL=time-series-types.d.ts.map

package/dist/time-series-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-series-types.d.ts","sourceRoot":"","sources":["../src/time-series-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,8BAA8B;IAC9C,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;IACzB,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,MAAM,6BAA6B,GACtC;IAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;CAAE,GACjE;IACD,QAAQ,CAAC,IAAI,EAAE,2BAA2B,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;CAChC,GACC;IACD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;CAChC,GACC;IACD,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACnC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACzD,GACC;IACD,QAAQ,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACnC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC;CACtB,GACC;IACD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,SAAS,oBAAoB,EAAE,CAAC;CACjD,CAAC;AAEH,MAAM,MAAM,sBAAsB,GACjC,6BAA6B,GAAG,8BAA8B,CAAC;AAEhE,MAAM,MAAM,yBAAyB,GAAG,CACvC,KAAK,EAAE,sBAAsB,KACzB,IAAI,CAAC;AAEV,MAAM,WAAW,wBAAwB;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,yBAAyB,CAAC;CAC7C;AAED,MAAM,WAAW,iBAAiB;IACjC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;IACtE,WAAW,CAAC,IAAI,EAAE,SAAS,eAAe,EAAE,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;IACxE,WAAW,IAAI,eAAe,CAAC;IAC/B,SAAS,CAAC,QAAQ,EAAE,yBAAyB,GAAG,MAAM,IAAI,CAAC;IAC3D,OAAO,IAAI,IAAI,CAAC;CAChB"}

package/dist/time-series-types.js

@@ -0,0 +1 @@
+export {};

package/dist/toolbar/standard-toolbar-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard-toolbar-styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/standard-toolbar-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,QA4PnC,CAAC"}
+{"version":3,"file":"standard-toolbar-styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/standard-toolbar-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,QA8QnC,CAAC"}

package/dist/toolbar/standard-toolbar-styles.js

@@ -250,4 +250,22 @@ export const STANDARD_TOOLBAR_STYLES = String.raw `
 		transition: none;
 	}
 }
+
+.baron-kline-context-menu {
+	position: fixed;
+	z-index: 1000;
+	display: none;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 180px;
+	padding: 10px;
+	border: 1px solid rgba(203, 210, 224, 1);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.98);
+	box-shadow: 0 12px 32px rgba(23, 32, 51, 0.16);
+}
+
+.baron-kline-context-menu--visible {
+	display: flex;
+}
 `;

package/dist/toolbar/standard-toolbar.d.ts

@@ -1,5 +1,7 @@
-import type { KLineSceneRuntime } from '../runtime.js';
+import type { DrawingRuntimeCapability, RuntimeAuxiliaryCapability } from '../drawing/capabilities.js';
 import type { StandardToolbar, StandardToolbarOptions } from '../types.js';
+type StandardDrawingRuntime = DrawingRuntimeCapability & RuntimeAuxiliaryCapability;
 /** 创建不含撤销/重做的标准离线编辑工具栏。 */
-export declare function createStandardToolbar(container: HTMLElement, runtime: KLineSceneRuntime, options?: StandardToolbarOptions): StandardToolbar;
+export declare function createStandardToolbar(container: HTMLElement, runtime: StandardDrawingRuntime, options?: StandardToolbarOptions): StandardToolbar;
+export {};
 //# sourceMappingURL=standard-toolbar.d.ts.map

package/dist/toolbar/standard-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/standard-toolbar.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,EACX,eAAe,EACf,sBAAsB,EAEtB,MAAM,aAAa,CAAC;AA8NrB,2BAA2B;AAC3B,wBAAgB,qBAAqB,CACpC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,GAAE,sBAA2B,GAClC,eAAe,CA4NjB"}
+{"version":3,"file":"standard-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/standard-toolbar.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACX,wBAAwB,EACxB,0BAA0B,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EACX,eAAe,EACf,sBAAsB,EAEtB,MAAM,aAAa,CAAC;AAyCrB,KAAK,sBAAsB,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA0LpF,2BAA2B;AAC3B,wBAAgB,qBAAqB,CACpC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,sBAAsB,EAC/B,OAAO,GAAE,sBAA2B,GAClC,eAAe,CA2YjB"}