424 lines
12 KiB
TypeScript
424 lines
12 KiB
TypeScript
import { createStore } from 'solid-js/store';
|
|
import { calculateDimensions } from './dimensions';
|
|
import { loadCSV, CSV } from '../../utils/csv-loader';
|
|
import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
|
|
import type { CardData, LayerConfig, Dimensions, CardSide, CardShape } from '../types';
|
|
|
|
/**
|
|
* 默认配置常量
|
|
*/
|
|
export const DECK_DEFAULTS = {
|
|
SIZE_W: 54,
|
|
SIZE_H: 86,
|
|
GRID_W: 5,
|
|
GRID_H: 8,
|
|
BLEED: 1,
|
|
PADDING: 2,
|
|
CORNER_RADIUS: 3
|
|
} as const;
|
|
|
|
export interface DeckState {
|
|
// 基本属性
|
|
sizeW: number;
|
|
sizeH: number;
|
|
gridW: number;
|
|
gridH: number;
|
|
bleed: number;
|
|
padding: number;
|
|
cornerRadius: number;
|
|
shape: CardShape;
|
|
fixed: boolean;
|
|
src: string;
|
|
rawSrc: string; // 原始 CSV 路径（用于生成代码时保持相对路径）
|
|
|
|
// 解析后的尺寸
|
|
dimensions: Dimensions | null;
|
|
|
|
// 卡牌数据
|
|
cards: CSV<CardData>;
|
|
activeTab: number;
|
|
|
|
// 图层配置
|
|
frontLayerConfigs: LayerConfig[];
|
|
backLayerConfigs: LayerConfig[];
|
|
|
|
// 编辑状态
|
|
isEditing: boolean;
|
|
editingLayer: string | null;
|
|
activeSide: CardSide;
|
|
|
|
// 框选状态
|
|
isSelecting: boolean;
|
|
selectStart: { x: number; y: number } | null;
|
|
selectEnd: { x: number; y: number } | null;
|
|
|
|
// 加载状态
|
|
isLoading: boolean;
|
|
|
|
// 错误状态
|
|
error: string | null;
|
|
|
|
// 导出状态
|
|
isExporting: boolean;
|
|
exportProgress: number; // 0-100
|
|
exportError: string | null;
|
|
|
|
// 打印设置
|
|
printOrientation: 'portrait' | 'landscape';
|
|
printFrontOddPageOffsetX: number;
|
|
printFrontOddPageOffsetY: number;
|
|
printDoubleSided: boolean;
|
|
}
|
|
|
|
export interface DeckActions {
|
|
// 基本属性设置
|
|
setSizeW: (size: number) => void;
|
|
setSizeH: (size: number) => void;
|
|
setGridW: (grid: number) => void;
|
|
setGridH: (grid: number) => void;
|
|
setBleed: (bleed: number) => void;
|
|
setPadding: (padding: number) => void;
|
|
setCornerRadius: (cornerRadius: number) => void;
|
|
setShape: (shape: CardShape) => void;
|
|
|
|
// 数据设置
|
|
setCards: (cards: CSV<CardData>) => void;
|
|
setActiveTab: (index: number) => void;
|
|
updateCardData: (index: number, key: string, value: string) => void;
|
|
|
|
// 图层操作 - 正面
|
|
setFrontLayerConfigs: (configs: LayerConfig[]) => void;
|
|
updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
|
|
toggleFrontLayerVisible: (prop: string) => void;
|
|
|
|
// 图层操作 - 背面
|
|
setBackLayerConfigs: (configs: LayerConfig[]) => void;
|
|
updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
|
|
toggleBackLayerVisible: (prop: string) => void;
|
|
|
|
// 编辑状态
|
|
setIsEditing: (editing: boolean) => void;
|
|
setEditingLayer: (layer: string | null) => void;
|
|
updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
|
|
setActiveSide: (side: CardSide) => void;
|
|
|
|
// 框选操作
|
|
setIsSelecting: (selecting: boolean) => void;
|
|
setSelectStart: (pos: { x: number; y: number } | null) => void;
|
|
setSelectEnd: (pos: { x: number; y: number } | null) => void;
|
|
cancelSelection: () => void;
|
|
|
|
// 数据加载
|
|
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
|
|
setError: (error: string | null) => void;
|
|
clearError: () => void;
|
|
|
|
// 生成代码
|
|
generateCode: (backLayersStr?: string) => string;
|
|
copyCode: (backLayersStr?: string) => Promise<void>;
|
|
|
|
// 导出操作
|
|
setExporting: (exporting: boolean) => void;
|
|
exportDeck: () => void;
|
|
setExportProgress: (progress: number) => void;
|
|
setExportError: (error: string | null) => void;
|
|
clearExportError: () => void;
|
|
|
|
// 打印设置
|
|
setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
|
|
setPrintFrontOddPageOffsetX: (offset: number) => void;
|
|
setPrintFrontOddPageOffsetY: (offset: number) => void;
|
|
setPrintDoubleSided: (doubleSided: boolean) => void;
|
|
}
|
|
|
|
export interface DeckStore {
|
|
state: DeckState;
|
|
actions: DeckActions;
|
|
}
|
|
|
|
/**
|
|
* 创建 deck store
|
|
*/
|
|
export function createDeckStore(
|
|
initialSrc: string = '',
|
|
): DeckStore {
|
|
const [state, setState] = createStore<DeckState>({
|
|
sizeW: DECK_DEFAULTS.SIZE_W,
|
|
sizeH: DECK_DEFAULTS.SIZE_H,
|
|
gridW: DECK_DEFAULTS.GRID_W,
|
|
gridH: DECK_DEFAULTS.GRID_H,
|
|
bleed: DECK_DEFAULTS.BLEED,
|
|
padding: DECK_DEFAULTS.PADDING,
|
|
cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
|
|
shape: 'rectangle',
|
|
fixed: false,
|
|
src: initialSrc,
|
|
rawSrc: initialSrc,
|
|
dimensions: null,
|
|
cards: [] as any,
|
|
activeTab: 0,
|
|
frontLayerConfigs: [],
|
|
backLayerConfigs: [],
|
|
isEditing: false,
|
|
editingLayer: null,
|
|
activeSide: 'front',
|
|
isSelecting: false,
|
|
selectStart: null,
|
|
selectEnd: null,
|
|
isLoading: false,
|
|
error: null,
|
|
isExporting: false,
|
|
exportProgress: 0,
|
|
exportError: null,
|
|
printOrientation: 'portrait',
|
|
printFrontOddPageOffsetX: 0,
|
|
printFrontOddPageOffsetY: 0,
|
|
printDoubleSided: false
|
|
});
|
|
|
|
// 更新尺寸并重新计算 dimensions
|
|
const updateDimensions = () => {
|
|
const dims = calculateDimensions({
|
|
sizeW: state.sizeW,
|
|
sizeH: state.sizeH,
|
|
gridW: state.gridW,
|
|
gridH: state.gridH,
|
|
bleed: state.bleed,
|
|
padding: state.padding
|
|
});
|
|
setState({ dimensions: dims });
|
|
};
|
|
|
|
const setSizeW = (size: number) => {
|
|
setState({ sizeW: size });
|
|
updateDimensions();
|
|
};
|
|
const setSizeH = (size: number) => {
|
|
setState({ sizeH: size });
|
|
updateDimensions();
|
|
};
|
|
const setGridW = (grid: number) => {
|
|
setState({ gridW: grid });
|
|
updateDimensions();
|
|
};
|
|
const setGridH = (grid: number) => {
|
|
setState({ gridH: grid });
|
|
updateDimensions();
|
|
};
|
|
const setBleed = (bleed: number) => {
|
|
setState({ bleed });
|
|
updateDimensions();
|
|
};
|
|
const setPadding = (padding: number) => {
|
|
setState({ padding });
|
|
updateDimensions();
|
|
};
|
|
const setCornerRadius = (cornerRadius: number) => {
|
|
setState({ cornerRadius });
|
|
};
|
|
const setShape = (shape: CardShape) => {
|
|
setState({ shape });
|
|
};
|
|
|
|
const setCards = (cards: CSV<CardData>) => setState({ cards, activeTab: 0 });
|
|
const setActiveTab = (index: number) => setState({ activeTab: index });
|
|
const updateCardData = (index: number, key: string, value: string) => {
|
|
setState('cards', index, key, value);
|
|
};
|
|
|
|
// 正面图层操作
|
|
const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
|
|
const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
|
|
setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
|
|
};
|
|
const toggleFrontLayerVisible = (prop: string) => {
|
|
setState('frontLayerConfigs', (prev) => prev.map((config) =>
|
|
config.prop === prop ? { ...config, visible: !config.visible } : config
|
|
));
|
|
};
|
|
|
|
// 背面图层操作
|
|
const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
|
|
const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
|
|
setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
|
|
};
|
|
const toggleBackLayerVisible = (prop: string) => {
|
|
setState('backLayerConfigs', (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 setActiveSide = (side: CardSide) => setState({ activeSide: side });
|
|
|
|
const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
|
|
const layer = state.editingLayer;
|
|
if (!layer) return;
|
|
const currentSide = state.activeSide;
|
|
const configs = currentSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
|
|
const setter = currentSide === 'front' ? setFrontLayerConfigs : setBackLayerConfigs;
|
|
setter(configs.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 loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
|
|
if (!path) {
|
|
setState({ error: '未指定 CSV 文件路径' });
|
|
return;
|
|
}
|
|
|
|
setState({ isLoading: true, error: null, src: path, rawSrc: rawSrc });
|
|
|
|
try {
|
|
const data = await loadCSV(path);
|
|
|
|
if (data.length === 0) {
|
|
setState({
|
|
error: 'CSV 文件为空或格式不正确',
|
|
isLoading: false
|
|
});
|
|
return;
|
|
}
|
|
|
|
setState({
|
|
cards: data,
|
|
activeTab: 0,
|
|
frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
|
|
backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
|
|
isLoading: false
|
|
});
|
|
updateDimensions();
|
|
} catch (err) {
|
|
setState({
|
|
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
|
|
isLoading: false
|
|
});
|
|
}
|
|
};
|
|
|
|
const setError = (error: string | null) => setState({ error });
|
|
const clearError = () => setState({ error: null });
|
|
|
|
const generateCode = (backLayersStr?: string) => {
|
|
const frontLayersStr = formatLayers(state.frontLayerConfigs);
|
|
const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
|
|
const parts = [
|
|
`:md-deck[${state.rawSrc || state.src}]`,
|
|
`{size="${state.sizeW}x${state.sizeH}" `,
|
|
`grid="${state.gridW}x${state.gridH}" `
|
|
];
|
|
|
|
// 仅在非默认值时添加 bleed 和 padding
|
|
if (state.bleed !== DECK_DEFAULTS.BLEED) {
|
|
parts.push(`bleed="${state.bleed}" `);
|
|
}
|
|
if (state.padding !== DECK_DEFAULTS.PADDING) {
|
|
parts.push(`padding="${state.padding}" `);
|
|
}
|
|
if (state.shape !== 'rectangle') {
|
|
parts.push(`shape="${state.shape}" `);
|
|
}
|
|
|
|
parts.push(`layers="${frontLayersStr}" `);
|
|
if (backLayersString) {
|
|
parts.push(`back-layers="${backLayersString}" `);
|
|
}
|
|
parts.push('}');
|
|
return parts.join('');
|
|
};
|
|
|
|
const copyCode = async (backLayersStr?: string) => {
|
|
const code = generateCode(backLayersStr);
|
|
try {
|
|
await navigator.clipboard.writeText(code);
|
|
alert('已复制到剪贴板！');
|
|
} catch (err) {
|
|
console.error('复制失败:', err);
|
|
alert('复制失败，请手动复制');
|
|
}
|
|
};
|
|
|
|
const setExporting = (exporting: boolean) => setState({ isExporting: exporting });
|
|
|
|
const exportDeck = () => {
|
|
setState({ isExporting: true, exportProgress: 0, exportError: null });
|
|
};
|
|
|
|
const setExportProgress = (progress: number) => setState({ exportProgress: progress });
|
|
|
|
const setExportError = (error: string | null) => setState({ exportError: error });
|
|
|
|
const clearExportError = () => setState({ exportError: null });
|
|
|
|
const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
|
|
setState({ printOrientation: orientation });
|
|
};
|
|
|
|
const setPrintFrontOddPageOffsetX = (offset: number) => {
|
|
setState({ printFrontOddPageOffsetX: offset });
|
|
};
|
|
|
|
const setPrintFrontOddPageOffsetY = (offset: number) => {
|
|
setState({ printFrontOddPageOffsetY: offset });
|
|
};
|
|
|
|
const setPrintDoubleSided = (doubleSided: boolean) => {
|
|
setState({ printDoubleSided: doubleSided });
|
|
};
|
|
|
|
const actions: DeckActions = {
|
|
setSizeW,
|
|
setSizeH,
|
|
setGridW,
|
|
setGridH,
|
|
setBleed,
|
|
setPadding,
|
|
setCornerRadius,
|
|
setShape,
|
|
setCards,
|
|
setActiveTab,
|
|
updateCardData,
|
|
setFrontLayerConfigs,
|
|
updateFrontLayerConfig,
|
|
toggleFrontLayerVisible,
|
|
setBackLayerConfigs,
|
|
updateBackLayerConfig,
|
|
toggleBackLayerVisible,
|
|
setIsEditing,
|
|
setEditingLayer,
|
|
updateLayerPosition,
|
|
setActiveSide,
|
|
setIsSelecting,
|
|
setSelectStart,
|
|
setSelectEnd,
|
|
cancelSelection,
|
|
loadCardsFromPath,
|
|
setError,
|
|
clearError,
|
|
generateCode,
|
|
copyCode,
|
|
setExporting,
|
|
exportDeck,
|
|
setExportProgress,
|
|
setExportError,
|
|
clearExportError,
|
|
setPrintOrientation,
|
|
setPrintFrontOddPageOffsetX,
|
|
setPrintFrontOddPageOffsetY,
|
|
setPrintDoubleSided
|
|
};
|
|
|
|
return { state, actions };
|
|
}
|