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

fix: add bounds back

This commit is contained in:
hyper 2026-02-27 22:37:11 +08:00
parent 806747833e
commit c204dc695c
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ export interface CardLayerProps {
layers: LayerConfig[]; layers: LayerConfig[];
dimensions: Dimensions; dimensions: Dimensions;
cardData: CardData; cardData: CardData;
showBounds?: boolean;
} }
/** /**
@ -29,14 +30,27 @@ export function CardLayer(props: CardLayerProps) {
return ( return (
<For each={props.layers}> <For each={props.layers}>
{(layer) => ( {(layer) => (
<article <>
class="absolute flex items-center justify-center text-center prose prose-sm" <article
style={{ class="absolute flex items-center justify-center text-center prose prose-sm"
...getLayerStyle(layer, props.dimensions), style={{
'font-size': `${props.dimensions.fontSize}mm` ...getLayerStyle(layer, props.dimensions),
}} 'font-size': `${props.dimensions.fontSize}mm`
innerHTML={renderLayerContent(layer, props.cardData)} }}
/> innerHTML={renderLayerContent(layer, props.cardData)}
/>
{props.showBounds && (
<div
class="absolute border-2 border-blue-500/50 pointer-events-none select-none"
style={{
left: `${(layer.x1 - 1) * props.dimensions.cellWidth}mm`,
top: `${(layer.y1 - 1) * props.dimensions.cellHeight}mm`,
width: `${(layer.x2 - layer.x1 + 1) * props.dimensions.cellWidth}mm`,
height: `${(layer.y2 - layer.y1 + 1) * props.dimensions.cellHeight}mm`
}}
/>
)}
</>
)} )}
</For> </For>
); );

2
src/components/md-deck/CardPreview.tsx
View File

@ -30,6 +30,7 @@ export function CardPreview(props: CardPreviewProps) {
<div <div
ref={cardRef} ref={cardRef}
class="relative bg-white border border-gray-300 shadow-lg overflow-hidden" class="relative bg-white border border-gray-300 shadow-lg overflow-hidden"
classList={{ 'select-none': store.state.isEditing }}
style={{ style={{
width: `${store.state.dimensions?.cardWidth}mm`, width: `${store.state.dimensions?.cardWidth}mm`,
height: `${store.state.dimensions?.cardHeight}mm` height: `${store.state.dimensions?.cardHeight}mm`
@ -80,6 +81,7 @@ export function CardPreview(props: CardPreviewProps) {
layers={visibleLayers()} layers={visibleLayers()}
dimensions={store.state.dimensions!} dimensions={store.state.dimensions!}
cardData={currentCard()} cardData={currentCard()}
showBounds={store.state.isEditing}
/> />
</div> </div>
</div> </div>