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

refactor: hide controls for hidden layers

This commit is contained in:
hypercross 2026-03-13 12:34:39 +08:00
parent 97923c8d35
commit 29d8a76cd1
1 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,44 +49,48 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
/> />
<span class="text-sm flex-1">{layer.prop}</span> <span class="text-sm flex-1">{layer.prop}</span>
</div> </div>
<button {layer.visible && (
<>
<button
onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)} onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
class={`text-xs px-2 py-1 rounded cursor-pointer ${ class={`text-xs px-2 py-1 rounded cursor-pointer ${
store.state.editingLayer === layer.prop store.state.editingLayer === layer.prop
? 'bg-blue-500 text-white' ? 'bg-blue-500 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`} }`}
> >
{store.state.editingLayer === layer.prop ? '✓ 框选' : '框选'} {store.state.editingLayer === layer.prop ? '✓ 框选' : '框选'}
</button> </button>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<select <select
value={layer.orientation || 'n'} value={layer.orientation || 'n'}
onChange={(e) => updateLayerOrientation(layer.prop, e.target.value as 'n' | 's' | 'e' | 'w')} onChange={(e) => updateLayerOrientation(layer.prop, e.target.value as 'n' | 's' | 'e' | 'w')}
class="text-xs px-2 py-1 rounded border border-gray-300 bg-white cursor-pointer" class="text-xs px-2 py-1 rounded border border-gray-300 bg-white cursor-pointer"
> >
<For each={ORIENTATION_OPTIONS}> <For each={ORIENTATION_OPTIONS}>
{(opt) => ( {(opt) => (
<option value={opt.value}>{opt.label}</option> <option value={opt.value}>{opt.label}</option>
)} )}
</For> </For>
</select> </select>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label class="text-xs text-gray-600">字体/mm</label> <label class="text-xs text-gray-600">字体/mm</label>
<input <input
type="number" type="number"
value={layer.fontSize || ''} value={layer.fontSize || ''}
placeholder="默认" placeholder="默认"
onChange={(e) => { onChange={(e) => {
const value = e.target.value; const value = e.target.value;
updateLayerFontSize(layer.prop, value ? Number(value) : undefined); updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
}} }}
class="w-16 text-xs px-2 py-1 rounded border border-gray-300 bg-white" class="w-16 text-xs px-2 py-1 rounded border border-gray-300 bg-white"
step="0.1" step="0.1"
min="0.1" min="0.1"
/> />
</div> </div>
</>
)}
</div> </div>
)} )}
</For> </For>