探秘Flowy:打造网页流程图的利器!
Flowy是一个轻巧的JavaScript库,让你在创建漂亮的流程图时轻松自如,就像魔法一样✨。从Dribbble到Twitter,再到实时演示,Flowy将创新的设计与易用性完美结合。
查看Dribbble设计 | 关注Twitter动态 | 体验在线示例
项目简介
Flowy的目标是简化那些希望在Web应用中实现流程图功能的开发者的工作。无论是构建自动化软件、思维导图工具还是简单的编程平台,只需几分钟就能将这个库集成进你的项目。
你可以通过GitHub赞助来支持这个项目和更多像它这样的优秀作品!❤️
由Alyssa X倾情打造。
技术分析
Flowy的核心特性包括:
- 可响应的拖放操作
- 自动吸附定位
- 自动滚动
- 块级重排
- 删除块
- 自动块居中
- 条件吸附
- 条件块移除
- 导入保存文件
- 移动设备支持
- 使用纯JavaScript编写(无依赖)
- 计划中的npm安装支持
想要提出新的功能建议?这里是你的舞台!
应用场景
Flowy适合于:
- 在线教育平台,用于创建教学流程图
- 协作工具,帮助团队规划项目或任务流
- 决策树应用,辅助用户做出明智选择
- 工具类网站,比如代码生成器或设计工具
- 更多依赖流程图的创意应用
特点与优势
- 简单易用:只需要几行代码即可快速集成到现有项目
- 高度定制:提供了丰富的回调函数和方法以适应各种需求
- 跨平台:支持桌面和移动设备,覆盖广泛用户群体
- 无额外负担:基于Vanilla JavaScript开发,无需额外引入其他库
- 社区活跃:作者积极维护,持续更新,接受用户反馈并改进
快速上手
- 引入
flowy.min.js
和flowy.min.css
文件,例如通过jsDelivr CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
- 创建一个容器元素,例如
<div id="canvas"></div>
来承载流程图。 - 创建可拖动的区块,赋予
.create-flowy
类,如<div class="create-flowy">拖我</div>
。
接下来,通过初始化Flowy开始你的流程图之旅!
初始化与运行
初始化
flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);
参数 | 类型 | 描述 --- | --- | --- canvas
| HTML 元素 | 流程图容器 ongrab
| 函数(可选) | 开始拖动时触发 onrelease
| 函数(可选) | 结束拖动时触发 onsnap
| 函数(可选) | 块吸附时触发 onrearrange
| 函数(可选) | 块重排时触发 spacing_x
| 整数(可选) | 水平间距,默认20px spacing_y
| 整数(可选) | 垂直间距,默认80px
定义可拖动块,需要添加.create-flowy
类。
示例
HTML
<div class="create-flowy">可以被拖动的块</div>
<div id="canvas"></div>
JavaScript
var spacing_x = 40;
var spacing_y = 100;
// 初始化Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
// 当用户抓住一个块
}
function onRelease(){
// 当用户释放一个块
}
function onSnap(block, first, parent){
// 当块与其他块吸附
}
function onRearrange(block, parent){
// 当块被重新排列
}
回调函数
利用这些回调函数,你可以实现自定义行为。
开始拖动
function onGrab(block){
// 当用户抓住一个块时
}
当用户抓取具有.create-flowy
类的块时触发。
参数 | 类型 | 描述 --- | --- | --- block
| HTML 元素 | 被抓住的块
结束拖动
function onRelease(){
// 当用户释放一个块时
}
无论块是否被放置或释放,只要松开手指都会触发。
吸附事件
function onSnap(block, first, parent){
// 当块能吸附到父元素时
return true;
}
当块可以吸附到另一个父元素时触发。你可以阻止吸附,或通过返回true
允许吸附。
参数 | 类型 | 描述 --- | --- | --- block
| HTML 元素 | 被抓住的块 first
| 布尔值 | 如果为true
,表示这是画布上的第一个块 parent
| HTML 元素 | 可以吸附的父元素
重排事件
function onRearrange(block, parent){
// 当块被重排时
return true;
}
当块在画布内被重新排列而没有找到合适的父元素时触发。你可以决定是否删除该块,或者通过返回true
使其重新吸附回原来的父元素。
参数 | 类型 | 描述 --- | --- | --- block
| HTML 元素 | 被抓住的块 parent
| HTML 元素 | 可以吸附的父元素
方法
获取流程图数据
// 作为对象
flowy.output();
// 作为JSON字符串
JSON.stringify(flowy.output());
输出的JSON对象长这样:
{
"html": "",
"blockarr": [],
"blocks": [
{
"id": 1,
"parent": 0,
"data": [
{
"name": "blockid",
"value": "1"
}
],
"attr": [
{
"id": "block-id",
"class": "block-class"
}
]
}
]
}
各项属性含义:
键 | 值类型 | 描述 --- | --- | --- html
| 字符串 | 包含画布数据 blockarr
| 数组 | 由库生成的块数组(用于导入) blocks
| 数组 | 可读的块数组 id
| 整数 | 块的唯一标识 parent
| 整数 | 块所附加到的父元素的id
(-1表示没有父元素) data
| 对象数组 | 包含特定块内所有输入的数据 name
| 字符串 | 输入的名称属性 value
| 字符串 | 输入的值属性 attr
| 对象数组 | 包含特定块的所有数据属性
导入流程图数据
flowy.import(output)
允许你导入最初通过flowy.output()
导出的整个流程图。
参数 | 类型 | 描述 --- | --- | --- output
| HTML 元素 | 从flowy.output()
获取的数据
警告
此方法接受原始HTML而不进行清理,因此可能存在XSS漏洞。只有在输入绝对可信的情况下才能安全使用此方法,否则使用此方法可能会引入系统漏洞。
删除所有块
一次性清除所有块:
flowy.deleteBlocks()
目前没有单独删除块的方法,唯一的办法是手动分割分支。
加入Flowy的世界,感受无尽的创造可能!如果你有任何问题或反馈,请随时通过电子邮件hi@alyssax.com或Twitter联系我!希望Flowy对你的工作有所帮助!💖