這是一個系列部落格，最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件（包括：文件、表格、幻燈片……等等）。
部落格園：《從零開始, 開發一個 Web Office 套件》系列部落格目錄
富文字編輯器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
2. 富文字編輯器(MVP)
2.18 Click 事件的 z-index
2.18.1 新的問題：點選空白處
首先，我們先觀察一下其他的幻燈片軟體：
通過上圖可以發現，當我們點選編輯器內空白處時，編輯器會執行以下邏輯：
- 找到距離點選位置最近的行
- 在此行內找到距離點選位置最近的字元
- 在此字元的左側或者右側插入游標
為了實現這個feature，我們就要監聽編輯器空白處的click事件。與此同時，我們會遇到和hover事件相同的問題: 我們需要找到最上層的元素（Char or 空白），觸發它的點選事件。
2.18.2 重構
修改ClickZone，在handle canvas click時不直接觸發onClick，而是根據zIndex將onClick記錄到topLayerCallbacks中：
然後，在CanvasTextEditor.render()中觸發回撥函式，之後清空topLayerCallbacks:
同時，修改CanvasTextEditorChar.constructor()的實現，傳入zIndex:
這樣，ClickZone就支援了z-index.
2.19 Feature: 點選編輯器空白處後，在適當位置插入游標
修改CanvasTextEditor, 新增blankSpace屬性, 大小和整個編輯器重疊：
然後，新增handleClickOnTheBlankSpace方法，實現文章開頭所描述的演算法：
其中，形參mouseX和mouseY代表點選位置，我們需要修改ClickZone將其傳入：
效果：
2.19.1 Fix bug
不過，細心的讀者會發現一個問題：當我們點選最左側區域，試圖在第二行第一個字元前插入游標，結果游標跑到了第一行末尾。
這是因為，我們之前將行首的char的prev屬性賦值成了上一行行尾的char。要解決這個bug，只需要將賦值相關程式碼從Paragraph中挪到SoftLine中：
效果：
2.19.2 Fix: 游標在不同位置粗細不一
細心觀察上圖的同學會發現一個樣式問題：游標在不同位置時，其粗細肉眼可見地不一致。這是因為根據字元位置，計算出來的游標的位置不是整數。我們只需要將其座標取整就可以了：
效果：
（未完待續）