From 29d8a76cd1202cfbe2f0fa1e64c46b3a2738eb69 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 13 Mar 2026 12:34:39 +0800
Subject: [PATCH] refactor: hide controls for hidden layers

---
 .../md-deck/editor-panel/LayerEditorPanel.tsx | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
index b622888..08f932c 100644
--- a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -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>