refactor: fix layout for merged decks in PrintPreview
Update PrintPreview to correctly handle dimensions and layer configurations when multiple decks are merged. Instead of using the base store for all cards, it now maps each card to its specific source store to ensure correct grid positioning and styling.
This commit is contained in:
parent
4953d33f0f
commit
d4de95b465
|
|
@ -26,7 +26,9 @@ export interface PrintPreviewProps {
|
|||
export function PrintPreview(props: PrintPreviewProps) {
|
||||
const { store } = props;
|
||||
|
||||
// 合并的卡牌列表:主牌组 + 选中的其他牌组
|
||||
// ---- 跨牌组合并 ----
|
||||
|
||||
// 用户选中的额外牌组 ID 列表
|
||||
const [selectedDeckIds, setSelectedDeckIds] = createSignal<string[]>([]);
|
||||
|
||||
// 当某个已选中的牌组被卸载时,自动从选中列表中移除
|
||||
|
|
@ -38,18 +40,33 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
}
|
||||
});
|
||||
|
||||
const mergedCards = createMemo(() => {
|
||||
const base = store.state.cards as CardData[];
|
||||
const extras = selectedDeckIds()
|
||||
// 仅额外牌组的卡牌(不含主牌组),传给 usePageLayout 避免重复
|
||||
const extraCards = createMemo(() => {
|
||||
return selectedDeckIds()
|
||||
.map((id) => getDeckById(id))
|
||||
.filter(Boolean)
|
||||
.flatMap((entry) => entry!.store.state.cards as CardData[]);
|
||||
return [...base, ...extras];
|
||||
});
|
||||
|
||||
const mergedCardCount = () => mergedCards().length;
|
||||
// 卡牌 → 来源 store 的映射,用于渲染时选择正确的图层配置
|
||||
const cardStoreMap = createMemo(() => {
|
||||
const map = new Map<CardData, DeckStore>();
|
||||
for (const id of selectedDeckIds()) {
|
||||
const entry = getDeckById(id);
|
||||
if (entry) {
|
||||
for (const card of entry.store.state.cards as CardData[]) {
|
||||
map.set(card, entry.store);
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store, mergedCards);
|
||||
const mergedCardCount = () => store.state.cards.length + extraCards().length;
|
||||
|
||||
// ---- 布局 & 导出 hooks ----
|
||||
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store, extraCards);
|
||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||
const { generatePltData } = usePlotterExport(store);
|
||||
|
||||
|
|
@ -211,6 +228,10 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
store.state.cornerRadius,
|
||||
);
|
||||
|
||||
// 查找该卡牌所属的 store(主牌组用 store,合并牌组用各自的 store)
|
||||
const cardStore =
|
||||
cardStoreMap().get(card.data) || store;
|
||||
|
||||
return (
|
||||
<g class="card-group">
|
||||
<Show when={shapeClipPath}>
|
||||
|
|
@ -238,14 +259,14 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
class="absolute"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: `${store.state.dimensions?.gridOriginX}mm`,
|
||||
top: `${store.state.dimensions?.gridOriginY}mm`,
|
||||
width: `${store.state.dimensions?.gridAreaWidth}mm`,
|
||||
height: `${store.state.dimensions?.gridAreaHeight}mm`,
|
||||
left: `${cardStore.state.dimensions?.gridOriginX}mm`,
|
||||
top: `${cardStore.state.dimensions?.gridOriginY}mm`,
|
||||
width: `${cardStore.state.dimensions?.gridAreaWidth}mm`,
|
||||
height: `${cardStore.state.dimensions?.gridAreaHeight}mm`,
|
||||
}}
|
||||
>
|
||||
<CardLayer
|
||||
store={store}
|
||||
store={cardStore}
|
||||
cardData={card.data}
|
||||
side={card.side || "front"}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue