svg flow editor 是一款流程图编辑器，提供了一系列流程图交互、编辑所必需的功能，支持前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。项目使用typescript与svg、canvas等技术进行搭建，脱离vue、react等框架的限制，使得用户更快、更轻松融合到自己的项目中，意在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
本项目采用 Apache 2.0 开源策略
-
svg 提供底层流程图元件的绘制能力，元件包括：
- 矩形 rect
- 圆形 circle
- 椭圆 ellipse
- TODO - 未开发
- 多边形 polygon
- 三角形 triangle
- 菱形 diamond
- 线段 line
- 文本 text
- HTML html
-
typescript 使用ts进行构建，提供完整的类型支持
-
vite 使用 vite 进行打包
向外暴露 register 操作对象，将用户的快捷键统一封装到 SFEditor 上，在注册事件的时候，统一进行事件处理。
- Ctrl + 左键 进行多选
- ctrl + C 复制
- Ctrl + V 粘贴
- ctrl + F 进行文本搜索
- Ctrl + A 全选
- backspace、delete 进行删除
- Ctrl + S 进行保存
- 上下左右 进行移动
- Ctrl + Z 进行撤销 undo
- Ctrl + Y 进行重做 redo
- Ctrl + P 进行打印
- Ctrl + Shift + S 进行另存为
- Alt + Shift + F 快捷美化
- ...
正交连线 采用 最短路径算法 A*算法+中点转折实现
背景网格/水印 canvas实现绘制
平移缩放旋转 - 使用 svg transform 实现
框选 -全选/反选
快捷键
redo undo 使用线性表 +指针实现
一键美化
模板工具
自定义icon
文件导出 图片
协同！
层级处理（置于顶层、置于底层）
组合/取消组合
锁定/取消锁定
布局/文本属性
background 背景 网格-已完成 水印-已完成
graph 图形本身 属性设置-位置 颜色 边框 文本 宽度 高度 hover - 显示连接锚点 click - 显示形变锚点 折线-未完成 文本-未完成 平移-未完成 缩放-未完成 旋转-未完成 graph 图形分类 - 矩形 rect - 圆形 circle - 椭圆 ellipse - 多边形 polygon - 三角形 triangle - 菱形 diamond - 文本 text - HTML html
network 协同 支持光标、用户操作、聊天通信，因此，需要在api 中进行预留触发接口
graphData 支持双向绑定数据【nodes 节点数据 lines 线数据】
tools 工具（导出图片、一键美化、模板工具、icon、层级、锁定、布局方式组合）
apis 高度封装的 API 支持向外导出一个对象，从而获取整个项目的api操作
event 事件 （注册快捷键、图形的事件响应处理、框选 -全选/反选）
history 历史记录管理器（redo、undo、history）
文本输入实现 双击时，显示 div contenteditable,使用 tspan 进行显示，注意换行处理
处理 hover 的思路： 所有的元素都由下结构构成 1. g class svg-flow-node 该节点包括 元素box 文本 + 锚点 要比正常的元组大一点才可以实现hover out 1. svg-flow-node-content 2. svg-flow-none-text 3. svg-flow-node-anchor 是连接锚点 4. svg-flow-node-anchor 是连接锚点 5. svg-flow-node-anchor 是连接锚点 6. svg-flow-node-anchor 是连接锚点
层级处理上，只需要删除原来的 重新渲染 在最后面，就能在最上层
核心对象在 core/index.ts 中，向外暴露了 SFEditor 对象：
```javascript
export const SFEditor = {
listener, // 事件监听
eventBus, // event Bus
command, // 动作指令
register, // 事件注册器（右键菜单+快捷键）
global, // 全局API
SVG, // svg 元件构造器
};
```
-
svg 元件基于svg，因此需要先创建 svg 对象 const svg = SFEditor.SVG().addTo(".flow-box"); addTo 将svg添加到指定选择器或dom 上
-
svg .Rect(100, 100) .position(100, 100) .setID("123") .attr({ fill: "red" }) .click(() => { console.log("自定义事件"); });
Rect 创建 100*100 的矩形 position 设置矩形的位置 setID 设置矩形的ID属性 attr 设置矩形的其他属性 fill 填充样式 stroke 描边 click 设置事件
SFEditor.command.executeWatermark();
// 监听内部事件 SFEditor.listener.graphLoaded = () => { console.log("graphLoaded被执行"); };
// eventBus SFEditor.eventBus.on("graphLoaded", () => { console.log(" editor.eventBus.on"); });
// 全局api SFEditor.global.reset();
项目提供 元件库、顶部菜单、元件配置抽屉等插件，
升级补丁版本号(修改bug)：npm version patch // 1.0.x
升级次版本号(新增功能)：npm version minor // 1.x.0
升级主版本号(较大改版)：npm version major // x.0.0
再执行npm publish