從零開始，開發一個 Web Office 套件（16）：拖動控制點，調整編輯器大小

這是一個系列部落格，最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件（包括：文件、表格、幻燈片……等等）。
部落格園：《從零開始, 開發一個 Web Office 套件》系列部落格目錄
富文字編輯器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
富文字編輯器 線上 Demo：https://zhaokang555.github.io/canvas-text-editor/

2. 富文字編輯器（MVP）

2.29 Feature：拖動控制點，調整編輯器大小

2.29.1 演算法

1. 監聽控制點的拖動事件，將拖動的距離記為(dx, dy)。根據控制點所處方位，平移編輯器或者改變其大小：
   1. 如果拖動的是左上角（TopLeft）的控制點，則：
      1. 將編輯器平移(dx, dy)
      2. 將編輯器寬高增加(-dx, -dy)
   2. 如果拖動的是頂部中央（Top）的控制點，則：
      1. 將編輯器平移(0, dy)
      2. 將編輯器高度增加-dy
   3. 如果拖動的是右上角（TopRight）的控制點，則：
      1. 將編輯器平移(0, dy)
      2. 將編輯器寬高增加(dx, -dy)
   4. 如果拖動的是右側中央（Right）的控制點，則將編輯器寬度增加dx
   5. 如果拖動的是右下角（BottomRight）的控制點，則將編輯器寬高增加(dx, dy)
   6. 如果拖動的是底部中央（Bottom）的控制點，則將編輯器高度增加dy
   7. 如果拖動的是左下角（BottomLeft）的控制點，則：
      1. 將編輯器平移(dx, 0)
      2. 將編輯器寬高增加(-dx, dy)
   8. 如果拖動的是左側中央（Left）的控制點，則：
      1. 將編輯器平移(dx, 0)
      2. 將編輯器寬度增加-dx
2. 如果平移了編輯器，就會進入上一節講到的平移編輯器的邏輯，這裡就不再贅述；
3. 如果調整了編輯即的寬度，則需要：
   1. 將上邊框和下邊框橫向拉伸，但是高度不變
   2. 將左邊框和右邊框平移
   3. 將不同位置的控制點平移不同距離
4. 如果調整了編輯即的高度，則需要：
   1. 將左邊框和右邊框縱向拉伸，但是寬度不變
   2. 將上邊框和下邊框平移
   3. 將不同位置的控制點平移不同距離

2.29.2 實現

2.29.3 效果

2.29.4 Bug: 平移或調整大小後，點選編輯器空白處，游標不能正確定位

Bug表現：

原因分析：這是因為編輯器平移或調整大小後，editor.blankSpace沒有及時更新。

修復：

2.29.5 最終效果

（未完待續）