@agions/taroviz 1.11.1 → 2.0.3

package/src/editor/hooks/useThemeEditorState.ts

@@ -0,0 +1,201 @@
+/**
+ * 主题编辑器共享状态管理 Hook
+ * 提取 ThemeEditor 和 EnhancedThemeEditor 的公共状态逻辑
+ */
+import { useState, useEffect, useCallback } from 'react';
+import type { ThemeOptions } from '../../themes';
+import { getRegisteredThemes, registerTheme, switchTheme } from '../../themes';
+
+export interface UseThemeEditorStateOptions {
+  selectedTheme?: string;
+  enableLivePreview?: boolean;
+  onThemeChange?: (theme: ThemeOptions) => void;
+}
+
+export interface UseThemeEditorStateReturn {
+  /** 当前主题 */
+  currentTheme: ThemeOptions;
+  /** 已注册的主题列表 */
+  registeredThemes: ThemeOptions[];
+  /** 颜色列表 */
+  colors: string[];
+  /** 背景色 */
+  backgroundColor: string;
+  /** 文本颜色 */
+  textColor: string;
+  /** 深色模式 */
+  darkMode: boolean;
+  /** 是否处于编辑模式 */
+  isEditing: boolean;
+  /** 新主题名称 */
+  newThemeName: string;
+  /** 设置当前主题 */
+  setCurrentTheme: (theme: ThemeOptions) => void;
+  /** 更新主题（部分更新） */
+  updateTheme: (updates: Partial<ThemeOptions>) => void;
+  /** 处理颜色变化 */
+  handleColorChange: (index: number, color: string) => void;
+  /** 添加颜色 */
+  handleAddColor: () => void;
+  /** 删除颜色 */
+  handleRemoveColor: (index: number) => void;
+  /** 开始编辑新主题 */
+  handleStartEdit: () => void;
+  /** 设置新主题名称 */
+  setNewThemeName: (name: string) => void;
+  /** 保存主题 */
+  saveTheme: () => ThemeOptions;
+  /** 取消编辑 */
+  cancelEdit: () => void;
+}
+
+/** 带有必填字段的默认主题 */
+const DEFAULT_THEME: Required<
+  Pick<ThemeOptions, 'colors' | 'backgroundColor' | 'textColor' | 'darkMode'>
+> = {
+  colors: ['#1890ff'],
+  backgroundColor: '#ffffff',
+  textColor: '#333333',
+  darkMode: false,
+};
+
+/**
+ * 主题编辑器状态管理 Hook
+ */
+export function useThemeEditorState(
+  options: UseThemeEditorStateOptions = {}
+): UseThemeEditorStateReturn {
+  const { selectedTheme, enableLivePreview = true, onThemeChange } = options;
+
+  const registeredThemes = getRegisteredThemes();
+
+  // 计算初始主题
+  const getInitialTheme = useCallback((): ThemeOptions => {
+    if (selectedTheme) {
+      const theme = registeredThemes.find((t) => t.name === selectedTheme);
+      if (theme) return theme;
+    }
+    return registeredThemes[0] || DEFAULT_THEME;
+  }, [selectedTheme, registeredThemes]);
+
+  const [currentTheme, setCurrentThemeState] = useState<ThemeOptions>(getInitialTheme);
+  const [newThemeName, setNewThemeName] = useState<string>('');
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+
+  // 派生状态
+  const colors: string[] = currentTheme.colors || DEFAULT_THEME.colors;
+  const backgroundColor: string = currentTheme.backgroundColor || DEFAULT_THEME.backgroundColor;
+  const textColor: string = currentTheme.textColor || DEFAULT_THEME.textColor;
+  const darkMode: boolean = currentTheme.darkMode ?? DEFAULT_THEME.darkMode;
+
+  // 当外部 selectedTheme 变化时同步
+  useEffect(() => {
+    if (selectedTheme) {
+      const theme = registeredThemes.find((t) => t.name === selectedTheme);
+      if (theme) {
+        setCurrentThemeState(theme);
+      }
+    }
+  }, [selectedTheme, registeredThemes]);
+
+  // 设置当前主题并触发回调
+  const setCurrentTheme = useCallback(
+    (theme: ThemeOptions) => {
+      setCurrentThemeState(theme);
+      if (enableLivePreview) {
+        switchTheme(theme);
+      }
+      onThemeChange?.(theme);
+    },
+    [enableLivePreview, onThemeChange]
+  );
+
+  // 更新主题（部分更新）
+  const updateTheme = useCallback(
+    (updates: Partial<ThemeOptions>) => {
+      const updated = { ...currentTheme, ...updates };
+      setCurrentThemeState(updated);
+      if (enableLivePreview) {
+        switchTheme(updated);
+      }
+      onThemeChange?.(updated);
+    },
+    [currentTheme, enableLivePreview, onThemeChange]
+  );
+
+  // 处理颜色变化
+  const handleColorChange = useCallback(
+    (index: number, color: string) => {
+      const newColors = [...colors];
+      newColors[index] = color;
+      updateTheme({ colors: newColors });
+    },
+    [colors, updateTheme]
+  );
+
+  // 添加颜色
+  const handleAddColor = useCallback(() => {
+    updateTheme({ colors: [...colors, '#000000'] });
+  }, [colors, updateTheme]);
+
+  // 删除颜色
+  const handleRemoveColor = useCallback(
+    (index: number) => {
+      if (colors.length <= 1) return;
+      const newColors = colors.filter((_, i) => i !== index);
+      updateTheme({ colors: newColors });
+    },
+    [colors, updateTheme]
+  );
+
+  // 开始编辑新主题
+  const handleStartEdit = useCallback(() => {
+    setIsEditing(true);
+    setNewThemeName('');
+  }, []);
+
+  // 取消编辑
+  const cancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setNewThemeName('');
+  }, []);
+
+  // 保存主题
+  const saveTheme = useCallback((): ThemeOptions => {
+    const name = isEditing && newThemeName ? newThemeName : currentTheme.name || 'custom';
+    const themeToSave: ThemeOptions = {
+      ...currentTheme,
+      name,
+      colors,
+      backgroundColor,
+      textColor,
+      darkMode,
+    };
+
+    registerTheme(name, themeToSave);
+    setIsEditing(false);
+    setNewThemeName('');
+
+    return themeToSave;
+  }, [isEditing, newThemeName, currentTheme, colors, backgroundColor, textColor, darkMode]);
+
+  return {
+    currentTheme,
+    registeredThemes,
+    colors,
+    backgroundColor,
+    textColor,
+    darkMode,
+    isEditing,
+    newThemeName,
+    setCurrentTheme,
+    updateTheme,
+    handleColorChange,
+    handleAddColor,
+    handleRemoveColor,
+    handleStartEdit,
+    setNewThemeName,
+    saveTheme,
+    cancelEdit,
+  };
+}

package/src/editor/index.ts

@@ -3,8 +3,16 @@
  * 提供可视化的主题编辑功能
  */
 import ThemeEditor from './ThemeEditor';
-import type { ThemeEditorProps } from './ThemeEditor';
+import EnhancedThemeEditor from './EnhancedThemeEditor';
 
-export { ThemeEditor, ThemeEditorProps };
+export type { ThemeEditorProps } from './ThemeEditor';
+export type { EnhancedThemeEditorProps, ThemeExportOptions } from './EnhancedThemeEditor';
+export { useThemeEditorState } from './hooks/useThemeEditorState';
+export type {
+  UseThemeEditorStateOptions,
+  UseThemeEditorStateReturn,
+} from './hooks/useThemeEditorState';
+
+export { ThemeEditor, EnhancedThemeEditor };
 
 export default ThemeEditor;

package/src/hooks/__tests__/index.test.tsx

@@ -249,7 +249,9 @@ describe('React Hooks', () => {
       );
 
       // getThemeByName('default') returns the defaultTheme object
-      expect(result.current).toEqual(expect.objectContaining({ backgroundColor: '#ffffff', textColor: '#333333' }));
+      expect(result.current).toEqual(
+        expect.objectContaining({ backgroundColor: '#ffffff', textColor: '#333333' })
+      );
     });
 
     it('should return original theme when darkMode is false', () => {

package/src/hooks/chartConnectHelpers.ts

@@ -0,0 +1,341 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * useChartConnect 辅助函数
+ * 将 useChartConnect 中的逻辑拆分为独立函数，提高代码可维护性
+ */
+
+import type {
+  ChartInstance,
+  ConnectEventType,
+  ChartPointerEventParams,
+  ChartSelectEventParams,
+  ChartDataZoomEventParams,
+  EventHandler,
+} from './types';
+
+// ============================================================================
+// 导出类型
+// ============================================================================
+
+export type {
+  ConnectEventType,
+  ChartPointerEventParams,
+  ChartSelectEventParams,
+  ChartDataZoomEventParams,
+} from './types';
+
+// ============================================================================
+// 内部类型
+// ============================================================================
+
+/** 图表联动项 */
+export interface ChartConnectItem {
+  instance: ChartInstance;
+  id: string;
+}
+
+/** 事件处理器映射 */
+export type EventHandlersMap = Map<string, Map<ConnectEventType, EventHandler>>;
+
+// ============================================================================
+// 事件处理器创建
+// ============================================================================
+
+/**
+ * 创建联动事件处理器
+ */
+export function createConnectHandler(
+  sourceId: string,
+
+  eventType: ConnectEventType,
+  disabled: boolean,
+
+  eventFilter: ((eventType: ConnectEventType, params: unknown) => boolean) | undefined,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>,
+  optionsRef: React.MutableRefObject<{
+    onConnect?: (
+      sourceId: string,
+      targetId: string,
+
+      payload: { eventType: ConnectEventType; params: unknown }
+    ) => void;
+  }>
+): EventHandler {
+  return (params: unknown) => {
+    if (disabled) return;
+
+    // 应用事件过滤器
+    if (eventFilter && !eventFilter(eventType, params)) {
+      return;
+    }
+
+    // 分发联动事件到所有其他图表
+    dispatchToOthers(sourceId, eventType, params, chartsRef);
+
+    // 触发回调
+    const currentOptions = optionsRef.current;
+    if (currentOptions.onConnect) {
+      chartsRef.current.forEach((item, targetId) => {
+        if (targetId !== sourceId) {
+          currentOptions.onConnect?.(sourceId, targetId, { eventType, params });
+        }
+      });
+    }
+  };
+}
+
+/**
+ * 分发事件到其他图表
+ */
+export function dispatchToOthers(
+  sourceId: string,
+
+  eventType: ConnectEventType,
+  params: unknown,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>
+): void {
+  chartsRef.current.forEach((item, targetId) => {
+    if (targetId === sourceId) return;
+
+    try {
+      switch (eventType) {
+        case 'click':
+        case 'hover': {
+          const p = params as ChartPointerEventParams;
+          item.instance.dispatchAction?.({
+            type: 'showTip',
+            seriesIndex: p.seriesIndex,
+            dataIndex: p.dataIndex,
+          });
+          break;
+        }
+        case 'select': {
+          const p = params as ChartSelectEventParams;
+          item.instance.dispatchAction?.({
+            type: 'toggleSelect',
+            seriesIndex: p.seriesIndex,
+            dataIndex: p.dataIndex,
+          });
+          break;
+        }
+        case 'dataZoom': {
+          const p = params as ChartDataZoomEventParams;
+          item.instance.dispatchAction?.({
+            type: 'dataZoom',
+            start: p.start,
+            end: p.end,
+            dataZoomIndex: p.dataZoomIndex,
+            dataZoomIndexs: p.dataZoomIndexs,
+          });
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (e) {
+      console.warn(`[useChartConnect] Failed to dispatch ${eventType} to ${targetId}:`, e);
+    }
+  });
+}
+
+// ============================================================================
+// 事件绑定管理
+// ============================================================================
+
+/**
+ * 绑定单个图表的联动事件
+ */
+export function bindChartEvents(
+  chartInstance: ChartInstance,
+  chartId: string,
+  events: ConnectEventType[],
+  createHandler: (chartId: string, eventType: ConnectEventType) => EventHandler,
+  eventHandlersRef: React.MutableRefObject<EventHandlersMap>
+): void {
+  if (!chartInstance) return;
+
+  const handlers = new Map<ConnectEventType, EventHandler>();
+
+  // 为每个事件类型创建并绑定处理器
+  events.forEach((eventType) => {
+    const handler = createHandler(chartId, eventType);
+    handlers.set(eventType, handler);
+
+    try {
+      chartInstance.on(eventType, handler);
+    } catch (e) {
+      console.warn(`[useChartConnect] Failed to bind ${eventType} event:`, e);
+    }
+  });
+
+  eventHandlersRef.current.set(chartId, handlers);
+}
+
+/**
+ * 解绑单个图表的联动事件
+ */
+export function unbindChartEvents(
+  chartId: string,
+  eventHandlersRef: React.MutableRefObject<EventHandlersMap>,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>
+): void {
+  const handlers = eventHandlersRef.current.get(chartId);
+  if (!handlers) return;
+
+  const chartItem = chartsRef.current.get(chartId);
+  if (!chartItem) return;
+
+  handlers.forEach((handler, eventType) => {
+    try {
+      chartItem.instance.off(eventType, handler);
+    } catch (e) {
+      console.warn(`[useChartConnect] Failed to unbind ${eventType} event:`, e);
+    }
+  });
+
+  eventHandlersRef.current.delete(chartId);
+}
+
+// ============================================================================
+// 连接管理
+// ============================================================================
+
+/**
+ * 生成唯一图表 ID
+ */
+export function generateChartId(): string {
+  return `chart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * 绑定图表到联动组
+ */
+export function connectChart(
+  chartInstance: ChartInstance,
+  chartId: string | undefined,
+  groupName: string | undefined,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>,
+  connectedRef: React.MutableRefObject<boolean>,
+  eventHandlersRef: React.MutableRefObject<EventHandlersMap>,
+  bindEvents: (chartInstance: ChartInstance, chartId: string) => void
+): string {
+  const id = chartId || generateChartId();
+
+  // 检查是否已连接
+  if (chartsRef.current.has(id)) {
+    console.warn(`[useChartConnect] Chart ${id} is already connected`);
+    return id;
+  }
+
+  // 存储图表实例
+  chartsRef.current.set(id, {
+    instance: chartInstance,
+    id,
+  });
+
+  // 绑定事件
+  bindEvents(chartInstance, id);
+  connectedRef.current = true;
+
+  // 如果有 groupName，设置图表组
+  if (groupName && 'group' in chartInstance) {
+    try {
+      (chartInstance as ChartInstance & { group?: string }).group = groupName;
+    } catch (e) {
+      console.warn('[useChartConnect] Failed to set chart group:', e);
+    }
+  }
+
+  return id;
+}
+
+/**
+ * 从联动组移除图表
+ */
+export function disconnectChart(
+  chartInstance: ChartInstance,
+  chartId: string | undefined,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>,
+  connectedRef: React.MutableRefObject<boolean>,
+  unbindEvents: (chartId: string) => void
+): void {
+  // 查找图表 ID
+  let targetId = chartId;
+  if (!targetId) {
+    chartsRef.current.forEach((item, id) => {
+      if (item.instance === chartInstance) {
+        targetId = id;
+      }
+    });
+  }
+
+  if (!targetId || !chartsRef.current.has(targetId)) {
+    console.warn(`[useChartConnect] Chart ${targetId} not found in connection group`);
+    return;
+  }
+
+  // 解绑事件
+  unbindEvents(targetId);
+
+  // 移除图表
+  chartsRef.current.delete(targetId);
+
+  // 更新连接状态
+  connectedRef.current = chartsRef.current.size > 0;
+}
+
+/**
+ * 批量连接图表
+ */
+export function connectAllCharts(
+  charts: Array<{ instance: ChartInstance; id: string }>,
+  connect: (instance: ChartInstance, id?: string) => void
+): void {
+  charts.forEach(({ instance, id }) => {
+    connect(instance, id);
+  });
+}
+
+/**
+ * 批量断开所有图表
+ */
+export function disconnectAllCharts(
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>,
+  connectedRef: React.MutableRefObject<boolean>,
+  unbindEvents: (chartId: string) => void
+): void {
+  chartsRef.current.forEach((item, id) => {
+    unbindEvents(id);
+  });
+  chartsRef.current.clear();
+  connectedRef.current = false;
+}
+
+/**
+ * 触发联动事件
+ */
+export function dispatchConnectEvent(
+  sourceId: string,
+
+  payload: { eventType: ConnectEventType; params: unknown } | undefined,
+  disabled: boolean,
+  chartsRef: React.MutableRefObject<Map<string, ChartConnectItem>>,
+  dispatchToOthers: (sourceId: string, eventType: ConnectEventType, params: unknown) => void
+): void {
+  if (disabled) return;
+
+  const chartItem = chartsRef.current.get(sourceId);
+  if (!chartItem) {
+    console.warn(`[useChartConnect] Source chart ${sourceId} not found`);
+    return;
+  }
+
+  const { eventType, params } = payload || {};
+  if (!eventType) {
+    console.warn('[useChartConnect] Payload must include eventType');
+    return;
+  }
+
+  // 分发事件到其他图表
+  dispatchToOthers(sourceId, eventType, params);
+}