refactor: break down & clean up
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { calculateDimensions } from './dimensions';
|
||||
import { loadCSV } from '../../utils/csv-loader';
|
||||
import { initLayerConfigs } from './layer-parser';
|
||||
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||
|
||||
/**
|
||||
* 默认配置常量
|
||||
*/
|
||||
export const DECK_DEFAULTS = {
|
||||
SIZE: '54x86',
|
||||
GRID: '5x8',
|
||||
BLEED: '1',
|
||||
PADDING: '2'
|
||||
} as const;
|
||||
|
||||
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;
|
||||
|
||||
// 加载状态
|
||||
isLoading: boolean;
|
||||
|
||||
// 错误状态
|
||||
error: string | 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;
|
||||
|
||||
// 数据加载
|
||||
loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
|
||||
setError: (error: string | null) => void;
|
||||
clearError: () => void;
|
||||
|
||||
// 生成代码
|
||||
generateCode: () => string;
|
||||
copyCode: () => Promise<void>;
|
||||
}
|
||||
|
||||
export interface DeckStore {
|
||||
state: DeckState;
|
||||
actions: DeckActions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建 deck store
|
||||
*/
|
||||
export function createDeckStore(
|
||||
initialSrc: string = '',
|
||||
initialLayers: string = ''
|
||||
): DeckStore {
|
||||
const [state, setState] = createStore<DeckState>({
|
||||
size: DECK_DEFAULTS.SIZE,
|
||||
grid: DECK_DEFAULTS.GRID,
|
||||
bleed: DECK_DEFAULTS.BLEED,
|
||||
padding: DECK_DEFAULTS.PADDING,
|
||||
fixed: false,
|
||||
src: initialSrc,
|
||||
dimensions: null,
|
||||
cards: [],
|
||||
activeTab: 0,
|
||||
layerConfigs: [],
|
||||
isEditing: false,
|
||||
editingLayer: null,
|
||||
isSelecting: false,
|
||||
selectStart: null,
|
||||
selectEnd: null,
|
||||
isLoading: false,
|
||||
error: null
|
||||
});
|
||||
|
||||
// 更新尺寸并重新计算 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));
|
||||
};
|
||||
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 loadCardsFromPath = async (path: string, layersStr: string = '') => {
|
||||
if (!path) {
|
||||
setState({ error: '未指定 CSV 文件路径' });
|
||||
return;
|
||||
}
|
||||
|
||||
setState({ isLoading: true, error: null, src: path });
|
||||
|
||||
try {
|
||||
const data = await loadCSV(path);
|
||||
|
||||
if (data.length === 0) {
|
||||
setState({
|
||||
error: 'CSV 文件为空或格式不正确',
|
||||
isLoading: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setState({
|
||||
cards: data,
|
||||
activeTab: 0,
|
||||
layerConfigs: initLayerConfigs(data, layersStr),
|
||||
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 = () => {
|
||||
const layersStr = state.layerConfigs
|
||||
.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 = async () => {
|
||||
const code = generateCode();
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
alert('已复制到剪贴板！');
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err);
|
||||
alert('复制失败，请手动复制');
|
||||
}
|
||||
};
|
||||
|
||||
const actions: DeckActions = {
|
||||
setSize,
|
||||
setGrid,
|
||||
setBleed,
|
||||
setPadding,
|
||||
setCards,
|
||||
setActiveTab,
|
||||
updateCardData,
|
||||
setLayerConfigs,
|
||||
updateLayerConfig,
|
||||
toggleLayerVisible,
|
||||
setIsEditing,
|
||||
setEditingLayer,
|
||||
updateLayerPosition,
|
||||
setIsSelecting,
|
||||
setSelectStart,
|
||||
setSelectEnd,
|
||||
cancelSelection,
|
||||
loadCardsFromPath,
|
||||
setError,
|
||||
clearError,
|
||||
generateCode,
|
||||
copyCode
|
||||
};
|
||||
|
||||
return { state, actions };
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { Dimensions } from '../types';
|
||||
|
||||
export interface DimensionOptions {
|
||||
size: string;
|
||||
bleed: string;
|
||||
padding: string;
|
||||
grid: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析卡牌尺寸和网格配置
|
||||
*/
|
||||
export function calculateDimensions(options: DimensionOptions): Dimensions {
|
||||
const [width, height] = options.size.split('x').map(Number);
|
||||
const [bleedW, bleedH] = options.bleed.includes('x')
|
||||
? options.bleed.split('x').map(Number)
|
||||
: [Number(options.bleed), Number(options.bleed)];
|
||||
const [padW, padH] = options.padding.includes('x')
|
||||
? options.padding.split('x').map(Number)
|
||||
: [Number(options.padding), Number(options.padding)];
|
||||
|
||||
// 实际卡牌尺寸（含出血）
|
||||
const cardWidth = width + bleedW * 2;
|
||||
const cardHeight = height + bleedH * 2;
|
||||
|
||||
// 网格区域尺寸（减去 padding）
|
||||
const gridAreaWidth = width - padW * 2;
|
||||
const gridAreaHeight = height - padH * 2;
|
||||
|
||||
// 解析网格
|
||||
const [gridW, gridH] = options.grid.split('x').map(Number);
|
||||
|
||||
// 每个网格单元的尺寸（mm）
|
||||
const cellWidth = gridAreaWidth / gridW;
|
||||
const cellHeight = gridAreaHeight / gridH;
|
||||
|
||||
// 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
|
||||
const gridOriginX = bleedW + padW;
|
||||
const gridOriginY = bleedH + padH;
|
||||
|
||||
return {
|
||||
cardWidth,
|
||||
cardHeight,
|
||||
gridAreaWidth,
|
||||
gridAreaHeight,
|
||||
cellWidth,
|
||||
cellHeight,
|
||||
gridW,
|
||||
gridH,
|
||||
gridOriginX,
|
||||
gridOriginY
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算 layer 位置样式（单位：mm）
|
||||
*/
|
||||
export function getLayerStyle(
|
||||
layer: { x1: number; y1: number; x2: number; y2: number },
|
||||
dims: Dimensions
|
||||
): { left: string; top: string; width: string; height: string } {
|
||||
const left = (layer.x1 - 1) * dims.cellWidth;
|
||||
const top = (layer.y1 - 1) * dims.cellHeight;
|
||||
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
|
||||
const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
|
||||
|
||||
return {
|
||||
left: `${left}mm`,
|
||||
top: `${top}mm`,
|
||||
width: `${width}mm`,
|
||||
height: `${height}mm`
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import type { Layer, LayerConfig } from '../types';
|
||||
|
||||
/**
|
||||
* 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
|
||||
*/
|
||||
export function parseLayers(layersStr: string): Layer[] {
|
||||
if (!layersStr) return [];
|
||||
|
||||
const layers: Layer[] = [];
|
||||
const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)/g;
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(layersStr)) !== null) {
|
||||
layers.push({
|
||||
prop: match[1],
|
||||
x1: parseInt(match[2]),
|
||||
y1: parseInt(match[3]),
|
||||
x2: parseInt(match[4]),
|
||||
y2: parseInt(match[5])
|
||||
});
|
||||
}
|
||||
|
||||
return layers;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化 layers 为字符串
|
||||
*/
|
||||
export function formatLayers(layers: LayerConfig[]): string {
|
||||
return layers
|
||||
.filter(l => l.visible)
|
||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化图层配置
|
||||
*/
|
||||
export function initLayerConfigs(
|
||||
data: any[],
|
||||
existingLayersStr: string
|
||||
): LayerConfig[] {
|
||||
const parsed = parseLayers(existingLayersStr);
|
||||
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
|
||||
|
||||
return allProps.map(prop => {
|
||||
const existing = parsed.find(l => l.prop === prop);
|
||||
return {
|
||||
prop,
|
||||
visible: !!existing,
|
||||
x1: existing?.x1 || 1,
|
||||
y1: existing?.y1 || 1,
|
||||
x2: existing?.x2 || 2,
|
||||
y2: existing?.y2 || 2
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import type { DeckStore } from './deckStore';
|
||||
|
||||
/**
|
||||
* 框选相关的操作（已整合到 deckStore）
|
||||
* 此 hook 用于处理卡牌预览区域的鼠标交互
|
||||
*/
|
||||
export function useCardSelection(store: DeckStore) {
|
||||
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['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.state.isEditing || !store.state.editingLayer) return;
|
||||
|
||||
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
|
||||
|
||||
store.actions.setSelectStart({ x: gridX, y: gridY });
|
||||
store.actions.setSelectEnd({ x: gridX, y: gridY });
|
||||
store.actions.setIsSelecting(true);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
|
||||
if (!store.state.isSelecting) return;
|
||||
|
||||
const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
|
||||
|
||||
store.actions.setSelectEnd({ x: gridX, y: gridY });
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (!store.state.isSelecting || !store.state.editingLayer) return;
|
||||
|
||||
const start = store.state.selectStart!;
|
||||
const end = store.state.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.actions.updateLayerPosition(x1, y1, x2, y2);
|
||||
store.actions.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`
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user