从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 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()
: 根据上面新添加的四个字段,计算出正确的beginIndex
和endIndex
- 修改
clearSelect()
对应的,修改Char
,给上面新添加的四个字段赋值:
效果:
2.21.5 Fix: 当从页面空白处按下/弹起鼠标时,应该正确地选中文本
我们先看下目前的问题。
当从页面空白处按下鼠标时,选择的文本范围不正确:
当从页面空白处弹起鼠标时,选择的文本范围不正确:
然后,我们来解决这个问题:
- 第一步,重构:从空白区域(
Editor.blankSpace
)的click处理逻辑中,抽象出mapPositionInBlankSpaceToChar
,给后续处理空白区域mousedown和mouseup的逻辑时使用。
- 第二步:新建一个类
MouseDownUpClickZone
,用来表示支持三种事件(click/mousedown/mouseup)的区域,方便以后复用;并将blankSpace
从ClickableZone
重构为MouseDownUpClickZone
。
- 第三步,重构:顺手将
HalfChar
重构为MouseDownUpClickZone
。同时,删除HalfChar
类,它的历史使命已经结束了。
效果:
(未完待续)
从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case的更多相关文章
- 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...
- 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 《从零开始, 开发一个 Web Office 套件》系列博客目录
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...
- 从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑器
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(16):拖动控制点,调整编辑器大小
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(5):Mouse hover over text
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...
随机推荐
- Properties打印流
简介 java.util.Properties 继承于 Hashtable ,来表示一个持久的属性集.它使用键值结构存储数据,每个键及其对应值都是一个字符串.该类也被许多Java类使用,比如获取系统属 ...
- element-ui 使用 Select 组件给 value 属性绑定对象类型
qq_36437172 2020-06-28 22:38:49 778 收藏 分类专栏: element-ui 文章标签: element-ui Select 组件 value 属性 绑定 对象类 ...
- 什么是Autolayout
Autolayout是一种"自动布局"技术,专门用来布局UI界面的 Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 自iOS 7(Xc ...
- linux增加用户组,并在用户组下添加指定用户
groupadd mysql #1 useradd -g mysql[用户组] mysql[用户名] #2 useradd mysql[用户名] -g mysql[用户组]
- MySQL 数据库的tab 补全功能 (懒人必备)
MySQL 数据库的tab补全功能 跟着步骤走~~ 懒人养成第一步 不仅帮你补全 甚至预判你的预判,就问你可怕不可怕 1.安装相关依赖软件(需要配置yum官方 ...
- 深入Java微服务之网关系列1:什么是网关
前言 近来,在想着重构一个新的产品.准备采用微服务的技术解决方案,来搭建基础设施框架.网关,是一个必不可少的组件.那么,网关到底是什么? 其又有什么特点或者特性,成为微服务必不可少的组件呢?今天, ...
- Node.js躬行记(15)——活动规则引擎
在日常的业务开发中,会包含许多的业务规则,一般就是用if-else硬编码的方式实现,这样就会增加逻辑的维护成本,若无注释,可能都无法理解规则意图. 因为一旦规则有所改变,那么就需要修改代码再发布代码, ...
- 通过安装HomeBrew来安装Python3
首先说什么是HomeBrew? 下面引用简书上一个博客的解释:(博客链接:http://www.jianshu.com/p/d229ac7fe77d) 为什么要使用Homebrew Mac OS X是 ...
- 再见收费的Navicat!操作所有数据库就靠它了!
作为一名开发者,免不了要和数据库打交道,于是我们就需要一款顺手的数据库管理工具.很长一段时间里,Navicat 都是我的首选,但最近更换了一台新电脑,之前的绿色安装包找不到了. 于是就琢磨着,找一款免 ...
- Hadoop分布式集群部署
环境准备 IP HOSTNAME SYSTEM 192.168.131.129 hadoop-master CentOS 7.6 192.168.131.135 hadoop-slave1 CentO ...