@363045841yyt/klinechart 0.6.0 → 0.6.1

package/dist/src/core/chart.d.ts

@@ -1,5 +1,5 @@
 import { KLineData } from '../types/price';
-import { VisibleRange } from './layout/pane';
+import { VisibleRange, UpdateLevel } from './layout/pane';
 import { InteractionController } from './controller/interaction';
 import { PaneRenderer } from './paneRenderer';
 import { MarkerManager, CustomMarkerEntity } from './marker/registry';
@@ -40,7 +40,8 @@ export type PaneSpec = {
     capabilities?: Partial<PaneCapabilities>;
 };
 export type PaneRendererDom = {
-    plotCanvas: HTMLCanvasElement;
+    mainCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
     yAxisCanvas: HTMLCanvasElement;
 };
 export type ChartOptions = {
@@ -91,6 +92,7 @@ export declare class Chart {
     private opt;
     private data;
     private raf;
+    private pendingUpdateLevel;
     private viewport;
     private paneRenderers;
     private markerManager;
@@ -153,8 +155,11 @@ export declare class Chart {
     getAllRenderers(): RendererPlugin[];
     /** 更新用户设置（触发重绘） */
     updateSettings(settings: Record<string, boolean>): void;
-    /** 绘制一帧 */
-    draw(): void;
+    /**
+     * 绘制一帧
+     * @param level 更新级别，决定渲染哪些层
+     */
+    draw(level?: UpdateLevel): void;
     /**
      * 应用渲染状态（由 Vue/Store 层在状态更新后调用）
      * Chart 不拥有业务 SSOT，只负责接收参数并渲染
@@ -280,8 +285,11 @@ export declare class Chart {
     getContentWidth(): number;
     /** 容器尺寸变化时调用 */
     resize(): void;
-    /** 请求下一帧重绘（RAF 合并） */
-    scheduleDraw(): void;
+    /**
+     * 请求下一帧重绘（RAF 合并，支持分层更新）
+     * @param level 更新级别，默认为 All
+     */
+    scheduleDraw(level?: UpdateLevel): void;
     /** 销毁图表实例 */
     destroy(): Promise<void>;
     /** 初始化所有 pane */

package/dist/src/core/indicators/scheduler.d.ts

@@ -150,6 +150,13 @@ export declare class IndicatorScheduler {
     private dirtyWmsrConfig;
     private dirtyKstConfig;
     private dirtyFastkConfig;
+    private dirtyRsiState;
+    private dirtyCciState;
+    private dirtyStochState;
+    private dirtyMomState;
+    private dirtyWmsrState;
+    private dirtyKstState;
+    private dirtyFastkState;
     /**
      * 设置 PluginHost，用于读写 StateStore
      */

package/dist/src/core/layout/pane.d.ts

@@ -3,6 +3,17 @@ import { PriceRange } from '../scale/price';
 import { PriceScale } from '../scale/priceScale';
 import { MarkerManager } from '../marker/registry';
 import { PaneCapabilities, PaneRole } from '../../plugin';
+/**
+ * 更新级别枚举 - 用于双层 Canvas 架构
+ * Main: 只更新主画布（K线、指标等静态内容）
+ * Overlay: 只更新覆盖层（十字线、Tooltip等动态内容）
+ * All: 更新所有层
+ */
+export declare enum UpdateLevel {
+    Main = "main",
+    Overlay = "overlay",
+    All = "all"
+}
 export type VisibleRange = {
     start: number;
     end: number;

package/dist/src/core/paneRenderer.d.ts

@@ -1,5 +1,6 @@
 export type PaneRendererDom = {
-    plotCanvas: HTMLCanvasElement;
+    mainCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
     yAxisCanvas: HTMLCanvasElement;
 };
 export type PaneRendererOptions = {

package/dist/src/core/theme/fonts.d.ts

@@ -9,3 +9,4 @@ export declare const FONT_FAMILY = "\"Trebuchet MS\", Roboto, Ubuntu, sans-serif
 export declare function getFont(size: number, options?: {
     bold?: boolean;
 }): string;
+export declare function setCanvasFont(ctx: CanvasRenderingContext2D, font: string): void;

package/dist/src/debug/canvasProfiler.d.ts

@@ -0,0 +1,21 @@
+type MetricEntry = {
+    count: number;
+    totalTime: number;
+};
+type MetricBucket = Record<string, MetricEntry>;
+type CanvasProfilerMetrics = {
+    ctxMethods: MetricBucket;
+    ctxProps: MetricBucket;
+    canvasProps: MetricBucket;
+    ctxMethodSources: Record<string, MetricBucket>;
+};
+declare global {
+    interface Window {
+        __KMAP_CANVAS_PROFILER_INSTALLED__?: boolean;
+        __KMAP_CANVAS_PROFILER_METRICS__?: CanvasProfilerMetrics;
+        showCanvasReport?: () => void;
+        resetCanvasReport?: () => void;
+    }
+}
+export declare function installCanvasProfiler(): void;
+export {};

package/dist/src/plugin/rendererPluginManager.d.ts

@@ -1,4 +1,5 @@
 import { RendererPlugin, RenderContext, PaneInfo, RendererPluginWithHost, PluginHost } from './types';
+import { UpdateLevel } from '../core/layout/pane';
 /** 渲染器错误事件（裁剪后，不含大数据） */
 export interface RendererErrorEvent {
     name: string;
@@ -55,8 +56,8 @@ export declare class RendererPluginManager {
     private getMergedRenderers;
     /** 获取指定 pane 的渲染器（已缓存，无穿透） */
     getRenderers(paneId: string): RendererPlugin[];
-    /** 渲染指定 pane（带错误隔离） */
-    render(paneId: string, context: RenderContext): RendererErrorEvent[];
+    /** 渲染指定 pane（带错误隔离，支持按 UpdateLevel 过滤） */
+    render(paneId: string, context: RenderContext, level?: UpdateLevel): RendererErrorEvent[];
     /** 渲染指定名称的插件（带错误隔离，用于系统渲染器） */
     renderPlugin(name: string, context: RenderContext): RendererErrorEvent[];
     /** 启用/禁用渲染器（修改独立状态，不影响原始插件对象） */

package/dist/src/plugin/types.d.ts

@@ -226,6 +226,8 @@ export interface RenderContext {
     yAxisCtx?: CanvasRenderingContext2D;
     xAxisCtx?: CanvasRenderingContext2D;
     borderCtx?: CanvasRenderingContext2D;
+    /** 覆盖层 Canvas 上下文（用于十字线、Tooltip 等动态内容） */
+    overlayCtx?: CanvasRenderingContext2D;
     /** 当前缩放级别（1 ~ zoomLevels） */
     zoomLevel?: number;
     /** 总缩放级别数 */
@@ -396,6 +398,13 @@ export interface RendererPlugin {
      * 用于时间轴、全局边框等需要单独控制渲染时机的场景
      */
     isSystem?: boolean;
+    /**
+     * 渲染器所属层，决定 UpdateLevel 过滤行为
+     * - 'main': 低频/静态内容，随主画布一起渲染
+     * - 'overlay': 高频/动态内容，可在 overlay-only 更新时独立重绘
+     * 未指定时默认为 'main'（向后兼容）
+     */
+    layer?: 'main' | 'overlay';
     /** 渲染方法 */
     draw(context: RenderContext): void;
     /** 数据更新时回调 */

package/dist/src/utils/kLineDraw/axis.d.ts

@@ -113,15 +113,7 @@ export interface CrosshairTimeLabelOptions {
     paddingX?: number;
     paddingY?: number;
 }
-/**
- * 在底部时间轴上绘制"十字线日期标签"
- * 说明：该函数假设时间轴背景/刻度已绘制完（即 drawTimeAxis 之后调用）。
- */
 export declare function drawCrosshairTimeLabel(ctx: CanvasRenderingContext2D, opts: CrosshairTimeLabelOptions): void;
-/**
- * 在右侧价格轴上绘制"十字线价格标签"
- * 说明：该函数假设价格轴背景/刻度已绘制完（即 drawPriceAxis 之后调用）。
- */
 export declare function drawCrosshairPriceLabel(ctx: CanvasRenderingContext2D, opts: CrosshairPriceLabelOptions): void;
 /** 绘制"最新价水平虚线"（画在 plotCanvas 的 world 坐标系：需在 translate(-scrollLeft,0) 之后调用） */
 export declare function drawLastPriceDashedLine(ctx: CanvasRenderingContext2D, opts: LastPriceLineOptions): void;
@@ -141,10 +133,6 @@ export interface AxisPriceLabelOptions {
     textColor?: string;
     fontSize?: number;
 }
-/**
- * 在右侧价格轴上绘制价格标签
- * 与 drawCrosshairPriceLabel 类似，但简化了参数（价格直接传入，无需计算）
- */
 export declare function drawAxisPriceLabel(ctx: CanvasRenderingContext2D, opts: AxisPriceLabelOptions): void;
 export interface AxisTimeLabelOptions {
     x: number;
@@ -159,8 +147,4 @@ export interface AxisTimeLabelOptions {
     fontSize?: number;
     paddingX?: number;
 }
-/**
- * 在底部时间轴上绘制时间标签
- * 与 drawCrosshairTimeLabel 类似，但 labelX 是屏幕坐标（已处理 scrollLeft）
- */
 export declare function drawAxisTimeLabel(ctx: CanvasRenderingContext2D, opts: AxisTimeLabelOptions): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@363045841yyt/klinechart",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A lightweight financial K-line charting library with first-class AI Agent support, crisp ResizeObserver-driven rendering, and plugin-based architecture. Focused on quantitative trading scenarios with TradingView-level interaction experience.",
   "author": "363045841 <slslswbsy@qq.com>",
   "license": "MIT",
@@ -51,6 +51,7 @@
     "build-only": "vite build",
     "build:demo": "vite build --config vite.demo.config.ts",
     "preview": "vite preview",
+    "preview:demo": "vite preview --config vite.demo.config.ts",
     "type-check": "vue-tsc --build",
     "test:unit": "vitest",
     "format": "prettier --write --experimental-cli src/",