上一节我们初步完成了拖动选中文字的feature,不过还遗留了一些 edge case。这篇文章我们来处理它们。

2. 富文本编辑器 (MVP)

2.21 拖动鼠标选中文字

2.21.3 Fix: Should hide blinking cursor after selecting text

细心地读者会发现:当我们选择完文字之后,应该隐藏掉光标,结果却没有。如下图所示:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

现在,我们来修复它:

  • 第一步,修改Char:在完成点击字符之后,不要直接调用blinkingCursor.show()来展示光标, 改为调用blinkingCursor.afterClick()。后续的逻辑在blinkingCursor内部处理,由它自己判断自己是否应该显示。
  • 第二步,修改BlinkingCursor:实现afterClick方法,并在其中进行判断:
    • 如果选中了文字,就隐藏光标
    • 如果没有选中文字,就显示光标
  • 第三步,修改Store,实现hasSelectText方法

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

效果:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

2.21.4 Fix: Should select text from back to front

当我们从后向前(从右向左、从下向上)选择文字时,会发现无法选中。如下图所示:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

这一小节,我们来修复这个问题。首先,修改Store:

  • 删除字段mouse.select.beginChar, mouse.select.endChar
  • 添加字段:mousedownChar(鼠标按下时处于哪个字符), mouseupChar(鼠标弹起时处于哪个字符)
  • 添加字段:isMousedownLeftHalf(鼠标按下时处于字符哪半边), isMouseupLeftHalf(鼠标弹起时处于字符哪半边)
  • 修改finishSelect(): 根据上面新添加的四个字段,计算出正确的beginIndexendIndex
  • 修改clearSelect()

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

对应的,修改Char,给上面新添加的四个字段赋值:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

效果:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

2.21.5 Fix: 当从页面空白处按下/弹起鼠标时,应该正确地选中文本

我们先看下目前的问题。

当从页面空白处按下鼠标时,选择的文本范围不正确:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

当从页面空白处弹起鼠标时,选择的文本范围不正确:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

然后,我们来解决这个问题:

  • 第一步,重构:从空白区域(Editor.blankSpace)的click处理逻辑中,抽象出mapPositionInBlankSpaceToChar,给后续处理空白区域mousedown和mouseup的逻辑时使用。

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

  • 第二步:新建一个类MouseDownUpClickZone,用来表示支持三种事件(click/mousedown/mouseup)的区域,方便以后复用;并将blankSpaceClickableZone重构为MouseDownUpClickZone

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

  • 第三步,重构:顺手将HalfChar重构为MouseDownUpClickZone。同时,删除HalfChar类,它的历史使命已经结束了。

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

效果:

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case-LMLPHP

(未完待续)

03-15 10:56