refactor: clean up deck wise font size
This commit is contained in:
parent
a2ac902129
commit
f53dc847ca
|
|
@ -36,7 +36,7 @@ export function CardLayer(props: CardLayerProps) {
|
||||||
class="absolute flex items-center justify-center text-center prose prose-sm"
|
class="absolute flex items-center justify-center text-center prose prose-sm"
|
||||||
style={{
|
style={{
|
||||||
...getLayerStyle(layer, props.dimensions),
|
...getLayerStyle(layer, props.dimensions),
|
||||||
'font-size': `${props.dimensions.fontSize}mm`
|
'font-size': `${layer.fontSize || 3}mm`
|
||||||
}}
|
}}
|
||||||
innerHTML={renderLayerContent(layer, props.cardData)}
|
innerHTML={renderLayerContent(layer, props.cardData)}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,6 @@ export function PrintPreview(props: PrintPreviewProps) {
|
||||||
gridOriginY: store.state.dimensions?.gridOriginY || 0,
|
gridOriginY: store.state.dimensions?.gridOriginY || 0,
|
||||||
gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
|
gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
|
||||||
gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
|
gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
|
||||||
fontSize: store.state.dimensions?.fontSize || 3,
|
|
||||||
visibleLayers: visibleLayers(),
|
visibleLayers: visibleLayers(),
|
||||||
dimensions: store.state.dimensions!
|
dimensions: store.state.dimensions!
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ export interface PropertiesEditorPanelProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 卡牌属性编辑面板:尺寸、网格、字体、出血、内边距
|
* 卡牌属性编辑面板:尺寸、网格、出血、内边距
|
||||||
*/
|
*/
|
||||||
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||||
const { store } = props;
|
const { store } = props;
|
||||||
|
|
@ -56,17 +56,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium text-gray-700">牌面字体 (mm)</label>
|
<label class="block text-sm font-medium text-gray-700">出血 / 内边距 (mm)</label>
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
|
||||||
value={store.state.fontSize}
|
|
||||||
onChange={(e) => store.actions.setFontSize(Number(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
|
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
|
@ -75,18 +65,12 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||||
onChange={(e) => store.actions.setBleed(Number(e.target.value))}
|
onChange={(e) => store.actions.setBleed(Number(e.target.value))}
|
||||||
placeholder="出血"
|
placeholder="出血"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||||||
value={store.state.padding}
|
value={store.state.padding}
|
||||||
onChange={(e) => store.actions.setPadding(Number(e.target.value))}
|
onChange={(e) => store.actions.setPadding(Number(e.target.value))}
|
||||||
placeholder="内边距"
|
placeholder="内边距"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,7 @@ export const DECK_DEFAULTS = {
|
||||||
GRID_W: 5,
|
GRID_W: 5,
|
||||||
GRID_H: 8,
|
GRID_H: 8,
|
||||||
BLEED: 1,
|
BLEED: 1,
|
||||||
PADDING: 2,
|
PADDING: 2
|
||||||
FONT_SIZE: 3
|
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export interface DeckState {
|
export interface DeckState {
|
||||||
|
|
@ -25,7 +24,6 @@ export interface DeckState {
|
||||||
gridH: number;
|
gridH: number;
|
||||||
bleed: number;
|
bleed: number;
|
||||||
padding: number;
|
padding: number;
|
||||||
fontSize: number;
|
|
||||||
fixed: boolean;
|
fixed: boolean;
|
||||||
src: string;
|
src: string;
|
||||||
rawSrc: string; // 原始 CSV 路径(用于生成代码时保持相对路径)
|
rawSrc: string; // 原始 CSV 路径(用于生成代码时保持相对路径)
|
||||||
|
|
@ -74,7 +72,6 @@ export interface DeckActions {
|
||||||
setGridH: (grid: number) => void;
|
setGridH: (grid: number) => void;
|
||||||
setBleed: (bleed: number) => void;
|
setBleed: (bleed: number) => void;
|
||||||
setPadding: (padding: number) => void;
|
setPadding: (padding: number) => void;
|
||||||
setFontSize: (size: number) => void;
|
|
||||||
|
|
||||||
// 数据设置
|
// 数据设置
|
||||||
setCards: (cards: CardData[]) => void;
|
setCards: (cards: CardData[]) => void;
|
||||||
|
|
@ -138,7 +135,6 @@ export function createDeckStore(
|
||||||
gridH: DECK_DEFAULTS.GRID_H,
|
gridH: DECK_DEFAULTS.GRID_H,
|
||||||
bleed: DECK_DEFAULTS.BLEED,
|
bleed: DECK_DEFAULTS.BLEED,
|
||||||
padding: DECK_DEFAULTS.PADDING,
|
padding: DECK_DEFAULTS.PADDING,
|
||||||
fontSize: DECK_DEFAULTS.FONT_SIZE,
|
|
||||||
fixed: false,
|
fixed: false,
|
||||||
src: initialSrc,
|
src: initialSrc,
|
||||||
rawSrc: initialSrc,
|
rawSrc: initialSrc,
|
||||||
|
|
@ -169,8 +165,7 @@ export function createDeckStore(
|
||||||
gridW: state.gridW,
|
gridW: state.gridW,
|
||||||
gridH: state.gridH,
|
gridH: state.gridH,
|
||||||
bleed: state.bleed,
|
bleed: state.bleed,
|
||||||
padding: state.padding,
|
padding: state.padding
|
||||||
fontSize: state.fontSize
|
|
||||||
});
|
});
|
||||||
setState({ dimensions: dims });
|
setState({ dimensions: dims });
|
||||||
};
|
};
|
||||||
|
|
@ -199,10 +194,6 @@ export function createDeckStore(
|
||||||
setState({ padding });
|
setState({ padding });
|
||||||
updateDimensions();
|
updateDimensions();
|
||||||
};
|
};
|
||||||
const setFontSize = (size: number) => {
|
|
||||||
setState({ fontSize: size });
|
|
||||||
updateDimensions();
|
|
||||||
};
|
|
||||||
|
|
||||||
const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
|
const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
|
||||||
const setActiveTab = (index: number) => setState({ activeTab: index });
|
const setActiveTab = (index: number) => setState({ activeTab: index });
|
||||||
|
|
@ -278,7 +269,7 @@ export function createDeckStore(
|
||||||
|
|
||||||
const generateCode = () => {
|
const generateCode = () => {
|
||||||
const layersStr = formatLayers(state.layerConfigs);
|
const layersStr = formatLayers(state.layerConfigs);
|
||||||
return `:md-deck[${state.rawSrc || state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" font-size="${state.fontSize}" layers="${layersStr}"}`;
|
return `:md-deck[${state.rawSrc || state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const copyCode = async () => {
|
const copyCode = async () => {
|
||||||
|
|
@ -323,7 +314,6 @@ export function createDeckStore(
|
||||||
setGridH,
|
setGridH,
|
||||||
setBleed,
|
setBleed,
|
||||||
setPadding,
|
setPadding,
|
||||||
setFontSize,
|
|
||||||
setCards,
|
setCards,
|
||||||
setActiveTab,
|
setActiveTab,
|
||||||
updateCardData,
|
updateCardData,
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@ export interface DimensionOptions {
|
||||||
padding: number;
|
padding: number;
|
||||||
gridW: number;
|
gridW: number;
|
||||||
gridH: number;
|
gridH: number;
|
||||||
fontSize?: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -41,7 +40,6 @@ export function calculateDimensions(options: DimensionOptions): Dimensions {
|
||||||
gridH: options.gridH,
|
gridH: options.gridH,
|
||||||
gridOriginX,
|
gridOriginX,
|
||||||
gridOriginY,
|
gridOriginY,
|
||||||
fontSize: options.fontSize ?? 3
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,6 @@ export interface ExportOptions {
|
||||||
gridOriginY: number;
|
gridOriginY: number;
|
||||||
gridAreaWidth: number;
|
gridAreaWidth: number;
|
||||||
gridAreaHeight: number;
|
gridAreaHeight: number;
|
||||||
fontSize: number;
|
|
||||||
visibleLayers: LayerConfig[];
|
visibleLayers: LayerConfig[];
|
||||||
dimensions: Dimensions;
|
dimensions: Dimensions;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ interface DeckProps {
|
||||||
gridH?: number;
|
gridH?: number;
|
||||||
bleed?: number | string;
|
bleed?: number | string;
|
||||||
padding?: number | string;
|
padding?: number | string;
|
||||||
fontSize?: number;
|
|
||||||
layers?: string;
|
layers?: string;
|
||||||
fixed?: boolean | string;
|
fixed?: boolean | string;
|
||||||
}
|
}
|
||||||
|
|
@ -30,7 +29,6 @@ customElement<DeckProps>('md-deck', {
|
||||||
gridH: 8,
|
gridH: 8,
|
||||||
bleed: 1,
|
bleed: 1,
|
||||||
padding: 2,
|
padding: 2,
|
||||||
fontSize: 3,
|
|
||||||
layers: '',
|
layers: '',
|
||||||
fixed: false
|
fixed: false
|
||||||
}, (props, { element }) => {
|
}, (props, { element }) => {
|
||||||
|
|
@ -87,12 +85,6 @@ customElement<DeckProps>('md-deck', {
|
||||||
store.actions.setPadding(props.padding ?? 2);
|
store.actions.setPadding(props.padding ?? 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof props.fontSize === 'string') {
|
|
||||||
store.actions.setFontSize(Number(props.fontSize));
|
|
||||||
} else {
|
|
||||||
store.actions.setFontSize(props.fontSize ?? 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载 CSV 数据
|
// 加载 CSV 数据
|
||||||
store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || '');
|
store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || '');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,6 @@ export interface Dimensions {
|
||||||
gridH: number;
|
gridH: number;
|
||||||
gridOriginX: number;
|
gridOriginX: number;
|
||||||
gridOriginY: number;
|
gridOriginY: number;
|
||||||
fontSize: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SelectionState {
|
export interface SelectionState {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue