refactor: break down & clean up
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
import { Show, For, createMemo } from 'solid-js';
|
||||
import { marked } from '../../markdown';
|
||||
import { getLayerStyle } from './hooks/dimensions';
|
||||
import { useCardSelection } from './hooks/useCardSelection';
|
||||
import { getSelectionBoxStyle } from './hooks/useCardSelection';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
|
||||
export interface CardPreviewProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容（提取为纯工具函数）
|
||||
*/
|
||||
function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return marked.parse(content) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡牌预览组件
|
||||
*/
|
||||
export function CardPreview(props: CardPreviewProps) {
|
||||
const { store } = props;
|
||||
|
||||
// 使用 createMemo 优化计算
|
||||
const currentCard = createMemo(() => store.state.cards[store.state.activeTab]);
|
||||
const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
|
||||
const selectionStyle = createMemo(() =>
|
||||
getSelectionBoxStyle(store.state.selectStart, store.state.selectEnd, store.state.dimensions)
|
||||
);
|
||||
|
||||
const selection = useCardSelection(store);
|
||||
|
||||
let cardRef: HTMLDivElement | undefined;
|
||||
|
||||
return (
|
||||
<div class="flex justify-center">
|
||||
<Show when={store.state.activeTab < store.state.cards.length}>
|
||||
<div
|
||||
ref={cardRef}
|
||||
class="relative bg-white border border-gray-300 shadow-lg"
|
||||
style={{
|
||||
width: `${store.state.dimensions?.cardWidth}mm`,
|
||||
height: `${store.state.dimensions?.cardHeight}mm`
|
||||
}}
|
||||
onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
|
||||
onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
|
||||
onMouseUp={selection.onMouseUp}
|
||||
onMouseLeave={selection.onMouseLeave}
|
||||
>
|
||||
{/* 框选遮罩 */}
|
||||
<Show when={store.state.isSelecting && selectionStyle()}>
|
||||
<div
|
||||
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
|
||||
style={selectionStyle()!}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
{/* 网格区域容器 */}
|
||||
<div
|
||||
class="absolute"
|
||||
style={{
|
||||
left: `${store.state.dimensions?.gridOriginX}mm`,
|
||||
top: `${store.state.dimensions?.gridOriginY}mm`,
|
||||
width: `${store.state.dimensions?.gridAreaWidth}mm`,
|
||||
height: `${store.state.dimensions?.gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
{/* 编辑模式下的网格线 */}
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<For each={Array.from({ length: (store.state.dimensions?.gridW || 0) - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
|
||||
style={{ left: `${(i() + 1) * (store.state.dimensions?.cellWidth || 0)}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<For each={Array.from({ length: (store.state.dimensions?.gridH || 0) - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
|
||||
style={{ top: `${(i() + 1) * (store.state.dimensions?.cellHeight || 0)}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 渲染每个 layer */}
|
||||
<For each={visibleLayers()}>
|
||||
{(layer) => {
|
||||
const style = getLayerStyle(layer, store.state.dimensions!);
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
||||
store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
style={style}
|
||||
innerHTML={renderLayerContent(layer, currentCard())}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Show } from 'solid-js';
|
||||
import { CardPreview } from './CardPreview';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
|
||||
export interface DeckContentProps {
|
||||
store: DeckStore;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡牌预览内容区域：错误/加载/卡牌预览/空状态
|
||||
*/
|
||||
export function DeckContent(props: DeckContentProps) {
|
||||
return (
|
||||
<>
|
||||
{/* 错误提示 */}
|
||||
<Show when={props.store.state.error}>
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{props.store.state.error}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 加载状态 */}
|
||||
<Show when={props.isLoading}>
|
||||
<div class="text-center text-gray-500 py-8">
|
||||
加载卡牌数据中...
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 卡牌预览 */}
|
||||
<Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
|
||||
<CardPreview store={props.store} />
|
||||
</Show>
|
||||
|
||||
{/* 空状态 */}
|
||||
<Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
|
||||
<div class="text-center text-gray-500 py-8">
|
||||
暂无卡牌数据
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { For } from 'solid-js';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
|
||||
export interface DeckHeaderProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡牌预览头部：编辑按钮和 Tab 选择器
|
||||
*/
|
||||
export function DeckHeader(props: DeckHeaderProps) {
|
||||
const { store } = props;
|
||||
|
||||
return (
|
||||
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
|
||||
{/* 编辑按钮 */}
|
||||
<button
|
||||
onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
|
||||
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
|
||||
store.state.isEditing && !store.state.fixed
|
||||
? 'bg-blue-100 text-blue-600'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
|
||||
</button>
|
||||
|
||||
{/* Tab 选择器 */}
|
||||
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
|
||||
<For each={store.state.cards}>
|
||||
{(card, index) => (
|
||||
<button
|
||||
onClick={() => store.actions.setActiveTab(index())}
|
||||
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
|
||||
store.state.activeTab === index()
|
||||
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{card.label || card.name || `Card ${index() + 1}`}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { For } from 'solid-js';
|
||||
import type { DeckStore } from '../hooks/deckStore';
|
||||
|
||||
export interface DataEditorPanelProps {
|
||||
activeTab: number;
|
||||
cards: DeckStore['state']['cards'];
|
||||
updateCardData: DeckStore['actions']['updateCardData'];
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧：CSV 数据编辑面板
|
||||
*/
|
||||
export function DataEditorPanel(props: DataEditorPanelProps) {
|
||||
return (
|
||||
<div class="w-64 flex-shrink-0">
|
||||
<h3 class="font-bold mb-2">卡牌数据</h3>
|
||||
<div class="space-y-2 max-h-96 overflow-y-auto">
|
||||
<For each={Object.keys(props.cards[props.activeTab] || {})}>
|
||||
{(key) => (
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">{key}</label>
|
||||
<textarea
|
||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||
rows={3}
|
||||
value={props.cards[props.activeTab]?.[key] || ''}
|
||||
onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { For } from 'solid-js';
|
||||
import type { DeckStore } from '../hooks/deckStore';
|
||||
|
||||
export interface PropertiesEditorPanelProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
/**
|
||||
* 右侧：卡牌属性编辑面板
|
||||
*/
|
||||
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||
const { store } = props;
|
||||
|
||||
return (
|
||||
<div class="w-64 flex-shrink-0">
|
||||
<h3 class="font-bold mb-2">卡牌属性</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||
value={store.state.size}
|
||||
onInput={(e) => store.actions.setSize(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">网格</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||
value={store.state.grid}
|
||||
onInput={(e) => store.actions.setGrid(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||
value={store.state.bleed}
|
||||
onInput={(e) => store.actions.setBleed(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||
value={store.state.padding}
|
||||
onInput={(e) => store.actions.setPadding(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h4 class="font-medium text-sm text-gray-700">图层</h4>
|
||||
<For each={store.state.layerConfigs}>
|
||||
{(layer) => (
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={layer.visible}
|
||||
onChange={() => store.actions.toggleLayerVisible(layer.prop)}
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm flex-1">{layer.prop}</span>
|
||||
<button
|
||||
onClick={() => store.actions.setEditingLayer(layer.prop)}
|
||||
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
||||
store.state.editingLayer === layer.prop
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<button
|
||||
onClick={store.actions.copyCode}
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
|
||||
>
|
||||
📋 复制代码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { DataEditorPanel } from './DataEditorPanel';
|
||||
export { PropertiesEditorPanel } from './PropertiesEditorPanel';
|
||||
export type { DataEditorPanelProps } from './DataEditorPanel';
|
||||
@@ -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`
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { customElement, noShadowDOM } from 'solid-element';
|
||||
import { Show, createEffect, onCleanup } from 'solid-js';
|
||||
import { resolvePath } from '../utils/path';
|
||||
import { createDeckStore } from './hooks/deckStore';
|
||||
import { DeckHeader } from './DeckHeader';
|
||||
import { DeckContent } from './DeckContent';
|
||||
import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
|
||||
|
||||
interface DeckProps {
|
||||
size?: string;
|
||||
grid?: string;
|
||||
bleed?: string;
|
||||
padding?: string;
|
||||
layers?: string;
|
||||
fixed?: boolean | string;
|
||||
}
|
||||
|
||||
customElement<DeckProps>('md-deck', {
|
||||
size: '54x86',
|
||||
grid: '5x8',
|
||||
bleed: '1',
|
||||
padding: '2',
|
||||
layers: '',
|
||||
fixed: false
|
||||
}, (props, { element }) => {
|
||||
noShadowDOM();
|
||||
|
||||
// 从 element 的 textContent 获取 CSV 路径
|
||||
const csvPath = element?.textContent?.trim() || '';
|
||||
|
||||
// 隐藏原始文本内容
|
||||
if (element) {
|
||||
element.textContent = '';
|
||||
}
|
||||
|
||||
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
||||
const articleEl = element?.closest('article[data-src]');
|
||||
const articlePath = articleEl?.getAttribute('data-src') || '';
|
||||
|
||||
// 解析相对路径
|
||||
const resolvedSrc = resolvePath(articlePath, csvPath);
|
||||
|
||||
// 创建 store 并加载数据
|
||||
const store = createDeckStore(resolvedSrc, (props.layers as string) || '');
|
||||
|
||||
// 初始化 store 属性
|
||||
store.actions.setSize(props.size || '54x86');
|
||||
store.actions.setGrid(props.grid || '5x8');
|
||||
store.actions.setBleed(props.bleed || '1');
|
||||
store.actions.setPadding(props.padding || '2');
|
||||
|
||||
// 加载 CSV 数据
|
||||
store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
|
||||
|
||||
// 清理函数
|
||||
onCleanup(() => {
|
||||
store.actions.clearError();
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="md-deck flex gap-4">
|
||||
{/* 左侧：CSV 数据编辑 */}
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<DataEditorPanel
|
||||
activeTab={store.state.activeTab}
|
||||
cards={store.state.cards}
|
||||
updateCardData={store.actions.updateCardData}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
{/* 中间：卡牌预览和控制 */}
|
||||
<div class="flex-1">
|
||||
{/* Tab 选择器和编辑按钮 */}
|
||||
<Show when={store.state.cards.length > 0 && !store.state.error}>
|
||||
<DeckHeader store={store} />
|
||||
</Show>
|
||||
|
||||
{/* 内容区域：错误/加载/卡牌预览/空状态 */}
|
||||
<DeckContent store={store} isLoading={store.state.isLoading} />
|
||||
</div>
|
||||
|
||||
{/* 右侧：属性编辑表单 */}
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<PropertiesEditorPanel store={store} />
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
export interface CardData {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export interface Layer {
|
||||
prop: string;
|
||||
x1: number;
|
||||
y1: number;
|
||||
x2: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
export interface LayerConfig {
|
||||
prop: string;
|
||||
visible: boolean;
|
||||
x1: number;
|
||||
y1: number;
|
||||
x2: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
export interface Dimensions {
|
||||
cardWidth: number;
|
||||
cardHeight: number;
|
||||
gridAreaWidth: number;
|
||||
gridAreaHeight: number;
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
gridW: number;
|
||||
gridH: number;
|
||||
gridOriginX: number;
|
||||
gridOriginY: number;
|
||||
}
|
||||
|
||||
export interface SelectionState {
|
||||
isSelecting: boolean;
|
||||
selectStart: { x: number; y: number } | null;
|
||||
selectEnd: { x: number; y: number } | null;
|
||||
}
|
||||
Reference in New Issue
Block a user