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 };
src/components/md-deck/hooks/layer-parser.ts
+14 -4
View File
@@ -49,13 +49,13 @@ export function formatLayers(layers: LayerConfig[]): string {
}
/**
* 初始化图层配置
* 初始化图层配置（用于特定面）
*/
export function initLayerConfigs(
export function initLayerConfigsForSide(
data: CSV<any>,
existingLayersStr: string
layersStr: string
): LayerConfig[] {
const parsed = parseLayers(existingLayersStr);
const parsed = parseLayers(layersStr);
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
return allProps.map(prop => {
@@ -72,3 +72,13 @@ export function initLayerConfigs(
};
});
}
/**
* 初始化图层配置（向后兼容）
*/
export function initLayerConfigs(
data: CSV<any>,
existingLayersStr: string
): LayerConfig[] {
return initLayerConfigsForSide(data, existingLayersStr);
}
src/components/md-deck/hooks/usePDFExport.ts
+2 -1
View File
@@ -1,10 +1,11 @@
import type { DeckStore } from './deckStore';
import type { CardData, LayerConfig, Dimensions } from '../types';
import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
export interface PageCard {
data: CardData;
x: number;
y: number;
side?: CardSide;
}
export interface PageData {
src/components/md-deck/hooks/usePageLayout.ts
+110 -46
View File
@@ -24,8 +24,9 @@ const PRINT_MARGIN = 5;
*/
export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
const orientation = () => store.state.printOrientation;
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
const doubleSided = () => store.state.printDoubleSided;
const frontOddPageOffsetX = () => store.state.printFrontOddPageOffsetX;
const frontOddPageOffsetY = () => store.state.printFrontOddPageOffsetY;
const getA4Size = () => {
if (orientation() === 'landscape') {
@@ -52,56 +53,119 @@ export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
const baseOffsetY = (a4Height - maxGridHeight) / 2;
const result: PageData[] = [];
let currentPage: PageData = {
pageIndex: 0,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
if (doubleSided()) {
// 双面打印模式：每张卡牌需要 2 页（正面 + 背面）
// 背面卡牌顺序在长边方向上逆转
const totalCards = cards.length;
for (let i = 0; i < totalCards; i++) {
const frontPageIndex = i * 2;
const backPageIndex = i * 2 + 1;
// 确保页面数组有足够长度
while (result.length <= backPageIndex) {
result.push({
pageIndex: result.length,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
});
}
const frontPage = result[frontPageIndex];
const backPage = result[backPageIndex];
// 正面：正常顺序排列
const frontRow = Math.floor(i / cardsPerRow);
const frontCol = i % cardsPerRow;
const frontX = baseOffsetX + frontCol * cardWidth + frontOddPageOffsetX();
const frontY = baseOffsetY + frontRow * cardHeight + frontOddPageOffsetY();
frontPage.cards.push({ data: cards[i], x: frontX, y: frontY, side: 'front' as const });
frontPage.bounds.minX = Math.min(frontPage.bounds.minX, frontX);
frontPage.bounds.minY = Math.min(frontPage.bounds.minY, frontY);
frontPage.bounds.maxX = Math.max(frontPage.bounds.maxX, frontX + cardWidth);
frontPage.bounds.maxY = Math.max(frontPage.bounds.maxY, frontY + cardHeight);
// 背面：逆转顺序排列（长边方向）
// 对于竖向打印，长边是垂直方向，所以逆转行
// 对于横向打印，长边是水平方向，所以逆转列
const backIndex = totalCards - 1 - i;
const backRow = orientation() === 'portrait'
? Math.floor(backIndex / cardsPerRow)
: Math.floor(i / cardsPerRow);
const backCol = orientation() === 'portrait'
? backIndex % cardsPerRow
: (cardsPerRow - 1 - (i % cardsPerRow));
const backX = baseOffsetX + backCol * cardWidth;
const backY = baseOffsetY + backRow * cardHeight;
backPage.cards.push({ data: cards[i], x: backX, y: backY, side: 'back' as const });
backPage.bounds.minX = Math.min(backPage.bounds.minX, backX);
backPage.bounds.minY = Math.min(backPage.bounds.minY, backY);
backPage.bounds.maxX = Math.max(backPage.bounds.maxX, backX + cardWidth);
backPage.bounds.maxY = Math.max(backPage.bounds.maxY, backY + cardHeight);
}
} else {
// 单面打印模式：原有逻辑
let currentPage: PageData = {
pageIndex: 0,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
for (let i = 0; i < cards.length; i++) {
const pageIndex = Math.floor(i / cardsPerPage);
const indexInPage = i % cardsPerPage;
const row = Math.floor(indexInPage / cardsPerRow);
const col = indexInPage % cardsPerRow;
for (let i = 0; i < cards.length; i++) {
const pageIndex = Math.floor(i / cardsPerPage);
const indexInPage = i % cardsPerPage;
const row = Math.floor(indexInPage / cardsPerRow);
const col = indexInPage % cardsPerRow;
if (pageIndex !== currentPage.pageIndex) {
if (pageIndex !== currentPage.pageIndex) {
result.push(currentPage);
currentPage = {
pageIndex,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
}
const isOddPage = pageIndex % 2 === 0;
const pageOffsetX = isOddPage ? frontOddPageOffsetX() : 0;
const pageOffsetY = isOddPage ? frontOddPageOffsetY() : 0;
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
currentPage.cards.push({ data: cards[i], x: cardX, y: cardY, side: 'front' as const });
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
}
if (currentPage.cards.length > 0) {
result.push(currentPage);
currentPage = {
pageIndex,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
}
const isOddPage = pageIndex % 2 === 0;
const pageOffsetX = isOddPage ? oddPageOffsetX() : 0;
const pageOffsetY = isOddPage ? oddPageOffsetY() : 0;
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
currentPage.cards.push({ data: cards[i], x: cardX, y: cardY });
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
}
if (currentPage.cards.length > 0) {
result.push(currentPage);
}
return result.map(page => ({
...page,
frameBounds: {
minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
}
}));
return result.map(page => {
const offsetX = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetX() : 0;
const offsetY = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetY() : 0;
return {
...page,
frameBounds: {
minX: baseOffsetX + offsetX,
minY: baseOffsetY + offsetY,
maxX: baseOffsetX + maxGridWidth + offsetX,
maxY: baseOffsetY + maxGridHeight + offsetY
}
};
});
});
const cropMarks = createMemo<CropMarkData[]>(() => {