@quantlife/qlchart 0.0.1

package/src/components/context-menu/ChartContextMenu.tsx

@@ -0,0 +1,139 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { DrawingToolType } from '../../types/index.js';
+import { DRAWING_TOOLS } from '../../plugins/drawing/DrawingToolRegistry.js';
+
+export interface ChartContextMenuProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  recentTools?: DrawingToolType[];
+  onToolSelect?: (tool: DrawingToolType) => void;
+  onDeleteDrawing?: () => void;
+  onLockDrawing?: () => void;
+  onHideDrawing?: () => void;
+  hasSelectedDrawing?: boolean;
+}
+
+interface MenuPosition {
+  x: number;
+  y: number;
+}
+
+export function ChartContextMenu({
+  containerRef,
+  recentTools = [],
+  onToolSelect,
+  onDeleteDrawing,
+  onLockDrawing,
+  onHideDrawing,
+  hasSelectedDrawing = false,
+}: ChartContextMenuProps) {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState<MenuPosition>({ x: 0, y: 0 });
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      setPosition({ x: e.clientX, y: e.clientY });
+      setVisible(true);
+    },
+    [],
+  );
+
+  const handleClick = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('contextmenu', handleContextMenu);
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      container.removeEventListener('contextmenu', handleContextMenu);
+      document.removeEventListener('click', handleClick);
+    };
+  }, [containerRef, handleContextMenu, handleClick]);
+
+  if (!visible) return null;
+
+  // 最近使用的工具（最多5个）
+  const recentToolConfigs = recentTools
+    .map((t) => DRAWING_TOOLS.find((d) => d.type === t))
+    .filter(Boolean)
+    .slice(0, 5);
+
+  return (
+    <div
+      ref={menuRef}
+      className="qlchart-context-menu"
+      style={{ left: position.x, top: position.y }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {hasSelectedDrawing && (
+        <>
+          <button
+            className="qlchart-context-menu-item"
+            onClick={() => {
+              onDeleteDrawing?.();
+              setVisible(false);
+            }}
+          >
+            🗑️ 删除绘图
+          </button>
+          <button
+            className="qlchart-context-menu-item"
+            onClick={() => {
+              onLockDrawing?.();
+              setVisible(false);
+            }}
+          >
+            🔒 锁定
+          </button>
+          <button
+            className="qlchart-context-menu-item"
+            onClick={() => {
+              onHideDrawing?.();
+              setVisible(false);
+            }}
+          >
+            👁️ 隐藏
+          </button>
+          <div className="qlchart-context-menu-divider" />
+        </>
+      )}
+
+      {recentToolConfigs.length > 0 && (
+        <>
+          <div className="qlchart-context-menu-label">最近使用</div>
+          {recentToolConfigs.map((tool) =>
+            tool ? (
+              <button
+                key={tool.type}
+                className="qlchart-context-menu-item"
+                onClick={() => {
+                  onToolSelect?.(tool.type);
+                  setVisible(false);
+                }}
+              >
+                {tool.icon} {tool.label}
+              </button>
+            ) : null,
+          )}
+          <div className="qlchart-context-menu-divider" />
+        </>
+      )}
+
+      <button
+        className="qlchart-context-menu-item"
+        onClick={() => {
+          onToolSelect?.('cursor');
+          setVisible(false);
+        }}
+      >
+        👆 光标
+      </button>
+    </div>
+  );
+}

package/src/components/context-menu/index.ts

@@ -0,0 +1,2 @@
+export { ChartContextMenu } from './ChartContextMenu.js';
+export type { ChartContextMenuProps } from './ChartContextMenu.js';

package/src/components/drawing/DrawingModule.tsx

@@ -0,0 +1,36 @@
+import { useDrawingStore } from '../../store/useDrawingStore.js';
+import { DrawingToolbar } from './DrawingToolbar.js';
+
+export interface DrawingModuleProps {
+  /** 是否显示属性面板（默认true） */
+  showPropertyPanel?: boolean;
+  /** 自定义 className */
+  className?: string;
+}
+
+/**
+ * 绘图模块容器组件
+ *
+ * 独立管理绘图工具栏的渲染。
+ * 渲染位置由父组件控制（通常在QLChartPanel中）。
+ *
+ * 使用方式：
+ * ```tsx
+ * <DrawingModule />
+ * ```
+ */
+export function DrawingModule({
+  showPropertyPanel = true,
+  className,
+}: DrawingModuleProps) {
+  const drawingToolbarOpen = useDrawingStore((s) => s.drawingToolbarOpen);
+
+  return (
+    <>
+      {/* 绘图工具栏 - 竖排，渲染在图表区域 */}
+      {drawingToolbarOpen && (
+        <DrawingToolbar />
+      )}
+    </>
+  );
+}

package/src/components/drawing/DrawingPropertyPanel.tsx

@@ -0,0 +1,347 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDrawingStore } from '../../store/useDrawingStore.js';
+import { getPropertyTemplate } from '../../plugins/drawing/DrawingPropertyTemplates.js';
+import { lineStyleToDash } from '../../plugins/drawing/lineStyleMap.js';
+import { composeRgbaColor, rgbaToHex } from '../../plugins/drawing/colorUtils.js';
+import type { DrawingStyleConfig, FibLevelItem, PropertyField } from '../../types/index.js';
+
+export interface DrawingPropertyPanelProps {
+  onStyleChange?: (id: string, style: Partial<DrawingStyleConfig>) => void;
+  onDelete?: (id: string) => void;
+}
+
+export function DrawingPropertyPanel({ onStyleChange, onDelete }: DrawingPropertyPanelProps) {
+  const selectedDrawingId = useDrawingStore((s) => s.selectedDrawingId);
+  const selectedDrawingType = useDrawingStore((s) => s.selectedDrawingType);
+  const selectedStyle = useDrawingStore((s) => s.selectedStyle);
+  const showPropertyPanel = useDrawingStore((s) => s.showPropertyPanel);
+  const setShowPropertyPanel = useDrawingStore((s) => s.setShowPropertyPanel);
+  const setSelectedStyle = useDrawingStore((s) => s.setSelectedStyle);
+
+  // Bug3修复：draft 状态管理
+  const [draftStyle, setDraftStyle] = useState<DrawingStyleConfig | null>(null);
+  const [isDirty, setIsDirty] = useState(false);
+  // Bug4修复：删除确认 Modal
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+
+  useEffect(() => {
+    setDraftStyle(null);
+    setIsDirty(false);
+  }, [selectedDrawingId]);
+
+  const editStyle = draftStyle ?? selectedStyle;
+
+  const handleFieldChange = useCallback(
+    (field: PropertyField, value: string | number | boolean) => {
+      if (!selectedDrawingId || !editStyle) return;
+      const updated = { ...editStyle, [field.key]: value };
+      setDraftStyle(updated);
+      setIsDirty(true);
+
+      // 视觉属性：实时预览
+      const VISUAL_FIELDS = ['lineColor', 'lineWidth', 'fillColor', 'fillOpacity'];
+      if (VISUAL_FIELDS.includes(field.key)) {
+        const patch: Partial<DrawingStyleConfig> = { [field.key]: value } as any;
+
+        if (field.key === 'fillColor' || field.key === 'fillOpacity') {
+          const rawColor = field.key === 'fillColor'
+            ? String(value)
+            : rgbaToHex(editStyle.fillColor ?? '#2962ff');
+          const opacity = field.key === 'fillOpacity'
+            ? Number(value)
+            : (editStyle.fillOpacity ?? 0.2);
+          patch.fillColor = composeRgbaColor(rawColor, opacity);
+          patch.fillOpacity = opacity;
+        }
+
+        onStyleChange?.(selectedDrawingId, patch);
+      }
+      // lineStyle 也需要实时预览
+      if (field.key === 'lineStyle') {
+        const patch: Partial<DrawingStyleConfig> = {
+          lineStyle: value as string,
+          lineDash: lineStyleToDash(value as string),
+        };
+        onStyleChange?.(selectedDrawingId, patch);
+      }
+      // text 字段：不实时预览，需要保存按钮
+      // ★ Req3：fibLevels 也需要实时预览
+      if (field.key === 'fibLevels') {
+        const patch: Partial<DrawingStyleConfig> = { fibLevels: String(value) };
+        onStyleChange?.(selectedDrawingId, patch);
+      }
+    },
+    [selectedDrawingId, editStyle, onStyleChange],
+  );
+
+  const handleSave = useCallback(() => {
+    if (!selectedDrawingId || !draftStyle) return;
+    // 提交 text 字段
+    if ((draftStyle.text ?? '') !== (selectedStyle?.text ?? '')) {
+      onStyleChange?.(selectedDrawingId, { text: draftStyle.text ?? '' });
+    }
+    setSelectedStyle(draftStyle);
+    setDraftStyle(null);
+    setIsDirty(false);
+  }, [selectedDrawingId, draftStyle, selectedStyle, onStyleChange, setSelectedStyle]);
+
+  const handleCancel = useCallback(() => {
+    setDraftStyle(null);
+    setIsDirty(false);
+    // 回退实时预览的改动
+    if (selectedStyle && selectedDrawingId) {
+      const patch: Partial<DrawingStyleConfig> = {};
+      Object.assign(patch, selectedStyle);
+      if (selectedStyle.lineStyle) {
+        patch.lineDash = lineStyleToDash(selectedStyle.lineStyle);
+      }
+      onStyleChange?.(selectedDrawingId, patch);
+    }
+  }, [selectedStyle, onStyleChange, selectedDrawingId]);
+
+  const handleDelete = useCallback(() => {
+    // ★ Bug4修复：改为打开确认 Modal，而非直接执行删除
+    setDeleteConfirmOpen(true);
+  }, []);
+
+  const handleDeleteConfirm = useCallback(() => {
+    if (!selectedDrawingId) return;
+    onDelete?.(selectedDrawingId);
+    setShowPropertyPanel(false);
+    setDeleteConfirmOpen(false);
+  }, [selectedDrawingId, onDelete, setShowPropertyPanel]);
+
+  const handleDeleteCancel = useCallback(() => {
+    setDeleteConfirmOpen(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setShowPropertyPanel(false);
+  }, [setShowPropertyPanel]);
+
+  if (!showPropertyPanel || !selectedDrawingId || !editStyle) {
+    return null;
+  }
+
+  // ★ D12: 动态获取属性模板
+  const template = getPropertyTemplate(selectedDrawingType ?? '');
+
+  return (
+    <>
+    {createPortal(
+      <div className="qlchart-modal-overlay" onClick={handleClose}>
+        <div
+          className="qlchart-drawing-property-modal"
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-modal="true"
+          aria-label="绘图属性编辑"
+        >
+          <div className="qlchart-drawing-pp-header">
+            <span>属性编辑{selectedDrawingType ? ` · ${selectedDrawingType}` : ''}</span>
+            <button className="qlchart-drawing-pp-close" onClick={handleClose}>✕</button>
+          </div>
+
+          {/* ★ D12: 动态渲染属性控件 */}
+          <div className="qlchart-drawing-pp-body">
+            {template.fields.map((field) => (
+              <div key={field.key} className="qlchart-drawing-pp-row">
+                <label>{field.label}</label>
+                {renderField(field, editStyle, handleFieldChange)}
+              </div>
+            ))}
+          </div>
+
+          <div className="qlchart-drawing-pp-actions">
+            {isDirty && (
+              <div className="qlchart-drawing-pp-edit-actions">
+                <button className="qlchart-drawing-pp-save" onClick={handleSave}>
+                  ✓ 保存
+                </button>
+                <button className="qlchart-drawing-pp-cancel" onClick={handleCancel}>
+                  ✕ 取消
+                </button>
+              </div>
+            )}
+            <button className="qlchart-drawing-pp-delete" onClick={handleDelete}>
+              🗑️ 删除
+            </button>
+          </div>
+        </div>
+      </div>,
+      document.body,
+    )}
+    {/* ★ Bug4修复：删除确认 Modal，用 Portal 渲染到 document.body */}
+    {deleteConfirmOpen && createPortal(
+      <div className="qlchart-confirm-overlay" onClick={handleDeleteCancel}>
+        <div className="qlchart-confirm-modal" onClick={(e) => e.stopPropagation()}>
+          <div className="qlchart-confirm-icon">⚠️</div>
+          <div className="qlchart-confirm-title">确认删除</div>
+          <div className="qlchart-confirm-desc">确定要删除这个绘图吗？此操作不可撤销。</div>
+          <div className="qlchart-confirm-actions">
+            <button className="qlchart-confirm-cancel" onClick={handleDeleteCancel}>取消</button>
+            <button className="qlchart-confirm-ok" onClick={handleDeleteConfirm}>🗑️ 删除</button>
+          </div>
+        </div>
+      </div>,
+      document.body,
+    )}
+    </>
+  );
+}
+
+/** 根据字段类型动态渲染控件 */
+function renderField(
+  field: PropertyField,
+  style: DrawingStyleConfig,
+  onChange: (field: PropertyField, value: string | number | boolean) => void,
+) {
+  const value = (style as any)[field.key] ?? field.default;
+
+  switch (field.type) {
+    case 'color':
+      // Bug5修复：确保 color input 始终收到 hex 格式
+      const colorValue = field.key === 'fillColor'
+        ? rgbaToHex(String(value))
+        : String(value);
+      return (
+        <input
+          type="color"
+          value={colorValue}
+          onChange={(e) => onChange(field, e.target.value)}
+        />
+      );
+
+    case 'range':
+      return (
+        <>
+          <input
+            type="range"
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            value={Number(value)}
+            onChange={(e) => onChange(field, Number(e.target.value))}
+          />
+          <span className="qlchart-drawing-pp-value">
+            {field.key === 'fillOpacity' ? `${Math.round(Number(value) * 100)}%` : value}
+          </span>
+        </>
+      );
+
+    case 'toggle':
+      return (
+        <input
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(e) => onChange(field, e.target.checked)}
+        />
+      );
+
+    case 'select':
+      return (
+        <select
+          value={String(value)}
+          onChange={(e) => onChange(field, e.target.value)}
+          className="qlchart-drawing-pp-select"
+        >
+          {field.options?.map((opt: { label: string; value: string }) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      );
+
+    case 'text':
+      return (
+        <input
+          type="text"
+          value={String(value)}
+          placeholder={field.label}
+          onChange={(e) => onChange(field, e.target.value)}
+          className="qlchart-drawing-pp-text"
+        />
+      );
+
+    case 'multiselect':
+      return (
+        <input
+          type="text"
+          value={String(value)}
+          placeholder={field.label}
+          onChange={(e) => onChange(field, e.target.value)}
+          className="qlchart-drawing-pp-text"
+        />
+      );
+
+    case 'fib-levels':
+      return <FibLevelsEditor field={field} style={style} onChange={onChange} />;
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * ★ Req3：斐波那契级别编辑器
+ * 支持每条线的显隐切换和百分比值修改
+ */
+function FibLevelsEditor({
+  field,
+  style,
+  onChange,
+}: {
+  field: PropertyField;
+  style: DrawingStyleConfig;
+  onChange: (field: PropertyField, value: string | number | boolean) => void;
+}) {
+  // 解析当前级别列表
+  const levels: FibLevelItem[] = useMemo(() => {
+    // 优先从 style 读取（已修改的值）
+    if (style.fibLevels) {
+      try {
+        return JSON.parse(style.fibLevels);
+      } catch {
+        // fallthrough to field defaults
+      }
+    }
+    // 回退到字段默认值
+    return field.fibLevels ?? [];
+  }, [style.fibLevels, field.fibLevels]);
+
+  const handleToggle = useCallback((idx: number, visible: boolean) => {
+    const updated = [...levels];
+    updated[idx] = { ...updated[idx], visible };
+    onChange(field, JSON.stringify(updated));
+  }, [levels, field, onChange]);
+
+  const handleValueChange = useCallback((idx: number, value: number) => {
+    const updated = [...levels];
+    updated[idx] = { ...updated[idx], value };
+    onChange(field, JSON.stringify(updated));
+  }, [levels, field, onChange]);
+
+  return (
+    <div className="qlchart-fib-levels-editor">
+      {levels.map((level, idx) => (
+        <div key={idx} className="qlchart-fib-level-row">
+          <input
+            type="checkbox"
+            checked={level.visible}
+            onChange={(e) => handleToggle(idx, e.target.checked)}
+          />
+          <input
+            type="number"
+            value={level.value}
+            step={0.001}
+            onChange={(e) => handleValueChange(idx, parseFloat(e.target.value) || 0)}
+            className="qlchart-fib-level-input"
+          />
+          <span className="qlchart-fib-level-label">
+            {(level.value * 100).toFixed(1)}%
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}