Foblex 流动

Angular最被采纳的节点编辑器库——用于制作工作流程构建者,AI管道和交互式图编辑器.

发泡花 流体将生产节点编辑器的硬部分——拖动逻辑,命中测试,SVG连接路径,再分配,选择,缩放,并取消/重置——作为角-内建构件. 开始 f-flow, (中文(简体) ), f-canvas,节点和连接,然后只当您的产品需要时,添加更丰富的编辑器特性. 它授权生产产品,例如: 吕瓦雷·尼姆布斯, (中文(简体) ), 进程MIX, (中文(简体) ), 百花齐放,以及 EpicStaff (美国)。 。 。 .

利用它来创建工作流程构建器,AI低码工具,调用流程编辑器,UML图,内部后台工具等以节点为基础的接口. 从应用程序自有的图表记录开始, 或选择使用管理的记录并撤销/重做 withFlowState(); 验证, 持久性, 权限, 和域逻辑在两种模式中仍然是应用程序关切.

当前 19.x 释放目标角 17.3+如果你的应用在角12 -17.2上,请检查 角版本兼容性 在安装前先给相匹配的 Foblex 流线绑定 .

用于 AI 编码代理

Foblex Flow将AI编码代理视为一等用户: 包装一个版本匹配的指南 at node_modules/@foblex/flow/AI.md, (中文(简体) ), ng add 写工作空间代理规则,稳定 FFxxxx 诊断给毒剂一个混凝土通过/失效信号. 在生成代码之前,对照该指南或链接的官方引用来验证Foblex特定选择器和API;不要从其他节点编辑库中推断出API.

故意选择集成: 经典模式保留应用程序中的图表记录, 而可选 provideFFlow(withFlowState()) 为支持的操作提供已输入管理的记录并撤销/重做。 使用 API 验证生成的流量 FFxxxx 运输指南中描述的诊断.

AI 设置指南 • 妇女 完整的 LLM 可读参考文献

为什么Foblex流

• 最被采纳的为Angular所建的节点编辑器库,由npm每周下载——自2022年起保持了全职,并用于生产商业产品.
• 简单启动路径: 大多数编辑器开始于 f-flow, (中文(简体) ), f-canvas、节点、连接器和连接器.
• Angular-First API适合Angular Apps,而非包接回式状态模型.
• 用于真实编辑器交互的构建:拖动来连接,拖动来重新指定,选择,缩放,迷你映射,抓取,对齐的帮助,以及出行点.
• 高级模块是可选的:缓存和虚拟化是缩放工具,而不是一日要求.
• 自定义特定域图 UI的节点,连接器,和连接.
• 选择适合您的编辑器的状态边界:默认情况下的应用程序自有记录,或可选择的键入 FFlowState 带有快照和撤销/重写的记录.
• 您的应用仍然控制着验证规则,权限,持久性,以及两种状态模式中的商业意义.
• 适用于轻量级图表和完整的工作流程构建器产品.

特征概览

比较选择? 阅读诚实的比较: 反向流对角球队的 Foblex 流 财务报告和审定财务报表 ngx-vflow vs Foblex 流量。 。 。 .

选择您的状态整合

默认 经典模式 生成应用程序拥有的数组或信号。 Foblex 流出最后交互事件,例如 fCreateConnection 财务报告和审定财务报表 fMoveNodes;您的处理器验证它们并更新应用程序状态.

可选 管理模式 安装 provideFFlow(withFlowState())。其类型 FFlowState 记录自动应用支持的手势,并提供分批、快照、撤销和重做。 您的应用程序仍然定义了域,并决定记录的验证和持续方式 .

管理流动国家指南 • 妇女 状态实例

你可以构建什么

• 角节点编辑器
• 角工作流程构建器
• AI 低码和内部工具
• 呼叫流量、自动化编辑器和管道
• UML 、 架构和其他交互式图表接口

实例

• AI 低码平台 - 有自定义节点、JSON导入/导出、多个主题、配置面板的旗舰前端仅AI低码IDE演示,并附有验证、节点验证反馈、撤销/重做、持久性、多选择和动画连接.
• 呼叫中心流量 - IVR路由、排队、操作员交接、传输、语音邮件和嵌入式节点表格的工作流程构建器参考应用程序.
• Schema 设计器 - 更丰富的schema编辑器演示 带节点,关系,和CRUD风格的交互.
• UML 图表 - 架构和UML风格的图形界面的角实例.
• 锦标赛 - 以同一种以节点为基础的原始物为基础的专用括号UI.
• 所有实例 - 连接、选择、迷你地图、布局、对齐和其他编辑功能的有重点的例子.

尝试在线

不需要本地设置——浏览器中最小启动器运行 :

安装

这些安装命令用于当前 19.x 线条。 对于Angular 12-17.2应用软件,请使用 角版本兼容性 首先引导您不要意外安装更新的兼容行 .

ng add @foblex/flow

Nx 工作空间 :

nx g @foblex/flow:add

ng add 自动安装所需的配套软件包。 如果喜欢手工安装,请明确安装:

npm install @foblex/flow @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1

ng add 还可以通过添加将运出默认主题带入应用程序样式 node_modules/@foblex/flow/styles/default.scss 当条目缺失时.

默认主题

使用默认主题时, 需要立即排序节点、 连接器、 连接器、 迷你地图、 选择区域、 以及帮助插件 .

"styles": [
  "src/styles.scss",
  "node_modules/@foblex/flow/styles/default.scss"
]

如果您更喜欢选取SCSS混音器,而不是一个完整的切入点:

@use '@foblex/flow/styles' as flow-theme;

@include flow-theme.theme-tokens();
@include flow-theme.flow-canvas();
@include flow-theme.node-group();
@include flow-theme.connector();
@include flow-theme.connection-all();
@include flow-theme.plugins();

全向导 : 默认主题和样式

最小示例

<f-flow fDraggable>
  <f-canvas>
    <f-connection fSourceId="a-out" fTargetId="b-in"></f-connection>

    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }">
      Drag me
      <div fConnector fConnectorType="source" fConnectorId="a-out"></div>
    </div>

    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }">
      Drag me too
      <div fConnector fConnectorType="target" fConnectorId="b-in"></div>
    </div>
  </f-canvas>
</f-flow>

这就是心理模型: f-flow 主持编辑, f-canvas 泛和缩放,任何元素都会成为节点 fNode,以及 fConnector 端点附加连接 。 国家管理和每一个先进特点仍然是明确的选择.

快速 FAQ 数据

• Foblex Flow 很难使用吗? 没有。 核心设置为小而角-内生.
• 我需要蹲下还是虚拟化? 没有。 大部分编辑在第一天不需要它们. 它们是大型场景的可选缩放工具.
• 给谁用的? Angular团队建立节点编辑器,工作流程构建器,交互式图表等以图表为基础的产品UI.

资源

• 开始
• 角版本兼容性
• 流动管理状态
• 大流量性能
• 阴影 DOM 和角元素
• 移动到统一连接器
• 文档
• 实例
• 文章
• 显示大小写
• 路线图
• 更改日志

AI代理和法学硕士

• 页:1 代理人索引; llms- full.txt (英语) 完全可读的LLM参考文献
• AI 使用指南 ——严格的代码生成规则,也在本包内发运,地点: node_modules/@foblex/flow/AI.md

社区和支助

• GitHub 仓库
• GitHub 讨论
• 问题跟踪器
• 文件门户

关于问题或伙伴关系调查: 支持@ foblex.com

许可证

Foblex 流量在 MIT 许可证。 。 。 .