从零开始，开发一个|从零开始，开发一个 Web Office 套件（9）（拖动鼠标选中文字 Edge Case）
这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。上一节我们初步完成了拖动选中文字的feature，不过还遗留了一些 edge case。这篇文章我们来处理它们。
博客园：《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
2. 富文本编辑器 (MVP) 2.21 拖动鼠标选中文字 2.21.3 Fix: Should hide blinking cursor after selecting text
细心地读者会发现：当我们选择完文字之后，应该隐藏掉光标，结果却没有。如下图所示：
【从零开始，开发一个|从零开始，开发一个 Web Office 套件（9）（拖动鼠标选中文字 Edge Case）】
文章图片
现在，我们来修复它:
- 第一步，修改
Char：在完成点击字符之后，不要直接调用blinkingCursor.show()来展示光标, 改为调用blinkingCursor.afterClick()。后续的逻辑在blinkingCursor内部处理，由它自己判断自己是否应该显示。 - 第二步，修改
BlinkingCursor：实现afterClick方法，并在其中进行判断：- 如果选中了文字，就隐藏光标
- 如果没有选中文字，就显示光标
- 第三步，修改
Store，实现hasSelectText方法
文章图片
文章图片
文章图片
效果：
文章图片
2.21.4 Fix: Should select text from back to front
当我们从后向前（从右向左、从下向上）选择文字时，会发现无法选中。如下图所示：
文章图片
这一小节，我们来修复这个问题。首先，修改
Store:- 删除字段
mouse.select.beginChar,mouse.select.endChar - 添加字段：
mousedownChar（鼠标按下时处于哪个字符）,mouseupChar（鼠标弹起时处于哪个字符） - 添加字段：
isMousedownLeftHalf（鼠标按下时处于字符哪半边）,isMouseupLeftHalf（鼠标弹起时处于字符哪半边） - 修改
finishSelect(): 根据上面新添加的四个字段，计算出正确的beginIndex和endIndex - 修改
clearSelect()
文章图片
对应的，修改
Char，给上面新添加的四个字段赋值：
文章图片
效果：
文章图片
2.21.5 Fix: 当从页面空白处按下/弹起鼠标时，应该正确地选中文本
我们先看下目前的问题。
当从页面空白处按下鼠标时，选择的文本范围不正确：
文章图片
当从页面空白处弹起鼠标时，选择的文本范围不正确：
文章图片
然后，我们来解决这个问题：
- 第一步，重构：从空白区域（
Editor.blankSpace）的click处理逻辑中，抽象出mapPositionInBlankSpaceToChar，给后续处理空白区域mousedown和mouseup的逻辑时使用。
文章图片
- 第二步：新建一个类
MouseDownUpClickZone，用来表示支持三种事件（click/mousedown/mouseup）的区域，方便以后复用；并将blankSpace从ClickableZone重构为MouseDownUpClickZone。
文章图片
文章图片
- 第三步，重构：顺手将
HalfChar重构为MouseDownUpClickZone。同时，删除HalfChar类，它的历史使命已经结束了。
文章图片
效果：
文章图片
（未完待续）
推荐阅读
- 手写|手写 Vue 系列 之 从 Vue1 升级到 Vue2
- 同事提出个我从未想过的问题，为什么Kubernetes要＂多此一举＂推出静态Pod概念（）
- 分享|python基础-零基础入门到精通
- 2022年3月14日（开始学习线性代数和组合数学）
- kafka（下）（快、主从同步）
- 2022最新Android面试真实经历，从准备-复习-面试到入职
- 微服务从代码到k8s部署应有尽有系列（十四、部署环境搭建）
- 人工智能|人工智能---深度学习从感知机到神经网络
- Keras|从零开始TensorFlow---利用Keras 搭建CNN网络
- 从零开始的神经网络构建历程（一）