ti-flowchart

ti-flowchart 是一款功能强大的流程可视化组件，帮助用户创建和展示流程图。无论您是开发者、设计师还是业务人员，它都是一个理想的工具，可快速构建出令人印象深刻的流程图。

• ti-flowchart 是一款功能强大的流程可视化组件，帮助用户创建和展示复杂的流程图。它提供了丰富的节点和连接线选项，可灵活定制流程图的外观和行为。无论是简单的流程图还是复杂的工作流程，

• ti-flowchart 都能满足需求。它易用友好，快速构建出令人印象深刻的流程图。无论您的角色是开发者、设计师还是业务人员，

• ti-flowchart 都是理想的工具，帮助您更好地可视化和沟通流程和思路。

• ti-flowchart is a powerful flow visualization component that helps users create and showcase flowcharts. Whether you're a developer, designer, or business professional, it's an ideal tool for quickly building impressive flowcharts.

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元素 的字段名

}

The following records... 2024 A flowchart editor component developed late at night for secondary developers to reference. The reason for developing this model is I CAN, DID DO IT. This component has independent functional requirements analysts, component User Interface Designers, component architects, component functional engineers, and component testing engineers. (Currently lacking experience engineers) Welcome to join and experience the installation and use. npm i -g ti-flowchart Or yan add ti-flowchart Support VUE2, VUE3, React, PHP, native and other #Front framework references.

The following is the incubation process of the component, recording the appearance of different stages.

I share my journey, hoping to inspire you to discover a different you. You need you

以下记录着... 2024年 深夜研发的一款流程图编辑器组件，供二次开发的人员引用。 开发此款的原因是 I CAN，JUST DO IT。 该组件拥有独立的功能需求分析师，组件UI设计师，组件架构师，组件功能工程师，组件测试工程师。（目前缺少体验师） 欢迎你的加入，安装使用体验。 npm i -g ti-flowchart 或者 yan add ti-flowchart 支持 VUE2，VUE3，React, PHP, 原生等#前端 框架引用。

以下是组件的孵化过程，记录不同阶段的面貌。

我的历程分享，希望能激励你，去发现不一样的你。You need you

以下に記録しています。。。2024年 深夜に開発されたフローチャートエディタコンポーネントで、二次開発者が参照できます。 このモデルを開発した理由は、I CAN、JUST DO ITです。 このコンポーネントには、独立した機能要件アナリスト、コンポーネントUIデザイナー、コンポーネントアーキテクト、コンポーネント機能エンジニア、コンポーネントテストエンジニアがいます。（現在、エクスペリエンスエンジニアが不足しています） あなたの参加、インストール、使用体験を歓迎します。 npm i -g ti-flowchart または yan add ti-flowchart

VUE 2、VUE 3、React、PHP、ネイティブなどの#前端 フレームワーク参照をサポートします。

以下は、コンポーネントのインキュベーションプロセスであり、さまざまな段階の外観を記録しています。

私の歴史を共有して、あなたを激励して、違うあなたを発見したい。You need you

TiFlowChart Logs

• 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
• 0.3.1 add mobile ability of touch
• 0.4.1 Customization and data binding within drag and drop elements through data key（拖拽元素内部的自定义与数据通过data-key进行绑定，通过change事件进行同步）['INPUT','SELECT'] <input data-key="state">
• 0.4.3 modify to when moving out of bounds, adjust the container size（拖动时自动调整容器尺寸）
• 0.5.0 Update Canvas cross-domain and add preview policy play/stop (优化画布跨域、新增预览策略播放/停止)
• 0.5.1 add data-for and data-in to array list show

Recommended IDE Setup

• VS Code

Build a process for submitting npm projects

• cd project's name file
• npm init
• npm install --save-dev @babel/[email protected] @babel/[email protected] @rollup/[email protected] [email protected] [email protected]
• "build": "rollup -c" ( configure package.json )
• rollup.config.js ( Create rollup configuration file )

Follow

MIT LICENSE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.