79 线段编辑器：架构思路与任务拆分

你好，我是徐昊。从今天开始，我们就来使用TDD的方式实现一个线段编辑器（Line Editor）。

在之前的三个项目中，我们展示了如何使用TDD的方式来实现功能以及框架。接下来，我们要通过一个非常简单的项目，展示如何使用TDD的方式，实现以交互为主的功能。

线段编辑器的功能说明

通过上面对于功能的说明，对于线段编辑器，它的功能大致有这么几点：

在线段上设置锚点（Anchor），当拖动锚点时，锚点的位置改变；
在锚点与锚点之间，存在控制点（Control Point），当拖动控制点时，会在将控制点变成锚点；
当双击锚点时，会删除这个锚点。

我们选择的技术栈是TypeScript + React + Konva（React-Konva），测试框架使用Vitest。package.json 如下所示：

{
  "name": "line-editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "konva": "^8.3.12",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-konva": "^18.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vitest": "^0.22.1",
    "canvas": "^2.9.3"
  }
}

架构思路与任务拆分

那么让我们分解任务列表：

在线段编辑器（Line Editor）上设置锚点（Anchor）
将线段（Line）数据，生成锚点
在Line Editor重绘时，按照数据更新锚点位置
在锚点与锚点之间设置控制点
通过线段数,在两个锚点之间生成控制点（Control）
在Line Editor重绘时，按照数据更新控制点位置
拖动锚点时，改变线段中的位置
拖动控制点时，在线段上增加锚点
双击锚点时，删除锚点

接下来让我们进入开发：

思考题

对于生成与更新锚点控制点的逻辑，要如何重构？

欢迎把你的项目代码地址分享在留言区，我们下节课再见！

精选留言（3）

iHailong 👍（0） 💬（0）
徐昊老师你好，这个基于React UI的项目实战课对我帮助很大，可以继续增加一些web application得项目实战课程吗？想了解更多的关于web app中最佳的TDD模式是怎样的？比如说，如何在有web API调用的情况下去测试，或者说UI layout & style方面的测试，谢谢
2024-11-08

davix 👍（0） 💬（0）
https://github.com/davix/geektime-tdd-line-editor 覺得更新锚点的地方可以不更新，而先刪再加（使用不可變數據）
2022-09-16

aoe 👍（0） 💬（0）
原来 MVP 是前端中对测试友好的一个框架
2022-09-13