從零開始, 開發一個 Web Office 套件 (3): 滑鼠事件

趙康發表於2022-02-15
Web套件事件

這是一個系列部落格, 最終目的是要做一個基於HTML Canvas 的, 類似於微軟 Office 的 Web Office 套件, 包括: 文件, 表格, 幻燈片... 等等.
對應的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor
書接前文: 從零開始, 開發一個 Web Office 套件 (2): 富文字編輯器

2. 富文字編輯器(MVP)

2.11 滑鼠事件

這篇文章, 我們來實現迄今為止我們需要的滑鼠事件相關的feature. 我初步整理了一下, 有如下幾個:

  • WHEN 滑鼠hover到編輯器邊緣的六個控制點(SizeControlPoint)上時, THEN 滑鼠形狀需要變化
  • WHEN 滑鼠hover到編輯器邊緣的虛線邊框上時, THEN 滑鼠形狀需要變化
  • WHEN 滑鼠hover到文字上時, THEN 滑鼠形狀需要變化(第1篇博文中提到的)
  • WHEN 滑鼠點選某一個文字(字元)的左半部分時, THEN 需要在它的前面插入游標 AND 游標應該匹配其左側文字樣式
  • WHEN 滑鼠點選某一個文字(字元)的右半部分時, THEN 需要在它的後面插入游標 AND 游標應該匹配其左側文字樣式
  • GIVEN 滑鼠hover到文字上, WHEN 滑鼠進行拖選時, THEN 需要高亮拖選中的文字

2.12 Mouse hover on SizeControlPoint

之前, 我們渲染控制點的程式碼是寫在src/core/CanvasTextEditor.ts中的:

如果繼續這個類中處理滑鼠相關邏輯, 這個類就會變得很臃腫. 所以, 我們需要重構一下程式碼, 把控制點相關的程式碼抽離出來.

2.12.1 重構程式碼

新建檔案src/core/SizeControlPoint.ts:

image

然後, 我們還需要實現SizeControlPoint中依賴的兩個介面: IBoundingBox, IRenderable.

新建src/core/IBoundingBox.ts:

image

新建src/core/IRenderable.ts:

image

然後, 將CanvasTextEditor中的renderBorderCircle方法稍加修改, 遷移到SizeControlPoint類中:

image

最後, 修改CanvasTextEditor類, 刪除老程式碼, 引入SizeControlPoint:

2.12.2 架構設計

image

2.12.3 自頂向下實現

首先, 修改src/core/CanvasTextEditor.ts:

  • 新增一個sizeControlPoints屬性, 用來存放所有的控制點
  • 將renderBorder中渲染控制點相關的程式碼, 轉移到建構函式中
  • 新增一個解構函式, 用來清理事件監聽函式
  • 在clearCanvas中重置滑鼠形狀
  • 在render中渲染所有控制點

同時, 定義了一個列舉src/core/CursorType.ts, 用來存放目前所使用到的滑鼠樣式:

其中每個值的含義可以參考MDN的這個文件: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

然後, 修改src/core/SizeControlPoint.ts:

然後, 新建src/core/ResponsiveToMouseHover:

  • 實時監聽滑鼠位置, 存入mouseX, mouseX
  • 同時, 計算滑鼠是否處於自身包圍盒中, 將結果存入isMouseHovering
  • 在解構函式中移除監聽函式

2.12.4 效果

(未完待續)

相關文章