hypercross/ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: card back support?

Browse Source
This commit is contained in:
hypercross
2026-03-13 17:26:00 +08:00
parent 748f57dd55
commit b3dc768786
12 changed files with 430 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/md-deck/hooks/deckStore.ts
+94 -49
View File
@@ -1,8 +1,8 @@
import { createStore } from 'solid-js/store';
import { calculateDimensions } from './dimensions';
import { loadCSV, CSV } from '../../utils/csv-loader';
import { initLayerConfigs, formatLayers } from './layer-parser';
import type { CardData, LayerConfig, Dimensions } from '../types';
import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
/**
* 默认配置常量
@@ -36,11 +36,13 @@ export interface DeckState {
activeTab: number;
// 图层配置
layerConfigs: LayerConfig[];
frontLayerConfigs: LayerConfig[];
backLayerConfigs: LayerConfig[];
// 编辑状态
isEditing: boolean;
editingLayer: string | null;
activeSide: CardSide;
// 框选状态
isSelecting: boolean;
@@ -60,8 +62,9 @@ export interface DeckState {
// 打印设置
printOrientation: 'portrait' | 'landscape';
printOddPageOffsetX: number;
printOddPageOffsetY: number;
printFrontOddPageOffsetX: number;
printFrontOddPageOffsetY: number;
printDoubleSided: boolean;
}
export interface DeckActions {
@@ -78,15 +81,21 @@ export interface DeckActions {
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;
// 图层操作 - 正面
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;
@@ -95,13 +104,13 @@ export interface DeckActions {
cancelSelection: () => void;
// 数据加载
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string) => Promise<void>;
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
setError: (error: string | null) => void;
clearError: () => void;
// 生成代码
generateCode: () => string;
copyCode: () => Promise<void>;
generateCode: (backLayersStr?: string) => string;
copyCode: (backLayersStr?: string) => Promise<void>;
// 导出操作
setExporting: (exporting: boolean) => void;
@@ -112,8 +121,9 @@ export interface DeckActions {
// 打印设置
setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
setPrintOddPageOffsetX: (offset: number) => void;
setPrintOddPageOffsetY: (offset: number) => void;
setPrintFrontOddPageOffsetX: (offset: number) => void;
setPrintFrontOddPageOffsetY: (offset: number) => void;
setPrintDoubleSided: (doubleSided: boolean) => void;
}
export interface DeckStore {
@@ -141,9 +151,11 @@ export function createDeckStore(
dimensions: null,
cards: [] as any,
activeTab: 0,
layerConfigs: [],
frontLayerConfigs: [],
backLayerConfigs: [],
isEditing: false,
editingLayer: null,
activeSide: 'front',
isSelecting: false,
selectStart: null,
selectEnd: null,
@@ -153,8 +165,9 @@ export function createDeckStore(
exportProgress: 0,
exportError: null,
printOrientation: 'portrait',
printOddPageOffsetX: 0,
printOddPageOffsetY: 0
printFrontOddPageOffsetX: 0,
printFrontOddPageOffsetY: 0,
printDoubleSided: false
});
// 更新尺寸并重新计算 dimensions
@@ -201,22 +214,39 @@ export function createDeckStore(
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 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 toggleLayerVisible = (prop: string) => {
setState('layerConfigs', (prev) => prev.map((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;
setState('layerConfigs', (prev) => prev.map((config) =>
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 });
@@ -230,7 +260,7 @@ export function createDeckStore(
};
// 加载卡牌数据（核心逻辑）
const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '') => {
const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
if (!path) {
setState({ error: '未指定 CSV 文件路径' });
return;
@@ -240,26 +270,27 @@ export function createDeckStore(
try {
const data = await loadCSV(path);
if (data.length === 0) {
setState({
setState({
error: 'CSV 文件为空或格式不正确',
isLoading: false
isLoading: false
});
return;
}
setState({
cards: data,
setState({
cards: data,
activeTab: 0,
layerConfigs: initLayerConfigs(data, layersStr),
isLoading: false
frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
isLoading: false
});
updateDimensions();
} catch (err) {
setState({
setState({
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
isLoading: false
isLoading: false
});
}
};
@@ -267,14 +298,15 @@ export function createDeckStore(
const setError = (error: string | null) => setState({ error });
const clearError = () => setState({ error: null });
const generateCode = () => {
const layersStr = formatLayers(state.layerConfigs);
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} "`);
@@ -282,13 +314,17 @@ export function createDeckStore(
if (state.padding !== DECK_DEFAULTS.PADDING) {
parts.push(`padding="${state.padding} "`);
}
parts.push(`layers="${layersStr}"}`);
parts.push(`layers="${frontLayersStr}"`);
if (backLayersString) {
parts.push(` backLayers="${backLayersString}"`);
}
parts.push('}');
return parts.join('');
};
const copyCode = async () => {
const code = generateCode();
const copyCode = async (backLayersStr?: string) => {
const code = generateCode(backLayersStr);
try {
await navigator.clipboard.writeText(code);
alert('已复制到剪贴板！');
@@ -314,12 +350,16 @@ export function createDeckStore(
setState({ printOrientation: orientation });
};
const setPrintOddPageOffsetX = (offset: number) => {
setState({ printOddPageOffsetX: offset });
const setPrintFrontOddPageOffsetX = (offset: number) => {
setState({ printFrontOddPageOffsetX: offset });
};
const setPrintOddPageOffsetY = (offset: number) => {
setState({ printOddPageOffsetY: offset });
const setPrintFrontOddPageOffsetY = (offset: number) => {
setState({ printFrontOddPageOffsetY: offset });
};
const setPrintDoubleSided = (doubleSided: boolean) => {
setState({ printDoubleSided: doubleSided });
};
const actions: DeckActions = {
@@ -332,12 +372,16 @@ export function createDeckStore(
setCards,
setActiveTab,
updateCardData,
setLayerConfigs,
updateLayerConfig,
toggleLayerVisible,
setFrontLayerConfigs,
updateFrontLayerConfig,
toggleFrontLayerVisible,
setBackLayerConfigs,
updateBackLayerConfig,
toggleBackLayerVisible,
setIsEditing,
setEditingLayer,
updateLayerPosition,
setActiveSide,
setIsSelecting,
setSelectStart,
setSelectEnd,
@@ -353,8 +397,9 @@ export function createDeckStore(
setExportError,
clearExportError,
setPrintOrientation,
setPrintOddPageOffsetX,
setPrintOddPageOffsetY
setPrintFrontOddPageOffsetX,
setPrintFrontOddPageOffsetY,
setPrintDoubleSided
};
return { state, actions };