hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: md-deck editor???

This commit is contained in:
hypercross 2026-02-27 01:06:05 +08:00
parent 907cabe9a0
commit 561d647bce
2 changed files with 411 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

358
src/components/md-deck.tsx
View File

@ -1,5 +1,5 @@
import { customElement, noShadowDOM } from 'solid-element';
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
import { createSignal, For, Show, createEffect, createMemo, createResource, onMount } from 'solid-js';
import { parse } from 'csv-parse/browser/esm/sync';
import { marked } from '../markdown';
import { resolvePath } from '../utils/path';
@ -16,6 +16,15 @@ interface Layer {
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 [];
@ -37,6 +46,14 @@ function parseLayers(layersStr: string): Layer[] {
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[]>();
@ -45,7 +62,8 @@ customElement('md-deck', {
grid: '5x8',
bleed: '1',
padding: '2',
layers: ''
layers: '',
fixed: false
}, (props, { element }) => {
noShadowDOM();
@ -53,6 +71,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');
// 从 element 的 textContent 获取 CSV 路径
const src = element?.textContent?.trim() || '';
@ -92,18 +126,36 @@ customElement('md-deck', {
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);
}
});
// 检查是否 fixed
const isFixed = () => props.fixed === true || props.fixed === 'true';
// 解析尺寸
const dimensions = createMemo(() => {
const [width, height] = (props.size as string).split('x').map(Number);
const [bleedW, bleedH] = (props.bleed as string).includes('x')
? (props.bleed as string).split('x').map(Number)
: [Number(props.bleed), Number(props.bleed)];
const [padW, padH] = (props.padding as string).includes('x')
? (props.padding as string).split('x').map(Number)
: [Number(props.padding), Number(props.padding)];
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;
@ -114,7 +166,7 @@ customElement('md-deck', {
const gridAreaHeight = height - padH * 2;
// 解析网格
const [gridW, gridH] = (props.grid as string).split('x').map(Number);
const [gridW, gridH] = localGrid().split('x').map(Number);
// 每个网格单元的尺寸（mm）
const cellWidth = gridAreaWidth / gridW;
@ -138,9 +190,6 @@ customElement('md-deck', {
};
});
// 解析 layers
const layers = createMemo(() => parseLayers(props.layers as string));
// 渲染 layer 内容
const renderLayer = (layer: Layer, cardData: CardData): string => {
const content = cardData[layer.prop] || '';
@ -149,11 +198,8 @@ customElement('md-deck', {
// 计算 layer 位置样式（单位：mm）
const getLayerStyle = (layer: Layer, dims: ReturnType<typeof dimensions>) => {
// layer 坐标是网格坐标（1-based）
// 计算相对于网格区域起点的偏移（mm）
const left = (layer.x1 - 1) * dims.cellWidth;
const top = (layer.y1 - 1) * dims.cellHeight;
// 计算尺寸（mm）
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
@ -165,10 +211,138 @@ customElement('md-deck', {
};
};
// 开始框选
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);
});
};
// 更新 CSV 数据
const updateCardData = (key: string, value: string) => {
setCards(cards => cards.map((card, i) =>
i === activeTab() ? { ...card, [key]: value } : card
));
};
return (
<div class="md-deck">
<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)}
/>
</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())}
class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
isEditing() && !isFixed()
? 'bg-blue-100 text-blue-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
} cursor-pointer`}
>
{isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
</button>
<div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
<For each={cards()}>
{(card, index) => (
@ -194,6 +368,7 @@ customElement('md-deck', {
{(() => {
const currentCard = cards()[activeTab()];
const dims = dimensions();
const visibleLayers = layerConfigs().filter(l => l.visible);
return (
<div
@ -202,7 +377,40 @@ customElement('md-deck', {
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`
}}
/>
);
})()}
</Show>
{/* 网格区域容器 */}
<div
class="absolute"
@ -213,13 +421,39 @@ customElement('md-deck', {
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={layers()}>
<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"
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)}
/>
@ -234,5 +468,91 @@ customElement('md-deck', {
</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)}
/>
</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>
);
});

18
todo.md
View File

@ -21,6 +21,7 @@
- bleed: 出血，如 54x86 外加 1mm 出血之后实际尺寸为 56x88。
- padding: 网格外边距。54x86 外加 2mm padding 之后实际网格区域为 50x82。
- layers: 排版层，由一个列表构成。每个元素以 `prop:topleft-bottomright` 格式定义。
- fixed: 是否可编辑。fixed 未定义时开启编辑器 UI。
```
:md-deck[./card.csv]{size="54x86" grid="5x8" bleed="1" padding="2" layers="body:1,7-5,8 title:1,1-5,1"}
@ -32,4 +33,21 @@
然后显示卡牌本身。对每个排版层，将 csv 数据中对应字段作为 markdown 显示在对应位置并居中。
### 编辑器 UI
在卡牌左侧显示 csv 数据内容。
在卡牌右侧显示表单，并以响应式控件编辑卡牌属性：
- size
- grid
- bleed
- padding
对于每一个 csv 字段，显示一个图层控件：
- 是否显示：若不显示，则在 layers 中不出现此字段。
- 编辑位置按钮：激活后，在卡牌上显示遮罩，并允许框选网格区域，以用作字段的位置。
最后，显示一个复制按钮，用于复制整个卡牌的`:md-deck`代码。
- [x] 创建 md-deck 组件
- [x] 实现编辑器 UI