refactor: ai's attempt
This commit is contained in:
parent
561d647bce
commit
88cfe03779
|
|
@ -0,0 +1,10 @@
|
|||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Rider 忽略的文件
|
||||
/projectSettingsUpdater.xml
|
||||
/modules.xml
|
||||
/.idea.ttrpg-tools.iml
|
||||
/contentModel.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
|
||||
</project>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import { Show, For } from 'solid-js';
|
||||
import { marked } from '../markdown';
|
||||
import type { CardData, LayerConfig, Dimensions } from './types';
|
||||
import { getLayerStyle } from './utils/dimensions';
|
||||
import { getSelectionBoxStyle } from './hooks/use-selection';
|
||||
|
||||
export interface CardPreviewProps {
|
||||
cards: CardData[];
|
||||
activeTab: number;
|
||||
layerConfigs: LayerConfig[];
|
||||
dimensions: Dimensions;
|
||||
isEditing: boolean;
|
||||
isFixed: boolean;
|
||||
editingLayer: string | null;
|
||||
isSelecting: boolean;
|
||||
selectStart: { x: number; y: number } | null;
|
||||
selectEnd: { x: number; y: number } | null;
|
||||
onMouseDown: (e: MouseEvent) => void;
|
||||
onMouseMove: (e: MouseEvent) => void;
|
||||
onMouseUp: () => void;
|
||||
onMouseLeave: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容
|
||||
*/
|
||||
function renderLayer(layer: { prop: string }, cardData: CardData): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return marked.parse(content) as string;
|
||||
}
|
||||
|
||||
export function CardPreview(props: CardPreviewProps) {
|
||||
const currentCard = () => props.cards[props.activeTab];
|
||||
const visibleLayers = () => props.layerConfigs.filter(l => l.visible);
|
||||
const selectionStyle = () =>
|
||||
getSelectionBoxStyle(props.selectStart, props.selectEnd, props.dimensions);
|
||||
|
||||
return (
|
||||
<div class="flex justify-center">
|
||||
<Show when={props.activeTab < props.cards.length}>
|
||||
<div
|
||||
class="relative bg-white border border-gray-300 shadow-lg"
|
||||
style={{
|
||||
width: `${props.dimensions.cardWidth}mm`,
|
||||
height: `${props.dimensions.cardHeight}mm`
|
||||
}}
|
||||
onMouseDown={props.onMouseDown}
|
||||
onMouseMove={props.onMouseMove}
|
||||
onMouseUp={props.onMouseUp}
|
||||
onMouseLeave={props.onMouseLeave}
|
||||
>
|
||||
{/* 框选遮罩 */}
|
||||
<Show when={props.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: `${props.dimensions.gridOriginX}mm`,
|
||||
top: `${props.dimensions.gridOriginY}mm`,
|
||||
width: `${props.dimensions.gridAreaWidth}mm`,
|
||||
height: `${props.dimensions.gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
{/* 编辑模式下的网格线 */}
|
||||
<Show when={props.isEditing && !props.isFixed}>
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<For each={Array.from({ length: props.dimensions.gridW - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
|
||||
style={{ left: `${(i() + 1) * props.dimensions.cellWidth}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<For each={Array.from({ length: props.dimensions.gridH - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
|
||||
style={{ top: `${(i() + 1) * props.dimensions.cellHeight}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 渲染每个 layer */}
|
||||
<For each={visibleLayers()}>
|
||||
{(layer) => {
|
||||
const style = getLayerStyle(layer, props.dimensions);
|
||||
const isEditingThis = props.editingLayer === layer.prop;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
||||
isEditingThis ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
style={style}
|
||||
innerHTML={renderLayer(layer, currentCard())}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import { Show, For } from 'solid-js';
|
||||
import type { CardData, LayerConfig } from './types';
|
||||
|
||||
export interface DataEditorPanelProps {
|
||||
cards: CardData[];
|
||||
activeTab: number;
|
||||
updateCardData: (key: string, value: string) => void;
|
||||
}
|
||||
|
||||
export interface PropertiesEditorPanelProps {
|
||||
localSize: string;
|
||||
localGrid: string;
|
||||
localBleed: string;
|
||||
localPadding: string;
|
||||
layerConfigs: LayerConfig[];
|
||||
editingLayer: string | null;
|
||||
onSizeChange: (value: string) => void;
|
||||
onGridChange: (value: string) => void;
|
||||
onBleedChange: (value: string) => void;
|
||||
onPaddingChange: (value: string) => void;
|
||||
onToggleLayerVisible: (prop: string) => void;
|
||||
onStartEditingLayer: (prop: string) => void;
|
||||
onCopyCode: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧：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(key, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 右侧：卡牌属性编辑面板
|
||||
*/
|
||||
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||||
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={props.localSize}
|
||||
onInput={(e) => props.onSizeChange(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={props.localGrid}
|
||||
onInput={(e) => props.onGridChange(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={props.localBleed}
|
||||
onInput={(e) => props.onBleedChange(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={props.localPadding}
|
||||
onInput={(e) => props.onPaddingChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h4 class="font-medium text-sm text-gray-700">图层</h4>
|
||||
<For each={props.layerConfigs}>
|
||||
{(layer) => (
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={layer.visible}
|
||||
onChange={() => props.onToggleLayerVisible(layer.prop)}
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm flex-1">{layer.prop}</span>
|
||||
<button
|
||||
onClick={() => props.onStartEditingLayer(layer.prop)}
|
||||
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
||||
props.editingLayer === layer.prop
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{props.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<button
|
||||
onClick={props.onCopyCode}
|
||||
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,70 @@
|
|||
import { createSignal } from 'solid-js';
|
||||
import type { LayerConfig } from '../types';
|
||||
import { formatLayers } from '../utils/layer-parser';
|
||||
|
||||
/**
|
||||
* 图层编辑相关的状态和操作
|
||||
*/
|
||||
export function useLayerEditor(
|
||||
props: any,
|
||||
src: string,
|
||||
localSize: () => string,
|
||||
localGrid: () => string,
|
||||
localBleed: () => string,
|
||||
localPadding: () => string
|
||||
) {
|
||||
const [isEditing, setIsEditing] = createSignal(false);
|
||||
const [editingLayer, setEditingLayer] = createSignal<string | null>(null);
|
||||
const [layerConfigs, setLayerConfigs] = createSignal<LayerConfig[]>([]);
|
||||
|
||||
const toggleLayerVisible = (prop: string) => {
|
||||
setLayerConfigs(configs => configs.map(c =>
|
||||
c.prop === prop ? { ...c, visible: !c.visible } : c
|
||||
));
|
||||
};
|
||||
|
||||
const startEditingLayer = (prop: string) => {
|
||||
setEditingLayer(prop);
|
||||
};
|
||||
|
||||
const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
|
||||
const layer = editingLayer();
|
||||
if (!layer) return;
|
||||
|
||||
setLayerConfigs(configs => configs.map(c =>
|
||||
c.prop === layer ? { ...c, x1, y1, x2, y2 } : c
|
||||
));
|
||||
setEditingLayer(null);
|
||||
};
|
||||
|
||||
const generateCode = () => {
|
||||
const layersStr = formatLayers(layerConfigs());
|
||||
return `:md-deck[${src}]{size="${localSize()}" grid="${localGrid()}" bleed="${localBleed()}" padding="${localPadding()}" layers="${layersStr}"}`;
|
||||
};
|
||||
|
||||
const copyCode = () => {
|
||||
const code = generateCode();
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
alert('已复制到剪贴板！');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
};
|
||||
|
||||
const isFixed = () => props.fixed === true || props.fixed === 'true';
|
||||
|
||||
return {
|
||||
isEditing,
|
||||
setIsEditing,
|
||||
editingLayer,
|
||||
setEditingLayer,
|
||||
layerConfigs,
|
||||
setLayerConfigs,
|
||||
toggleLayerVisible,
|
||||
startEditingLayer,
|
||||
updateLayerPosition,
|
||||
generateCode,
|
||||
copyCode,
|
||||
isFixed
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import { createSignal } from 'solid-js';
|
||||
import type { Dimensions, LayerConfig } from '../types';
|
||||
|
||||
/**
|
||||
* 框选相关的状态和操作
|
||||
*/
|
||||
export function useSelection(
|
||||
isEditing: () => boolean,
|
||||
editingLayer: () => string | null,
|
||||
dimensions: () => Dimensions
|
||||
) {
|
||||
const [isSelecting, setIsSelecting] = createSignal(false);
|
||||
const [selectStart, setSelectStart] = createSignal<{ x: number; y: number } | null>(null);
|
||||
const [selectEnd, setSelectEnd] = createSignal<{ x: number; y: number } | null>(null);
|
||||
|
||||
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement) => {
|
||||
const rect = cardEl.getBoundingClientRect();
|
||||
const dims = dimensions();
|
||||
|
||||
const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
|
||||
const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
|
||||
|
||||
const gridX = Math.max(1, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1);
|
||||
const gridY = Math.max(1, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1);
|
||||
|
||||
return {
|
||||
gridX: Math.max(1, Math.min(dims.gridW, gridX)),
|
||||
gridY: Math.max(1, Math.min(dims.gridH, gridY))
|
||||
};
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
if (!isEditing() || !editingLayer()) return;
|
||||
|
||||
const cardEl = e.currentTarget as HTMLElement;
|
||||
const { gridX, gridY } = calculateGridCoords(e, cardEl);
|
||||
|
||||
setSelectStart({ x: gridX, y: gridY });
|
||||
setSelectEnd({ x: gridX, y: gridY });
|
||||
setIsSelecting(true);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!isSelecting()) return;
|
||||
|
||||
const cardEl = e.currentTarget as HTMLElement;
|
||||
const { gridX, gridY } = calculateGridCoords(e, cardEl);
|
||||
|
||||
setSelectEnd({ x: gridX, y: gridY });
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (!isSelecting() || !editingLayer()) return;
|
||||
|
||||
const start = selectStart()!;
|
||||
const end = 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);
|
||||
|
||||
return { x1, y1, x2, y2 };
|
||||
};
|
||||
|
||||
const cancelSelection = () => {
|
||||
setIsSelecting(false);
|
||||
setSelectStart(null);
|
||||
setSelectEnd(null);
|
||||
};
|
||||
|
||||
return {
|
||||
isSelecting,
|
||||
selectStart,
|
||||
selectEnd,
|
||||
handleMouseDown,
|
||||
handleMouseMove,
|
||||
handleMouseUp,
|
||||
cancelSelection
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算框选区域的样式
|
||||
*/
|
||||
export function getSelectionBoxStyle(
|
||||
selectStart: { x: number; y: number } | null,
|
||||
selectEnd: { x: number; y: number } | null,
|
||||
dims: Dimensions
|
||||
): { left: string; top: string; width: string; height: string } | null {
|
||||
if (!selectStart || !selectEnd) 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`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,61 +1,14 @@
|
|||
import { customElement, noShadowDOM } from 'solid-element';
|
||||
import { createSignal, For, Show, createEffect, createMemo, createResource, onMount } from 'solid-js';
|
||||
import { parse } from 'csv-parse/browser/esm/sync';
|
||||
import { marked } from '../markdown';
|
||||
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
|
||||
import { resolvePath } from '../utils/path';
|
||||
|
||||
interface CardData {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
interface Layer {
|
||||
prop: string;
|
||||
x1: number;
|
||||
y1: number;
|
||||
x2: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
interface LayerConfig {
|
||||
prop: string;
|
||||
visible: boolean;
|
||||
x1: number;
|
||||
y1: number;
|
||||
x2: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
// 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
|
||||
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 为字符串
|
||||
function formatLayers(layers: LayerConfig[]): string {
|
||||
return layers
|
||||
.filter(l => l.visible)
|
||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
// 全局缓存已加载的 CSV 内容
|
||||
const csvCache = new Map<string, CardData[]>();
|
||||
import type { CardData, Dimensions } from './types';
|
||||
import { loadCSV } from './utils/csv-loader';
|
||||
import { initLayerConfigs } from './utils/layer-parser';
|
||||
import { calculateDimensions } from './utils/dimensions';
|
||||
import { useSelection } from './hooks/use-selection';
|
||||
import { useLayerEditor } from './hooks/use-layer-editor';
|
||||
import { CardPreview } from './card-preview';
|
||||
import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
|
||||
|
||||
customElement('md-deck', {
|
||||
size: '54x86',
|
||||
|
|
@ -71,22 +24,22 @@ customElement('md-deck', {
|
|||
const [activeTab, setActiveTab] = createSignal(0);
|
||||
let tabsContainer: HTMLDivElement | undefined;
|
||||
|
||||
// 编辑器状态
|
||||
const [isEditing, setIsEditing] = createSignal(false);
|
||||
const [editingLayer, setEditingLayer] = createSignal<string | null>(null);
|
||||
const [layerConfigs, setLayerConfigs] = createSignal<LayerConfig[]>([]);
|
||||
|
||||
// 框选状态
|
||||
const [isSelecting, setIsSelecting] = createSignal(false);
|
||||
const [selectStart, setSelectStart] = createSignal<{ x: number; y: number } | null>(null);
|
||||
const [selectEnd, setSelectEnd] = createSignal<{ x: number; y: number } | null>(null);
|
||||
|
||||
// 本地编辑的属性
|
||||
const [localSize, setLocalSize] = createSignal(props.size as string || '54x86');
|
||||
const [localGrid, setLocalGrid] = createSignal(props.grid as string || '5x8');
|
||||
const [localBleed, setLocalBleed] = createSignal(props.bleed as string || '1');
|
||||
const [localPadding, setLocalPadding] = createSignal(props.padding as string || '2');
|
||||
|
||||
// 使用图层编辑器 hook
|
||||
const layerEditor = useLayerEditor(
|
||||
props,
|
||||
'',
|
||||
localSize,
|
||||
localGrid,
|
||||
localBleed,
|
||||
localPadding
|
||||
);
|
||||
|
||||
// 从 element 的 textContent 获取 CSV 路径
|
||||
const src = element?.textContent?.trim() || '';
|
||||
|
||||
|
|
@ -102,200 +55,46 @@ customElement('md-deck', {
|
|||
// 解析相对路径
|
||||
const resolvedSrc = resolvePath(articlePath, src);
|
||||
|
||||
// 加载 CSV 文件的函数
|
||||
const loadCSV = async (path: string): Promise<CardData[]> => {
|
||||
if (csvCache.has(path)) {
|
||||
return csvCache.get(path)!;
|
||||
}
|
||||
const response = await fetch(path);
|
||||
const content = await response.text();
|
||||
const records = parse(content, {
|
||||
columns: true,
|
||||
comment: '#',
|
||||
trim: true,
|
||||
skipEmptyLines: true
|
||||
});
|
||||
const result = records as CardData[];
|
||||
csvCache.set(path, result);
|
||||
return result;
|
||||
};
|
||||
|
||||
// 加载 CSV 文件
|
||||
const [csvData] = createResource(() => resolvedSrc, loadCSV);
|
||||
|
||||
createEffect(() => {
|
||||
const data = csvData();
|
||||
if (data) {
|
||||
setCards(data);
|
||||
// 初始化 layer configs
|
||||
const parsed = parseLayers(props.layers as string || '');
|
||||
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
|
||||
const configs: LayerConfig[] = 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
|
||||
};
|
||||
});
|
||||
setLayerConfigs(configs);
|
||||
layerEditor.setLayerConfigs(initLayerConfigs(data, props.layers as string || ''));
|
||||
}
|
||||
});
|
||||
|
||||
// 检查是否 fixed
|
||||
const isFixed = () => props.fixed === true || props.fixed === 'true';
|
||||
// 更新 src 到 layerEditor
|
||||
createEffect(() => {
|
||||
(layerEditor as any).src = src;
|
||||
});
|
||||
|
||||
// 解析尺寸
|
||||
const dimensions = createMemo(() => {
|
||||
const [width, height] = localSize().split('x').map(Number);
|
||||
const [bleedW, bleedH] = localBleed().includes('x')
|
||||
? localBleed().split('x').map(Number)
|
||||
: [Number(localBleed()), Number(localBleed())];
|
||||
const [padW, padH] = localPadding().includes('x')
|
||||
? localPadding().split('x').map(Number)
|
||||
: [Number(localPadding()), Number(localPadding())];
|
||||
|
||||
// 实际卡牌尺寸（含出血）
|
||||
const cardWidth = width + bleedW * 2;
|
||||
const cardHeight = height + bleedH * 2;
|
||||
|
||||
// 网格区域尺寸（减去 padding）
|
||||
const gridAreaWidth = width - padW * 2;
|
||||
const gridAreaHeight = height - padH * 2;
|
||||
|
||||
// 解析网格
|
||||
const [gridW, gridH] = localGrid().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
|
||||
};
|
||||
const dimensions = createMemo((): Dimensions => {
|
||||
return calculateDimensions({
|
||||
size: localSize(),
|
||||
bleed: localBleed(),
|
||||
padding: localPadding(),
|
||||
grid: localGrid()
|
||||
});
|
||||
});
|
||||
|
||||
// 渲染 layer 内容
|
||||
const renderLayer = (layer: Layer, cardData: CardData): string => {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return marked.parse(content) as string;
|
||||
};
|
||||
// 使用框选 hook
|
||||
const selection = useSelection(
|
||||
layerEditor.isEditing,
|
||||
layerEditor.editingLayer,
|
||||
dimensions
|
||||
);
|
||||
|
||||
// 计算 layer 位置样式（单位：mm）
|
||||
const getLayerStyle = (layer: Layer, dims: ReturnType<typeof dimensions>) => {
|
||||
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`
|
||||
};
|
||||
};
|
||||
|
||||
// 开始框选
|
||||
const handleCardMouseDown = (e: MouseEvent) => {
|
||||
if (!isEditing() || !editingLayer()) return;
|
||||
|
||||
const cardEl = e.currentTarget as HTMLElement;
|
||||
const rect = cardEl.getBoundingClientRect();
|
||||
const dims = dimensions();
|
||||
|
||||
// 计算相对于网格区域起点的坐标（网格单位）
|
||||
const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
|
||||
const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
|
||||
|
||||
const gridX = Math.max(1, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1);
|
||||
const gridY = Math.max(1, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1);
|
||||
|
||||
setSelectStart({ x: gridX, y: gridY });
|
||||
setSelectEnd({ x: gridX, y: gridY });
|
||||
setIsSelecting(true);
|
||||
};
|
||||
|
||||
// 更新框选结束位置
|
||||
const handleCardMouseMove = (e: MouseEvent) => {
|
||||
if (!isSelecting()) return;
|
||||
|
||||
const cardEl = e.currentTarget as HTMLElement;
|
||||
const rect = cardEl.getBoundingClientRect();
|
||||
const dims = dimensions();
|
||||
|
||||
const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
|
||||
const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
|
||||
|
||||
const gridX = Math.max(1, Math.min(dims.gridW, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1));
|
||||
const gridY = Math.max(1, Math.min(dims.gridH, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1));
|
||||
|
||||
setSelectEnd({ x: gridX, y: gridY });
|
||||
};
|
||||
|
||||
// 结束框选
|
||||
const handleCardMouseUp = () => {
|
||||
if (!isSelecting() || !editingLayer()) return;
|
||||
|
||||
const start = selectStart()!;
|
||||
const end = 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);
|
||||
|
||||
setLayerConfigs(configs => configs.map(c =>
|
||||
c.prop === editingLayer() ? { ...c, x1, y1, x2, y2 } : c
|
||||
));
|
||||
|
||||
setIsSelecting(false);
|
||||
setSelectStart(null);
|
||||
setSelectEnd(null);
|
||||
setEditingLayer(null);
|
||||
};
|
||||
|
||||
// 切换图层可见性
|
||||
const toggleLayerVisible = (prop: string) => {
|
||||
setLayerConfigs(configs => configs.map(c =>
|
||||
c.prop === prop ? { ...c, visible: !c.visible } : c
|
||||
));
|
||||
};
|
||||
|
||||
// 开始编辑图层位置
|
||||
const startEditingLayer = (prop: string) => {
|
||||
setEditingLayer(prop);
|
||||
};
|
||||
|
||||
// 生成 md-deck 代码
|
||||
const generateCode = () => {
|
||||
const layersStr = formatLayers(layerConfigs());
|
||||
return `:md-deck[${src}]{size="${localSize()}" grid="${localGrid()}" bleed="${localBleed()}" padding="${localPadding()}" layers="${layersStr}"}`;
|
||||
};
|
||||
|
||||
// 复制代码
|
||||
const copyCode = () => {
|
||||
const code = generateCode();
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
alert('已复制到剪贴板！');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
// 处理框选完成
|
||||
const handleMouseUp = () => {
|
||||
const result = selection.handleMouseUp();
|
||||
if (result) {
|
||||
layerEditor.updateLayerPosition(result.x1, result.y1, result.x2, result.y2);
|
||||
selection.cancelSelection();
|
||||
}
|
||||
};
|
||||
|
||||
// 更新 CSV 数据
|
||||
|
|
@ -308,40 +107,27 @@ customElement('md-deck', {
|
|||
return (
|
||||
<div class="md-deck flex gap-4">
|
||||
{/* 左侧：CSV 数据编辑 */}
|
||||
<Show when={isEditing() && !isFixed()}>
|
||||
<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(cards()[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={cards()[activeTab()]?.[key] || ''}
|
||||
onInput={(e) => updateCardData(key, e.target.value)}
|
||||
<Show when={layerEditor.isEditing() && !layerEditor.isFixed()}>
|
||||
<DataEditorPanel
|
||||
cards={cards()}
|
||||
activeTab={activeTab()}
|
||||
updateCardData={updateCardData}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 中间：卡牌预览 */}
|
||||
{/* 中间：卡牌预览和控制 */}
|
||||
<div class="flex-1">
|
||||
{/* Tab 选择器 */}
|
||||
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
|
||||
<button
|
||||
onClick={() => setIsEditing(!isEditing())}
|
||||
onClick={() => layerEditor.setIsEditing(!layerEditor.isEditing())}
|
||||
class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||
isEditing() && !isFixed()
|
||||
layerEditor.isEditing() && !layerEditor.isFixed()
|
||||
? 'bg-blue-100 text-blue-600'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
{isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
|
||||
{layerEditor.isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
|
||||
</button>
|
||||
<div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
|
||||
<For each={cards()}>
|
||||
|
|
@ -363,195 +149,42 @@ customElement('md-deck', {
|
|||
|
||||
{/* 卡牌预览 */}
|
||||
<Show when={!csvData.loading && cards().length > 0}>
|
||||
<div class="flex justify-center">
|
||||
<Show when={activeTab() < cards().length}>
|
||||
{(() => {
|
||||
const currentCard = cards()[activeTab()];
|
||||
const dims = dimensions();
|
||||
const visibleLayers = layerConfigs().filter(l => l.visible);
|
||||
|
||||
return (
|
||||
<div
|
||||
class="relative bg-white border border-gray-300 shadow-lg"
|
||||
style={{
|
||||
width: `${dims.cardWidth}mm`,
|
||||
height: `${dims.cardHeight}mm`
|
||||
}}
|
||||
onMouseDown={handleCardMouseDown}
|
||||
onMouseMove={handleCardMouseMove}
|
||||
onMouseUp={handleCardMouseUp}
|
||||
onMouseLeave={handleCardMouseUp}
|
||||
>
|
||||
{/* 框选遮罩 */}
|
||||
<Show when={isSelecting() && selectStart() && selectEnd()}>
|
||||
{(() => {
|
||||
const start = selectStart()!;
|
||||
const end = 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);
|
||||
|
||||
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 (
|
||||
<div
|
||||
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
|
||||
style={{
|
||||
left: `${left}mm`,
|
||||
top: `${top}mm`,
|
||||
width: `${width}mm`,
|
||||
height: `${height}mm`
|
||||
}}
|
||||
<CardPreview
|
||||
cards={cards()}
|
||||
activeTab={activeTab()}
|
||||
layerConfigs={layerEditor.layerConfigs()}
|
||||
dimensions={dimensions()}
|
||||
isEditing={layerEditor.isEditing()}
|
||||
isFixed={layerEditor.isFixed()}
|
||||
editingLayer={layerEditor.editingLayer()}
|
||||
isSelecting={selection.isSelecting()}
|
||||
selectStart={selection.selectStart()}
|
||||
selectEnd={selection.selectEnd()}
|
||||
onMouseDown={selection.handleMouseDown}
|
||||
onMouseMove={selection.handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</Show>
|
||||
|
||||
{/* 网格区域容器 */}
|
||||
<div
|
||||
class="absolute"
|
||||
style={{
|
||||
left: `${dims.gridOriginX}mm`,
|
||||
top: `${dims.gridOriginY}mm`,
|
||||
width: `${dims.gridAreaWidth}mm`,
|
||||
height: `${dims.gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
{/* 编辑模式下的网格线 */}
|
||||
<Show when={isEditing() && !isFixed()}>
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<For each={Array.from({ length: dims.gridW - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
|
||||
style={{ left: `${(i() + 1) * dims.cellWidth}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<For each={Array.from({ length: dims.gridH - 1 })}>
|
||||
{(_, i) => (
|
||||
<div
|
||||
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
|
||||
style={{ top: `${(i() + 1) * dims.cellHeight}mm` }}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 渲染每个 layer */}
|
||||
<For each={visibleLayers}>
|
||||
{(layer) => {
|
||||
const style = getLayerStyle(layer, dims);
|
||||
const isEditingThis = editingLayer() === layer.prop;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
||||
isEditingThis ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
style={style}
|
||||
innerHTML={renderLayer(layer, currentCard)}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* 右侧：属性编辑表单 */}
|
||||
<Show when={isEditing() && !isFixed()}>
|
||||
<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={localSize()}
|
||||
onInput={(e) => setLocalSize(e.target.value)}
|
||||
<Show when={layerEditor.isEditing() && !layerEditor.isFixed()}>
|
||||
<PropertiesEditorPanel
|
||||
localSize={localSize()}
|
||||
localGrid={localGrid()}
|
||||
localBleed={localBleed()}
|
||||
localPadding={localPadding()}
|
||||
layerConfigs={layerEditor.layerConfigs()}
|
||||
editingLayer={layerEditor.editingLayer()}
|
||||
onSizeChange={setLocalSize}
|
||||
onGridChange={setLocalGrid}
|
||||
onBleedChange={setLocalBleed}
|
||||
onPaddingChange={setLocalPadding}
|
||||
onToggleLayerVisible={layerEditor.toggleLayerVisible}
|
||||
onStartEditingLayer={layerEditor.startEditingLayer}
|
||||
onCopyCode={layerEditor.copyCode}
|
||||
/>
|
||||
</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={localGrid()}
|
||||
onInput={(e) => setLocalGrid(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={localBleed()}
|
||||
onInput={(e) => setLocalBleed(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={localPadding()}
|
||||
onInput={(e) => setLocalPadding(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h4 class="font-medium text-sm text-gray-700">图层</h4>
|
||||
<For each={layerConfigs()}>
|
||||
{(layer) => (
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={layer.visible}
|
||||
onChange={() => toggleLayerVisible(layer.prop)}
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<span class="text-sm flex-1">{layer.prop}</span>
|
||||
<button
|
||||
onClick={() => startEditingLayer(layer.prop)}
|
||||
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
||||
editingLayer() === layer.prop
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{editingLayer() === layer.prop ? '✓ 框选' : '编辑位置'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<button
|
||||
onClick={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>
|
||||
</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;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { parse } from 'csv-parse/browser/esm/sync';
|
||||
import type { CardData } from '../types';
|
||||
|
||||
/**
|
||||
* 全局缓存已加载的 CSV 内容
|
||||
*/
|
||||
const csvCache = new Map<string, CardData[]>();
|
||||
|
||||
/**
|
||||
* 加载 CSV 文件
|
||||
*/
|
||||
export async function loadCSV(path: string): Promise<CardData[]> {
|
||||
if (csvCache.has(path)) {
|
||||
return csvCache.get(path)!;
|
||||
}
|
||||
|
||||
const response = await fetch(path);
|
||||
const content = await response.text();
|
||||
const records = parse(content, {
|
||||
columns: true,
|
||||
comment: '#',
|
||||
trim: true,
|
||||
skipEmptyLines: true
|
||||
});
|
||||
|
||||
const result = records as CardData[];
|
||||
csvCache.set(path, result);
|
||||
return result;
|
||||
}
|
||||
|
|
@ -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
|
||||
};
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue