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

Compare commits

base: hypercross:9794184e987410ff386770565ad6976bb5227548
Branches Tags
hypercross:master
..
compare: hypercross:0add3f27d569b8bc3d7022d44e1ea7b9d43e4e86
Branches Tags
hypercross:master

5 Commits
9794184e98 ... 0add3f27d5

Author SHA1 Message Date
hyper 0add3f27d5 fix(layer-editor): use stable _key for drag-and-drop sorting 
Add a unique `_key` to each layer config to maintain stable sortable IDs
across reorder operations. Update LayerRow to use the sortableId prop
and the `use:sortable` directive. Refactor layer-crud utilities to
generate and propagate `_key` values on creation and initialization.
 2026-07-03 21:49:18 +08:00
hyper 186e3c0db6 feat(layer-editor): Stable sortable IDs, drag opacity 
- Use createMemo for stable IDs to prevent re-renders
- Add opacity and transition styles during drag
- Remove "所有字段已添加" message when no available fields
 2026-06-30 21:44:59 +08:00
hyper bdc06cc49a style(md-deck): Use double quotes and shrink-0 class 2026-06-30 21:35:39 +08:00
hyper b3d390dfd5 refactor(editor-panel): extract LayerRow and layer crud logic 2026-06-30 21:34:10 +08:00
hyper 42c7c9a26e feat(editor): Add dnd reordering and layer add/remove 2026-06-30 20:55:13 +08:00
14 changed files with 1006 additions and 499 deletions
Show Stats Expand all files Collapse all files

2
content/deck-test.md
View File

@ -2,6 +2,8 @@
:md-deck[./names.csv]{size="54x86" grid="5x8" bleed="1" padding="2" layers="name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s"}
:md-deck[./names.csv]{size="54x86" grid="5x8" layers="num1:1,1-2,2 num2:4,5-5,6f12s name1:1,1-2,2 name2:1,1-2,2 name1:1,1-2,2" }
## 使用 yaml/tag 语法创建 md-deck
```yaml/tag

14
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"@modelcontextprotocol/sdk": "^0.5.0",
"@solidjs/router": "^0.15.0",
"@thisbeyond/solid-dnd": "^0.7.5",
"@types/three": "^0.183.1",
"chokidar": "^5.0.0",
"commander": "^14.0.3",
@ -2867,6 +2868,19 @@
"vite": "^5.2.0 || ^6 || ^7 || ^8"
}
},
"node_modules/@thisbeyond/solid-dnd": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@thisbeyond/solid-dnd/-/solid-dnd-0.7.5.tgz",
"integrity": "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw==",
"license": "MIT",
"engines": {
"node": ">=18.0.0",
"pnpm": ">=8.6.0"
},
"peerDependencies": {
"solid-js": "^1.5"
}
},
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",

1
package.json
View File

@ -34,6 +34,7 @@
"dependencies": {
"@modelcontextprotocol/sdk": "^0.5.0",
"@solidjs/router": "^0.15.0",
"@thisbeyond/solid-dnd": "^0.7.5",
"@types/three": "^0.183.1",
"chokidar": "^5.0.0",
"commander": "^14.0.3",

122
src/components/md-deck/CardLayer.tsx
View File

@ -1,11 +1,11 @@
import { createMemo, For, Show } from 'solid-js';
import { parseMarkdown } from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { CardData, CardSide, LayerConfig } from './types';
import { createMemo, For, Show } from "solid-js";
import { parseMarkdown } from "../../markdown";
import { getLayerStyle } from "./hooks/dimensions";
import type { CardData, CardSide, LayerConfig } from "./types";
import { DeckStore } from "./hooks/deckStore";
import { processVariables } from "../utils/csv-loader";
import { resolvePath } from "../utils/path";
import type { LayerInteractionHandlers } from './hooks/useLayerInteraction';
import type { LayerInteractionHandlers } from "./hooks/useLayerInteraction";
export interface CardLayerProps {
cardData: CardData;
@ -15,28 +15,35 @@ export interface CardLayerProps {
}
export function CardLayer(props: CardLayerProps) {
const side = () => props.side || 'front';
const side = () => props.side || "front";
const layers = createMemo(() =>
side() === 'front'
side() === "front"
? props.store.state.frontLayerConfigs.filter((l) => l.visible)
: props.store.state.backLayerConfigs.filter((l) => l.visible)
: props.store.state.backLayerConfigs.filter((l) => l.visible),
);
const dimensions = () => props.store.state.dimensions!;
const selectedLayer = () => props.store.state.selectedLayer;
const draggingState = () => props.store.state.draggingState;
function renderLayerContent(content: string) {
const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath ?? "./assets");
return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
const iconPath = resolvePath(
props.store.state.cards.sourcePath,
props.cardData.iconPath ?? "./assets",
);
return parseMarkdown(
processVariables(content, props.cardData, props.store.state.cards),
iconPath,
) as string;
}
const getAlignStyle = (align?: 'l' | 'c' | 'r') => {
if (align === 'l') return 'left';
if (align === 'r') return 'right';
return 'center';
const getAlignStyle = (align?: "l" | "c" | "r") => {
if (align === "l") return "left";
if (align === "r") return "right";
return "center";
};
const isLayerSelected = (layer: LayerConfig) => selectedLayer() === layer.prop;
const isLayerSelected = (layerIndex: number) =>
selectedLayer() === layerIndex;
const getFrameBounds = (layer: LayerConfig) => {
const dims = dimensions();
@ -47,17 +54,17 @@ export function CardLayer(props: CardLayerProps) {
return { left, top, width, height };
};
const handleLayerClick = (layerProp: string, e: MouseEvent) => {
const handleLayerClick = (layerIndex: number, e: MouseEvent) => {
if (props.interaction) {
props.interaction.onLayerClick(layerProp, e);
props.interaction.onLayerClick(layerIndex, e);
}
};
const handleFrameMouseDown = (
action: 'drag' | 'resize-corner' | 'resize-edge',
anchor?: 'nw' | 'ne' | 'sw' | 'se',
edge?: 'n' | 's' | 'e' | 'w',
e?: MouseEvent
action: "drag" | "resize-corner" | "resize-edge",
anchor?: "nw" | "ne" | "sw" | "se",
edge?: "n" | "s" | "e" | "w",
e?: MouseEvent,
) => {
if (props.interaction) {
props.interaction.onFrameMouseDown(action, anchor, edge, e);
@ -66,24 +73,25 @@ export function CardLayer(props: CardLayerProps) {
return (
<For each={layers()}>
{(layer) => {
{(layer, index) => {
const bounds = () => getFrameBounds(layer);
const isSelected = () => isLayerSelected(layer);
const isSelected = () => isLayerSelected(index());
return (
<>
<article
class="absolute flex flex-col items-stretch justify-center prose prose-sm cursor-pointer"
classList={{
'ring-2 ring-blue-500 ring-offset-1': isSelected() && !draggingState()
"ring-2 ring-blue-500 ring-offset-1":
isSelected() && !draggingState(),
}}
style={{
...getLayerStyle(layer, dimensions()),
'font-size': `${layer.fontSize || 3}mm`,
'text-align': getAlignStyle(layer.align)
"font-size": `${layer.fontSize || 3}mm`,
"text-align": getAlignStyle(layer.align),
}}
innerHTML={renderLayerContent(props.cardData[layer.prop])}
onClick={(e) => handleLayerClick(layer.prop, e)}
onClick={(e) => handleLayerClick(index(), e)}
/>
<Show when={isSelected()}>
<div
@ -92,7 +100,7 @@ export function CardLayer(props: CardLayerProps) {
left: `${bounds().left}mm`,
top: `${bounds().top}mm`,
width: `${bounds().width}mm`,
height: `${bounds().height}mm`
height: `${bounds().height}mm`,
}}
/>
<div
@ -101,78 +109,98 @@ export function CardLayer(props: CardLayerProps) {
left: `${bounds().left}mm`,
top: `${bounds().top}mm`,
width: `${bounds().width}mm`,
height: `${bounds().height}mm`
height: `${bounds().height}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('drag', undefined, undefined, e)}
onMouseDown={(e) =>
handleFrameMouseDown("drag", undefined, undefined, e)
}
/>
<Show when={!draggingState() || draggingState()?.action !== 'drag'}>
<Show
when={!draggingState() || draggingState()?.action !== "drag"}
>
<div
class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
style={{
left: `${bounds().left - 2}mm`,
top: `${bounds().top - 2}mm`
top: `${bounds().top - 2}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'nw', undefined, e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-corner", "nw", undefined, e)
}
/>
<div
class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
style={{
left: `${bounds().left + bounds().width - 2}mm`,
top: `${bounds().top - 2}mm`
top: `${bounds().top - 2}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'ne', undefined, e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-corner", "ne", undefined, e)
}
/>
<div
class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
style={{
left: `${bounds().left - 2}mm`,
top: `${bounds().top + bounds().height - 2}mm`
top: `${bounds().top + bounds().height - 2}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'sw', undefined, e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-corner", "sw", undefined, e)
}
/>
<div
class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
style={{
left: `${bounds().left + bounds().width - 2}mm`,
top: `${bounds().top + bounds().height - 2}mm`
top: `${bounds().top + bounds().height - 2}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'se', undefined, e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-corner", "se", undefined, e)
}
/>
<div
class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
style={{
left: `${bounds().left}mm`,
top: `${bounds().top - 1}mm`,
width: `${bounds().width}mm`
width: `${bounds().width}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'n', e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-edge", undefined, "n", e)
}
/>
<div
class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
style={{
left: `${bounds().left}mm`,
top: `${bounds().top + bounds().height - 1}mm`,
width: `${bounds().width}mm`
width: `${bounds().width}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 's', e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-edge", undefined, "s", e)
}
/>
<div
class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
style={{
left: `${bounds().left - 1}mm`,
top: `${bounds().top}mm`,
height: `${bounds().height}mm`
height: `${bounds().height}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'w', e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-edge", undefined, "w", e)
}
/>
<div
class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
style={{
left: `${bounds().left + bounds().width - 1}mm`,
top: `${bounds().top}mm`,
height: `${bounds().height}mm`
height: `${bounds().height}mm`,
}}
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'e', e)}
onMouseDown={(e) =>
handleFrameMouseDown("resize-edge", undefined, "e", e)
}
/>
</Show>
</Show>

16
src/components/md-deck/DeckHeader.tsx
View File

@ -1,5 +1,5 @@
import { For } from 'solid-js';
import type { DeckStore } from './hooks/deckStore';
import { For } from "solid-js";
import type { DeckStore } from "./hooks/deckStore";
export interface DeckHeaderProps {
store: DeckStore;
@ -18,11 +18,11 @@ export function DeckHeader(props: DeckHeaderProps) {
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'
? "bg-blue-100 text-blue-600"
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
>
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
{store.state.isEditing ? "✓ 编辑中" : "✏️ 编辑"}
</button>
{/* 导出 PDF 按钮 */}
@ -39,10 +39,10 @@ export function DeckHeader(props: DeckHeaderProps) {
{(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 ${
class={`font-medium transition-colors 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'
? "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}`}

20
src/components/md-deck/editor-panel/DataEditorPanel.tsx
View File

@ -1,10 +1,10 @@
import { For } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';
import { For } from "solid-js";
import type { DeckStore } from "../hooks/deckStore";
export interface DataEditorPanelProps {
activeTab: number;
cards: DeckStore['state']['cards'];
updateCardData: DeckStore['actions']['updateCardData'];
cards: DeckStore["state"]["cards"];
updateCardData: DeckStore["actions"]["updateCardData"];
}
/**
@ -12,18 +12,22 @@ export interface DataEditorPanelProps {
*/
export function DataEditorPanel(props: DataEditorPanelProps) {
return (
<div class="w-64 flex-shrink-0">
<div class="w-64 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>
<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)}
value={props.cards[props.activeTab]?.[key] || ""}
onInput={(e) =>
props.updateCardData(props.activeTab, key, e.target.value)
}
/>
</div>
)}

353
src/components/md-deck/editor-panel/LayerEditorPanel.tsx
View File

@ -1,269 +1,150 @@
import { For, createSignal, onCleanup, onMount } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';
import alignLeftIcon from './icons/align-left.png';
import alignCenterIcon from './icons/align-center.png';
import alignRightIcon from './icons/align-right.png';
import { For, createSignal, createMemo, onCleanup, onMount } from "solid-js";
import {
DragDropProvider,
DragDropSensors,
SortableProvider,
closestCenter,
} from "@thisbeyond/solid-dnd";
import type { DeckStore } from "../hooks/deckStore";
import { toSortableId } from "../hooks/layer-crud";
import { LayerRow } from "./LayerRow";
export interface LayerEditorPanelProps {
store: DeckStore;
}
const ORIENTATION_OPTIONS = [
{ value: 'n', label: '↑ 北' },
{ value: 'e', label: '→ 东' },
{ value: 's', label: '↓ 南' },
{ value: 'w', label: '← 西' }
] as const;
const ALIGN_OPTIONS = [
{ value: '', label: '默认', icon: alignCenterIcon },
{ value: 'l', label: '左对齐', icon: alignLeftIcon },
{ value: 'c', label: '居中', icon: alignCenterIcon },
{ value: 'r', label: '右对齐', icon: alignRightIcon }
] as const;
const FONT_PRESETS = [3, 5, 8, 12] as const;
function OrientationIcon(value: string): string {
switch (value) {
case 'n': return '↑';
case 'e': return '→';
case 's': return '↓';
case 'w': return '←';
default: return '↑';
}
}
function AlignIconSrc(value: string): string {
switch (value) {
case 'l': return alignLeftIcon;
case 'r': return alignRightIcon;
default: return alignCenterIcon;
}
}
function LayerEditorPanel(props: LayerEditorPanelProps) {
const { store } = props;
const [openDropdown, setOpenDropdown] = createSignal<string | null>(null);
let dropdownRef: HTMLDivElement | undefined;
const [hoveredIndex, setHoveredIndex] = createSignal<number | null>(null);
const [addMenuOpen, setAddMenuOpen] = createSignal(false);
let addMenuRef: HTMLDivElement | undefined;
const currentLayerConfigs = () =>
store.state.activeSide === 'front'
const side = () => store.state.activeSide;
const layers = () =>
side() === "front"
? store.state.frontLayerConfigs
: store.state.backLayerConfigs;
const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
const updateFn = store.state.activeSide === 'front'
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
updateFn(layerProp, { orientation });
setOpenDropdown(null);
};
const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
const updateFn = store.state.activeSide === 'front'
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
updateFn(layerProp, { fontSize });
};
const updateLayerAlign = (layerProp: string, align?: 'l' | 'c' | 'r') => {
const updateFn = store.state.activeSide === 'front'
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
updateFn(layerProp, { align });
setOpenDropdown(null);
};
const toggleLayerVisible = (layerProp: string) => {
const toggleFn = store.state.activeSide === 'front'
? store.actions.toggleFrontLayerVisible
: store.actions.toggleBackLayerVisible;
toggleFn(layerProp);
};
const selectLayer = (layerProp: string) => {
store.actions.setSelectedLayer(
store.state.selectedLayer === layerProp ? null : layerProp
// Stable IDs from _key — don't change on reorder
const sortableIds = createMemo(() =>
layers().map((l, i) => toSortableId(l, i)),
);
};
// Lookup: sortable string ID → current array index
const idToIndex = createMemo(() => {
const map = new Map<string, number>();
layers().forEach((l, i) => map.set(toSortableId(l, i), i));
return map;
});
const handleDropdownClick = (e: MouseEvent) => {
e.stopPropagation();
};
const updater = () =>
side() === "front"
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
const handleClickOutside = (e: MouseEvent) => {
if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
setOpenDropdown(null);
}
const availableFields = createMemo(() => {
const cards = store.state.cards;
if (!cards?.length) return [];
return Object.keys(cards[0]).filter((k) => k !== "label");
});
const update = (
index: number,
patch: Partial<import("../types").LayerConfig>,
closeDropdown = false,
) => {
updater()(index, patch);
if (closeDropdown) setOpenDropdown(null);
};
onMount(() => {
document.addEventListener('click', handleClickOutside);
const h = (e: MouseEvent) => {
if (addMenuRef && !addMenuRef.contains(e.target as Node))
setAddMenuOpen(false);
};
document.addEventListener("click", h);
onCleanup(() => document.removeEventListener("click", h));
});
onCleanup(() => {
document.removeEventListener('click', handleClickOutside);
});
const layerCount = () => currentLayerConfigs().length;
return (
<div class="w-64 flex-shrink-0">
<div class="w-64 shrink-0">
<h3 class="font-bold mb-2 mt-0">
图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
图层 ({side() === "front" ? "正面" : "背面"})
</h3>
<div ref={dropdownRef}>
<For each={currentLayerConfigs()}>
<div class="relative mb-2" ref={addMenuRef}>
<button
onClick={() => setAddMenuOpen(!addMenuOpen())}
class="w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded cursor-pointer border border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-600"
>
<span class="text-lg leading-none">+</span>
<span>添加图层</span>
</button>
{addMenuOpen() && (
<div
class="absolute top-full left-0 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg z-20 max-h-48 overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<For each={availableFields()}>
{(f) => (
<button
onClick={() => {
store.actions.addLayer(side(), f);
setAddMenuOpen(false);
}}
class="block w-full text-left px-3 py-1.5 text-sm hover:bg-blue-50 hover:text-blue-600 cursor-pointer"
>
{f}
</button>
)}
</For>
</div>
)}
</div>
<DragDropProvider
onDragEnd={({ draggable, droppable }) => {
if (!droppable) return;
const from = idToIndex().get(draggable.id as string);
const to = idToIndex().get(droppable.id as string);
if (from !== undefined && to !== undefined && from !== to) {
store.actions.reorderLayers(side(), from, to);
}
}}
collisionDetector={closestCenter}
>
<DragDropSensors>
<SortableProvider ids={sortableIds()}>
<For each={layers()}>
{(layer, index) => (
<div
class={`flex items-center gap-1 py-1.5 px-1 ${
index() < layerCount() - 1 ? 'border-b border-gray-200' : ''
} ${
store.state.selectedLayer === layer.prop ? 'bg-blue-50' : ''
}`}
>
<input
type="checkbox"
checked={layer.visible}
onChange={() => toggleLayerVisible(layer.prop)}
class="cursor-pointer"
<LayerRow
store={store}
index={index()}
sortableId={toSortableId(layer, index())}
layer={layer}
hovered={hoveredIndex() === index()}
onHoverChange={setHoveredIndex}
openDropdown={openDropdown()}
setOpenDropdown={setOpenDropdown}
onUpdateOrientation={(o) =>
update(index(), { orientation: o }, true)
}
onUpdateFontSize={(fs) => update(index(), { fontSize: fs })}
onUpdateAlign={(a) => update(index(), { align: a }, true)}
onSelect={() =>
store.actions.setSelectedLayer(
store.state.selectedLayer === index() ? null : index(),
)
}
onRemove={() => store.actions.removeLayer(side(), index())}
/>
<span
class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600"
onClick={() => selectLayer(layer.prop)}
>
{layer.prop}
</span>
<div class="relative">
<button
onClick={(e) => {
e.stopPropagation();
setOpenDropdown(openDropdown() === `orient-${layer.prop}` ? null : `orient-${layer.prop}`);
}}
class={`w-7 h-7 text-sm rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
!layer.visible ? 'invisible pointer-events-none' : ''
}`}
title="方向"
>
{OrientationIcon(layer.orientation || 'n')}
</button>
{openDropdown() === `orient-${layer.prop}` && (
<div
class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
onClick={handleDropdownClick}
>
<For each={ORIENTATION_OPTIONS}>
{(opt) => (
<button
onClick={() => updateLayerOrientation(layer.prop, opt.value)}
class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
>
{opt.label}
</button>
)}
</For>
</div>
)}
</div>
<div class="relative">
<button
onClick={(e) => {
e.stopPropagation();
setOpenDropdown(openDropdown() === `align-${layer.prop}` ? null : `align-${layer.prop}`);
}}
class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${
!layer.visible ? 'invisible pointer-events-none' : ''
}`}
title="对齐"
>
<img src={AlignIconSrc(layer.align || '')} alt="align" class="w-5 h-5 not-prose" />
</button>
{openDropdown() === `align-${layer.prop}` && (
<div
class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
onClick={handleDropdownClick}
>
<For each={ALIGN_OPTIONS}>
{(opt) => (
<button
onClick={() => updateLayerAlign(layer.prop, opt.value as 'l' | 'c' | 'r' | undefined || undefined)}
class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
>
<img src={opt.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
</button>
)}
</For>
</div>
)}
</div>
<div class="relative">
<button
onClick={(e) => {
e.stopPropagation();
setOpenDropdown(openDropdown() === `font-${layer.prop}` ? null : `font-${layer.prop}`);
}}
class={`w-7 h-7 text-xs rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
!layer.visible ? 'invisible pointer-events-none' : ''
}`}
title="字体大小 (mm)"
>
{layer.fontSize ?? 3}
</button>
{openDropdown() === `font-${layer.prop}` && (
<div
class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 p-2"
onClick={handleDropdownClick}
>
<div class="flex items-center gap-1 mb-2">
<input
type="number"
value={layer.fontSize ?? 3}
onChange={(e) => {
const value = e.target.value;
updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
}}
class="w-14 text-xs px-1.5 py-1 rounded border border-gray-300"
step="0.1"
min="0.1"
/>
<span class="text-xs text-gray-500">mm</span>
</div>
<div class="flex gap-1">
<For each={FONT_PRESETS}>
{(preset) => (
<button
onClick={() => updateLayerFontSize(layer.prop, preset)}
class={`px-2 py-1 text-xs rounded cursor-pointer ${
(layer.fontSize ?? 3) === preset
? 'bg-blue-500 text-white'
: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
}`}
>
{preset}
</button>
)}
</For>
</div>
<button
onClick={() => updateLayerFontSize(layer.prop, undefined)}
class="mt-2 w-full text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
>
重置
</button>
</div>
)}
</div>
</div>
)}
</For>
</div>
</SortableProvider>
</DragDropSensors>
</DragDropProvider>
<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 flex items-center gap-2 justify-center"

279
src/components/md-deck/editor-panel/LayerRow.tsx Normal file
View File

@ -0,0 +1,279 @@
import { For, createSignal, onCleanup, onMount } from "solid-js";
import { createSortable, useDragDropContext } from "@thisbeyond/solid-dnd";
import type { DeckStore } from "../hooks/deckStore";
import type { LayerConfig } from "../types";
import alignLeftIcon from "./icons/align-left.png";
import alignCenterIcon from "./icons/align-center.png";
import alignRightIcon from "./icons/align-right.png";
export interface LayerRowProps {
store: DeckStore;
index: number;
sortableId: string;
layer: LayerConfig;
hovered: boolean;
onHoverChange: (idx: number | null) => void;
openDropdown: string | null;
setOpenDropdown: (val: string | null) => void;
onUpdateOrientation: (o: "n" | "s" | "e" | "w") => void;
onUpdateFontSize: (fs?: number) => void;
onUpdateAlign: (a?: "l" | "c" | "r") => void;
onSelect: () => void;
onRemove: () => void;
}
const ORIENTATIONS = [
{ value: "n" as const, label: "↑ 北" },
{ value: "e" as const, label: "→ 东" },
{ value: "s" as const, label: "↓ 南" },
{ value: "w" as const, label: "← 西" },
];
const ALIGNS = [
{ value: "" as const, icon: alignCenterIcon },
{ value: "l" as const, icon: alignLeftIcon },
{ value: "c" as const, icon: alignCenterIcon },
{ value: "r" as const, icon: alignRightIcon },
];
const FONT_PRESETS = [3, 5, 8, 12] as const;
function orientChar(v: string) {
switch (v) {
case "n":
return "↑";
case "e":
return "→";
case "s":
return "↓";
case "w":
return "←";
default:
return "↑";
}
}
function alignSrc(v: string) {
switch (v) {
case "l":
return alignLeftIcon;
case "r":
return alignRightIcon;
default:
return alignCenterIcon;
}
}
export function LayerRow(props: LayerRowProps) {
const sortable = createSortable(props.sortableId);
const [dndState] = useDragDropContext()!;
const [fontOpen, setFontOpen] = createSignal(false);
let fontRef: HTMLDivElement | undefined;
const selected = () => props.store.state.selectedLayer === props.index;
onMount(() => {
const h = (e: MouseEvent) => {
if (fontRef && !fontRef.contains(e.target as Node)) setFontOpen(false);
};
document.addEventListener("click", h);
onCleanup(() => document.removeEventListener("click", h));
});
const toggleVisible = () => {
const fn =
props.store.state.activeSide === "front"
? props.store.actions.toggleFrontLayerVisible
: props.store.actions.toggleBackLayerVisible;
fn(props.index);
};
return (
<div
use:sortable={sortable}
class={`flex items-center gap-1 py-1.5 px-1 relative group border-b border-gray-100 ${selected() ? "bg-blue-50" : ""}`}
classList={{
"opacity-25": sortable.isActiveDraggable,
"transition-transform":
!!dndState.active.draggable && !sortable.isActiveDraggable,
}}
onMouseEnter={() => props.onHoverChange(props.index)}
onMouseLeave={() => props.onHoverChange(null)}
>
<button
{...sortable.dragActivators}
class="cursor-grab text-gray-400 hover:text-gray-600 text-sm px-0.5 select-none shrink-0"
title="拖动排序"
>
⠿
</button>
<button
onClick={toggleVisible}
class="shrink-0 text-sm cursor-pointer select-none"
title={props.layer.visible ? "隐藏" : "显示"}
>
{props.layer.visible ? "👁" : "👁‍🗨"}
</button>
<span
class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600 select-none"
onClick={props.onSelect}
>
{props.layer.prop}
</span>
<DropdownButton
icon={orientChar(props.layer.orientation || "n")}
visible={props.layer.visible}
open={props.openDropdown === `orient-${props.index}`}
onToggle={() =>
props.setOpenDropdown(
props.openDropdown === `orient-${props.index}`
? null
: `orient-${props.index}`,
)
}
title="方向"
>
<For each={ORIENTATIONS}>
{(o) => (
<button
onClick={() => props.onUpdateOrientation(o.value)}
class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
>
{o.label}
</button>
)}
</For>
</DropdownButton>
<DropdownButton
icon={
<img
src={alignSrc(props.layer.align || "")}
alt="align"
class="w-5 h-5 not-prose"
/>
}
visible={props.layer.visible}
open={props.openDropdown === `align-${props.index}`}
onToggle={() =>
props.setOpenDropdown(
props.openDropdown === `align-${props.index}`
? null
: `align-${props.index}`,
)
}
title="对齐"
>
<For each={ALIGNS}>
{(o) => (
<button
onClick={() => props.onUpdateAlign(o.value || undefined)}
class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
>
<img src={o.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
</button>
)}
</For>
</DropdownButton>
<div class="relative" ref={fontRef}>
<button
onClick={(e) => {
e.stopPropagation();
setFontOpen(!fontOpen());
}}
class={`w-7 h-7 text-xs rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${!props.layer.visible ? "invisible pointer-events-none" : ""}`}
title="字体大小 (mm)"
>
{props.layer.fontSize ?? 3}
</button>
{fontOpen() && (
<div
class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 p-2"
onClick={(e) => e.stopPropagation()}
>
<div class="flex items-center gap-1 mb-2">
<input
type="number"
value={props.layer.fontSize ?? 3}
onChange={(e) =>
props.onUpdateFontSize(
e.target.value ? Number(e.target.value) : undefined,
)
}
class="w-14 text-xs px-1.5 py-1 rounded border border-gray-300"
step="0.1"
min="0.1"
/>
<span class="text-xs text-gray-500">mm</span>
</div>
<div class="flex gap-1">
<For each={FONT_PRESETS}>
{(p) => (
<button
onClick={() => props.onUpdateFontSize(p)}
class={`px-2 py-1 text-xs rounded cursor-pointer ${(props.layer.fontSize ?? 3) === p ? "bg-blue-500 text-white" : "bg-gray-100 hover:bg-gray-200 text-gray-700"}`}
>
{p}
</button>
)}
</For>
</div>
<button
onClick={() => props.onUpdateFontSize(undefined)}
class="mt-2 w-full text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
>
重置
</button>
</div>
)}
</div>
<button
onClick={(e) => {
e.stopPropagation();
props.onRemove();
}}
class={`shrink-0 w-5 h-5 text-xs rounded cursor-pointer flex items-center justify-center text-red-400 hover:text-red-600 hover:bg-red-50 transition-opacity ${props.hovered ? "opacity-100" : "opacity-0"}`}
title="删除图层"
>
✕
</button>
</div>
);
}
function DropdownButton(props: {
icon: import("solid-js").JSX.Element;
visible: boolean;
open: boolean;
onToggle: () => void;
title: string;
children: import("solid-js").JSX.Element;
}) {
return (
<div class="relative">
<button
onClick={(e) => {
e.stopPropagation();
props.onToggle();
}}
class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${!props.visible ? "invisible pointer-events-none" : ""}`}
title={props.title}
>
{props.icon}
</button>
{props.open && (
<div
class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
onClick={(e) => e.stopPropagation()}
>
{props.children}
</div>
)}
</div>
);
}

338
src/components/md-deck/hooks/deckStore.ts
View File

@ -1,8 +1,15 @@
import { createStore } from 'solid-js/store';
import { calculateDimensions } from './dimensions';
import { loadCSV, CSV } from '../../utils/csv-loader';
import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
import type { CardData, LayerConfig, Dimensions, CardSide, CardShape } from '../types';
import { createStore } from "solid-js/store";
import { calculateDimensions } from "./dimensions";
import { loadCSV, CSV } from "../../utils/csv-loader";
import { formatLayers, initLayerConfigsForSide } from "./layer-parser";
import * as layerCrud from "./layer-crud";
import type {
CardData,
LayerConfig,
Dimensions,
CardSide,
CardShape,
} from "../types";
export const DECK_DEFAULTS = {
SIZE_W: 54,
@ -11,14 +18,14 @@ export const DECK_DEFAULTS = {
GRID_H: 8,
BLEED: 1,
PADDING: 2,
CORNER_RADIUS: 3
CORNER_RADIUS: 3,
} as const;
export interface DraggingState {
layer: string;
action: 'drag' | 'resize-corner' | 'resize-edge';
anchor?: 'nw' | 'ne' | 'sw' | 'se';
edge?: 'n' | 's' | 'e' | 'w';
layer: number;
action: "drag" | "resize-corner" | "resize-edge";
anchor?: "nw" | "ne" | "sw" | "se";
edge?: "n" | "s" | "e" | "w";
startX: number;
startY: number;
startGrid: { x1: number; y1: number; x2: number; y2: number };
@ -46,7 +53,7 @@ export interface DeckState {
backLayerConfigs: LayerConfig[];
isEditing: boolean;
selectedLayer: string | null;
selectedLayer: number | null;
activeSide: CardSide;
isSelecting: boolean;
@ -62,7 +69,7 @@ export interface DeckState {
exportProgress: number;
exportError: string | null;
printOrientation: 'portrait' | 'landscape';
printOrientation: "portrait" | "landscape";
printFrontOddPageOffsetX: number;
printFrontOddPageOffsetY: number;
printDoubleSided: boolean;
@ -83,15 +90,22 @@ export interface DeckActions {
updateCardData: (index: number, key: string, value: string) => void;
setFrontLayerConfigs: (configs: LayerConfig[]) => void;
updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
toggleFrontLayerVisible: (prop: string) => void;
updateFrontLayerConfig: (
index: number,
updates: Partial<LayerConfig>,
) => void;
toggleFrontLayerVisible: (index: number) => void;
setBackLayerConfigs: (configs: LayerConfig[]) => void;
updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
toggleBackLayerVisible: (prop: string) => void;
updateBackLayerConfig: (index: number, updates: Partial<LayerConfig>) => void;
toggleBackLayerVisible: (index: number) => void;
addLayer: (side: CardSide, prop: string) => void;
removeLayer: (side: CardSide, index: number) => void;
reorderLayers: (side: CardSide, fromIndex: number, toIndex: number) => void;
setIsEditing: (editing: boolean) => void;
setSelectedLayer: (layer: string | null) => void;
setSelectedLayer: (layer: number | null) => void;
setActiveSide: (side: CardSide) => void;
setIsSelecting: (selecting: boolean) => void;
@ -100,11 +114,32 @@ export interface DeckActions {
cancelSelection: () => void;
setDraggingState: (state: DraggingState | null) => void;
moveLayer: (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => void;
resizeLayerCorner: (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
resizeLayerEdge: (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
moveLayer: (
index: number,
dxGrid: number,
dyGrid: number,
startGrid?: { x1: number; y1: number; x2: number; y2: number },
) => void;
resizeLayerCorner: (
index: number,
anchor: "nw" | "ne" | "sw" | "se",
dxGrid: number,
dyGrid: number,
startGrid: { x1: number; y1: number; x2: number; y2: number },
) => void;
resizeLayerEdge: (
index: number,
edge: "n" | "s" | "e" | "w",
delta: number,
startGrid: { x1: number; y1: number; x2: number; y2: number },
) => void;
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
loadCardsFromPath: (
path: string,
rawSrc: string,
layersStr?: string,
backLayersStr?: string,
) => Promise<void>;
setError: (error: string | null) => void;
clearError: () => void;
@ -117,7 +152,7 @@ export interface DeckActions {
setExportError: (error: string | null) => void;
clearExportError: () => void;
setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
setPrintOrientation: (orientation: "portrait" | "landscape") => void;
setPrintFrontOddPageOffsetX: (offset: number) => void;
setPrintFrontOddPageOffsetY: (offset: number) => void;
setPrintDoubleSided: (doubleSided: boolean) => void;
@ -128,9 +163,7 @@ export interface DeckStore {
actions: DeckActions;
}
export function createDeckStore(
initialSrc: string = '',
): DeckStore {
export function createDeckStore(initialSrc: string = ""): DeckStore {
const [state, setState] = createStore<DeckState>({
sizeW: DECK_DEFAULTS.SIZE_W,
sizeH: DECK_DEFAULTS.SIZE_H,
@ -139,7 +172,7 @@ export function createDeckStore(
bleed: DECK_DEFAULTS.BLEED,
padding: DECK_DEFAULTS.PADDING,
cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
shape: 'rectangle',
shape: "rectangle",
fixed: false,
src: initialSrc,
rawSrc: initialSrc,
@ -150,7 +183,7 @@ export function createDeckStore(
backLayerConfigs: [],
isEditing: false,
selectedLayer: null,
activeSide: 'front',
activeSide: "front",
isSelecting: false,
selectStart: null,
selectEnd: null,
@ -160,10 +193,10 @@ export function createDeckStore(
isExporting: false,
exportProgress: 0,
exportError: null,
printOrientation: 'portrait',
printOrientation: "portrait",
printFrontOddPageOffsetX: 0,
printFrontOddPageOffsetY: 0,
printDoubleSided: false
printDoubleSided: false,
});
const updateDimensions = () => {
@ -173,7 +206,7 @@ export function createDeckStore(
gridW: state.gridW,
gridH: state.gridH,
bleed: state.bleed,
padding: state.padding
padding: state.padding,
});
setState({ dimensions: dims });
};
@ -212,105 +245,205 @@ export function createDeckStore(
const setCards = (cards: CSV<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);
setState("cards", index, key, value);
};
const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
const setFrontLayerConfigs = (configs: LayerConfig[]) =>
setState({ frontLayerConfigs: configs });
const updateFrontLayerConfig = (
index: number,
updates: Partial<LayerConfig>,
) => {
setState("frontLayerConfigs", index, (config) => ({
...config,
...updates,
}));
};
const toggleFrontLayerVisible = (prop: string) => {
setState('frontLayerConfigs', (prev) => prev.map((config) =>
config.prop === prop ? { ...config, visible: !config.visible } : config
));
const toggleFrontLayerVisible = (index: number) => {
setState("frontLayerConfigs", index, "visible", (v) => !v);
};
const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
const setBackLayerConfigs = (configs: LayerConfig[]) =>
setState({ backLayerConfigs: configs });
const updateBackLayerConfig = (
index: number,
updates: Partial<LayerConfig>,
) => {
setState("backLayerConfigs", index, (config) => ({
...config,
...updates,
}));
};
const toggleBackLayerVisible = (prop: string) => {
setState('backLayerConfigs', (prev) => prev.map((config) =>
config.prop === prop ? { ...config, visible: !config.visible } : config
));
const toggleBackLayerVisible = (index: number) => {
setState("backLayerConfigs", index, "visible", (v) => !v);
};
const getLayerConfigs = (side: CardSide): LayerConfig[] =>
side === "front" ? state.frontLayerConfigs : state.backLayerConfigs;
const setLayerConfigs = (side: CardSide, configs: LayerConfig[]) => {
if (side === "front") setFrontLayerConfigs(configs);
else setBackLayerConfigs(configs);
};
const addLayer = (side: CardSide, prop: string) => {
const configs = getLayerConfigs(side);
setLayerConfigs(side, layerCrud.addLayer(configs, prop));
setState({
selectedLayer: layerCrud.adjustSelectedLayer(
state.selectedLayer,
"add",
configs.length,
),
});
};
const removeLayer = (side: CardSide, index: number) => {
setLayerConfigs(side, layerCrud.removeLayer(getLayerConfigs(side), index));
setState({
selectedLayer: layerCrud.adjustSelectedLayer(
state.selectedLayer,
"remove",
index,
),
});
};
const reorderLayers = (side: CardSide, from: number, to: number) => {
setLayerConfigs(
side,
layerCrud.reorderLayers(getLayerConfigs(side), from, to),
);
setState({
selectedLayer: layerCrud.adjustSelectedLayer(
state.selectedLayer,
"reorder",
from,
to,
),
});
};
const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
const setSelectedLayer = (layer: string | null) => setState({ selectedLayer: layer });
const setSelectedLayer = (layer: number | null) =>
setState({ selectedLayer: layer });
const setActiveSide = (side: CardSide) => setState({ activeSide: side });
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 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 setDraggingState = (draggingState: DraggingState | null) => setState({ draggingState });
const setDraggingState = (draggingState: DraggingState | null) =>
setState({ draggingState });
const getLayerConfig = (layerProp: string): LayerConfig | undefined => {
const configs = state.activeSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
return configs.find(c => c.prop === layerProp);
const getLayerConfig = (index: number): LayerConfig | undefined => {
const configs =
state.activeSide === "front"
? state.frontLayerConfigs
: state.backLayerConfigs;
return configs[index];
};
const updateLayerConfig = (layerProp: string, updates: Partial<LayerConfig>) => {
if (state.activeSide === 'front') {
updateFrontLayerConfig(layerProp, updates);
const updateLayerConfig = (index: number, updates: Partial<LayerConfig>) => {
if (state.activeSide === "front") {
updateFrontLayerConfig(index, updates);
} else {
updateBackLayerConfig(layerProp, updates);
updateBackLayerConfig(index, updates);
}
};
const moveLayer = (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => {
const layer = getLayerConfig(layerProp);
const moveLayer = (
index: number,
dxGrid: number,
dyGrid: number,
startGrid?: { x1: number; y1: number; x2: number; y2: number },
) => {
const layer = getLayerConfig(index);
if (!layer) return;
const grid = startGrid ?? { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2 };
const grid = startGrid ?? {
x1: layer.x1,
y1: layer.y1,
x2: layer.x2,
y2: layer.y2,
};
updateLayerConfig(layerProp, {
updateLayerConfig(index, {
x1: grid.x1 + dxGrid,
x2: grid.x2 + dxGrid,
y1: grid.y1 + dyGrid,
y2: grid.y2 + dyGrid
y2: grid.y2 + dyGrid,
});
};
const resizeLayerCorner = (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
const layer = getLayerConfig(layerProp);
const resizeLayerCorner = (
index: number,
anchor: "nw" | "ne" | "sw" | "se",
dxGrid: number,
dyGrid: number,
startGrid: { x1: number; y1: number; x2: number; y2: number },
) => {
const layer = getLayerConfig(index);
if (!layer) return;
const updates: Partial<LayerConfig> = {};
if (anchor === 'nw') {
if (anchor === "nw") {
updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
} else if (anchor === 'ne') {
} else if (anchor === "ne") {
updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
} else if (anchor === 'sw') {
} else if (anchor === "sw") {
updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
} else if (anchor === 'se') {
} else if (anchor === "se") {
updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
}
updateLayerConfig(layerProp, updates);
updateLayerConfig(index, updates);
};
const resizeLayerEdge = (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
const layer = getLayerConfig(layerProp);
const resizeLayerEdge = (
index: number,
edge: "n" | "s" | "e" | "w",
delta: number,
startGrid: { x1: number; y1: number; x2: number; y2: number },
) => {
const layer = getLayerConfig(index);
if (!layer) return;
const updates: Partial<LayerConfig> = {};
if (edge === 'n') updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
if (edge === 's') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 + delta));
if (edge === 'w') updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
if (edge === 'e') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 + delta));
updateLayerConfig(layerProp, updates);
if (edge === "n")
updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
if (edge === "s")
updates.y2 = Math.max(
startGrid.y1,
Math.min(state.gridH, startGrid.y2 + delta),
);
if (edge === "w")
updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
if (edge === "e")
updates.x2 = Math.max(
startGrid.x1,
Math.min(state.gridW, startGrid.x2 + delta),
);
updateLayerConfig(index, updates);
};
const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
const loadCardsFromPath = async (
path: string,
rawSrc: string,
layersStr: string = "",
backLayersStr: string = "",
) => {
if (!path) {
setState({ error: '未指定 CSV 文件路径' });
setState({ error: "未指定 CSV 文件路径" });
return;
}
@ -322,7 +455,7 @@ export function createDeckStore(
if (data.length === 0) {
setState({
error: `CSV ${path} 文件为空或格式不正确`,
isLoading: false
isLoading: false,
});
return;
}
@ -330,15 +463,19 @@ export function createDeckStore(
setState({
cards: data,
activeTab: 0,
frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
isLoading: false
frontLayerConfigs: layerCrud.withKeys(
initLayerConfigsForSide(data, layersStr),
),
backLayerConfigs: layerCrud.withKeys(
initLayerConfigsForSide(data, backLayersStr),
),
isLoading: false,
});
updateDimensions();
} catch (err) {
setState({
error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : '未知错误'}`,
isLoading: false
error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : "未知错误"}`,
isLoading: false,
});
}
};
@ -348,11 +485,12 @@ export function createDeckStore(
const generateCode = (backLayersStr?: string) => {
const frontLayersStr = formatLayers(state.frontLayerConfigs);
const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
const backLayersString =
backLayersStr || formatLayers(state.backLayerConfigs);
const parts = [
`:md-deck[${state.rawSrc || state.src}]`,
`{size="${state.sizeW}x${state.sizeH}" `,
`grid="${state.gridW}x${state.gridH}" `
`grid="${state.gridW}x${state.gridH}" `,
];
if (state.bleed !== DECK_DEFAULTS.BLEED) {
@ -361,7 +499,7 @@ export function createDeckStore(
if (state.padding !== DECK_DEFAULTS.PADDING) {
parts.push(`padding="${state.padding}" `);
}
if (state.shape !== 'rectangle') {
if (state.shape !== "rectangle") {
parts.push(`shape="${state.shape}" `);
}
@ -369,34 +507,37 @@ export function createDeckStore(
if (backLayersString) {
parts.push(`back-layers="${backLayersString}" `);
}
parts.push('}');
return parts.join('');
parts.push("}");
return parts.join("");
};
const copyCode = async (backLayersStr?: string) => {
const code = generateCode(backLayersStr);
try {
await navigator.clipboard.writeText(code);
alert('已复制到剪贴板！');
alert("已复制到剪贴板！");
} catch (err) {
console.error('复制失败:', err);
alert('复制失败，请手动复制');
console.error("复制失败:", err);
alert("复制失败，请手动复制");
}
};
const setExporting = (exporting: boolean) => setState({ isExporting: exporting });
const setExporting = (exporting: boolean) =>
setState({ isExporting: exporting });
const exportDeck = () => {
setState({ isExporting: true, exportProgress: 0, exportError: null });
};
const setExportProgress = (progress: number) => setState({ exportProgress: progress });
const setExportProgress = (progress: number) =>
setState({ exportProgress: progress });
const setExportError = (error: string | null) => setState({ exportError: error });
const setExportError = (error: string | null) =>
setState({ exportError: error });
const clearExportError = () => setState({ exportError: null });
const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
const setPrintOrientation = (orientation: "portrait" | "landscape") => {
setState({ printOrientation: orientation });
};
@ -430,6 +571,9 @@ export function createDeckStore(
setBackLayerConfigs,
updateBackLayerConfig,
toggleBackLayerVisible,
addLayer,
removeLayer,
reorderLayers,
setIsEditing,
setSelectedLayer,
setActiveSide,
@ -454,7 +598,7 @@ export function createDeckStore(
setPrintOrientation,
setPrintFrontOddPageOffsetX,
setPrintFrontOddPageOffsetY,
setPrintDoubleSided
setPrintDoubleSided,
};
return { state, actions };

79
src/components/md-deck/hooks/layer-crud.ts Normal file
View File

@ -0,0 +1,79 @@
import type { LayerConfig } from "../types";
let nextKey = 1;
export function resetKeyCounter(value = 1) {
nextKey = value;
}
/** Creates a new LayerConfig with default placement and a stable _key. */
export function createDefaultLayer(prop: string): LayerConfig {
return { prop, visible: true, x1: 1, y1: 1, x2: 2, y2: 2, _key: nextKey++ };
}
/** Assign stable _key to layers that don't have one (e.g. parsed from string). */
export function withKeys(layers: LayerConfig[]): LayerConfig[] {
return layers.map((l) => (l._key ? l : { ...l, _key: nextKey++ }));
}
/** Insert a layer and return the new array. */
export function addLayer(configs: LayerConfig[], prop: string): LayerConfig[] {
return [...configs, createDefaultLayer(prop)];
}
/** Remove a layer by index and return the new array. */
export function removeLayer(
configs: LayerConfig[],
index: number,
): LayerConfig[] {
return configs.filter((_, i) => i !== index);
}
/** Reorder a layer within the array. Returns new array. */
export function reorderLayers(
configs: LayerConfig[],
from: number,
to: number,
): LayerConfig[] {
const next = [...configs];
const [item] = next.splice(from, 1);
next.splice(to, 0, item);
return next;
}
/**
* Convert layer _key to flake ID (unique string) for SortableProvider.
* Allows multiple instances of the same field name.
*/
export function toSortableId(layer: LayerConfig, index: number): string {
return layer._key ? `layer-${layer._key}` : `layer-idx-${index}`;
}
/**
* Recalculate selectedLayer after a structural change (add/remove/reorder).
* Returns the new selectedLayer index, or null.
*/
export function adjustSelectedLayer(
currentSelected: number | null,
action: "add" | "remove" | "reorder",
from: number,
to?: number,
): number | null {
if (currentSelected === null) return null;
if (action === "remove") {
if (currentSelected === from) return null;
return currentSelected > from ? currentSelected - 1 : currentSelected;
}
if (action === "reorder" && to !== undefined) {
if (currentSelected === from) return to;
if (from < to && currentSelected > from && currentSelected <= to)
return currentSelected - 1;
if (from > to && currentSelected >= to && currentSelected < from)
return currentSelected + 1;
return currentSelected;
}
return currentSelected;
}

49
src/components/md-deck/hooks/layer-parser.ts
View File

@ -1,4 +1,4 @@
import type { Layer, LayerConfig } from '../types';
import type { Layer, LayerConfig } from "../types";
import { CSV } from "../../utils/csv-loader";
/**
@ -11,7 +11,8 @@ export function parseLayers(layersStr: string): Layer[] {
const layers: Layer[] = [];
// 匹配：prop:x1,y1-x2,y2[ffontSize][direction][align]
const regex = /([^: ]+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
const regex =
/([^: ]+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
let match;
while ((match = regex.exec(layersStr)) !== null) {
@ -22,8 +23,8 @@ export function parseLayers(layersStr: string): Layer[] {
x2: parseInt(match[4]),
y2: parseInt(match[5]),
fontSize: match[6] ? parseFloat(match[6]) : undefined,
orientation: match[7] as 'n' | 's' | 'e' | 'w' | undefined,
align: match[8] as 'l' | 'c' | 'r' | undefined
orientation: match[7] as "n" | "s" | "e" | "w" | undefined,
align: match[8] as "l" | "c" | "r" | undefined,
});
}
@ -35,13 +36,13 @@ export function parseLayers(layersStr: string): Layer[] {
*/
export function formatLayers(layers: LayerConfig[]): string {
return layers
.filter(l => l.visible)
.map(l => {
.filter((l) => l.visible)
.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') {
if (l.orientation && l.orientation !== "n") {
str += l.orientation;
}
if (l.align) {
@ -49,33 +50,29 @@ export function formatLayers(layers: LayerConfig[]): string {
}
return str;
})
.join(' ');
.join(" ");
}
/**
* 初始化图层配置（用于特定面）
*/
export function initLayerConfigsForSide(
data: CSV<any>,
layersStr: string
_data: CSV<any>,
layersStr: string,
): LayerConfig[] {
const parsed = parseLayers(layersStr);
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,
orientation: existing?.orientation,
fontSize: existing?.fontSize,
align: existing?.align
};
});
return parsed.map((layer) => ({
prop: layer.prop,
visible: true,
x1: layer.x1 || 1,
y1: layer.y1 || 1,
x2: layer.x2 || 2,
y2: layer.y2 || 2,
orientation: layer.orientation,
fontSize: layer.fontSize,
align: layer.align,
}));
}
/**
@ -83,7 +80,7 @@ export function initLayerConfigsForSide(
*/
export function initLayerConfigs(
data: CSV<any>,
existingLayersStr: string
existingLayersStr: string,
): LayerConfig[] {
return initLayerConfigsForSide(data, existingLayersStr);
}

161
src/components/md-deck/hooks/useLayerInteraction.ts
View File

@ -1,6 +1,6 @@
import { createMemo } from 'solid-js';
import type { DeckStore, DraggingState } from './deckStore';
import type { LayerConfig } from '../types';
import { createMemo } from "solid-js";
import type { DeckStore, DraggingState } from "./deckStore";
import type { LayerConfig } from "../types";
export interface LayerClickInfo {
layerProp: string;
@ -9,21 +9,38 @@ export interface LayerClickInfo {
}
export interface LayerInteractionHandlers {
onLayerClick: (layerProp: string, e: MouseEvent) => void;
onFrameMouseDown: (action: 'drag' | 'resize-corner' | 'resize-edge', anchor?: 'nw' | 'ne' | 'sw' | 'se', edge?: 'n' | 's' | 'e' | 'w', e?: MouseEvent) => void;
onLayerClick: (index: number, e: MouseEvent) => void;
onFrameMouseDown: (
action: "drag" | "resize-corner" | "resize-edge",
anchor?: "nw" | "ne" | "sw" | "se",
edge?: "n" | "s" | "e" | "w",
e?: MouseEvent,
) => void;
onCardMouseMove: (e: MouseEvent, cardEl: HTMLElement) => void;
onCardMouseUp: () => void;
onCardClick: (e: MouseEvent, cardEl: HTMLElement) => void;
getOverlappingLayers: (gridX: number, gridY: number) => LayerConfig[];
}
export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers {
let clickStack: { gridX: number; gridY: number; layers: string[]; currentIndex: number } | null = null;
export function useLayerInteraction(
store: DeckStore,
): LayerInteractionHandlers {
let clickStack: {
gridX: number;
gridY: number;
layers: number[];
currentIndex: number;
} | null = null;
const currentLayerConfigs = () =>
store.state.activeSide === 'front'
? store.state.frontLayerConfigs.filter(l => l.visible)
: store.state.backLayerConfigs.filter(l => l.visible);
store.state.activeSide === "front"
? store.state.frontLayerConfigs.filter((l) => l.visible)
: store.state.backLayerConfigs.filter((l) => l.visible);
const allLayerConfigs = () =>
store.state.activeSide === "front"
? store.state.frontLayerConfigs
: store.state.backLayerConfigs;
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement) => {
const dims = store.state.dimensions;
@ -36,31 +53,46 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
const offsetY = (e.clientY - rect.top) / mmToPxRatio;
const gridX = Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1;
const gridY = Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1;
const gridY =
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))
gridY: Math.max(1, Math.min(dims.gridH, gridY)),
};
};
const isPointInLayer = (gridX: number, gridY: number, layer: LayerConfig): boolean => {
return gridX >= layer.x1 && gridX <= layer.x2 && gridY >= layer.y1 && gridY <= layer.y2;
const isPointInLayer = (
gridX: number,
gridY: number,
layer: LayerConfig,
): boolean => {
return (
gridX >= layer.x1 &&
gridX <= layer.x2 &&
gridY >= layer.y1 &&
gridY <= layer.y2
);
};
const getOverlappingLayers = (gridX: number, gridY: number): LayerConfig[] => {
return currentLayerConfigs().filter(layer => isPointInLayer(gridX, gridY, layer));
const getOverlappingLayers = (
gridX: number,
gridY: number,
): LayerConfig[] => {
return currentLayerConfigs().filter((layer) =>
isPointInLayer(gridX, gridY, layer),
);
};
const handleLayerClick = (layerProp: string, e: MouseEvent) => {
const handleLayerClick = (index: number, e: MouseEvent) => {
e.stopPropagation();
const currentlySelected = store.state.selectedLayer;
if (currentlySelected === layerProp) {
if (currentlySelected === index) {
store.actions.setSelectedLayer(null);
} else {
store.actions.setSelectedLayer(layerProp);
store.actions.setSelectedLayer(index);
}
clickStack = null;
@ -78,40 +110,55 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
return;
}
const overlappingProps = overlapping.map(l => l.prop);
const allConfigs = allLayerConfigs();
const overlappingIndices = overlapping
.map((l) => allConfigs.findIndex((c) => c.prop === l.prop && c.visible))
.filter((i) => i !== -1);
if (clickStack && clickStack.gridX === gridX && clickStack.gridY === gridY) {
clickStack.currentIndex = (clickStack.currentIndex + 1) % overlappingProps.length;
const nextLayer = overlappingProps[clickStack.currentIndex];
store.actions.setSelectedLayer(nextLayer);
if (overlappingIndices.length === 0) {
store.actions.setSelectedLayer(null);
clickStack = null;
return;
}
if (
clickStack &&
clickStack.gridX === gridX &&
clickStack.gridY === gridY
) {
clickStack.currentIndex =
(clickStack.currentIndex + 1) % overlappingIndices.length;
const nextIndex = overlappingIndices[clickStack.currentIndex];
store.actions.setSelectedLayer(nextIndex);
} else {
clickStack = {
gridX,
gridY,
layers: overlappingProps,
currentIndex: 0
layers: overlappingIndices,
currentIndex: 0,
};
store.actions.setSelectedLayer(overlappingProps[0]);
store.actions.setSelectedLayer(overlappingIndices[0]);
}
};
const handleFrameMouseDown = (
action: 'drag' | 'resize-corner' | 'resize-edge',
anchor?: 'nw' | 'ne' | 'sw' | 'se',
edge?: 'n' | 's' | 'e' | 'w',
e?: MouseEvent
action: "drag" | "resize-corner" | "resize-edge",
anchor?: "nw" | "ne" | "sw" | "se",
edge?: "n" | "s" | "e" | "w",
e?: MouseEvent,
) => {
if (!store.state.selectedLayer) return;
if (store.state.selectedLayer === null) return;
if (e) e.stopPropagation();
const layer = currentLayerConfigs().find(l => l.prop === store.state.selectedLayer);
const index = store.state.selectedLayer;
const layer = allLayerConfigs()[index];
if (!layer) return;
const startX = e?.clientX ?? 0;
const startY = e?.clientY ?? 0;
const draggingState: DraggingState = {
layer: store.state.selectedLayer,
layer: index,
action,
anchor,
edge,
@ -121,8 +168,8 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
x1: layer.x1,
y1: layer.y1,
x2: layer.x2,
y2: layer.y2
}
y2: layer.y2,
},
};
store.actions.setDraggingState(draggingState);
@ -149,24 +196,42 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
const startGrid = dragging.startGrid;
if (dragging.action === 'drag') {
store.actions.moveLayer(dragging.layer, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
} else if (dragging.action === 'resize-corner' && dragging.anchor) {
store.actions.resizeLayerCorner(dragging.layer, dragging.anchor, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
} else if (dragging.action === 'resize-edge' && dragging.edge) {
const delta = dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX);
store.actions.resizeLayerEdge(dragging.layer, dragging.edge, delta, startGrid);
if (dragging.action === "drag") {
store.actions.moveLayer(
dragging.layer,
Math.round(deltaGridX),
Math.round(deltaGridY),
startGrid,
);
} else if (dragging.action === "resize-corner" && dragging.anchor) {
store.actions.resizeLayerCorner(
dragging.layer,
dragging.anchor,
Math.round(deltaGridX),
Math.round(deltaGridY),
startGrid,
);
} else if (dragging.action === "resize-edge" && dragging.edge) {
const delta =
dragging.edge === "n" || dragging.edge === "s"
? Math.round(deltaGridY)
: Math.round(deltaGridX);
store.actions.resizeLayerEdge(
dragging.layer,
dragging.edge,
delta,
startGrid,
);
}
};
const handleCardMouseUp = () => {
if (store.state.draggingState) {
const layer = store.state.draggingState.layer;
const dragging = store.state.draggingState;
store.actions.setDraggingState(null);
const newLayerConfig = currentLayerConfigs().find(l => l.prop === layer);
const newLayerConfig = allLayerConfigs()[dragging.layer];
if (newLayerConfig && dragging.startGrid) {
store.actions.setDraggingState({
...dragging,
@ -174,8 +239,8 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
x1: newLayerConfig.x1,
y1: newLayerConfig.y1,
x2: newLayerConfig.x2,
y2: newLayerConfig.y2
}
y2: newLayerConfig.y2,
},
});
store.actions.setDraggingState(null);
}
@ -188,6 +253,6 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
onCardMouseMove: handleCardMouseMove,
onCardMouseUp: handleCardMouseUp,
onCardClick: handleCardClick,
getOverlappingLayers
getOverlappingLayers,
};
}

13
src/components/md-deck/types.ts
View File

@ -2,9 +2,9 @@ export interface CardData {
[key: string]: string;
}
export type CardSide = 'front' | 'back';
export type CardSide = "front" | "back";
export type { CardShape } from '../../plotcutter/contour';
export type { CardShape } from "../../plotcutter/contour";
export interface Layer {
prop: string;
@ -12,9 +12,9 @@ export interface Layer {
y1: number;
x2: number;
y2: number;
orientation?: 'n' | 's' | 'e' | 'w';
orientation?: "n" | "s" | "e" | "w";
fontSize?: number;
align?: 'l' | 'c' | 'r';
align?: "l" | "c" | "r";
}
export interface LayerConfig {
@ -24,9 +24,10 @@ export interface LayerConfig {
y1: number;
x2: number;
y2: number;
orientation?: 'n' | 's' | 'e' | 'w';
orientation?: "n" | "s" | "e" | "w";
fontSize?: number;
align?: 'l' | 'c' | 'r';
align?: "l" | "c" | "r";
_key?: number;
}
export interface Dimensions {

12
src/solid-dnd.directives.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import "solid-js";
declare module "solid-js" {
namespace JSX {
interface Directives {
sortable: (
el: HTMLElement,
accessor: () => boolean | { skipTransform?: boolean } | undefined,
) => void;
}
}
}