從零開始，開發一個 Web Office 套件（8）：狀態管理 & 拖動鼠標選中文字

這是一個系列博客，最終目的是要做一個基於 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 稍后實現

然后，我們來補全實現。新建文件src/core/mouse/SelectableZone.ts和src/core/CanvasTextEditorHalfChar.ts:

其中，MousedownZone和MouseupZone用來監聽鼠標按下和彈起的事件。新建文件src/core/mouse/MousedownZone.ts和src/core/mouse/MouseupZone.ts:

2.21.2 效果

不過，還有一些edge case, 我們下一小節再處理。

（未完待續）