@quantlife/qlchart 0.0.1

package/src/standalone.ts

@@ -0,0 +1,386 @@
+/**
+ * QLChart Standalone API
+ *
+ * 在纯HTML/JS环境中使用，无需React。
+ *
+ * @example
+ * ```html
+ * <script src="qlchart.standalone.js"></script>
+ * <script>
+ *   const chart = QLChart.create('container', { theme: 'dark' });
+ *   chart.setData(klineData);
+ *   chart.update(realtimeCandle);
+ * </script>
+ * ```
+ */
+
+// CSS 内联（打包时自动注入到 <style> 标签）
+import './styles/chart.css';
+import './styles/toolbar.css';
+import './styles/drawing.css';
+import './styles/context-menu.css';
+import './styles/indicator-tag.css';
+import './styles/indicator-modal.css';
+import './styles/themes/dark.css';
+import './styles/themes/light.css';
+import './styles/responsive.css';
+import './styles/pane-chart.css';
+import './styles/components.css';
+
+// 核心依赖
+import {
+  createChart,
+  CandlestickSeries,
+  HistogramSeries,
+  LineSeries,
+  AreaSeries,
+  BarSeries,
+  type IChartApi,
+  type ISeriesApi,
+  type SeriesType as LWCSeriesType,
+  type UTCTimestamp,
+} from 'lightweight-charts';
+
+// 工具函数
+import { transformCandlestickData, transformVolumeData } from './utils/dataTransformer.js';
+import { generateFutureWhitespace, getPeriodInterval } from './utils/timeScaleUtils.js';
+import { darkPreset, lightPreset } from './utils/themePresets.js';
+import { SeriesType } from './types/index.js';
+import type { CandlestickRawData } from './types/index.js';
+import { RealtimeDataFeed, type RealtimeCandle } from './core/RealtimeDataFeed.js';
+import { DrawingAdapter } from './plugins/drawing/DrawingAdapter.js';
+import type { DrawingToolType, DrawingPersistData } from './types/index.js';
+import type { CandlestickData } from 'lightweight-charts';
+import {
+  DRAWING_TOOLS,
+  CATEGORY_LABELS,
+  getToolsByCategory,
+} from './plugins/drawing/DrawingToolRegistry.js';
+
+// ── 类型定义 ──
+
+export interface StandaloneChartOptions {
+  width?: number | string;
+  height?: number | string;
+  theme?: 'dark' | 'light';
+  seriesType?: 'candlestick' | 'line' | 'area' | 'bar';
+  showVolume?: boolean;
+  enableDrawing?: boolean;
+  visibleBars?: number;
+  /** 初始周期，默认 '1h' */
+  period?: string;
+  /** 周期切换时的数据加载回调 */
+  onDataReload?: (period: string) => void;
+}
+
+/**
+ * Standalone绘图工具API
+ * 仅在 enableDrawing: true 时可用
+ */
+export interface StandaloneDrawingApi {
+  /** 设置当前绘图工具 */
+  setDrawingTool(tool: DrawingToolType): void;
+  /** 获取当前工具 */
+  getDrawingTool(): string | null;
+  /** 清空所有绘图 */
+  clearDrawings(): void;
+  /** 获取所有绘图数据（持久化） */
+  exportDrawings(): DrawingPersistData[];
+  /** 导入绘图数据（恢复） */
+  importDrawings(data: DrawingPersistData[]): void;
+  /** 设置K线数据（磁铁吸附用） */
+  setCandleData(data: CandlestickData[]): void;
+  /** 销毁绘图模块 */
+  destroyDrawing(): void;
+  /** 绘图创建事件回调 */
+  onCreated(callback: () => void): void;
+  /** 绘图修改事件回调 */
+  onModified(callback: () => void): void;
+  /** 绘图删除事件回调 */
+  onRemoved(callback: () => void): void;
+}
+
+export interface StandaloneChart {
+  setData(data: CandlestickRawData[]): void;
+  update(data: RealtimeCandle): void;
+  updateBatch(data: RealtimeCandle[]): void;
+  getChart(): IChartApi;
+  getMainSeries(): ISeriesApi<LWCSeriesType> | null;
+  setTheme(theme: 'dark' | 'light'): void;
+  screenshot(): string | null;
+  destroy(): void;
+  /** 绘图API（enableDrawing:true时可用，否则为null） */
+  readonly drawing: StandaloneDrawingApi | null;
+  /** 切换周期 */
+  setPeriod(period: string): void;
+  /** 获取当前周期 */
+  getPeriod(): string;
+}
+
+// ── 辅助常量 ──
+
+const SERIES_TYPE_MAP: Record<string, unknown> = {
+  candlestick: CandlestickSeries,
+  line: LineSeries,
+  area: AreaSeries,
+  bar: BarSeries,
+};
+
+// ── 工厂函数 ──
+
+export function create(
+  container: HTMLElement | string,
+  options: StandaloneChartOptions = {},
+): StandaloneChart {
+  const el = typeof container === 'string'
+    ? document.getElementById(container)
+    : container;
+  if (!el) throw new Error(`[QLChart] Container not found: ${container}`);
+
+  const {
+    width = '100%',
+    height = 400,
+    theme = 'dark',
+    seriesType = 'candlestick',
+    showVolume = true,
+    enableDrawing = false,
+    period = '1h',
+    onDataReload,
+    visibleBars = 80,
+  } = options;
+
+  const themePreset = theme === 'dark' ? darkPreset : lightPreset;
+
+  // ★ 修复：应用完整 themePreset.chart（含 grid/crosshair）
+  const chart = createChart(el, {
+    ...themePreset.chart,
+    width: typeof width === 'number' ? width : undefined,
+    height: typeof height === 'number' ? height : undefined,
+    autoSize: typeof width === 'string' || typeof height === 'string',
+  });
+
+  if (typeof width === 'string' && width.includes('%')) {
+    el.style.width = width;
+  }
+  if (typeof height === 'string' && height.includes('%')) {
+    el.style.height = height;
+  }
+
+  // 创建主序列
+  const seriesDef = SERIES_TYPE_MAP[seriesType] ?? SERIES_TYPE_MAP.candlestick;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mainSeries = chart.addSeries(seriesDef as any, {
+    upColor: themePreset.upColor ?? '#26a69a',
+    downColor: themePreset.downColor ?? '#ef5350',
+    borderUpColor: themePreset.upColor ?? '#26a69a',
+    borderDownColor: themePreset.downColor ?? '#ef5350',
+    wickUpColor: themePreset.upColor ?? '#26a69a',
+    wickDownColor: themePreset.downColor ?? '#ef5350',
+  });
+
+  // 成交量序列
+  let volumeSeries: ISeriesApi<LWCSeriesType> | null = null;
+  if (showVolume) {
+    volumeSeries = chart.addSeries(HistogramSeries, {
+      priceFormat: { type: 'volume' },
+      priceScaleId: 'volume',
+      color: 'rgba(38, 166, 154, 0.35)',
+    });
+    chart.priceScale('volume').applyOptions({
+      scaleMargins: { top: 0.8, bottom: 0 },
+    });
+  }
+
+  // 实时数据馈送
+  const realtimeFeed = new RealtimeDataFeed();
+  realtimeFeed.attach(mainSeries, volumeSeries);
+
+  // ── period 内部状态 ──
+  let currentPeriod = period;
+
+  // ── 绘图模块初始化 ──
+  let drawingAdapter: DrawingAdapter | null = null;
+  let drawingApi: StandaloneDrawingApi | null = null;
+
+  if (enableDrawing) {
+    drawingAdapter = new DrawingAdapter();
+    drawingAdapter.attach(chart, mainSeries, el);
+
+    // ★ V3新增：事件回调转发
+    let createdCb: (() => void) | null = null;
+    let modifiedCb: (() => void) | null = null;
+    let removedCb: (() => void) | null = null;
+
+    drawingAdapter.onDrawingCreated(() => createdCb?.());
+    drawingAdapter.onDrawingModified(() => modifiedCb?.());
+    drawingAdapter.onDrawingRemoved(() => removedCb?.());
+
+    drawingApi = {
+      setDrawingTool(tool: DrawingToolType) {
+        drawingAdapter!.setActiveTool(tool);
+      },
+      getDrawingTool() {
+        return drawingAdapter!.getActiveTool();
+      },
+      clearDrawings() {
+        drawingAdapter!.clearAll();
+      },
+      exportDrawings() {
+        return drawingAdapter!.exportDrawings();
+      },
+      importDrawings(data: DrawingPersistData[]) {
+        drawingAdapter!.importDrawings(data);
+      },
+      setCandleData(data: CandlestickData[]) {
+        drawingAdapter!.setCandleData(data);
+      },
+      destroyDrawing() {
+        drawingAdapter?.dispose();
+        drawingAdapter = null;
+        drawingApi = null;
+      },
+      onCreated(callback: () => void) { createdCb = callback; },
+      onModified(callback: () => void) { modifiedCb = callback; },
+      onRemoved(callback: () => void) { removedCb = callback; },
+    };
+  }
+
+  return {
+    setData(data: CandlestickRawData[]) {
+      const candlestickData = transformCandlestickData(data);
+      const volumeData = transformVolumeData(data);
+
+      if (candlestickData.length > 0) {
+        const lastTime = candlestickData[candlestickData.length - 1].time as number;
+        // ★ 修复：使用 currentPeriod 替代硬编码 '1h'
+        const futureWhitespace = generateFutureWhitespace(lastTime, currentPeriod, 100);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mainSeries.setData([...candlestickData, ...futureWhitespace] as any);
+      }
+
+      if (volumeSeries && volumeData.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        volumeSeries.setData(volumeData as any);
+      }
+
+      // 同步K线数据到绘图模块（磁铁吸附用）
+      drawingAdapter?.setCandleData(candlestickData as CandlestickData[]);
+      // 同步period给绘图模块（测量器标签用）
+      drawingAdapter?.setPeriod(currentPeriod);
+
+      const total = candlestickData.length;
+      chart.timeScale().setVisibleLogicalRange({
+        from: Math.max(0, total - visibleBars),
+        to: total + 15,
+      });
+    },
+
+    update(data: RealtimeCandle) {
+      realtimeFeed.push(data);
+    },
+
+    updateBatch(datas: RealtimeCandle[]) {
+      realtimeFeed.pushBatch(datas);
+    },
+
+    getChart() {
+      return chart;
+    },
+
+    getMainSeries() {
+      return mainSeries;
+    },
+
+    setTheme(newTheme: 'dark' | 'light') {
+      const preset = newTheme === 'dark' ? darkPreset : lightPreset;
+      // ★ 修复：应用完整 preset.chart（含 grid/crosshair）
+      chart.applyOptions({
+        ...preset.chart,
+      });
+      mainSeries.applyOptions({
+        upColor: preset.upColor ?? '#26a69a',
+        downColor: preset.downColor ?? '#ef5350',
+      });
+      // ★ 同步 data-theme 属性（CSS变量联动）
+      el.setAttribute('data-theme', newTheme);
+    },
+
+    screenshot(): string | null {
+      try {
+        return chart.takeScreenshot().toDataURL('image/png');
+      } catch {
+        return null;
+      }
+    },
+
+    get drawing() {
+      return drawingApi;
+    },
+
+    setPeriod(newPeriod: string) {
+      currentPeriod = newPeriod;
+      drawingAdapter?.setPeriod(newPeriod);
+      if (onDataReload) {
+        onDataReload(newPeriod);
+      }
+    },
+
+    getPeriod() {
+      return currentPeriod;
+    },
+
+    destroy() {
+      drawingAdapter?.dispose();
+      drawingAdapter = null;
+      drawingApi = null;
+      realtimeFeed.detach();
+      chart.remove();
+    },
+  };
+}
+
+// ── Mock 数据生成 ──
+
+export function generateMockData(
+  count = 500,
+  startPrice = 42000,
+  period: string = '1h',
+): CandlestickRawData[] {
+  const intervalMs = getPeriodInterval(period) * 1000; // 秒→毫秒
+  const now = Date.now();
+  const result: CandlestickRawData[] = [];
+  let prevClose = startPrice;
+
+  // 根据周期调整波动幅度（更大周期 = 更大波动）
+  const volatilityMultiplier = Math.sqrt(intervalMs / 3_600_000); // 相对于1h的倍数
+
+  for (let i = 0; i < count; i++) {
+    const time = now - (count - i) * intervalMs;
+    const change = (Math.random() - 0.48) * prevClose * 0.02 * volatilityMultiplier;
+    const open = prevClose;
+    const close = open + change;
+    const high = Math.max(open, close) * (1 + Math.random() * 0.01);
+    const low = Math.min(open, close) * (1 - Math.random() * 0.01);
+    const volume = Math.floor(500 + Math.random() * 4500 * volatilityMultiplier);
+    result.push({ time, open, high, low, close, volume });
+    prevClose = close;
+  }
+  return result;
+}
+
+// ── 绘图工具注册表导出 ──
+
+export const drawingTools = DRAWING_TOOLS;
+export const drawingCategories = CATEGORY_LABELS;
+export function getDrawingToolsByCategory() {
+  return getToolsByCategory();
+}
+
+// 导出全局命名空间
+export default {
+  create,
+  generateMockData,
+  drawingTools: DRAWING_TOOLS,
+  drawingCategories: CATEGORY_LABELS,
+  getDrawingToolsByCategory,
+};

package/src/store/useChartStore.ts

@@ -0,0 +1,101 @@
+import { create } from 'zustand';
+import type { LayoutMode, PanelConfig } from '../types/index.js';
+import { SeriesType } from '../types/index.js';
+
+export interface ChartState {
+  activePairId: string | null;
+  activeProduct: string | null;
+  activePeriod: string;
+  activeSeriesType: SeriesType;
+  activeTheme: 'dark' | 'light';
+  layoutMode: LayoutMode;
+  panels: PanelConfig[];
+  /** 当前活跃面板 ID（全局工具栏操作的目标） */
+  activePanelId: string | null;
+
+  /** 每个面板的独立周期状态：panelId → period */
+  panelPeriods: Record<string, string>;
+
+  setPair: (pairId: string, product: string) => void;
+  setPeriod: (period: string) => void;
+  setSeriesType: (type: SeriesType) => void;
+  setTheme: (theme: 'dark' | 'light') => void;
+  setLayoutMode: (mode: LayoutMode) => void;
+  updatePanel: (index: number, config: Partial<PanelConfig>) => void;
+  /** 设置活跃面板 */
+  setActivePanel: (panelId: string) => void;
+
+  /** 设置当前活跃面板的周期（多面板写入panelPeriods，单面板fallback全局） */
+  setActivePanelPeriod: (period: string) => void;
+  /** 设置指定面板的周期 */
+  setPanelPeriod: (panelId: string, period: string) => void;
+}
+
+// ── 独立 Selector 函数（避免内联函数导致不必要的重渲染） ──
+
+/** 获取指定面板的周期（面板级 fallback 全局） */
+export const selectPanelPeriod = (panelId?: string) =>
+  (s: ChartState): string =>
+    panelId ? (s.panelPeriods[panelId] ?? s.activePeriod) : s.activePeriod;
+
+/** 获取活跃面板的周期（用于 GlobalToolbar 高亮） */
+export const selectActivePanelPeriod = (s: ChartState): string =>
+  s.activePanelId
+    ? (s.panelPeriods[s.activePanelId] ?? s.activePeriod)
+    : s.activePeriod;
+
+export const useChartStore = create<ChartState>((set) => ({
+  activePairId: null,
+  activeProduct: null,
+  activePeriod: '1h',
+  activeSeriesType: SeriesType.Candlestick,
+  activeTheme: 'dark',
+  layoutMode: '1' as LayoutMode,
+  panels: [],
+  activePanelId: null,
+  panelPeriods: {},
+
+  setPair: (pairId, product) =>
+    set({ activePairId: pairId, activeProduct: product }),
+
+  setPeriod: (period) => set({ activePeriod: period }),
+
+  setSeriesType: (type) => set({ activeSeriesType: type }),
+
+  setTheme: (theme) => set({ activeTheme: theme }),
+
+  setLayoutMode: (mode) => set({ layoutMode: mode }),
+
+  updatePanel: (index, config) =>
+    set((state) => {
+      const panels = [...state.panels];
+      if (panels[index]) {
+        panels[index] = { ...panels[index], ...config };
+      }
+      return { panels };
+    }),
+
+  setActivePanel: (panelId) => set({ activePanelId: panelId }),
+
+  /**
+   * 设置当前活跃面板的周期
+   * - 有 activePanelId：写入 panelPeriods[activePanelId]
+   * - 无 activePanelId：fallback 到全局 activePeriod（单面板兼容）
+   * - 同时更新 activePeriod（保证 GlobalToolbar 高亮正确）
+   */
+  setActivePanelPeriod: (period) => set((state) => {
+    const panelId = state.activePanelId;
+    if (!panelId) {
+      return { activePeriod: period };
+    }
+    return {
+      panelPeriods: { ...state.panelPeriods, [panelId]: period },
+      activePeriod: period,
+    };
+  }),
+
+  /** 设置指定面板的周期 */
+  setPanelPeriod: (panelId, period) => set((state) => ({
+    panelPeriods: { ...state.panelPeriods, [panelId]: period },
+  })),
+}));

package/src/store/useDrawingStore.ts

@@ -0,0 +1,135 @@
+import { create } from 'zustand';
+import type { DrawingToolType, DrawingStyleConfig, DrawingToolConfig } from '../types/index.js';
+import type { IDrawing } from 'lightweight-charts-drawing';
+import { DrawingToolCategory } from '../types/index.js';
+
+export interface DrawingState {
+  /** 当前激活的绘图工具 */
+  activeTool: DrawingToolType;
+  /** 绘图数量（用于显示 badge） */
+  drawingCount: number;
+  /** 当前选中的绘图 ID */
+  selectedDrawingId: string | null;
+  /** 当前选中的绘图类型 */
+  selectedDrawingType: string | null;
+  /** 磁铁吸附开关 */
+  magnetEnabled: boolean;
+  /** 是否正在绘图 */
+  isDrawing: boolean;
+  /** 显示属性面板 */
+  showPropertyPanel: boolean;
+  /** 属性面板是否被双击锁定打开 */
+  isPropertyPanelPinned: boolean;
+  /** 工具栏方向 */
+  toolbarOrientation: 'vertical' | 'horizontal';
+  /** 工具栏自定义位置 */
+  toolbarPosition: { x: number; y: number } | null;
+  /** 工具栏是否正在拖拽 */
+  isToolbarDragging: boolean;
+  /** 选中绘图的样式快照（用于属性面板编辑） */
+  selectedStyle: DrawingStyleConfig | null;
+  /** 绘图工具栏是否展开 */
+  drawingToolbarOpen: boolean;
+  /** 每分类的展开状态 */
+  expandedCategory: DrawingToolCategory | null;
+  /** 每分类当前选中的工具（用于显示分类行的 icon） */
+  categoryActiveTools: Partial<Record<DrawingToolCategory, DrawingToolType>>;
+  /** ★ V2: 当前绘图目标 pane index（0 = 主图） */
+  currentPaneIndex: number;
+
+  // Actions
+  setActiveTool: (tool: DrawingToolType) => void;
+  setDrawingCount: (count: number) => void;
+  selectDrawing: (id: string | null, style?: DrawingStyleConfig | null, type?: string | null) => void;
+  setMagnetEnabled: (enabled: boolean) => void;
+  setIsDrawing: (drawing: boolean) => void;
+  setShowPropertyPanel: (show: boolean) => void;
+  setIsPropertyPanelPinned: (pinned: boolean) => void;
+  setToolbarOrientation: (o: 'vertical' | 'horizontal') => void;
+  setToolbarPosition: (pos: { x: number; y: number } | null) => void;
+  setIsToolbarDragging: (dragging: boolean) => void;
+  setSelectedStyle: (style: DrawingStyleConfig | null) => void;
+  setDrawingToolbarOpen: (open: boolean) => void;
+  /** 设置展开的分类 */
+  setExpandedCategory: (category: DrawingToolCategory | null) => void;
+  /** 设置分类当前工具 */
+  setCategoryActiveTool: (category: DrawingToolCategory, tool: DrawingToolType) => void;
+  /** ★ V2: 设置当前 pane index */
+  setCurrentPaneIndex: (index: number) => void;
+  clearAll: () => void;
+}
+
+export const useDrawingStore = create<DrawingState>((set, get) => ({
+  activeTool: 'cursor',
+  drawingCount: 0,
+  selectedDrawingId: null,
+  selectedDrawingType: null,
+  magnetEnabled: true,
+  isDrawing: false,
+  showPropertyPanel: false,
+  isPropertyPanelPinned: false,
+  toolbarOrientation: 'vertical',
+  toolbarPosition: null,
+  isToolbarDragging: false,
+  selectedStyle: null,
+  drawingToolbarOpen: true,
+  expandedCategory: null,
+  categoryActiveTools: {},
+  currentPaneIndex: 0,
+
+  setActiveTool: (tool) =>
+    set({ activeTool: tool }),
+
+  setDrawingCount: (count) =>
+    set({ drawingCount: count }),
+
+  selectDrawing: (id, style, type) =>
+    set({
+      selectedDrawingId: id,
+      selectedDrawingType: type ?? null,
+      showPropertyPanel: id !== null ? (get().isPropertyPanelPinned ?? false) : false,
+      selectedStyle: style ?? null,
+    }),
+
+  setMagnetEnabled: (enabled) =>
+    set({ magnetEnabled: enabled }),
+
+  setIsDrawing: (drawing) =>
+    set({ isDrawing: drawing }),
+
+  setShowPropertyPanel: (show) =>
+    set({ showPropertyPanel: show }),
+
+  setIsPropertyPanelPinned: (pinned) => set({ isPropertyPanelPinned: pinned }),
+  setToolbarOrientation: (o) => set({ toolbarOrientation: o }),
+  setToolbarPosition: (pos) => set({ toolbarPosition: pos }),
+  setIsToolbarDragging: (dragging) => set({ isToolbarDragging: dragging }),
+
+  setSelectedStyle: (style) =>
+    set({ selectedStyle: style }),
+
+  setDrawingToolbarOpen: (open) =>
+    set({ drawingToolbarOpen: open }),
+
+  setExpandedCategory: (category) => set({ expandedCategory: category }),
+
+  setCategoryActiveTool: (category, tool) =>
+    set((state) => ({
+      categoryActiveTools: { ...state.categoryActiveTools, [category]: tool },
+    })),
+
+  setCurrentPaneIndex: (index) => set({ currentPaneIndex: index }),
+
+  clearAll: () =>
+    set({
+      activeTool: 'cursor',
+      drawingCount: 0,
+      selectedDrawingId: null,
+      selectedDrawingType: null,
+      isDrawing: false,
+      showPropertyPanel: false,
+      isPropertyPanelPinned: false,
+      selectedStyle: null,
+      currentPaneIndex: 0,
+    }),
+}));