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

View File

@ -7,6 +7,7 @@ export interface CardLayerProps {
layers: LayerConfig[];
dimensions: Dimensions;
cardData: CardData;
showBounds?: boolean;
}
/**
@ -29,14 +30,27 @@ export function CardLayer(props: CardLayerProps) {
return (
<For each={props.layers}>
{(layer) => (
<article
class="absolute flex items-center justify-center text-center prose prose-sm"
style={{
...getLayerStyle(layer, props.dimensions),
'font-size': `${props.dimensions.fontSize}mm`
}}
innerHTML={renderLayerContent(layer, props.cardData)}
/>
<>
<article
class="absolute flex items-center justify-center text-center prose prose-sm"
style={{
...getLayerStyle(layer, props.dimensions),
'font-size': `${props.dimensions.fontSize}mm`
}}
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>
);

View File

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