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