可视化组件 Ti-FlowChart 0.2.21

可视化组件

继续上次的分享, 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