@363045841yyt/klinechart-core 0.7.5-alpha.2 → 0.7.6

package/dist/engine/chart.js

@@ -1,4 +1,4 @@
-import { createSignal } from '../reactivity/signal';
+import { createSignal, computed } from '../reactivity/signal';
 import { getVisibleRange } from './viewport/viewport';
 import { Pane, UpdateLevel } from './layout/pane';
 import { InteractionController } from './controller/interaction';
@@ -6,7 +6,6 @@ import { PaneRenderer } from './paneRenderer';
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface';
 import { MarkerManager } from './marker/registry';
 import { getPhysicalKLineConfig, calcKWidthPx } from './utils/klineConfig';
-import { computeContentWidth } from './chart-store';
 import { computeZoom } from './utils/zoom';
 import { IndicatorScheduler } from './indicators/scheduler';
 import { getRegisteredIndicatorDefinitions } from './indicators/indicatorDefinitionRegistry';
@@ -74,16 +73,10 @@ export class Chart {
     settings = {};
     /** pane ratio 状态（按 paneId 维护，sum=1 仅对可见 pane） */
     _internalPaneRatios = new Map();
-    /** 视口变化回调（供外部同步 DPR/尺寸） */
-    onViewportChange;
     /** 共享 X 轴上下文缓存 */
     xAxisCtx = null;
     /** Chart 级共享 WebGL canvas/context */
     sharedWebGLSurface;
-    /** pane 布局回流回调（Chart -> UI 单向） */
-    onPaneLayoutChange;
-    /** 数据变化回调（供外部同步 dataLength） */
-    onDataChange;
     /** 当前缩放级别（1 ~ zoomLevelCount） */
     currentZoomLevel = 1;
     /** 缩放级别总数 */
@@ -97,11 +90,11 @@ export class Chart {
     /** Overlay 帧复用的最近主渲染结果 */
     cachedDrawFrame = null;
     /** 副图管理器 */
-    subPaneManager;
-    /** 当前激活的主图指标列表（如 ['boll', 'ma']） */
-    activeMainIndicators = new Set();
-    /** 主图指标参数配置 */
-    mainIndicatorParams = {
+    subPaneManager = new SubPaneManager();
+    /** 主图指标激活状态与参数（存在即激活，默认参数在 enable 时初始化） */
+    _mainIndicatorsSignal = createSignal(new Map());
+    /** 主图指标默认参数 */
+    static DEFAULT_MAIN_PARAMS = {
         MA: { ma5: true, ma10: true, ma20: true, ma30: true, ma60: true },
         BOLL: { period: 20, multiplier: 2, showUpper: true, showMiddle: true, showLower: true, showBand: true },
         EXPMA: { fastPeriod: 12, slowPeriod: 50 },
@@ -133,26 +126,29 @@ export class Chart {
             console.warn(`[Chart] 未知的主图指标: ${indicatorId}`);
             return false;
         }
-        if (this.activeMainIndicators.has(id)) {
+        const map = this._mainIndicatorsSignal.peek();
+        const existing = map.get(id);
+        if (existing) {
             // 已启用，更新参数
             if (params) {
-                this.mainIndicatorParams[id] = { ...this.mainIndicatorParams[id], ...params };
+                const next = new Map(map);
+                next.set(id, { params: { ...existing.params, ...params } });
+                this._mainIndicatorsSignal.set(next);
                 this.updateIndicatorSchedulerConfig(id);
-                this.syncIndicatorsSignal();
             }
             return true;
         }
-        this.activeMainIndicators.add(id);
         // 合并默认参数和传入参数
-        if (params) {
-            this.mainIndicatorParams[id] = { ...this.mainIndicatorParams[id], ...params };
-        }
+        const defaults = Chart.DEFAULT_MAIN_PARAMS[id] ?? {};
+        const merged = params ? { ...defaults, ...params } : defaults;
+        const next = new Map(map);
+        next.set(id, { params: merged });
+        this._mainIndicatorsSignal.set(next);
         // 启用对应的渲染器
         this.enableMainIndicatorRenderer(id);
         // 更新调度器配置
         this.updateIndicatorSchedulerConfig(id);
         this.scheduleDraw();
-        this.syncIndicatorsSignal();
         return true;
     }
     /**
@@ -162,15 +158,17 @@ export class Chart {
      */
     disableMainIndicator(indicatorId) {
         const id = indicatorId.toUpperCase();
-        if (!this.activeMainIndicators.has(id))
+        const map = this._mainIndicatorsSignal.peek();
+        if (!map.has(id))
             return false;
-        this.activeMainIndicators.delete(id);
+        const next = new Map(map);
+        next.delete(id);
+        this._mainIndicatorsSignal.set(next);
         // 禁用对应的渲染器
         this.disableMainIndicatorRenderer(id);
         // 更新调度器配置
         this.updateIndicatorSchedulerConfig(id);
         this.scheduleDraw();
-        this.syncIndicatorsSignal();
         return true;
     }
     /**
@@ -191,14 +189,14 @@ export class Chart {
      * @returns 激活的指标ID数组
      */
     getActiveMainIndicators() {
-        return Array.from(this.activeMainIndicators);
+        return [...this._mainIndicatorsSignal.peek().keys()];
     }
     /**
      * 检查主图指标是否激活
      * @param indicatorId 指标ID
      */
     isMainIndicatorActive(indicatorId) {
-        return this.activeMainIndicators.has(indicatorId.toUpperCase());
+        return this._mainIndicatorsSignal.peek().has(indicatorId.toUpperCase());
     }
     /**
      * 更新主图指标参数
@@ -207,38 +205,41 @@ export class Chart {
      */
     updateMainIndicatorParams(indicatorId, params) {
         const id = indicatorId.toUpperCase();
-        if (!this.mainIndicatorParams[id]) {
-            this.mainIndicatorParams[id] = {};
-        }
-        this.mainIndicatorParams[id] = { ...this.mainIndicatorParams[id], ...params };
+        const map = this._mainIndicatorsSignal.peek();
+        const entry = map.get(id);
+        if (!entry)
+            return;
+        const merged = { ...entry.params, ...params };
+        const next = new Map(map);
+        next.set(id, { params: merged });
+        this._mainIndicatorsSignal.set(next);
         // 同步更新渲染器配置
         const rendererName = id.toLowerCase();
         const renderer = this.getRenderer(rendererName);
         if (renderer && renderer.setConfig) {
-            renderer.setConfig(this.mainIndicatorParams[id]);
+            renderer.setConfig(merged);
         }
         // 更新调度器
         this.updateIndicatorSchedulerConfig(id);
         this.scheduleDraw();
-        this.syncIndicatorsSignal();
     }
     /**
      * 获取主图指标参数
      * @param indicatorId 指标ID
      */
     getMainIndicatorParams(indicatorId) {
-        return this.mainIndicatorParams[indicatorId.toUpperCase()] ?? null;
+        return this._mainIndicatorsSignal.peek().get(indicatorId.toUpperCase())?.params ?? null;
     }
     /**
      * 清除所有主图指标
      */
     clearMainIndicators() {
-        for (const id of this.activeMainIndicators) {
+        const map = this._mainIndicatorsSignal.peek();
+        for (const id of map.keys()) {
             this.disableMainIndicatorRenderer(id);
         }
-        this.activeMainIndicators.clear();
+        this._mainIndicatorsSignal.set(new Map());
         this.scheduleDraw();
-        this.syncIndicatorsSignal();
     }
     /**
      * 启用主图指标渲染器（内部方法）
@@ -395,8 +396,9 @@ export class Chart {
      * 更新调度器配置（内部方法）
      */
     updateIndicatorSchedulerConfig(indicatorId) {
-        const isActive = this.activeMainIndicators.has(indicatorId);
-        const params = this.mainIndicatorParams[indicatorId] || {};
+        const entry = this._mainIndicatorsSignal.peek().get(indicatorId);
+        const isActive = entry !== undefined;
+        const params = entry?.params ?? {};
         switch (indicatorId) {
             case 'MA':
                 this.indicatorScheduler.updateMAConfig({
@@ -475,7 +477,7 @@ export class Chart {
     setActiveMainIndicators(indicators) {
         // 计算需要启用和禁用的指标
         const newSet = new Set(indicators.map(i => i.toUpperCase()));
-        const currentSet = new Set(this.activeMainIndicators);
+        const currentSet = new Set(this._mainIndicatorsSignal.peek().keys());
         // 禁用不再激活的
         for (const id of currentSet) {
             if (!newSet.has(id)) {
@@ -523,11 +525,20 @@ export class Chart {
             this.indicatorScheduler.registerIndicator(definition);
         }
         this.indicatorScheduler.setInvalidateCallback(() => this.scheduleDraw());
-        // 初始化副图管理器
-        this.subPaneManager = new SubPaneManager();
         // 注册副图活跃列表提供者，调度器据此只计算启用的副图
         this.indicatorScheduler.setActiveSubPaneProvider(() => this.subPaneManager.getPaneIds());
         this.initPanes();
+        // dev: 主副图状态变更日志
+        if (import.meta.env?.MODE !== 'production') {
+            this._indicatorsComputed.subscribe(() => {
+                const instances = this._indicatorsComputed.peek();
+                console.log('[Chart] indicators signal changed:', instances);
+            });
+            this._subPanesComputed.subscribe(() => {
+                const subPanes = this._subPanesComputed.peek();
+                console.log('[Chart] subPanes signal changed:', subPanes);
+            });
+        }
         // 注册绘图主插件（负责绘制 shape，layer: 'main'）
         this.useRenderer(createDrawingRendererPlugin({ store: this.drawingStore }));
         // 注册绘图标签插件（负责推送选中绘图的轴标签，layer: 'overlay'）
@@ -707,7 +718,7 @@ export class Chart {
         // 3. 更新交互控制器坐标映射
         this.interaction.setKLinePositions(kLinePositions, range, kWidthPx);
         // 4. 通知调度器当前活跃主图指标 + 获取价格范围
-        this.indicatorScheduler.setActiveMainIndicators(Array.from(this.activeMainIndicators));
+        this.indicatorScheduler.setActiveMainIndicators([...this._mainIndicatorsSignal.peek().keys()]);
         const mainIndicatorRange = useCachedFrame ? null : this.indicatorScheduler.getMainIndicatorPriceRange();
         const hasCrosshair = this.interaction.getCrosshairIndex() !== null;
         // 5. 遍历所有 Pane 渲染主层 / overlay / Y 轴
@@ -936,18 +947,6 @@ export class Chart {
     getZoomLevelCount() {
         return this.zoomLevelCount;
     }
-    /** 注册视口变化回调 */
-    setOnViewportChange(cb) {
-        this.onViewportChange = cb;
-    }
-    /** 注册 pane 布局回流回调 */
-    setOnPaneLayoutChange(cb) {
-        this.onPaneLayoutChange = cb;
-    }
-    /** 注册数据变化回调 */
-    setOnDataChange(cb) {
-        this.onDataChange = cb;
-    }
     /** 获取所有 PaneRenderer */
     getPaneRenderers() {
         return this.paneRenderers;
@@ -1101,8 +1100,7 @@ export class Chart {
             ratios[id] = ratio;
         });
         this._paneRatiosSignal.set(ratios);
-        this.syncSubPanesSignal();
-        this.onPaneLayoutChange?.(this.getPaneLayoutSpecs());
+        this._paneLayoutSignal.set(this.getPaneLayoutSpecs());
     }
     applyPaneLayoutSpecs(panes) {
         this.opt.panes = panes.map((spec) => ({ ...spec }));
@@ -1257,8 +1255,6 @@ export class Chart {
         }
         this.upsertPane({ id: paneId, ratio: this._internalPaneRatios.get(paneId) ?? 1, visible: true, role: 'indicator' });
         const success = this.subPaneManager.create(this, paneId, indicatorId, params ?? this.getDefaultSubPaneParams(indicatorId));
-        this.syncIndicatorsSignal();
-        this.syncSubPanesSignal();
         return success;
     }
     /**
@@ -1267,9 +1263,6 @@ export class Chart {
      */
     removeSubPane(paneId) {
         this.subPaneManager.remove(this, paneId);
-        this._internalPaneRatios.delete(paneId);
-        this.syncIndicatorsSignal();
-        this.syncSubPanesSignal();
     }
     /**
      * 替换副图的指标类型
@@ -1279,8 +1272,6 @@ export class Chart {
      */
     replaceSubPaneIndicator(paneId, newIndicatorId, params) {
         this.subPaneManager.replaceIndicator(this, paneId, newIndicatorId, params ?? this.getDefaultSubPaneParams(newIndicatorId));
-        this.syncIndicatorsSignal();
-        this.syncSubPanesSignal();
     }
     /**
      * 更新副图指标参数
@@ -1289,7 +1280,6 @@ export class Chart {
      */
     updateSubPaneParams(paneId, params) {
         this.subPaneManager.updateParams(this, paneId, params);
-        this.syncIndicatorsSignal();
     }
     /**
      * 清除所有副图面板
@@ -1307,8 +1297,6 @@ export class Chart {
         }
         // 更新布局，移除所有副图 pane
         this.applyPaneLayoutSpecs(this.opt.panes.filter((spec) => !subPaneIds.includes(spec.id)));
-        this.syncIndicatorsSignal();
-        this.syncSubPanesSignal();
     }
     /**
      * 获取当前所有副图指标类型
@@ -1424,7 +1412,6 @@ export class Chart {
     updateData(data) {
         this._internalData = data ?? [];
         this._dataSignal.set([...this._internalData]);
-        this.onDataChange?.(this._internalData);
         // 重算 DOM scrollLeft 状态, 防止左右滚动超出数据长度范围
         const container = this.dom.container;
         if (container) {
@@ -1482,13 +1469,17 @@ export class Chart {
     }
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth() {
-        return computeContentWidth({
-            dataLength: this._internalData.length,
-            kWidth: this.opt.kWidth,
-            kGap: this.opt.kGap,
-            viewWidth: this._internalViewport?.plotWidth ?? 0,
-            viewportDpr: this.getEffectiveDpr(),
-        });
+        const dataLength = this._internalData.length;
+        if (dataLength === 0)
+            return 0;
+        const kWidth = this.opt.kWidth;
+        const kGap = this.opt.kGap;
+        const viewWidth = this._internalViewport?.plotWidth ?? 0;
+        const dpr = this.getEffectiveDpr();
+        const TRAILING_DRAWING_SLOTS = 24;
+        const { startXPx, unitPx } = getPhysicalKLineConfig(kWidth, kGap, dpr);
+        const dataPlotWidth = (startXPx + (dataLength + TRAILING_DRAWING_SLOTS) * unitPx) / dpr;
+        return Math.max(dataPlotWidth, viewWidth);
     }
     /** 容器尺寸变化时调用 */
     resize() {
@@ -1559,8 +1550,6 @@ export class Chart {
         this.sharedWebGLSurface.destroy();
         // 清理渲染器插件管理器（会调用所有 onUninstall）
         this.rendererPluginManager.clear();
-        this.onViewportChange = undefined;
-        this.onPaneLayoutChange = undefined;
         this.indicatorScheduler.destroy();
         await this.pluginHost.destroy();
     }
@@ -1829,7 +1818,18 @@ export class Chart {
             || prevViewport.dpr !== vp.dpr;
         this._internalViewport = vp;
         if (viewportChanged) {
-            this.onViewportChange?.(vp);
+            const current = this._viewportSignal.peek();
+            this._viewportSignal.set({
+                zoomLevel: current.zoomLevel,
+                plotWidth: vp.plotWidth,
+                plotHeight: vp.plotHeight,
+                dpr: vp.dpr > 0 ? vp.dpr : current.dpr,
+                visibleFrom: current.visibleFrom,
+                visibleTo: current.visibleTo,
+                desiredScrollLeft: current.desiredScrollLeft,
+                kWidth: current.kWidth,
+                kGap: current.kGap,
+            });
         }
         return vp;
     }
@@ -1848,11 +1848,10 @@ export class Chart {
     });
     _dataSignal = createSignal([]);
     _themeSignal = createSignal('light');
-    _indicatorsSignal = createSignal([]);
-    _subPanesSignal = createSignal([]);
     _drawingToolSignal = createSignal(null);
     _drawingsSignal = createSignal([]);
     _paneRatiosSignal = createSignal({});
+    _paneLayoutSignal = createSignal([]);
     _interactionSignal = createSignal({
         crosshairPos: null,
         crosshairIndex: null,
@@ -1869,6 +1868,35 @@ export class Chart {
         hoveredPaneBoundaryId: null,
         isHoveringRightAxis: false,
     });
+    _indicatorsComputed = computed(() => {
+        const mainIndicators = [...this._mainIndicatorsSignal().entries()].map(([id, entry]) => ({
+            id,
+            definitionId: id,
+            label: id,
+            name: id,
+            role: 'main',
+            params: { ...entry.params },
+        }));
+        const subIndicators = this.subPaneManager.entriesSignal().map(entry => ({
+            id: entry.paneId,
+            definitionId: entry.indicatorId,
+            label: entry.indicatorId,
+            name: entry.indicatorId,
+            role: 'sub',
+            paneId: entry.paneId,
+            params: { ...entry.params },
+        }));
+        return [...mainIndicators, ...subIndicators];
+    });
+    _subPanesComputed = computed(() => {
+        const ratios = this._paneRatiosSignal();
+        return this.subPaneManager.entriesSignal().map(entry => ({
+            paneId: entry.paneId,
+            indicatorId: entry.indicatorId,
+            params: { ...entry.params },
+            ratio: ratios[entry.paneId] ?? 1,
+        }));
+    });
     /** 视口状态信号 */
     get viewport() {
         return this._viewportSignal;
@@ -1881,13 +1909,13 @@ export class Chart {
     get theme() {
         return this._themeSignal;
     }
-    /** 指标实例列表信号 */
+    /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
     get indicators() {
-        return this._indicatorsSignal;
+        return this._indicatorsComputed;
     }
-    /** 子图信息信号 */
+    /** 子图信息信号（派生信号，自动随副图条目/比例更新） */
     get subPanes() {
-        return this._subPanesSignal;
+        return this._subPanesComputed;
     }
     /** 当前绘图工具信号 */
     get drawingTool() {
@@ -1901,6 +1929,9 @@ export class Chart {
     get paneRatios() {
         return this._paneRatiosSignal;
     }
+    get paneLayout() {
+        return this._paneLayoutSignal;
+    }
     /** 交互状态信号 */
     get interactionState() {
         return this._interactionSignal;
@@ -2120,8 +2151,6 @@ export class Chart {
             const success = this.enableMainIndicator(definitionId, params);
             if (!success)
                 return null;
-            // 更新 indicators signal
-            this.syncIndicatorsSignal();
             return definitionId.toUpperCase();
         }
         else {
@@ -2130,9 +2159,6 @@ export class Chart {
             const success = this.createSubPane(paneId, definitionId, params);
             if (!success)
                 return null;
-            // 更新 signals
-            this.syncIndicatorsSignal();
-            this.syncSubPanesSignal();
             return paneId;
         }
     }
@@ -2143,23 +2169,16 @@ export class Chart {
      */
     removeIndicator(instanceId) {
         const id = instanceId.toUpperCase();
-        // 先尝试作为主图指标移除（直接检查内部状态，不依赖 signal）
-        if (this.activeMainIndicators.has(id)) {
-            const success = this.disableMainIndicator(instanceId);
-            if (success) {
-                this.syncIndicatorsSignal();
-            }
-            return success;
+        // 先尝试作为主图指标移除
+        if (this._mainIndicatorsSignal.peek().has(id)) {
+            return this.disableMainIndicator(instanceId);
         }
-        // 再尝试作为副图指标移除（检查 sub pane 是否存在）
+        // 再尝试作为副图指标移除
         const subPaneEntry = this.getSubPaneEntry(instanceId);
         if (subPaneEntry) {
             this.removeSubPane(instanceId);
-            this.syncIndicatorsSignal();
-            this.syncSubPanesSignal();
             return true;
         }
-        // 都没找到，返回 false
         return false;
     }
     /**
@@ -2170,20 +2189,17 @@ export class Chart {
      */
     updateIndicatorParams(instanceId, params) {
         const id = instanceId.toUpperCase();
-        // 先尝试作为主图指标更新（直接检查内部状态）
-        if (this.activeMainIndicators.has(id)) {
+        // 先尝试作为主图指标更新
+        if (this._mainIndicatorsSignal.peek().has(id)) {
             this.updateMainIndicatorParams(instanceId, params);
-            this.syncIndicatorsSignal();
             return true;
         }
         // 再尝试作为副图指标更新
         const subPaneEntry = this.getSubPaneEntry(instanceId);
         if (subPaneEntry) {
             this.updateSubPaneParams(instanceId, params);
-            this.syncIndicatorsSignal();
             return true;
         }
-        // 都没找到
         return false;
     }
     /**
@@ -2197,42 +2213,6 @@ export class Chart {
         console.warn('[Chart] reorderIndicators not fully implemented yet');
         return false;
     }
-    /**
-     * 同步 indicators signal
-     */
-    syncIndicatorsSignal() {
-        const mainIndicators = this.getActiveMainIndicators().map(id => ({
-            id,
-            definitionId: id,
-            label: id,
-            name: id,
-            role: 'main',
-            params: this.getMainIndicatorParams(id) ?? {},
-        }));
-        const subIndicators = this.getSubPaneEntries().map(entry => ({
-            id: entry.paneId,
-            definitionId: entry.indicatorId,
-            label: entry.indicatorId,
-            name: entry.indicatorId,
-            role: 'sub',
-            paneId: entry.paneId,
-            params: entry.params,
-        }));
-        this._indicatorsSignal.set([...mainIndicators, ...subIndicators]);
-    }
-    /**
-     * 同步 sub panes signal
-     */
-    syncSubPanesSignal() {
-        const entries = this.getSubPaneEntries();
-        const subPanes = entries.map(entry => ({
-            paneId: entry.paneId,
-            indicatorId: entry.indicatorId,
-            params: entry.params,
-            ratio: this._internalPaneRatios.get(entry.paneId) ?? 1,
-        }));
-        this._subPanesSignal.set(subPanes);
-    }
     // ---------- Sub Panes ----------
     /**
      * 调整子图大小（高层 API）