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


    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。
    博客园:《从零开始, 开发一个 Web Office 套件》系列博客目录
    富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor
    富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-editor/

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

    2. 富文本编辑器 (MVP)

    2.21 拖动鼠标选中文字

    2.21.3 Fix: Should hide blinking cursor after selecting text

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

    现在,我们来修复它:

    • 第一步,修改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(): 根据上面新添加的四个字段,计算出正确的beginIndexendIndex
    • 修改clearSelect()

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

    效果:

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

    我们先看下目前的问题。

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

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

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

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

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

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

    效果:

    (未完待续)

  • 相关阅读:
    AntDesign(React)学习-15 组件定义、connect、interface
    js函数中不带e的阻止冒泡方法
    ext.net 修改store后强制更新
    给非input元素增加placeholder特性
    AntDesign(React)学习-14 使用UMI提供的antd模板
    认知:关于Android 调试的坑
    css 定位(fixed > absolute > relative)与层级zIndex 的权限认知
    echarts 通过dom获取echarts实例,批量监听reset
    阿里云 ssh 登陆请使用(公)ip
    Chrome 调试技巧: 调整网速
  • 原文地址:https://www.cnblogs.com/forzhaokang/p/15988487.html
Copyright © 2020-2023  润新知