刘怡年— 基于刘—DOM的可协作幻灯片编辑器架构模式

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 基于 DOM 的可协作幻灯片编辑器 架构模式 刘怡年 石墨文档Web前端工程师
2. 自我介绍
3. 自我介绍
4. 自我介绍 • 2016 年毕业于北京航空航天大学 • 2017 年加入石墨文档,2018 年至今担任幻灯片项目负责人 • 在图形计算、编辑器架构相关方向有一定经验
5. 目录 • 编辑器的实现思路和需求确定 • 幻灯片编辑器的技术选型 • 幻灯片编辑器的功能难点与解决方法 • 总结和展望
6. 目录 • 编辑器的实现思路和需求确定 • 幻灯片编辑器的技术选型 • 幻灯片编辑器的功能难点与解决方法 • 总结和展望
7. 明确功能目标 两类编辑器: 1. 简单、轻量——专门针对特定使用场景 2. 功能全面——对标 Office,满足用户各类需求
8. 两种功能实现思路 • 常规前端项目实现思路 拆分逻辑:模块化、组件化 • 编辑器功能实现思路 统筹逻辑:由点到面再到点
9. 编辑器实现思路实例 边框 resize 考虑 rotate move 锚点 需求点:实现矩形 多选 延伸 Group …? 功能面
10. OOXML标准 Office Open XML:基于 XML 格式的 Office 文档标准 WordprecessingML(docx) OOXML SpreadsheetML(xlsx) PresentationML(pptx) DrawingML
11. OOXML标准 Office 套件 基于 OOXML 的文档套件 iWork 套件 Google 文档套件 …
12. 编辑器实现思路实例:确定需求面 标准要求的 Shapes 属性: resize 边框 rotate move 锚点 多选 Group 连接器 文字 图片 功能面 …
13. 目录 • 编辑器的实现思路和需求确定 • 幻灯片编辑器的技术选型 • 幻灯片编辑器的功能难点与解决方法 • 总结和展望
14. 技术选型考虑范围 图形 富文本编辑 • 渲染形状和文本 • 输入文本、快捷键 • 变换操作:移动、旋转等 • 选区和光标 • 多端展示 • 设置文字样式 • 性能 • 在各端正确展示用户输入 • 过滤恶意输入 • 插入非文本内容 • …
15. 技术选型——图形 SVG Canvas 矢量图 位图 支持 Event Handler 不支持 Event Handler 文本渲染能力强 文本渲染能力较弱 存在性能问题 性能好,渲染效率高 移动端正常展示 移动端展示需要适配
16. 技术选型——图形 SVG 渲染图形和文本 实现变换操作 多端展示 性能 Canvas 渲染图形和文本 实现变换操作 多端展示 性能
17. 技术选型结论 图形:SVG 方案 富文本编辑:?
18. 技术选型——富文本编辑 备选方案 富文本编辑 • 输入文本、快捷键 豪华版: • 选区和光标 SVG/Canvas • 设置文字样式 • 在各端正确展示用户输入 • 过滤恶意输入 大众版: • 插入非文本内容 HTML DOM contenteditable • …
19. 技术选型——富文本编辑 contenteditable 优点 缺点 • 支持选区和光标位移 • execCommand 功能不完善 • 支持快捷键 • 重要的 API 各大浏览器实现 • 支持通过 execCommand 进行富文本编辑 • 支持 undo/redo • … 不一致 • 生成的 HTML 结构不可控, 完全依赖浏览器的实现 • …
20. 技术选型——富文本编辑 contenteditable 进化版:各类第三方编辑器 CKEditor • 最大化利用浏览器功能 Quill • 数据与 UI 分离 • 保证数据与 DOM 的一致性 ProseMirror Draft.js • 可扩展定制
21. 技术选型——富文本编辑 第三方编辑器的选取依据 • API • 数据模型(Model) • 开箱即用的程度 • 依赖 • 收费
22. 技术选型结论 图形:SVG 方案 富文本编辑:选取第三方编辑器 ?
23. 实时协作算法 OT 算法:用 insert、remove 和 retain 来表示文档内容及其修改 H E L L O 1 2 3 4 5 retain 1 remove 4 insert EY Operator H E Y 1 2 3
24. 实时协作算法 OP1 OP2’ A OP2 B OP1’
25. 技术选型完整结论 图形:SVG 方案 富文本编辑:选取第三方编辑器 -> 实现 OT -> 转换数据 Model
26. 目录 • 编辑器的实现思路和需求确定 • 幻灯片编辑器的技术选型 • 幻灯片编辑器的功能难点与解决方法 • 总结和展望
27. 图形变换计算 元素移动 CSS top left rotate + scale ? 元素缩放 CSS scale (Grouped) rotate + scale ? 元素旋转 CSS rotate
28. 图形变换计算 1. move 2. rotate 3. resize
29. 图形变换计算 固定坐标系 元素移动 计算元素所在矩形区域变换后的位置 元素缩放 元素所在矩形区域变换前后坐标不变 元素旋转 变换坐标系
30. 图形变换计算 仿射变换: 𝑷𝟐 ‘ ( (𝒙 , 𝒚 ) = 𝑻 ∗ 𝑷𝟏(𝒙, 𝒚) , T 为坐标系变换矩阵
31. 图形变换计算 1. move:T1 2. rotate:T2 3. resize:T3 𝑷𝟐 ‘ ( (𝒙 , 𝒚 ) = 𝑻𝟏 ∗ 𝑻𝟐 ∗ 𝑻𝟑 ∗ 𝑷𝟏(𝒙, 𝒚)
32. 目录 • 编辑器的实现思路和需求确定 • 幻灯片编辑器的技术选型 • 幻灯片编辑器的功能难点与解决方法 • 总结和展望
33. 总结和展望 • 从架构层面看编辑器逻辑与功能实现的取舍与平衡 业务逻辑 业务逻辑 功能实现 功能实现 • 可能的终点:浏览器标准层面的编辑器
34. Q&A