2. 富文本编辑器 (MVP)
2.20 状态管理
2.20.1 重构代码
在添加状态管理之前,我们先来重构下代码。首先,将之前的两个类改一下名字:
- rename
ResponsiveToMouseHover
toHoverableZone
- rename
ClickZone
toClickableZone
然后,新建路径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, 我们下一小节再处理。
(未完待续)