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

對應程式版本：Git tag v0.4.0

版本說明：本文把第一版的對齊、分布與空白投影片快速版型放在同一個批次更新流程中。

手動拖曳只能讓物件「看起來差不多」，但簡報通常需要可重複的幾何結果。這一版把對齊與分布抽成純函式，算完所有 frame 後只送出一筆 element/set-frames，避免逐一更新造成中間狀態或多筆復原紀錄。

對齊要先決定參考外框

若只選一個物件，靠左、水平中、靠右等操作以整張畫布為參考；選取兩個以上時，改用選取集合的最小外框。水平置中使用的公式是：

x = bounds.x + (bounds.width - element.width) / 2

垂直中、靠上、靠下同理，只改用 Y 與高度。純函式測試以寬度 100 的單一物件驗證水平置中結果為 X=750，也就是 (1600 - 100) / 2。

平均分布使用中心點

平均分布至少需要三個物件。程式先依中心點排序，保留第一個和最後一個位置，再平均切出中間步距：

const step = (center(last) - center(first)) / (sorted.length - 1)

每個物件依自己的寬或高回推左上角，因此大小不同時仍是「中心點等距」，不是左邊緣等距。測試中的三個物件中心點分布後，中間物件的 X 從 250 調整為 300。

若選取集合包含位置鎖定物件，介面會停用對齊與分布；reducer 也會略過鎖定元素。這使畫面控制與文件規則保持一致。

快速版型只套用在空白投影片

標題頁、標題內容與雙欄版型不是覆蓋既有物件，而是只有空白投影片才能使用。版型一次建立 2 或 3 個預設文字框，再以 element/add-many 加入：例如標題頁建立「簡報標題」與「副標題」，測試也確認套用後按鈕會停用，避免重複套版。

快速版型解決的是起點，不是取代排版工具。使用者仍能在套用後用對齊、分布與屬性面板細調內容。

參考資料

• React：Updating Arrays in State
• React：Rendering Lists