refactor: break down & clean up
This commit is contained in:
@@ -1,218 +0,0 @@
|
||||
import { createStore } from 'solid-js/store';
|
||||
import { calculateDimensions } from '../utils/dimensions';
|
||||
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||
|
||||
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;
|
||||
|
||||
// 错误状态
|
||||
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;
|
||||
|
||||
// 初始化和数据加载
|
||||
loadCards: (cards: CardData[]) => void;
|
||||
setError: (error: string | null) => void;
|
||||
|
||||
// 生成代码
|
||||
generateCode: () => string;
|
||||
copyCode: () => void;
|
||||
}
|
||||
|
||||
export interface DeckStore {
|
||||
state: DeckState;
|
||||
actions: DeckActions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建 deck store
|
||||
*/
|
||||
export function createDeckStore(): DeckStore {
|
||||
const [state, setState] = createStore<DeckState>({
|
||||
size: '54x86',
|
||||
grid: '5x8',
|
||||
bleed: '1',
|
||||
padding: '2',
|
||||
fixed: false,
|
||||
src: '',
|
||||
dimensions: null,
|
||||
cards: [],
|
||||
activeTab: 0,
|
||||
layerConfigs: [],
|
||||
isEditing: false,
|
||||
editingLayer: null,
|
||||
isSelecting: false,
|
||||
selectStart: null,
|
||||
selectEnd: null,
|
||||
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 });
|
||||
};
|
||||
|
||||
// 加载卡牌数据并初始化 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
|
||||
.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(() => {
|
||||
alert('已复制到剪贴板！');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
};
|
||||
|
||||
const actions: DeckActions = {
|
||||
setSize,
|
||||
setGrid,
|
||||
setBleed,
|
||||
setPadding,
|
||||
setCards,
|
||||
setActiveTab,
|
||||
updateCardData,
|
||||
setLayerConfigs,
|
||||
updateLayerConfig,
|
||||
toggleLayerVisible,
|
||||
setIsEditing,
|
||||
setEditingLayer,
|
||||
updateLayerPosition,
|
||||
setIsSelecting,
|
||||
setSelectStart,
|
||||
setSelectEnd,
|
||||
cancelSelection,
|
||||
loadCards,
|
||||
setError,
|
||||
generateCode,
|
||||
copyCode
|
||||
};
|
||||
|
||||
return { state, actions };
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import type { DeckStore } from './deckStore';
|
||||
|
||||
/**
|
||||
* 框选相关的操作（已整合到 deckStore）
|
||||
* 此 hook 保留用于向后兼容或提取特定逻辑
|
||||
*/
|
||||
export function useSelection(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