可视化组件
继续上次的分享, 0.2.21版本 ,详见 gitee.com/Timtance, github.com/Timtance
关键字
- ti-flowchart,0.2.21,触发条件 Trigger,复合型模块(二次开发更自由)
ti-flowchart
- ti-flowchart 都能满足需求。它易用友好,快速构建出令人印象深刻的流程图。无论您的角色是开发者、设计师还是业务人员,
- ti-flowchart 都是理想的工具,帮助您更好地可视化和沟通流程和思路。
Code Example
Template
```
<li id="A1" style="list-style: none; border: 1px solid #3fb41f; background-color: rgb(63 180 31 / 15%); border-radius: 5px; height: 30px; line-height: 30px; margin: 5px; color: #3fb41f;">普通模块</li>
<li id="B1" style="list-style: none; border: 1px solid #dfdddc; background-color: rgb(255 255 255 / 50%); border-radius: 5px; height: auto; line-height: 30px; margin: 5px; color: #787777;">
<ul style="display: flex; list-style: none; justify-content: space-around; padding: 0;">
<li><span data-key="value" style="display: block; width: 70px;">{{ templateSpan }}</span></li>
<li><span data-key="state">复合型模块</span></li>
</ul>
<div data-key="context">{{ templateSpan }}</div>
</li>
<li id="C1" style="list-style: none; border: 1px solid #dfdddc; background-color: rgb(255 255 255 / 50%); border-radius: 5px; height: auto; line-height: 30px; margin: 5px; color: #787777;">
<component :is="MyComponent" slot-name="head"></component>
</li>
```
注: Dom元素属性data-key值 对应 数据的字段
Javascript
```
import 'ti-flowchart/lib/ti-flowchart.umd.js';
var t = new window.tuiFlowChart();
var dragItemA:any = document.getElementById("A1");
t.addDragItem(dragItemA);
var dragItemB:any = document.getElementById("B1");
t.addDragItem(dragItemB);
var dragBox:any = document.getElementById("mapFlow");
dragBox.addEventListener("click", (e:any) => {
console.log(JSON.stringify(e.data));
}); // 或者在id是mapFlow的元素上加上 @create | @change | @selected
t.setDragBox(dragBox);
// t.load(); // 导入数据
// t.getData(); // 获取数据
// t.zoomIn(); // 放大
// t.zoomOut(); // 缩小
// t.getZoomValue(); // 获取当前缩放比例
// t.getBodyElement(); // 获取当前编辑器容器Element
// t.clear(); // 清理当前容器Element内所有元素
```
数据字段
```
[
{
"sourceId":"B1", // 模块编号
id: "12341234", // 实例化编号
x: 100, // 模块横坐标
y: 230, // 模块纵坐标
w: 250, // 模块宽度
h: 50, // 模块高度
value: "流程一", // 模块名称
trigger: "[{\"value\":\"触发条件\",\"id\":\"触发实例编号\"}]", // 触发条件数组JSON数据(配置触发条件)
from: "前实例编号,前实例编号",// 前实例数据(配置连线)
to: "后实例编号,后实例编号", // 后实例数据(配置连线)
context: "该流程启动登录", // 业务字段
state: "OK" // 业务字段.
}
]
```
Ti-FlowChart参数
```
{
scaleRatio: 1, // 缩放比例
triggerValueKey: 'trigger', // 数据 触发 字段名,
editValueKey: 'value', // 修改能力映射的Dom元素 的字段名
}
```
安装
该组件拥有独立的功能需求分析师,组件UI设计师,组件架构师,组件功能工程师,组件测试工程师。
欢迎你的加入,安装使用体验。
npm i -g ti-flowchart
或者
yan add ti-flowchart
支持 VUE2,VUE3,React, PHP, 原生等#前端 框架引用。
分享
以下是组件的孵化过程,记录不同阶段的面貌。
我的历程分享,希望能激励你,去发现不一样的你。You need you
版本日志
- 0.1.3 add ti-flowchart Module and inner functions to mapping object(抽象构造器,注册元素,设置容器映射的元素)
- 0.2.1 add Zoom in/out functions and modify selected Item css properties. (画布缩放能力,以及元素缩放拖动计算)
- 0.2.3 Content container size calculation, canvas drag. (内容器尺寸计算,画布拖动。)
- 0.2.4 add event listener and eventName ['created', 'selected']
- 0.2.5 fix bug with draw line [dom, undefined]
-.0.2.7 add modifying dom_item value, add event listener with change event
- 0.2.8 fix bug with add dom_item event created
- 0.2.11 add eventName ['change'] and modify draw function
- 0.2.12 modify value and delete dom_item event dispatch eventName ['change']
- 0.2.13 add load data and render dom_item
- 0.2.15 add dom_item disabled attribute {disabled: true}
- 0.2.16 add gif with example rendering save demo folder
- 0.2.18 add trigger attribute for loading and rendering
- 0.2.19 add template of dragItem and data-key of dom, getBodyElement and clear of function
- 0.2.20 add options of function attribute
- 0.2.21 add trigger change of event name