这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。

博客园:《从零开始, 开发一个 Web Office 套件》系列博客目录

富文本编辑器 Github repo 地址:https://github.com/zhaokang555/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类,它的历史使命已经结束了。

效果:

(未完待续)

从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case的更多相关文章

  1. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  2. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  3. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  4. 《从零开始, 开发一个 Web Office 套件》系列博客目录

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  5. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  6. 从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑器

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. 从零开始,开发一个 Web Office 套件(16):拖动控制点,调整编辑器大小

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  8. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  9. 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...

随机推荐

  1. Properties打印流

    简介 java.util.Properties 继承于 Hashtable ,来表示一个持久的属性集.它使用键值结构存储数据,每个键及其对应值都是一个字符串.该类也被许多Java类使用,比如获取系统属 ...

  2. element-ui 使用 Select 组件给 value 属性绑定对象类型

    qq_36437172 2020-06-28 22:38:49  778  收藏 分类专栏: element-ui 文章标签: element-ui Select 组件 value 属性 绑定 对象类 ...

  3. 什么是Autolayout

    Autolayout是一种"自动布局"技术,专门用来布局UI界面的 Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 自iOS 7(Xc ...

  4. linux增加用户组,并在用户组下添加指定用户

    groupadd mysql #1 useradd -g mysql[用户组] mysql[用户名] #2 useradd mysql[用户名] -g mysql[用户组]

  5. MySQL 数据库的tab 补全功能 (懒人必备)

    MySQL 数据库的tab补全功能                      跟着步骤走~~ 懒人养成第一步 不仅帮你补全 甚至预判你的预判,就问你可怕不可怕 1.安装相关依赖软件(需要配置yum官方 ...

  6. 深入Java微服务之网关系列1:什么是网关

    ​ 前言 近来,在想着重构一个新的产品.准备采用微服务的技术解决方案,来搭建基础设施框架.网关,是一个必不可少的组件.那么,网关到底是什么? 其又有什么特点或者特性,成为微服务必不可少的组件呢?今天, ...

  7. Node.js躬行记(15)——活动规则引擎

    在日常的业务开发中,会包含许多的业务规则,一般就是用if-else硬编码的方式实现,这样就会增加逻辑的维护成本,若无注释,可能都无法理解规则意图. 因为一旦规则有所改变,那么就需要修改代码再发布代码, ...

  8. 通过安装HomeBrew来安装Python3

    首先说什么是HomeBrew? 下面引用简书上一个博客的解释:(博客链接:http://www.jianshu.com/p/d229ac7fe77d) 为什么要使用Homebrew Mac OS X是 ...

  9. 再见收费的Navicat!操作所有数据库就靠它了!

    作为一名开发者,免不了要和数据库打交道,于是我们就需要一款顺手的数据库管理工具.很长一段时间里,Navicat 都是我的首选,但最近更换了一台新电脑,之前的绿色安装包找不到了. 于是就琢磨着,找一款免 ...

  10. Hadoop分布式集群部署

    环境准备 IP HOSTNAME SYSTEM 192.168.131.129 hadoop-master CentOS 7.6 192.168.131.135 hadoop-slave1 CentO ...