feat: add layer font size
This commit is contained in:
parent
19256b501f
commit
1dca41b36a
|
|
@ -1,7 +1,7 @@
|
||||||
import { createStore } from 'solid-js/store';
|
import { createStore } from 'solid-js/store';
|
||||||
import { calculateDimensions } from './dimensions';
|
import { calculateDimensions } from './dimensions';
|
||||||
import { loadCSV } from '../../utils/csv-loader';
|
import { loadCSV } from '../../utils/csv-loader';
|
||||||
import { initLayerConfigs } from './layer-parser';
|
import { initLayerConfigs, formatLayers } from './layer-parser';
|
||||||
import type { CardData, LayerConfig, Dimensions } from '../types';
|
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -277,10 +277,7 @@ export function createDeckStore(
|
||||||
const clearError = () => setState({ error: null });
|
const clearError = () => setState({ error: null });
|
||||||
|
|
||||||
const generateCode = () => {
|
const generateCode = () => {
|
||||||
const layersStr = state.layerConfigs
|
const layersStr = formatLayers(state.layerConfigs);
|
||||||
.filter(l => l.visible)
|
|
||||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}${l.orientation && l.orientation !== 'n' ? `${l.orientation}` : ''}`)
|
|
||||||
.join(' ');
|
|
||||||
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}" font-size="${state.fontSize}" layers="${layersStr}"}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,16 @@
|
||||||
import type { Layer, LayerConfig } from '../types';
|
import type { Layer, LayerConfig } from '../types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1" 或 "body:1,7-5,8,s title:1,1-5,1,e"
|
* 解析 layers 字符串
|
||||||
|
* 格式:body:1,7-5,8 title:1,1-4,1f6.6s
|
||||||
|
* f[fontSize] 表示字体大小(可选),方向字母在最后(可选)
|
||||||
*/
|
*/
|
||||||
export function parseLayers(layersStr: string): Layer[] {
|
export function parseLayers(layersStr: string): Layer[] {
|
||||||
if (!layersStr) return [];
|
if (!layersStr) return [];
|
||||||
|
|
||||||
const layers: Layer[] = [];
|
const layers: Layer[] = [];
|
||||||
const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)([nsew])?/g;
|
// 匹配:prop:x1,y1-x2,y2[ffontSize][direction]
|
||||||
|
const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?/g;
|
||||||
let match;
|
let match;
|
||||||
|
|
||||||
while ((match = regex.exec(layersStr)) !== null) {
|
while ((match = regex.exec(layersStr)) !== null) {
|
||||||
|
|
@ -17,7 +20,8 @@ export function parseLayers(layersStr: string): Layer[] {
|
||||||
y1: parseInt(match[3]),
|
y1: parseInt(match[3]),
|
||||||
x2: parseInt(match[4]),
|
x2: parseInt(match[4]),
|
||||||
y2: parseInt(match[5]),
|
y2: parseInt(match[5]),
|
||||||
orientation: match[6] as 'n' | 's' | 'e' | 'w' | undefined
|
fontSize: match[7] ? parseFloat(match[7]) : undefined,
|
||||||
|
orientation: match[8] as 'n' | 's' | 'e' | 'w' | undefined
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -30,7 +34,16 @@ export function parseLayers(layersStr: string): Layer[] {
|
||||||
export function formatLayers(layers: LayerConfig[]): string {
|
export function formatLayers(layers: LayerConfig[]): string {
|
||||||
return layers
|
return layers
|
||||||
.filter(l => l.visible)
|
.filter(l => l.visible)
|
||||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}${l.orientation && l.orientation !== 'n' ? `${l.orientation}` : ''}`)
|
.map(l => {
|
||||||
|
let str = `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`;
|
||||||
|
if (l.fontSize) {
|
||||||
|
str += `f${l.fontSize}`;
|
||||||
|
}
|
||||||
|
if (l.orientation && l.orientation !== 'n') {
|
||||||
|
str += l.orientation;
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
})
|
||||||
.join(' ');
|
.join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,7 +66,8 @@ export function initLayerConfigs(
|
||||||
y1: existing?.y1 || 1,
|
y1: existing?.y1 || 1,
|
||||||
x2: existing?.x2 || 2,
|
x2: existing?.x2 || 2,
|
||||||
y2: existing?.y2 || 2,
|
y2: existing?.y2 || 2,
|
||||||
orientation: existing?.orientation
|
orientation: existing?.orientation,
|
||||||
|
fontSize: existing?.fontSize
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ export interface Layer {
|
||||||
x2: number;
|
x2: number;
|
||||||
y2: number;
|
y2: number;
|
||||||
orientation?: 'n' | 's' | 'e' | 'w';
|
orientation?: 'n' | 's' | 'e' | 'w';
|
||||||
|
fontSize?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LayerConfig {
|
export interface LayerConfig {
|
||||||
|
|
@ -19,6 +20,7 @@ export interface LayerConfig {
|
||||||
x2: number;
|
x2: number;
|
||||||
y2: number;
|
y2: number;
|
||||||
orientation?: 'n' | 's' | 'e' | 'w';
|
orientation?: 'n' | 's' | 'e' | 'w';
|
||||||
|
fontSize?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Dimensions {
|
export interface Dimensions {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue