@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/dist/engine/chart.js

@@ -1,26 +1,30 @@
-import { createSignal } from '../reactivity/signal';
+import { createAlertController } from '../features/alerts/index';
+import { createVolumeLookbacks, pushToVolumeLookbacks, } from '../features/alerts/rollingVolume';
+import { createPluginHost, RendererPluginManager, wrapPaneInfo, } from '../foundation/plugin/index';
+import { computed, } from '../foundation/reactivity/signal';
 import { InteractionController } from './controller/interaction';
+// ===== 普通 imports，按路径字母排序 =====
 import { ChartDataManager } from './data/chartDataManager';
 import { ChartIndicatorManager } from './indicators/chartIndicatorManager';
 import { resolveStateKey } from './indicators/indicatorMetadata';
 import { ChartPaneLayout } from './layout/chartPaneLayout';
 import { UpdateLevel } from './layout/pane';
-import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface';
-import { getPhysicalKLineConfig } from './utils/klineConfig';
-import { ChartZoomController } from './utils/chartZoomController';
-import { ChartViewportManager } from './viewport/chartViewportManager';
-import { ChartRenderer } from './render/chartRenderer';
 import { KLineMode } from './modes/kLineMode';
 import { TimeShareMode } from './modes/timeShareMode';
-import { createPluginHost, RendererPluginManager, wrapPaneInfo, } from '../plugin';
-import { createAlertController } from '../alerts';
-import { createVolumeLookbacks, pushToVolumeLookbacks, } from '../alerts/rollingVolume';
-// 重新导出以保持向后兼容
+import { ChartRenderer } from './render/chartRenderer';
+import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface';
+import { ChartStateKernel } from './state/chartStateKernel';
+import { ChartViewportManager } from './viewport/chartViewportManager';
+import { getVisibleRange } from './viewport/viewport';
+import { ChartZoomController } from './utils/chartZoomController';
+import { getPhysicalKLineConfig } from './utils/klineConfig';
+// ===== 重新导出 =====
 export { getPhysicalKLineConfig };
 export class Chart {
     dom;
-    opt;
     dataManager;
+    /** StateKernel — single source of truth for all chart state */
+    kernel;
     viewportManager;
     layoutManager;
     get paneRenderers() {
@@ -39,16 +43,16 @@ export class Chart {
     indicatorManager;
     /** 渲染器 */
     renderer;
+    runtimeProjectionDepth = 0;
+    runtimeProjectionDrawPending = false;
+    /** 绘图交互会话（锚点/预览/拖拽）；工具 id 在 kernel */
+    drawingSession = null;
     /** 当前活跃的模式处理器 */
     _activeMode;
     _kLineMode = new KLineMode();
     _timeShareMode = new TimeShareMode();
-    /** 模式切换时保存的渲染状态（退出分时时恢复） */
-    _modeSavedKWidth = 0;
-    _modeSavedKGap = 0;
-    _modeSavedZoomLevel = 0;
-    /** 分时模式激活前的 pane Y 轴刻度类型（退出分时时恢复） */
-    _savedScaleTypes;
+    /** 进入分时模式时保存的快照，退出时恢复（包含 zoom/scale/indicators） */
+    _savedTimeShareState = null;
     /** 上次预警评估的最新 K 线时间戳（用于去重） */
     _lastAlertTimestamp = null;
     /** 预警控制器 */
@@ -99,57 +103,74 @@ export class Chart {
     constructor(dom, opt) {
         this.dom = dom;
         const { kWidth: _kWidth, kGap: _kGap, ...restOpt } = opt;
-        // Chart 不持有业务 SSOT，kWidth/kGap/zoomLevel 由外部通过 applyRenderState() 传入
-        this.opt = { ...restOpt, kWidth: _kWidth ?? 0, kGap: _kGap ?? 0 };
         this._activeMode = this._kLineMode;
-        this.interaction = new InteractionController(this);
-        this.interaction.setOnInteractionChange((snapshot) => {
-            this._interactionSignal.set(snapshot);
-        });
         this.pluginHost = createPluginHost();
         this.rendererPluginManager = new RendererPluginManager();
         this.sharedWebGLSurface = new SharedWebGLSurface();
         // 注入依赖
         this.rendererPluginManager.setPluginHost(this.pluginHost);
         this.rendererPluginManager.setInvalidateCallback(() => this.scheduleDraw());
+        const initialZoomLevel = opt.initialZoomLevel ?? 1;
+        const zoomLevelCount = Math.max(2, Math.round(opt.zoomLevels ?? 20));
+        // ── StateKernel: single composition root (owns options, zoom, data, viewport, pane, theme, drawing, interaction) ──
+        this.kernel = new ChartStateKernel({
+            initialOptions: {
+                ...restOpt,
+                zoomLevelCount,
+            },
+            initialZoomLevel,
+            scheduleDraw: (level) => this.scheduleDraw(level),
+        });
+        // Inject DOM deps into kernel's viewportState (needed before init)
+        this.kernel.setViewportDomDeps({
+            getDom: () => this.dom,
+            resizeSharedWebGLSurface: (plotWidth, plotHeight, dpr) => this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr),
+        });
+        // ── ViewportManager (DOM lifecycle: ResizeObserver + scroll events) ──
         this.viewportManager = new ChartViewportManager({
             getDom: () => this.dom,
-            getBottomAxisHeight: () => this.opt.bottomAxisHeight,
-            getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
-            getZoomLevel: () => this.zoomController.currentZoomLevel,
-            getLastVisibleRange: () => this.dataManager.lastVisibleRange,
-            getKWidth: () => this.opt.kWidth,
-            getKGap: () => this.opt.kGap,
-            scheduleDraw: (level) => this.scheduleDraw(level),
             onResizeCompleted: () => {
                 this.resize();
             },
-            resizeSharedWebGLSurface: (plotWidth, plotHeight, dpr) => this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr),
-        });
-        this.layoutManager = new ChartPaneLayout(this.opt.panes, {
+        }, this.kernel);
+        // ── InteractionController ──
+        this.interaction = new InteractionController(this, this.kernel.interaction);
+        // ── Legacy managers ──
+        this.layoutManager = new ChartPaneLayout(restOpt.panes, {
             getDom: () => this.dom,
-            getOption: () => ({
-                rightAxisWidth: this.opt.rightAxisWidth,
-                leftAxisWidth: this.opt.leftAxisWidth,
-                yPaddingPx: this.opt.yPaddingPx,
-                priceLabelWidth: this.opt.priceLabelWidth,
-                paneGap: this.opt.paneGap,
-                defaultPaneMinHeightPx: this.opt.defaultPaneMinHeightPx,
-            }),
+            getOption: () => {
+                const o = this.kernel.options.readonly.options.peek();
+                return {
+                    rightAxisWidth: o.rightAxisWidth,
+                    leftAxisWidth: o.leftAxisWidth,
+                    yPaddingPx: o.yPaddingPx,
+                    priceLabelWidth: o.priceLabelWidth,
+                    paneGap: o.paneGap,
+                    defaultPaneMinHeightPx: o.defaultPaneMinHeightPx,
+                };
+            },
             getViewport: () => this.viewportManager.getViewport(),
             getSharedWebGLSurface: () => this.sharedWebGLSurface,
             setKnownPaneIds: (ids) => this.rendererPluginManager.setKnownPaneIds(ids),
             notifyPaneResize: (paneId, pane) => this.rendererPluginManager.notifyResize(paneId, wrapPaneInfo(pane)),
             scheduleDraw: (level) => this.scheduleDraw(level),
-            onLayoutChange: (ratios, specs) => {
-                this._paneRatiosSignal.set(ratios);
-                this._paneLayoutSignal.set(specs);
-                this.opt = { ...this.opt, panes: specs };
+            getPaneRatios: () => this.kernel.pane.readonly.paneRatios.peek(),
+            getPaneScaleTypes: () => this.kernel.pane.readonly.paneScaleTypes.peek(),
+            commitLayout: (ratios, specs) => {
+                this.kernel.pane.actions.commitLayout(ratios, specs);
+                this.ensurePaneScaleTypesFromSettings();
             },
         });
         this.alertController = createAlertController();
         this.dataManager = new ChartDataManager({
-            getOption: () => this.opt,
+            getOption: () => {
+                const o = this.kernel.options.readonly.options.peek();
+                return {
+                    ...o,
+                    kWidth: this.kernel.zoom.readonly.kWidth(),
+                    kGap: this.kernel.viewport.readonly.kGap(),
+                };
+            },
             getEffectiveDpr: () => this.viewportManager.getEffectiveDpr(),
             getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
             getCachedScrollLeft: () => this.viewportManager.getCachedScrollLeft(),
@@ -159,12 +180,20 @@ export class Chart {
             getDom: () => this.dom,
             getObservedSize: () => this.viewportManager.getObservedSize(),
             getViewport: () => this.viewportManager.getViewport(),
+            getVisibleRange: () => {
+                const vp = this.viewportManager.computeViewport();
+                if (!vp)
+                    return null;
+                const dataLen = this.dataManager?.getData().length ?? 0;
+                if (dataLen === 0)
+                    return null;
+                return getVisibleRange(vp.scrollLeft, vp.plotWidth, this.kernel.zoom.readonly.kWidth(), this.kernel.viewport.readonly.kGap(), dataLen, vp.dpr);
+            },
+            getLeftLoadBufferWidth: () => this.kernel.viewport.readonly.leftLoadBufferWidth.peek(),
+            getContentWidth: () => this.kernel.viewport.readonly.contentWidth.peek(),
             scheduleDraw: (level) => this.scheduleDraw(level),
             resetInteraction: () => this.interaction.reset(),
             getIndicatorScheduler: () => this.indicatorManager.indicatorSchedulerAccessor,
-            setPendingIndicatorDataUpdate: (v) => {
-                this.dataManager.pendingIndicatorDataUpdate = v;
-            },
             isPointerDown: () => this.interaction.isPointerDown(),
             onTimeShareDataReady: (dataLength) => {
                 const vp = this.viewportManager.computeViewport();
@@ -173,95 +202,121 @@ export class Chart {
                 const result = this._activeMode.computeKWidth(dataLength, vp.plotWidth, vp.dpr);
                 if (result) {
                     this.applyRenderState(result.kWidth, result.kGap);
-                    const container = this.dom.container;
-                    if (container) {
-                        const leftBuffer = this.dataManager.getLeftLoadBufferWidth();
-                        this.viewportManager.setScrollLeft(leftBuffer);
-                        this.viewportManager.applyPendingScrollLeft(container);
-                    }
+                    const leftBuffer = this.getLeftLoadBufferWidth();
+                    this.viewportManager.setScrollLeft(leftBuffer);
                 }
             },
-            onDataProcessed: (data, range) => this.evaluateAlerts(data, range), // Alert 管线绑定
-        });
+            onDataProcessed: (data, range) => this.evaluateAlerts(data, range),
+            setSymbols: (symbols) => this.kernel.actions.setSymbols(symbols),
+            setComparisonLoading: (loading) => this.kernel.comparison.actions.setLoading(loading),
+            comparisonSpecs$: this.kernel.comparison.readonly.specs,
+            comparisonColors$: this.kernel.comparison.readonly.colors,
+            comparisonLoading$: this.kernel.comparison.readonly.loading,
+        }, this.kernel.data, this.kernel.dataManager);
         this.zoomController = new ChartZoomController({
             getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
             getCurrentDpr: () => this.viewportManager.getEffectiveDpr(),
-            getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
-            getContentWidth: () => this.dataManager.getContentWidth(),
             getClientWidth: () => this.viewportManager.getViewport()?.viewWidth ?? this.dom.container?.clientWidth ?? 0,
+            getDataLength: () => this.dataManager.getData().length,
+            getPlotWidth: () => this.getLeftLoadBufferWidth(),
             setScrollLeft: (v) => {
                 this.viewportManager.setScrollLeft(v);
             },
-            onZoomCommitted: (result) => {
-                this.opt = { ...this.opt, kWidth: result.kWidth, kGap: result.kGap };
-                this.updateViewportSignal();
+            onChange: () => {
                 this.scheduleDraw();
             },
-            getKWidth: () => this.opt.kWidth,
-            getKGap: () => this.opt.kGap,
-            getMinKWidth: () => this.opt.minKWidth,
-            getMaxKWidth: () => this.opt.maxKWidth,
-            zoomLevelCount: Math.max(2, Math.round(this.opt.zoomLevels ?? 20)),
-            initialZoomLevel: this.opt.initialZoomLevel ?? 1,
-        });
-        // 注意：初始 kWidth/kGap 应由外部通过 applyRenderState() 传入
-        // 初始化指标管理器
+            getMinKWidth: () => this.kernel.options.readonly.options.peek().minKWidth,
+            getMaxKWidth: () => this.kernel.options.readonly.options.peek().maxKWidth,
+            getPeriod: () => this.kernel.dataManager.readonly.currentPeriod.peek(),
+            zoomLevelCount,
+        }, this.kernel.zoom);
         this.indicatorManager = new ChartIndicatorManager({
-            getOption: () => this.opt,
+            getOption: () => {
+                const o = this.kernel.options.readonly.options.peek();
+                return {
+                    ...o,
+                    kWidth: this.kernel.zoom.readonly.kWidth(),
+                    kGap: this.kernel.viewport.readonly.kGap(),
+                };
+            },
             getPluginHost: () => this.pluginHost,
             getRenderer: (name) => this.getRenderer(name),
             useRenderer: (plugin, config) => this.useRenderer(plugin, config),
             removeRenderer: (name) => this.removeRenderer(name),
             updateRendererConfig: (name, config) => this.updateRendererConfig(name, config),
             setRendererEnabled: (name, enabled) => this.setRendererEnabled(name, enabled),
-            hasPane: (paneId) => this.layoutManager.hasPane(paneId),
-            upsertPane: (def) => this.layoutManager.upsertPane(def),
-            removePaneDefinition: (paneId) => this.layoutManager.removePaneDefinition(paneId),
-            getPaneSpecs: () => this.layoutManager.getPaneSpecs(),
-            getPaneRatiosSignal: () => this._paneRatiosSignal,
-            getInternalPaneRatios: () => this.layoutManager.getInternalPaneRatios(),
-            setInternalPaneRatio: (paneId, ratio) => this.layoutManager.setInternalPaneRatio(paneId, ratio),
-            deleteInternalPaneRatio: (paneId) => this.layoutManager.deleteInternalPaneRatio(paneId),
-            applyPaneLayoutSpecs: (specs) => this.layoutManager.applyPaneLayoutSpecs(specs),
-            getLastVisibleRange: () => this.dataManager.lastVisibleRange,
+            getPaneRatiosSignal: () => this.kernel.pane.readonly.paneRatios,
+            paneSpecs$: this.kernel.pane.readonly.paneSpecs,
+            projectPaneLayout: (specs, ratios) => {
+                this.layoutManager.projectState(specs, ratios);
+                this.ensurePaneScaleTypesFromSettings();
+            },
+            getLastVisibleRange: () => this.dataManager.getCurrentVisibleRange() ?? { start: 0, end: 0 },
             getCrosshairPos: () => this.interaction.crosshairPos,
             getCrosshairPrice: () => this.interaction.crosshairPrice,
             getActivePaneId: () => this.interaction.activePaneId,
             scheduleDraw: (level) => this.scheduleDraw(level),
-            setPendingIndicatorDataUpdate: (v) => {
-                this.dataManager.pendingIndicatorDataUpdate = v;
-            },
             getRenderContext: (paneId) => this.renderer?.getPaneCtxMap()?.get(paneId) ?? null,
             addLayer: (layer) => this.renderer?.getScene()?.addLayer(layer),
             removeLayer: (id) => this.renderer?.getScene()?.removeLayer(id) ?? false,
             getLayer: (id) => this.renderer?.getScene()?.getLayer(id) ?? null,
             setLayerVisibility: (id, visible) => this.renderer?.getScene()?.setLayerVisibility(id, visible),
+            getRightAxisWidth: () => this.kernel.options.readonly.options.peek().rightAxisWidth,
+            getPriceLabelWidth: () => this.kernel.options.readonly.options.peek().priceLabelWidth ?? 60,
+            getYPaddingPx: () => this.kernel.options.readonly.options.peek().yPaddingPx,
+            mainIndicators$: this.kernel.indicator.readonly.mainIndicators,
+            upsertMainIndicator: (id, params) => this.kernel.indicator.actions.upsert(id, params),
+            removeMainIndicator: (id) => this.kernel.indicator.actions.remove(id),
+            setMainIndicatorParams: (id, params) => this.kernel.indicator.actions.setParams(id, params),
+            replaceMainIndicators: (entries) => this.kernel.indicator.actions.replaceAll(entries),
+            clearMainIndicators: () => this.kernel.indicator.actions.clear(),
+            subPanes$: this.kernel.subPane.readonly.entries,
+            createSubPaneState: (paneId, indicatorId, params) => this.kernel.actions.createSubPane(paneId, indicatorId, params),
+            removeSubPaneState: (paneId) => this.kernel.actions.removeSubPane(paneId),
+            replaceSubPaneState: (paneId, indicatorId, params) => this.kernel.actions.replaceSubPane(paneId, indicatorId, params),
+            updateSubPaneStateParams: (paneId, params) => this.kernel.actions.updateSubPaneParams(paneId, params),
+            clearSubPaneState: () => this.kernel.actions.clearSubPanes(),
+            runRendererTransaction: (run) => this.runRuntimeProjection(run),
         });
         // Worker 异步结果就绪后串联 Alert 管线
         this.indicatorManager.indicatorSchedulerAccessor.setOnResultsApplied(() => {
             const data = this.dataManager.getInternalData();
-            this.evaluateAlerts(data, this.dataManager.lastVisibleRange);
+            this.evaluateAlerts(data, this.dataManager.getCurrentVisibleRange() ?? { start: 0, end: 0 });
         });
+        // 绑定 visibleRange 信号 — 替代 prepareFrameData 中的手动 updateVisibleRange
+        this.indicatorManager.indicatorSchedulerAccessor.setVisibleRangeSignal(this.kernel.viewport.readonly.visibleRange);
         // 初始化渲染器
         this.renderer = new ChartRenderer({
             getDom: () => this.dom,
-            getOption: () => this.opt,
+            getOption: () => {
+                const o = this.kernel.options.readonly.options.peek();
+                return {
+                    ...o,
+                    kWidth: this.kernel.zoom.readonly.kWidth(),
+                    kGap: this.kernel.viewport.readonly.kGap(),
+                };
+            },
             getPaneRenderers: () => this.paneRenderers,
             getInteraction: () => this.interaction,
             getSharedWebGLSurface: () => this.sharedWebGLSurface,
             getPluginHost: () => this.pluginHost,
             getRendererPluginManager: () => this.rendererPluginManager,
-            getTheme: () => this._themeSignal.peek(),
-            getCurrentZoomLevel: () => this.zoomController.currentZoomLevel,
-            getZoomLevelCount: () => this.zoomController.zoomLevelCount,
+            getTheme: () => this.kernel.theme.readonly.theme.peek(),
+            getCurrentZoomLevel: () => this.kernel.zoom.readonly.zoomLevel.peek(),
+            getZoomLevelCount: () => this.kernel.options.readonly.options.peek().zoomLevelCount,
             getViewportManager: () => this.viewportManager,
             getDataManager: () => this.dataManager,
             getIndicatorManager: () => this.indicatorManager,
             getActiveMode: () => this._activeMode,
+            settings$: this.kernel.settings.readonly.settings,
+            customMarkers$: this.kernel.marker.readonly.customMarkers,
+            drawings$: this.kernel.drawing.readonly.drawings,
+            selectedDrawingId$: this.kernel.drawing.readonly.selectedDrawingId,
         });
         this.renderer.registerDrawingPlugins();
         this.renderer.initCoreRenderers();
         this.viewportManager.init();
+        this.ensurePaneScaleTypesFromSettings();
     }
     getViewport() {
         return this.viewportManager.getViewport();
@@ -276,26 +331,37 @@ export class Chart {
             return;
         const prev = this._activeMode;
         if (mode === this._timeShareMode) {
-            this._modeSavedKWidth = this.opt.kWidth;
-            this._modeSavedKGap = this.opt.kGap;
-            this._modeSavedZoomLevel = this.zoomController.currentZoomLevel;
-            this._savedScaleTypes = new Map();
+            this._savedTimeShareState = {
+                zoomLevel: this.kernel.zoom.readonly.zoomLevel.peek(),
+                scaleTypes: new Map(this.kernel.pane.readonly.paneScaleTypes.peek()),
+                mainIndicators: [],
+                subPanes: [],
+            };
+            for (const [id, entry] of this.kernel.indicator.readonly.mainIndicators.peek()) {
+                this._savedTimeShareState.mainIndicators.push({ id, params: { ...entry.params } });
+            }
+            this._savedTimeShareState.subPanes = this.indicatorManager.getSubPaneEntries().map((e) => ({
+                id: e.indicatorId,
+                params: { ...e.params },
+            }));
+            // 分时强制 percent 进 kernel，再投影（不再由 updatePaneRange 每帧旁路写）
+            const percentMap = new Map();
             for (const r of this.paneRenderers) {
-                this._savedScaleTypes.set(r.getPane().id, r.getPane().yAxis.getScaleType());
+                percentMap.set(r.getPane().id, 'percent');
             }
+            this.kernel.pane.actions.replacePaneScaleTypes(percentMap);
+            this.projectPaneScaleTypes();
         }
         else if (prev === this._timeShareMode) {
+            const savedTypes = this._savedTimeShareState?.scaleTypes ?? new Map();
+            this.kernel.pane.actions.replacePaneScaleTypes(savedTypes);
+            this.projectPaneScaleTypes();
             for (const renderer of this.paneRenderers) {
-                const p = renderer.getPane();
-                const saved = this._savedScaleTypes?.get(p.id) ?? 'linear';
-                p.yAxis.setScaleType(saved);
-                p.yAxis.setBasePrice(null);
+                renderer.getPane().yAxis.setBasePrice(null);
             }
-            this._savedScaleTypes = undefined;
         }
-        if (this._modeSavedKWidth > 0 && mode !== this._timeShareMode) {
-            this.applyRenderState(this._modeSavedKWidth, this._modeSavedKGap, this._modeSavedZoomLevel);
-            this._modeSavedKWidth = 0;
+        if (this._savedTimeShareState && mode !== this._timeShareMode) {
+            this.kernel.zoom.actions.setZoomLevel(this._savedTimeShareState.zoomLevel);
         }
         prev.onDeactivate({
             enableMainIndicator: (id, p) => this.enableMainIndicator(id, p),
@@ -311,6 +377,31 @@ export class Chart {
             dataManager: this.dataManager,
             currentPeriod: this.dataManager.currentPeriod,
         }, prev);
+        if (mode === this._timeShareMode) {
+            for (const { id } of this._savedTimeShareState.mainIndicators) {
+                if (id !== 'TIMESHARE') {
+                    this.indicatorManager.disableMainIndicator(id);
+                }
+            }
+            this.indicatorManager.clearSubPanes();
+        }
+        else if (prev === this._timeShareMode) {
+            const saved = this._savedTimeShareState;
+            if (saved) {
+                for (const { id, params } of saved.mainIndicators) {
+                    if (id !== 'TIMESHARE') {
+                        this.indicatorManager.enableMainIndicator(id, params);
+                    }
+                }
+                for (const { id, params } of saved.subPanes) {
+                    this.indicatorManager.addIndicator(id, 'sub', params);
+                }
+            }
+            this._savedTimeShareState = null;
+        }
+        // 副作用成功后再写 kernel mode id
+        const id = mode === this._timeShareMode ? 'timeshare' : 'kline';
+        this.kernel.mode.actions.setChartMode(id);
     }
     getCurrentDpr() {
         return this.viewportManager.getEffectiveDpr();
@@ -366,20 +457,64 @@ export class Chart {
     getAllRenderers() {
         return this.rendererPluginManager.getAllPlugins();
     }
-    /** 更新用户设置（触发重绘） */
+    /** 将 kernel.paneScaleTypes 投影到各 pane PriceScale（runtime 非 SSOT） */
+    projectPaneScaleTypes() {
+        const types = this.kernel.pane.readonly.paneScaleTypes.peek();
+        for (const renderer of this.paneRenderers) {
+            const pane = renderer.getPane();
+            const t = types.get(pane.id) ?? 'linear';
+            if (pane.yAxis.getScaleType() !== t)
+                pane.yAxis.setScaleType(t);
+        }
+    }
+    /**
+     * 为缺失 paneScaleTypes 的 pane 按 settings.rightAxisType 补齐，再投影。
+     * commitLayout 只保留已有 id，不静默塞 linear，避免盖掉用户偏好。
+     */
+    ensurePaneScaleTypesFromSettings() {
+        const axisType = this.kernel.settings.readonly.settings.peek().rightAxisType;
+        const next = new Map(this.kernel.pane.readonly.paneScaleTypes.peek());
+        let changed = false;
+        for (const renderer of this.paneRenderers) {
+            const pane = renderer.getPane();
+            if (next.has(pane.id))
+                continue;
+            const scaleType = !axisType || axisType === 'none'
+                ? 'linear'
+                : axisType === 'percent' && pane.role !== 'price'
+                    ? 'linear'
+                    : axisType;
+            next.set(pane.id, scaleType);
+            changed = true;
+        }
+        if (changed)
+            this.kernel.pane.actions.replacePaneScaleTypes(next);
+        this.projectPaneScaleTypes();
+    }
+    /** 按 rightAxisType 写入 paneScaleTypes 并投影 */
+    applyRightAxisTypeToKernel(axisType) {
+        if (axisType === 'none')
+            return;
+        const next = new Map(this.kernel.pane.readonly.paneScaleTypes.peek());
+        for (const renderer of this.paneRenderers) {
+            const pane = renderer.getPane();
+            const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : axisType;
+            next.set(pane.id, scaleType);
+        }
+        this.kernel.pane.actions.replacePaneScaleTypes(next);
+        this.projectPaneScaleTypes();
+    }
+    /**
+     * 更新用户设置（触发重绘）—— 业务态只写 kernel.settings。
+     * 使用 patch 合并到当前 resolved，避免 partial 覆盖把未传 key 打回默认。
+     */
     updateSettings(settings) {
-        this.renderer.updateSettings(settings);
-        this.interaction.updateSettings(settings);
-        // 同步右轴刻度类型设置到所有 pane（百分比仅用于主图）
+        const prev = this.kernel.settings.readonly.settings.peek();
+        this.kernel.settings.actions.patch(settings);
+        const next = this.kernel.settings.readonly.settings.peek();
+        this.interaction.onSettingsChanged(prev, next);
         if ('rightAxisType' in settings) {
-            const axisType = settings.rightAxisType;
-            if (axisType !== 'none') {
-                for (const renderer of this.paneRenderers) {
-                    const pane = renderer.getPane();
-                    const scaleType = axisType === 'percent' && pane.role !== 'price' ? 'linear' : axisType;
-                    pane.yAxis.setScaleType(scaleType);
-                }
-            }
+            this.applyRightAxisTypeToKernel(settings.rightAxisType);
         }
         this.scheduleDraw();
     }
@@ -392,30 +527,30 @@ export class Chart {
     }
     // ========== Render State API (Vue SSOT) ==========
     /**
-     * 应用渲染状态（由 Vue/Store 层在状态更新后调用）
-     * Chart 不拥有业务 SSOT，只负责接收参数并渲染
-     * 这是写入 opt.kWidth/kGap 和 currentZoomLevel 的唯一入口
+     * 应用渲染状态
+     * kWidth/zoomLevel 写入 kernel；kGap 由 viewport 根据 kWidth+dpr+period 派生，禁止外部写入。
+     * 有 zoomLevel 时走离散缩放；无 zoomLevel（分时）时写 direct kWidth。
+     * @param kGap 已废弃，保留签名兼容旧调用方
      */
     applyRenderState(kWidth, kGap, zoomLevel) {
-        const nextZoomLevel = zoomLevel !== undefined
-            ? Math.max(1, Math.min(this.zoomController.zoomLevelCount, zoomLevel))
-            : this.zoomController.currentZoomLevel;
-        const renderStateChanged = this.opt.kWidth !== kWidth ||
-            this.opt.kGap !== kGap ||
-            this.zoomController.currentZoomLevel !== nextZoomLevel;
-        if (!renderStateChanged) {
-            return;
-        }
-        this.opt = { ...this.opt, kWidth, kGap };
+        void kGap;
+        const beforeLevel = this.kernel.zoom.readonly.zoomLevel.peek();
+        const beforeWidth = this.kernel.zoom.readonly.kWidth.peek();
         if (zoomLevel !== undefined) {
-            this.zoomController.setZoomLevel(nextZoomLevel);
+            this.kernel.zoom.actions.setZoomLevel(zoomLevel);
+        }
+        else {
+            this.kernel.zoom.actions.setDirectKWidth(kWidth);
+        }
+        if (beforeLevel === this.kernel.zoom.readonly.zoomLevel.peek() &&
+            beforeWidth === this.kernel.zoom.readonly.kWidth.peek()) {
+            return;
         }
-        this.updateViewportSignal();
         this.scheduleDraw();
     }
     /** 获取总缩放级别数 */
     getZoomLevelCount() {
-        return this.zoomController.zoomLevelCount;
+        return this.kernel.options.readonly.options.peek().zoomLevelCount;
     }
     /** 获取所有 PaneRenderer */
     getPaneRenderers() {
@@ -425,14 +560,22 @@ export class Chart {
     getMarkerManager() {
         return this.renderer.getMarkerManager();
     }
-    /** 更新自定义标记 */
+    /** 更新自定义标记（写 kernel + 清帧缓存 + 重绘） */
     updateCustomMarkers(markers) {
-        this.renderer.getMarkerManager().setCustomMarkers(markers);
+        this.kernel.marker.actions.setCustomMarkers(markers);
+        this.renderer.getMarkerManager().clearPositionCache();
+        this.scheduleDraw();
+    }
+    /** 注册或覆盖单个自定义标记 */
+    registerCustomMarker(marker) {
+        this.kernel.marker.actions.registerCustomMarker(marker);
+        this.renderer.getMarkerManager().clearPositionCache();
         this.scheduleDraw();
     }
     /** 清除自定义标记 */
     clearCustomMarkers() {
-        this.renderer.getMarkerManager().clearCustomMarkers();
+        this.kernel.marker.actions.clearCustomMarkers();
+        this.renderer.getMarkerManager().clearPositionCache();
         this.scheduleDraw();
     }
     /** 获取 ChartDom（供 InteractionController 使用） */
@@ -441,7 +584,10 @@ export class Chart {
     }
     /** 获取当前 ChartOptions（返回内部当前快照） */
     getOption() {
-        return this.opt;
+        return {
+            ...this.kernel.options.readonly.options.peek(),
+            panes: this.kernel.pane.readonly.paneSpecs.peek(),
+        };
     }
     /**
      * 更新配置并触发布局/重绘
@@ -458,15 +604,16 @@ export class Chart {
         }
         if (partial.panes) {
             const nextPanes = partial.panes.map((pane) => ({ ...pane }));
-            this.opt = { ...this.opt, ...partial, panes: nextPanes };
+            this.kernel.options.actions.patch({ ...partial, panes: nextPanes });
             this.layoutManager.applyPaneLayoutSpecs(nextPanes);
             return;
         }
-        this.opt = { ...this.opt, ...partial };
+        this.kernel.options.actions.patch(partial);
         this.resize();
     }
     updatePaneLayout(panes) {
         this.layoutManager.updatePaneLayout(panes);
+        this.ensurePaneScaleTypesFromSettings();
     }
     setPaneDefinitions(defs) {
         this.layoutManager.setPaneDefinitions(defs);
@@ -480,20 +627,25 @@ export class Chart {
     bindIndicatorToPane(paneId, indicatorId, params) {
         this.indicatorManager.bindIndicatorToPane(paneId, indicatorId, params);
     }
-    /** 更新绘图对象 */
+    /** 更新绘图对象（写 kernel + 重绘） */
     setDrawings(drawings) {
-        this.renderer.getDrawingStore().setAll(drawings);
-        this._drawingsSignal.set(drawings);
+        this.kernel.drawing.actions.setDrawings(drawings);
         this.scheduleDraw();
     }
     /** 更新选中的绘图 ID */
     setSelectedDrawingId(id) {
-        const store = this.renderer.getDrawingStore();
-        if (store.getSelectedId() === id)
+        if (this.kernel.drawing.readonly.selectedDrawingId.peek() === id)
             return;
-        store.setSelectedId(id);
+        this.kernel.drawing.actions.setSelectedDrawingId(id);
         this.scheduleDraw();
     }
+    /**
+     * 获取 DrawingStore（只读投影 kernel.drawing）。
+     * @remarks 禁止经 store 写入；变更请用 setDrawings / setSelectedDrawingId。
+     */
+    getDrawingStore() {
+        return this.renderer.getDrawingStore();
+    }
     getPaneLayoutSpecs() {
         return this.layoutManager.getPaneLayoutSpecs();
     }
@@ -599,6 +751,10 @@ export class Chart {
     getRenderData() {
         return this.dataManager.getRenderData();
     }
+    /** K线原始数据（分时模式下为空） */
+    getInternalData() {
+        return this.dataManager.getInternalData();
+    }
     /** 获取指标调度器（供外部控制器更新指标配置） */
     getIndicatorScheduler() {
         return this.indicatorManager.indicatorSchedulerAccessor;
@@ -608,7 +764,7 @@ export class Chart {
         return this.alertController;
     }
     /** 数据就绪时触发预警评估 */
-    evaluateAlerts(data, range) {
+    evaluateAlerts(data, _range) {
         const latest = data[data.length - 1];
         if (!latest)
             return;
@@ -707,11 +863,11 @@ export class Chart {
     }
     /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
     getContentWidth() {
-        return this.dataManager.getContentWidth();
+        return this.kernel.viewport.readonly.contentWidth.peek();
     }
     /** 获取左侧加载缓冲宽度（视口宽度，用于计算 overlay 像素偏移） */
     getLeftLoadBufferWidth() {
-        return this.dataManager.getLeftLoadBufferWidth();
+        return this.kernel.viewport.readonly.leftLoadBufferWidth.peek();
     }
     /** 滚动到最右侧（最新数据位置） */
     scrollToRight() {
@@ -719,7 +875,7 @@ export class Chart {
     }
     /** 容器尺寸变化时调用 */
     resize() {
-        if (this._activeMode.debugName === 'TimeShare') {
+        if (this._activeMode === this._timeShareMode) {
             const tsData = this.dataManager.getTimeShareData();
             const vp = this.viewportManager.computeViewport();
             if (!vp || vp.plotWidth <= 0)
@@ -728,17 +884,12 @@ export class Chart {
                 const result = this._activeMode.computeKWidth(tsData.length, vp.plotWidth, vp.dpr);
                 if (result) {
                     this.applyRenderState(result.kWidth, result.kGap);
-                    const container = this.dom.container;
-                    if (container) {
-                        const leftBuffer = this.dataManager.getLeftLoadBufferWidth();
-                        this.viewportManager.setScrollLeft(leftBuffer);
-                        this.viewportManager.applyPendingScrollLeft(container);
-                    }
+                    const leftBuffer = this.getLeftLoadBufferWidth();
+                    this.viewportManager.setScrollLeft(leftBuffer);
                 }
             }
             this.renderer.clearCachedFrame();
             this.layoutManager.layoutPanes();
-            this.viewportManager.updateViewportSignal();
             this.scheduleDraw();
             return;
         }
@@ -749,7 +900,6 @@ export class Chart {
         }
         this.renderer.clearCachedFrame();
         this.layoutManager.layoutPanes();
-        this.viewportManager.updateViewportSignal();
         this.scheduleDraw();
     }
     /**
@@ -757,16 +907,34 @@ export class Chart {
      * @param level 更新级别，默认为 All
      */
     scheduleDraw(level = UpdateLevel.All) {
+        if (this.runtimeProjectionDepth > 0) {
+            this.runtimeProjectionDrawPending = true;
+            return;
+        }
         this.renderer.scheduleDraw(level);
     }
+    runRuntimeProjection(run) {
+        this.runtimeProjectionDepth++;
+        try {
+            this.rendererPluginManager.transaction(run);
+        }
+        finally {
+            this.runtimeProjectionDepth--;
+            if (this.runtimeProjectionDepth === 0 && this.runtimeProjectionDrawPending) {
+                this.runtimeProjectionDrawPending = false;
+                this.renderer?.scheduleDraw(UpdateLevel.All);
+            }
+        }
+    }
     /** 销毁图表实例 */
     async destroy() {
+        this.indicatorManager.destroy();
         this.renderer.destroy();
         this.dataManager.destroy();
         this.viewportManager.destroy();
         this.layoutManager.destroy();
         this.sharedWebGLSurface.destroy();
-        this.indicatorManager.destroy();
+        this.kernel.dispose();
         this.alertController.dispose();
         await this.pluginHost.destroy();
     }
@@ -774,27 +942,14 @@ export class Chart {
         return this.viewportManager.computeViewport();
     }
     // ==================== Facade API (High-level interface for adapters) ====================
-    _themeSignal = createSignal('light');
-    _drawingToolSignal = createSignal(null);
-    _drawingsSignal = createSignal([]);
-    _paneRatiosSignal = createSignal({});
-    _paneLayoutSignal = createSignal([]);
-    _interactionSignal = createSignal({
-        crosshairPos: null,
-        crosshairIndex: null,
-        crosshairPrice: null,
-        hoveredIndex: null,
-        activePaneId: null,
-        tooltipPos: { x: 0, y: 0 },
-        tooltipAnchorPlacement: 'right-bottom',
-        hoveredMarkerData: null,
-        hoveredCustomMarker: null,
-        isDragging: false,
-        isResizingPaneBoundary: false,
-        isHoveringPaneBoundary: false,
-        hoveredPaneBoundaryId: null,
-        isHoveringRightAxis: false,
-    });
+    /** interactionSnapshot lazy computed for the createChartController facade */
+    get _interactionSnapshot() {
+        if (!this.__interactionSnapshot) {
+            this.__interactionSnapshot = computed(() => this.kernel.interaction.readonly.interactionSnapshot());
+        }
+        return this.__interactionSnapshot;
+    }
+    __interactionSnapshot = null;
     /** 视口状态信号 */
     get viewport() {
         return this.viewportManager.viewportSignal;
@@ -829,7 +984,7 @@ export class Chart {
     }
     /** 主题信号 */
     get theme() {
-        return this._themeSignal;
+        return this.kernel.theme.readonly.theme;
     }
     /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
     get indicators() {
@@ -839,24 +994,31 @@ export class Chart {
     get subPanes() {
         return this.indicatorManager.subPanesComputed;
     }
-    /** 当前绘图工具信号 */
+    /** 当前绘图工具信号（DrawingToolId，默认 cursor） */
     get drawingTool() {
-        return this._drawingToolSignal;
+        return this.kernel.drawing.readonly.drawingTool;
+    }
+    /** 注册/注销绘图交互会话，使 setDrawingTool 能清会话副作用 */
+    registerDrawingSession(session) {
+        this.drawingSession = session;
+        if (session) {
+            session.applyToolSession(this.kernel.drawing.readonly.drawingTool.peek());
+        }
     }
     /** 绘图对象列表信号 */
     get drawings() {
-        return this._drawingsSignal;
+        return this.kernel.drawing.readonly.drawings;
     }
     /** 面板比例信号 */
     get paneRatios() {
-        return this._paneRatiosSignal;
+        return this.kernel.pane.readonly.paneRatios;
     }
     get paneLayout() {
-        return this._paneLayoutSignal;
+        return this.kernel.pane.readonly.paneSpecs;
     }
     /** 交互状态信号 */
     get interactionState() {
-        return this._interactionSignal;
+        return this._interactionSnapshot;
     }
     // ---------- Data ----------
     setData(data) {
@@ -879,9 +1041,17 @@ export class Chart {
         this._lastAlertTimestamp = null;
         const primaryPeriod = specs[0]?.period;
         if (primaryPeriod) {
+            // ⚠️ setActiveMode 必须在 dataManager.setSymbols 之前调用，
+            //    以确保 kWidth/kGap（从 zoom level 恢复）先写入 _optionsSignal，
+            //    后续 scrollLeft 恢复才能正确反推物理像素偏移。
             this.setActiveMode(primaryPeriod === 'timeshare' ? this._timeShareMode : this._kLineMode);
         }
         this.dataManager.setSymbols(specs);
+        // Scroll position 恢复必须放在 setActiveMode + setSymbols 之后，
+        // 此时 kWidth/kGap 已由 zoom level 恢复写回，计算不出错。
+        if (primaryPeriod && primaryPeriod !== 'timeshare') {
+            this.dataManager.tryRestoreScrollFromSnapshot();
+        }
     }
     addComparisonSymbol(spec) {
         this.dataManager.addComparisonSymbol(spec);
@@ -918,7 +1088,7 @@ export class Chart {
      * 设置主题（高层 API）
      */
     setTheme(theme) {
-        this._themeSignal.set(theme);
+        this.kernel.theme.actions.setTheme(theme);
         this.scheduleDraw();
     }
     // ---------- Zoom ----------
@@ -1030,9 +1200,11 @@ export class Chart {
      * 更新缓存的 scrollLeft 并触发交互 controller
      */
     handleScrollEvent() {
-        this.interaction.onScroll({ scheduleDraw: !this.dataManager.pendingIndicatorDataUpdate });
-        // 更新 viewport signal 中的 visible range
-        this.updateViewportSignal();
+        this.interaction.onScroll({
+            scheduleDraw: !this.indicatorManager.indicatorSchedulerAccessor.busySignal.peek(),
+        });
+        // viewportState is now computed() — auto-updates when scrollLeft or
+        // visibleRange change. No manual signal push needed anymore.
     }
     /**
      * 双指捏合缩放处理（高层 API）
@@ -1044,12 +1216,6 @@ export class Chart {
             return;
         this.zoomController.handlePinch(delta, centerClientX);
     }
-    /**
-     * 更新 viewport signal（用于滚动事件）
-     */
-    updateViewportSignal() {
-        this.viewportManager.updateViewportSignal();
-    }
     // ---------- Indicators (Explicit role) ----------
     /**
      * 添加指标（高层 API，显式指定 role）
@@ -1082,18 +1248,20 @@ export class Chart {
     }
     // ---------- Drawings ----------
     /**
-     * 设置当前绘图工具（高层 API）
-     * @param tool 工具类型或 null 取消选择
+     * 设置当前绘图工具（高层 API）—— 业务态只写 kernel，再清会话副作用
+     * @param tool DrawingToolId；传 null 时视为 cursor（兼容旧 API）
      */
     setDrawingTool(tool) {
-        this._drawingToolSignal.set(tool);
-        // TODO: 当 Chart 支持绘图工具切换时，在这里调用相应方法
+        const toolId = tool ?? 'cursor';
+        this.kernel.drawing.actions.setDrawingTool(toolId);
+        this.drawingSession?.applyToolSession(toolId);
+        this.scheduleDraw();
     }
     /**
      * 移除绘图（高层 API）
      * @param drawingId 绘图 ID
      */
-    removeDrawing(drawingId) {
+    removeDrawing(_drawingId) {
         // TODO: 实现绘图移除
         console.warn('[Chart] removeDrawing not fully implemented yet');
     }