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

refactor: hide original frame

This commit is contained in:
hypercross 2026-03-30 12:33:42 +08:00
parent 49fca8c18f
commit d8058fd224
1 changed files with 11 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,6 @@ export function CardLayer(props: CardLayerProps) {
: 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 showBounds = () => props.store.state.isEditing;
const selectedLayer = () => props.store.state.selectedLayer; const selectedLayer = () => props.store.state.selectedLayer;
const draggingState = () => props.store.state.draggingState; const draggingState = () => props.store.state.draggingState;
@ -73,7 +72,7 @@ export function CardLayer(props: CardLayerProps) {
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': isSelected() && !draggingState() 'ring-2 ring-blue-500 ring-offset-1': isSelected() && !draggingState()
@ -86,20 +85,9 @@ export function CardLayer(props: CardLayerProps) {
innerHTML={renderLayerContent(props.cardData[layer.prop])} innerHTML={renderLayerContent(props.cardData[layer.prop])}
onClick={(e) => handleLayerClick(layer.prop, e)} onClick={(e) => handleLayerClick(layer.prop, e)}
/> />
<Show when={showBounds() && !isSelected()}>
<div
class="absolute border-2 border-blue-500/50 pointer-events-none select-none"
style={{
left: `${(layer.x1 - 1) * dimensions().cellWidth}mm`,
top: `${(layer.y1 - 1) * dimensions().cellHeight}mm`,
width: `${(layer.x2 - layer.x1 + 1) * dimensions().cellWidth}mm`,
height: `${(layer.y2 - layer.y1 + 1) * dimensions().cellHeight}mm`
}}
/>
</Show>
<Show when={isSelected()}> <Show when={isSelected()}>
<div <div
class="absolute border-2 border-blue-500 pointer-events-none" class="absolute border-2 border-blue-500 pointer-events-none z-10"
style={{ style={{
left: `${bounds().left}mm`, left: `${bounds().left}mm`,
top: `${bounds().top}mm`, top: `${bounds().top}mm`,
@ -108,7 +96,7 @@ export function CardLayer(props: CardLayerProps) {
}} }}
/> />
<div <div
class="absolute pointer-events-auto" class="absolute pointer-events-auto z-10"
style={{ style={{
left: `${bounds().left}mm`, left: `${bounds().left}mm`,
top: `${bounds().top}mm`, top: `${bounds().top}mm`,
@ -119,7 +107,7 @@ export function CardLayer(props: CardLayerProps) {
/> />
<Show when={!draggingState() || draggingState()?.action !== 'drag'}> <Show 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-10" 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`
@ -127,7 +115,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'nw', undefined, e)} onMouseDown={(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-10" 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`
@ -135,7 +123,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'ne', undefined, e)} onMouseDown={(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-10" 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`
@ -143,7 +131,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'sw', undefined, e)} onMouseDown={(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-10" 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`
@ -151,7 +139,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'se', undefined, e)} onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'se', undefined, e)}
/> />
<div <div
class="absolute h-2 cursor-ns-resize pointer-events-auto" 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`,
@ -160,7 +148,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'n', e)} onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'n', e)}
/> />
<div <div
class="absolute h-2 cursor-ns-resize pointer-events-auto" 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`,
@ -169,7 +157,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 's', e)} onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 's', e)}
/> />
<div <div
class="absolute w-2 cursor-ew-resize pointer-events-auto" 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`,
@ -178,7 +166,7 @@ export function CardLayer(props: CardLayerProps) {
onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'w', e)} onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'w', e)}
/> />
<div <div
class="absolute w-2 cursor-ew-resize pointer-events-auto" 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`,