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

refactor: clean up

Browse Source
This commit is contained in:
hypercross
2026-02-27 14:32:43 +08:00
parent 72285e093f
commit 0aaadea2da
5 changed files with 133 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/stores/deckStore.ts
+71 -39
View File
@@ -1,4 +1,5 @@
import { createStore, produce } from 'solid-js/store';
import { createStore } from 'solid-js/store';
import { calculateDimensions } from '../utils/dimensions';
import type { CardData, LayerConfig, Dimensions } from '../types';
export interface DeckState {
@@ -9,25 +10,28 @@ export interface DeckState {
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;
// 错误状态
error: string | null;
}
export interface DeckActions {
@@ -36,31 +40,32 @@ export interface DeckActions {
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;
// 初始化和数据加载
loadCards: (cards: CardData[]) => void;
setError: (error: string | null) => void;
// 生成代码
generateCode: () => string;
copyCode: () => void;
@@ -87,20 +92,44 @@ export function createDeckStore(): DeckStore {
editingLayer: null,
isSelecting: false,
selectStart: null,
selectEnd: null
selectEnd: null,
error: 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 });
// 更新尺寸并重新计算 dimensions
const updateDimensions = () => {
const dims = calculateDimensions({
size: state.size,
grid: state.grid,
bleed: state.bleed,
padding: state.padding
});
setState({ dimensions: dims });
};
const setSize = (size: string) => {
setState({ size });
updateDimensions();
};
const setGrid = (grid: string) => {
setState({ grid });
updateDimensions();
};
const setBleed = (bleed: string) => {
setState({ bleed });
updateDimensions();
};
const setPadding = (padding: string) => {
setState({ padding });
updateDimensions();
};
const setCards = (cards: 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 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));
@@ -110,7 +139,7 @@ export function createDeckStore(): DeckStore {
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) => {
@@ -121,32 +150,34 @@ export function createDeckStore(): DeckStore {
));
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
});
// 加载卡牌数据并初始化 dimensions 和 layerConfigs
const loadCards = (cards: CardData[]) => {
if (cards.length === 0) {
setState({ error: 'CSV 文件为空或格式不正确' });
return;
}
setState({ cards, activeTab: 0, error: null });
updateDimensions();
};
const setError = (error: string | null) => setState({ error });
const generateCode = () => {
const layersStr = state.layerConfigs
.map(l => `${l.prop}=${l.x1},${l.y1},${l.x2},${l.y2}`)
.join('|');
.filter(l => l.visible)
.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(() => {
@@ -175,7 +206,8 @@ export function createDeckStore(): DeckStore {
setSelectStart,
setSelectEnd,
cancelSelection,
initialize,
loadCards,
setError,
generateCode,
copyCode
};
src/components/stores/use-selection.ts
+92
View File
@@ -0,0 +1,92 @@
import type { DeckStore } from './deckStore';
/**
* 框选相关的操作（已整合到 deckStore）
* 此 hook 保留用于向后兼容或提取特定逻辑
*/
export function useSelection(store: DeckStore) {
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['dimensions']) => {
if (!dimensions) return { gridX: 1, gridY: 1 };
const rect = cardEl.getBoundingClientRect();
const offsetX = (e.clientX - rect.left) / rect.width * dimensions.cardWidth;
const offsetY = (e.clientY - rect.top) / rect.height * dimensions.cardHeight;
const gridX = Math.max(1, Math.floor((offsetX - dimensions.gridOriginX) / dimensions.cellWidth) + 1);
const gridY = Math.max(1, Math.floor((offsetY - dimensions.gridOriginY) / dimensions.cellHeight) + 1);
return {
gridX: Math.max(1, Math.min(dimensions.gridW, gridX)),
gridY: Math.max(1, Math.min(dimensions.gridH, gridY))
};
};
const handleMouseDown = (e: MouseEvent, cardEl: HTMLElement) => {
if (!store.isEditing || !store.editingLayer) return;
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
store.setSelectStart({ x: gridX, y: gridY });
store.setSelectEnd({ x: gridX, y: gridY });
store.setIsSelecting(true);
};
const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
if (!store.isSelecting) return;
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
store.setSelectEnd({ x: gridX, y: gridY });
};
const handleMouseUp = () => {
if (!store.isSelecting || !store.editingLayer) return;
const start = store.selectStart!;
const end = store.selectEnd!;
const x1 = Math.min(start.x, end.x);
const y1 = Math.min(start.y, end.y);
const x2 = Math.max(start.x, end.x);
const y2 = Math.max(start.y, end.y);
store.updateLayerPosition(x1, y1, x2, y2);
store.cancelSelection();
};
return {
onMouseDown: handleMouseDown,
onMouseMove: handleMouseMove,
onMouseUp: handleMouseUp,
onMouseLeave: handleMouseUp
};
}
/**
* 计算框选区域的样式
*/
export function getSelectionBoxStyle(
selectStart: { x: number; y: number } | null,
selectEnd: { x: number; y: number } | null,
dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
): { left: string; top: string; width: string; height: string } | null {
if (!selectStart || !selectEnd || !dims) return null;
const x1 = Math.min(selectStart.x, selectEnd.x);
const y1 = Math.min(selectStart.y, selectEnd.y);
const x2 = Math.max(selectStart.x, selectEnd.x);
const y2 = Math.max(selectStart.y, selectEnd.y);
const left = dims.gridOriginX + (x1 - 1) * dims.cellWidth;
const top = dims.gridOriginY + (y1 - 1) * dims.cellHeight;
const width = (x2 - x1 + 1) * dims.cellWidth;
const height = (y2 - y1 + 1) * dims.cellHeight;
return {
left: `${left}mm`,
top: `${top}mm`,
width: `${width}mm`,
height: `${height}mm`
};
}