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

Compare commits

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

No commits in common. "0add3f27d569b8bc3d7022d44e1ea7b9d43e4e86" and "9794184e987410ff386770565ad6976bb5227548" have entirely different histories.
0add3f27d5 ... 9794184e98

14 changed files with 499 additions and 1006 deletions
Show Stats Expand all files Collapse all files

4
content/deck-test.md
View File

@ -2,8 +2,6 @@
: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" 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 语法创建 md-deck
```yaml/tag ```yaml/tag
@ -14,4 +12,4 @@ grid: 5x8
bleed: 1 bleed: 1
padding: 2 padding: 2
layers: name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s layers: name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s
``` ```

14
package-lock.json generated
View File

@ -11,7 +11,6 @@
"dependencies": { "dependencies": {
"@modelcontextprotocol/sdk": "^0.5.0", "@modelcontextprotocol/sdk": "^0.5.0",
"@solidjs/router": "^0.15.0", "@solidjs/router": "^0.15.0",
"@thisbeyond/solid-dnd": "^0.7.5",
"@types/three": "^0.183.1", "@types/three": "^0.183.1",
"chokidar": "^5.0.0", "chokidar": "^5.0.0",
"commander": "^14.0.3", "commander": "^14.0.3",
@ -2868,19 +2867,6 @@
"vite": "^5.2.0 || ^6 || ^7 || ^8" "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": { "node_modules/@tootallnate/once": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",

1
package.json
View File

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

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

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

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

@ -1,5 +1,5 @@
import { For } from "solid-js"; import { For } from 'solid-js';
import type { DeckStore } from "./hooks/deckStore"; import type { DeckStore } from './hooks/deckStore';
export interface DeckHeaderProps { export interface DeckHeaderProps {
store: DeckStore; store: DeckStore;
@ -18,20 +18,20 @@ export function DeckHeader(props: DeckHeaderProps) {
onClick={() => store.actions.setIsEditing(!store.state.isEditing)} onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${ class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
store.state.isEditing && !store.state.fixed store.state.isEditing && !store.state.fixed
? "bg-blue-100 text-blue-600" ? 'bg-blue-100 text-blue-600'
: "bg-gray-100 text-gray-600 hover:bg-gray-200" : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`} }`}
> >
{store.state.isEditing ? "✓ 编辑中" : "✏️ 编辑"} {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
</button> </button>
{/* 导出 PDF 按钮 */} {/* 导出 PDF 按钮 */}
<button <button
onClick={() => store.actions.exportDeck()} onClick={() => store.actions.exportDeck()}
class="px-2 py-1 rounded text-xs font-medium transition-colors cursor-pointer bg-green-100 text-green-600 hover:bg-green-200" class="px-2 py-1 rounded text-xs font-medium transition-colors cursor-pointer bg-green-100 text-green-600 hover:bg-green-200"
> >
📥 导出 PDF 📥 导出 PDF
</button> </button>
{/* Tab 选择器 */} {/* Tab 选择器 */}
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap"> <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
@ -39,10 +39,10 @@ export function DeckHeader(props: DeckHeaderProps) {
{(card, index) => ( {(card, index) => (
<button <button
onClick={() => store.actions.setActiveTab(index())} onClick={() => store.actions.setActiveTab(index())}
class={`font-medium transition-colors shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${ class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
store.state.activeTab === index() store.state.activeTab === index()
? "bg-blue-100 text-blue-600 border-b-2 border-blue-600" ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
: "text-gray-500 hover:text-gray-700 hover:bg-gray-100" : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
}`} }`}
> >
{card.label || card.name || `Card ${index() + 1}`} {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 { For } from 'solid-js';
import type { DeckStore } from "../hooks/deckStore"; import type { DeckStore } from '../hooks/deckStore';
export interface DataEditorPanelProps { export interface DataEditorPanelProps {
activeTab: number; activeTab: number;
cards: DeckStore["state"]["cards"]; cards: DeckStore['state']['cards'];
updateCardData: DeckStore["actions"]["updateCardData"]; updateCardData: DeckStore['actions']['updateCardData'];
} }
/** /**
@ -12,22 +12,18 @@ export interface DataEditorPanelProps {
*/ */
export function DataEditorPanel(props: DataEditorPanelProps) { export function DataEditorPanel(props: DataEditorPanelProps) {
return ( return (
<div class="w-64 shrink-0"> <div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2">卡牌数据</h3> <h3 class="font-bold mb-2">卡牌数据</h3>
<div class="space-y-2 max-h-96 overflow-y-auto"> <div class="space-y-2 max-h-96 overflow-y-auto">
<For each={Object.keys(props.cards[props.activeTab] || {})}> <For each={Object.keys(props.cards[props.activeTab] || {})}>
{(key) => ( {(key) => (
<div> <div>
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">{key}</label>
{key}
</label>
<textarea <textarea
class="w-full border border-gray-300 rounded px-2 py-1 text-sm" class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
rows={3} rows={3}
value={props.cards[props.activeTab]?.[key] || ""} value={props.cards[props.activeTab]?.[key] || ''}
onInput={(e) => onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
props.updateCardData(props.activeTab, key, e.target.value)
}
/> />
</div> </div>
)} )}

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

@ -1,150 +1,269 @@
import { For, createSignal, createMemo, onCleanup, onMount } from "solid-js"; import { For, createSignal, onCleanup, onMount } from 'solid-js';
import { import type { DeckStore } from '../hooks/deckStore';
DragDropProvider, import alignLeftIcon from './icons/align-left.png';
DragDropSensors, import alignCenterIcon from './icons/align-center.png';
SortableProvider, import alignRightIcon from './icons/align-right.png';
closestCenter,
} from "@thisbeyond/solid-dnd";
import type { DeckStore } from "../hooks/deckStore";
import { toSortableId } from "../hooks/layer-crud";
import { LayerRow } from "./LayerRow";
export interface LayerEditorPanelProps { export interface LayerEditorPanelProps {
store: DeckStore; 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) { function LayerEditorPanel(props: LayerEditorPanelProps) {
const { store } = props; const { store } = props;
const [openDropdown, setOpenDropdown] = createSignal<string | null>(null); const [openDropdown, setOpenDropdown] = createSignal<string | null>(null);
const [hoveredIndex, setHoveredIndex] = createSignal<number | null>(null); let dropdownRef: HTMLDivElement | undefined;
const [addMenuOpen, setAddMenuOpen] = createSignal(false);
let addMenuRef: HTMLDivElement | undefined;
const side = () => store.state.activeSide; const currentLayerConfigs = () =>
const layers = () => store.state.activeSide === 'front'
side() === "front" ? store.state.frontLayerConfigs
? store.state.frontLayerConfigs
: store.state.backLayerConfigs; : store.state.backLayerConfigs;
// Stable IDs from _key — don't change on reorder const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
const sortableIds = createMemo(() => const updateFn = store.state.activeSide === 'front'
layers().map((l, i) => toSortableId(l, i)), ? store.actions.updateFrontLayerConfig
);
// 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 updater = () =>
side() === "front"
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig; : store.actions.updateBackLayerConfig;
updateFn(layerProp, { orientation });
setOpenDropdown(null);
};
const availableFields = createMemo(() => { const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
const cards = store.state.cards; const updateFn = store.state.activeSide === 'front'
if (!cards?.length) return []; ? store.actions.updateFrontLayerConfig
return Object.keys(cards[0]).filter((k) => k !== "label"); : store.actions.updateBackLayerConfig;
}); updateFn(layerProp, { fontSize });
};
const update = ( const updateLayerAlign = (layerProp: string, align?: 'l' | 'c' | 'r') => {
index: number, const updateFn = store.state.activeSide === 'front'
patch: Partial<import("../types").LayerConfig>, ? store.actions.updateFrontLayerConfig
closeDropdown = false, : store.actions.updateBackLayerConfig;
) => { updateFn(layerProp, { align });
updater()(index, patch); setOpenDropdown(null);
if (closeDropdown) 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
);
};
const handleDropdownClick = (e: MouseEvent) => {
e.stopPropagation();
};
const handleClickOutside = (e: MouseEvent) => {
if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
setOpenDropdown(null);
}
}; };
onMount(() => { onMount(() => {
const h = (e: MouseEvent) => { document.addEventListener('click', handleClickOutside);
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 ( return (
<div class="w-64 shrink-0"> <div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2 mt-0"> <h3 class="font-bold mb-2 mt-0">
图层 ({side() === "front" ? "正面" : "背面"}) 图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
</h3> </h3>
<div class="relative mb-2" ref={addMenuRef}> <div ref={dropdownRef}>
<button <For each={currentLayerConfigs()}>
onClick={() => setAddMenuOpen(!addMenuOpen())} {(layer, index) => (
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" <div
> class={`flex items-center gap-1 py-1.5 px-1 ${
<span class="text-lg leading-none">+</span> index() < layerCount() - 1 ? 'border-b border-gray-200' : ''
<span>添加图层</span> } ${
</button> store.state.selectedLayer === layer.prop ? 'bg-blue-50' : ''
{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" <input
onClick={(e) => e.stopPropagation()} type="checkbox"
> checked={layer.visible}
<For each={availableFields()}> onChange={() => toggleLayerVisible(layer.prop)}
{(f) => ( class="cursor-pointer"
/>
<span
class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600"
onClick={() => selectLayer(layer.prop)}
>
{layer.prop}
</span>
<div class="relative">
<button <button
onClick={() => { onClick={(e) => {
store.actions.addLayer(side(), f); e.stopPropagation();
setAddMenuOpen(false); setOpenDropdown(openDropdown() === `orient-${layer.prop}` ? null : `orient-${layer.prop}`);
}} }}
class="block w-full text-left px-3 py-1.5 text-sm hover:bg-blue-50 hover:text-blue-600 cursor-pointer" 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="方向"
> >
{f} {OrientationIcon(layer.orientation || 'n')}
</button> </button>
)} {openDropdown() === `orient-${layer.prop}` && (
</For> <div
</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> </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) => (
<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())}
/>
)}
</For>
</SortableProvider>
</DragDropSensors>
</DragDropProvider>
<hr class="my-4" /> <hr class="my-4" />
<button <button
onClick={() => store.actions.copyCode()} 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" 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
View File

@ -1,279 +0,0 @@
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>
);
}

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

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

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

@ -1,79 +0,0 @@
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;
}

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

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

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

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

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

@ -2,9 +2,9 @@ export interface CardData {
[key: string]: string; [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 { export interface Layer {
prop: string; prop: string;
@ -12,9 +12,9 @@ export interface Layer {
y1: number; y1: number;
x2: number; x2: number;
y2: number; y2: number;
orientation?: "n" | "s" | "e" | "w"; orientation?: 'n' | 's' | 'e' | 'w';
fontSize?: number; fontSize?: number;
align?: "l" | "c" | "r"; align?: 'l' | 'c' | 'r';
} }
export interface LayerConfig { export interface LayerConfig {
@ -24,10 +24,9 @@ export interface LayerConfig {
y1: number; y1: number;
x2: number; x2: number;
y2: number; y2: number;
orientation?: "n" | "s" | "e" | "w"; orientation?: 'n' | 's' | 'e' | 'w';
fontSize?: number; fontSize?: number;
align?: "l" | "c" | "r"; align?: 'l' | 'c' | 'r';
_key?: number;
} }
export interface Dimensions { export interface Dimensions {

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

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