110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import { For } from 'solid-js';
|
|
import type { DeckStore } from '../hooks/deckStore';
|
|
|
|
export interface LayerEditorPanelProps {
|
|
store: DeckStore;
|
|
}
|
|
|
|
const ORIENTATION_OPTIONS = [
|
|
{ value: 'n', label: '↑ 北' },
|
|
{ value: 'e', label: '→ 东' },
|
|
{ value: 's', label: '↓ 南' },
|
|
{ value: 'w', label: '← 西' }
|
|
] as const;
|
|
|
|
/**
|
|
* 图层编辑面板：图层可见性切换、位置编辑、复制代码
|
|
*/
|
|
export function LayerEditorPanel(props: LayerEditorPanelProps) {
|
|
const { store } = props;
|
|
|
|
const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
|
|
const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
|
|
if (layer) {
|
|
store.actions.updateLayerConfig(layerProp, { ...layer, orientation });
|
|
}
|
|
};
|
|
|
|
const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
|
|
const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
|
|
if (layer) {
|
|
store.actions.updateLayerConfig(layerProp, { ...layer, fontSize });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div class="w-64 flex-shrink-0">
|
|
<h3 class="font-bold mb-2 mt-0">图层</h3>
|
|
|
|
<div class="space-y-2">
|
|
<For each={store.state.layerConfigs}>
|
|
{(layer) => (
|
|
<div class="flex flex-row flex-wrap gap-1 p-2 bg-gray-50 rounded">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={layer.visible}
|
|
onChange={() => store.actions.toggleLayerVisible(layer.prop)}
|
|
class="cursor-pointer"
|
|
/>
|
|
<span class="text-sm flex-1">{layer.prop}</span>
|
|
</div>
|
|
{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 ? '✓ 框选' : '框选'}
|
|
</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>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<button
|
|
onClick={store.actions.copyCode}
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
|
|
>
|
|
📋 复制代码
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|