refactor: deckStore

src/components/stores/deckStore.ts

@@ -0,0 +1,182 @@
+import { createStore, produce } from 'solid-js/store';
+import type { CardData, LayerConfig, Dimensions } from '../types';
+
+export interface DeckState {
+  // 基本属性
+  size: string;
+  grid: string;
+  bleed: string;
+  padding: string;
+  fixed: boolean;
+  src: string;
+  
+  // 解析后的尺寸
+  dimensions: Dimensions | null;
+  
+  // 卡牌数据
+  cards: CardData[];
+  activeTab: number;
+  
+  // 图层配置
+  layerConfigs: LayerConfig[];
+  
+  // 编辑状态
+  isEditing: boolean;
+  editingLayer: string | null;
+  
+  // 框选状态
+  isSelecting: boolean;
+  selectStart: { x: number; y: number } | null;
+  selectEnd: { x: number; y: number } | null;
+}
+
+export interface DeckActions {
+  // 基本属性设置
+  setSize: (size: string) => void;
+  setGrid: (grid: string) => void;
+  setBleed: (bleed: string) => void;
+  setPadding: (padding: string) => void;
+  
+  // 数据设置
+  setCards: (cards: CardData[]) => void;
+  setActiveTab: (index: number) => void;
+  updateCardData: (index: number, key: string, value: string) => void;
+  
+  // 图层操作
+  setLayerConfigs: (configs: LayerConfig[]) => void;
+  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  toggleLayerVisible: (prop: string) => void;
+  
+  // 编辑状态
+  setIsEditing: (editing: boolean) => void;
+  setEditingLayer: (layer: string | null) => void;
+  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
+  
+  // 框选操作
+  setIsSelecting: (selecting: boolean) => void;
+  setSelectStart: (pos: { x: number; y: number } | null) => void;
+  setSelectEnd: (pos: { x: number; y: number } | null) => void;
+  cancelSelection: () => void;
+  
+  // 初始化
+  initialize: (props: Record<string, any>, csvPath: string) => void;
+  
+  // 生成代码
+  generateCode: () => string;
+  copyCode: () => void;
+}
+
+export interface DeckStore extends DeckState, DeckActions {}
+
+/**
+ * 创建 deck store
+ */
+export function createDeckStore(): DeckStore {
+  const [state, setState] = createStore<DeckState>({
+    size: '54x86',
+    grid: '5x8',
+    bleed: '1',
+    padding: '2',
+    fixed: false,
+    src: '',
+    dimensions: null,
+    cards: [],
+    activeTab: 0,
+    layerConfigs: [],
+    isEditing: false,
+    editingLayer: null,
+    isSelecting: false,
+    selectStart: null,
+    selectEnd: null
+  });
+
+  const setSize = (size: string) => setState({ size });
+  const setGrid = (grid: string) => setState({ grid });
+  const setBleed = (bleed: string) => setState({ bleed });
+  const setPadding = (padding: string) => setState({ padding });
+  
+  const setCards = (cards: CardData[]) => setState({ cards });
+  const setActiveTab = (index: number) => setState({ activeTab: index });
+  const updateCardData = (index: number, key: string, value: string) => {
+    setState('cards', index, key, value);
+  };
+  
+  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
+  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  };
+  const toggleLayerVisible = (prop: string) => {
+    setState('layerConfigs', (prev) => prev.map((config) =>
+      config.prop === prop ? { ...config, visible: !config.visible } : config
+    ));
+  };
+  
+  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
+  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
+  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
+    const layer = state.editingLayer;
+    if (!layer) return;
+    setState('layerConfigs', (prev) => prev.map((config) =>
+      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
+    ));
+    setState({ editingLayer: null });
+  };
+  
+  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
+  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
+  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
+  const cancelSelection = () => {
+    setState({ isSelecting: false, selectStart: null, selectEnd: null });
+  };
+  
+  const initialize = (props: Record<string, any>, csvPath: string) => {
+    setState({
+      size: props.size as string || '54x86',
+      grid: props.grid as string || '5x8',
+      bleed: props.bleed as string || '1',
+      padding: props.padding as string || '2',
+      fixed: props.fixed === true || props.fixed === 'true',
+      src: csvPath
+    });
+  };
+  
+  const generateCode = () => {
+    const layersStr = state.layerConfigs
+      .map(l => `${l.prop}=${l.x1},${l.y1},${l.x2},${l.y2}`)
+      .join('|');
+    return `:md-deck[${state.src}]{size="${state.size}" grid="${state.grid}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
+  };
+  
+  const copyCode = () => {
+    const code = generateCode();
+    navigator.clipboard.writeText(code).then(() => {
+      alert('已复制到剪贴板！');
+    }).catch(err => {
+      console.error('复制失败:', err);
+    });
+  };
+
+  return {
+    ...state,
+    setSize,
+    setGrid,
+    setBleed,
+    setPadding,
+    setCards,
+    setActiveTab,
+    updateCardData,
+    setLayerConfigs,
+    updateLayerConfig,
+    toggleLayerVisible,
+    setIsEditing,
+    setEditingLayer,
+    updateLayerPosition,
+    setIsSelecting,
+    setSelectStart,
+    setSelectEnd,
+    cancelSelection,
+    initialize,
+    generateCode,
+    copyCode
+  };
+}