系列：一張投影片背後的工程：從零打造網頁簡報編輯器

對應程式：2026-10-04 工作目錄，package.json 版本 0.20.0。圖層面板的畫面與瀏覽器操作證據沿用 2026-10-02 的 V20 驗收。

我在文字上方放了一個矩形，想把它當成暫時的遮罩。接著要修改底下文字時，滑鼠每次都先點到矩形，只能先移開遮罩，再想辦法把它放回去。

Day 18 已經處理前後順序，今天要補的是另一個使用入口：即使物件被擋住，仍能從清單找到它；暫時不需要的內容可以隱藏，之後再恢復。

2026-10-02 的 Edge 自動化畫面。「暫存遮罩」仍在清單中並標記為隱藏，底下的文字可以直接選取。清單文字格式是既有示範內容，本篇聚焦圖層操作。

把物件清單變成可以操作的介面

右側「圖層」會列出目前頁面所有物件，最上方代表最前景。畫布的 elements 陣列則由背景排到前景，所以顯示清單時取反向副本：

{[...elements].reverse().map((element) => (
  // 依 element.id 呈現圖層列
))}

先複製再反轉，避免 reverse() 直接改動文件中的陣列。這裡只改呈現順序，真正的排序仍由 reducer 更新文件。

每列提供名稱、選取及顯示／隱藏控制。文字預設以內容命名，圖片使用替代文字，圖形使用類型名稱；使用者也能把它們改成「封面標題」「背景遮罩」這類容易辨認的名稱。

從清單選到畫布上點不到的內容

點選圖層列會以 ID 選取物件，不需要命中它在畫布上的可見範圍。Shift 或 Ctrl 點選可以增加、取消選取。

群組在這裡有一個刻意保留的差異：畫布點選維持整組可見成員的操作習慣；圖層清單則允許選取單一群組成員。這樣可以修改群組內的一個標題，不必先解散群組。

可以用這個情境確認：

1. 放入一個文字框，再用矩形蓋住它。
2. 在圖層清單點選文字，直接調整顏色或字級。
3. 點選矩形的顯隱按鈕，讓底下文字完整露出。
4. 再次切換顯隱，矩形應回到原來位置和順序。

整個過程不用暫時搬動任何物件，復原紀錄也能只留下真正要保留的修改。

隱藏必須一路套用到輸出

若隱藏只影響編輯畫布，播放或 PDF 卻又把遮罩畫回來，使用者就不能相信目前看到的成果。

這一版把 hidden?: boolean 存在物件上，編輯畫布和共用的靜態渲染都會過濾隱藏物件。畫布全選、框選與吸附也會略過它們，避免看不見的物件還影響拖曳結果。

物件隱藏和投影片略過是不同層級：前者影響某個物件，後者排除整頁的播放與 PDF。隱藏圖片仍須保留它引用的資產，否則再次顯示就可能變成破圖。

排序提示要對應真正插入的位置

清單上半部與下半部代表不同插入位置。因為清單顯示順序與儲存陣列相反，拖到某列上方，對文件陣列而言就是放在該物件之後：

onMove(draggedId, element.id, above ? 'after' : 'before')

介面先顯示插入提示，放開後才提交一次修改；原地放回則不產生新動作。除了拖曳，仍保留置頂、上移、下移、置底四個按鈕，供不使用拖曳時操作。

改名也遵守類似規則：Enter 或離開欄位提交，Esc 取消，沒有變更就不新增歷史。中文組字期間不讓 Enter、Esc 或刪除快捷鍵中斷輸入。

檢查的不只是清單長相

App 測試涵蓋遮擋物件選取、群組內單選、中文改名、隱藏後的選取與排序，以及復原重做。備份測試則確認隱藏圖片仍被帶進檔案。

2026-10-02 的 Edge 流程檢查改名與隱藏狀態在重新載入後保留，並確認隱藏內容不進入播放與列印。上方截圖保留了當時的圖層清單與隱藏狀態，讀者可直接對照物件仍在清單中、畫布上卻不顯示的差異。

現在多物件的頁面比較容易管理了。但十頁、五十頁甚至更多頁一起放進文件時，保留操作歷史會付出多少成本？下一篇會直接量測，不用操作感覺代替數據。