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

2. 富文字編輯器 (MVP)

2.20 狀態管理

2.20.1 重構程式碼

在新增狀態管理之前，我們先來重構下程式碼。首先，將之前的兩個類改一下名字：

rename ResponsiveToMouseHover to HoverableZone
rename ClickZone to ClickableZone

然後，新建路徑src/core/mouse，將上面兩個類挪進來：

2.20.2 新增狀態管理

之前，我們的一些全域性狀態是以class static field的方式存在的。這樣做剛開始可能不會出現問題，但是到後面會出問題：

狀態分散
無法處理多個Editor例項的情形

所以，我們需要引入狀態管理。新建檔案src/core/Store.ts:

然後，修改CanvasTextEditor:

this.ctx => this.store.ctx
ClickableZone.* => this.store.mouse.click.*
HoverableZone.* => this.store.mouse.hover.*

同理，修改其它檔案。

2.21 拖動滑鼠選中文字

接下來，我們來實現拖動滑鼠，高亮選中文字的需求：

2.21.1 實現

首先，修改Store，新增以下欄位和方法：

chars: 編輯器內所有字元
mouse.select.beginChar 和mouse.select.endChar: 記錄選擇開始和結束的字元
getGlobalNextChar和getGlobalPrevChar: 獲取跨行、跨段落的後/前一個字元
clearSelect: 清空選擇資訊
finishSelect：檢查需要高亮哪些字元
其中Char.selectableZone.isSelect用來切換字元的高亮（選中）狀態，稍後實現

然後，修改Editor, 將編輯器內所有字元存入store:

然後，修改Char:

新增欄位：leftHalf: HalfChar和rightHalf: HalfChar，用來處理click, mousedown, mouseup 事件
新增欄位：selectableZone: SelectableZone，表示高亮區域
刪除欄位：leftClickableZone 和 rightClickableZone，因為它們已經被整合進leftHalf和rightHalf中
其中，HalfChar 稍後實現