FlowFuse 流程渲染器

一个将节点-RED流量转换成网页的库.

安装

npm install @flowfuse/flow-renderer

发展

所有客户端代码都在 index.js 文档以方便地包含在网页中.

运行 npm run demo 在浏览器中测试流程渲染器.

运行 npm run build 用于构建最小化的流变器。 这将输出文件 index.min.js。 。 。 .

ImportANT:在对寄存器进行修改之前,应先建造流程渲染器的精密版本.

使用量

将以下脚本标记添加到您的 HTML 文件 :

<script type="module" src="public/flow-renderer/index.min.js"></script>

或脚本位于您的工程中的位置

下一个,将容器元素添加到您的 HTML 文件并即时跳出 a flowRenderer。 。 。 . 注:流-还源器是一个ES模块,需要现代浏览器运行. 脚本标记必须包含 type="module" 属性.

默认情况下,流出渲染器会使流出 gridLines, (中文(简体) ), images, (中文(简体) ), labels, (中文(简体) ), zoom, (中文(简体) ), autoZoom,以及 autoScroll 启用 . linkLines 默认已禁用.

要操作缩放,请使用鼠标轮 + 代码 或者说 ⌘ 键. 要垂直滚动容器,请使用鼠标轮,而不使用 移动 键. 要横向滚动容器,请使用鼠标轮+ 移动 键.

基本实例

<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>

<script type="module">
  const renderer = new FlowRenderer()
  const container1 = document.getElementById('nr-flow-1');
  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
  renderer.renderFlows(flow, { container: container1 })
</script>

内入选项示例

可通过数据属性设置选项 scope, (中文(简体) ), grid-lines, (中文(简体) ), zoom, (中文(简体) ), images, (中文(简体) ), link-lines, (中文(简体) ), labels, (中文(简体) ), auto-zoom, (中文(简体) ), auto-scroll。 。 。 .

注:对于SET和选项,数据属性可以简单地存在于容器元素上。 对于UNSET,数据属性必须设定为: false。 。 。 .

<div id="nr-flow-2" style="height: 300px" 
    data-scope="custom-css-scope"
    data-grid-lines
    data-zoom
    data-images
    data-link-lines="false"
    data-labels
    data-auto-zoom
    data-auto-scroll
></div>

<script type="module">
  const renderer = new FlowRenderer()
  const container2 = document.getElementById('nr-flow-2');
  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
  renderer.renderFlows(flow, { container: container2 })
</script>

完整选项示例

<div id="nr-flow-3" class="my-scope" style="height: 300px"></div>

const renderer = new FlowRenderer()
const container3 = document.getElementById('nr-flow-3');
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
renderer.renderFlows(flow, {
    container: container3,
    scope: 'custom-css-scope', // scope for CSS
    gridLines: true, // show gridLines
    images: true, // show images
    linkLines: false, // show link lines
    labels: true, // show labels
    zoom: true, // enable zoom within the container
    autoZoom: true, // auto zoom to fit the flow within the container upon rendering (best fit, limited to 20% min, 100% max zoom)
    autoScroll: true, // auto scroll the leftmost node to the left of the container and the topmost node to the top of the container upon rendering
    flowId: undefined // Id of flow to display
})

实例

    <div id="app">
        <div ref="f1" class="flow-renderer"></div>
    </div>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import FlowRenderer from './index.js'
        createApp({
            mounted() {
                const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
                const renderer = new FlowRenderer()
                renderer.renderFlows(flow, { container: this.$refs.f1 })
            }
        }).mount('#app')
    </script>

比较流动的基本实例

<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>

<script type="module">
  const renderer = new FlowRenderer()
  const container1 = document.getElementById('nr-flow-1');
  const flow1 = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40, "z": "9999"}]
  const flow2 = [{"id": "1001", "type": "inject", "x": 120, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":120, "y": 80, "z": "9999"}]
  renderer.compare([flow1, flow2], { container: container1 })
</script>

鸣谢

这个项目要归功于格瑞特·瑞森的原作 节点-红色流程查看器正是这个伟大的贡献 开始球滚滚。 Gerrit给我们留下了 这个项目所需的零件.

限制

• 目前只支持客户端渲染
• 移动抓取缩放尚未执行
• 流出渲染器不支持所有贡献的节点-RED节点,但是它们将作为通用节点类型与节点的标签一起完成.
• 流量渲染器并不总是像在节点-RED编辑器中出现的那样,使流量和节点精确. 这部分是由于是一个客户端的渲染器,没有服务器端组件来提供完整的上下文,部分是由于渲染器本身目前的局限性.
• 流量比较功能仍在很早期的开发中,如果流量过于相异,或者来自节点-RED的出口不完善,则可能无法如预期的那样运行.

释放过程

在这个项目中 释放请 用于根据代码库中的承诺信息自动确定下一个发布版本.

通过使用 常规武器委员会,项目遵守承诺信息的标准格式 Release Please 用于确定下一次发布是主要、次要还是补丁发布.

构成部分

1. 这个 Prepare release GitHub 动作工作流程 :

   • 请分析信件的动作,以根据常规承诺的规格确定需要的释放类型(主要、次要、补丁)
   • 创建带有拟议版本凸起和更改日志的预放拉动请求
   • 合并后,自动更新版本编号 package.json 并在 GitHub 上创建新的版本,并附带适当的更改日志

2. 这个 Lint Pull Request Title GitHub 动作工作流程 :

   • 运行于拉动请求创建和使用 amannn/action-semantic-pull-request 行动以验证拉动请求标题遵循《公约》格式
   • 与调整后的默认合并承诺消息一起,这确保所有合并到主分支中的承诺都遵守预期格式,允许发布请求正确运行

3. 这个 Release Published GitHub 动作工作流程 :

   • 当新的 git 标记进入时运行的工作流程 v*.*.* 格式被推出,并负责将新版本的软件包发布给使用该软件包的 npm 公共登记册 JS-DevTools/npm-publish 动作

拉动请求标题格式

常规委员会预设的拉动请求标题格式如下:

<type>(<scope>): <subject>

• 类型:描述承诺的类别。 例如:
  • feat:一个新的特性(触发一个小版本的凸起).
  • fix: a bug fix (触发补丁版本的出错).
  • perf: 代码更改能改善性能(触发补丁版本的出错).
  • refactor:一个代码更改,既不修补一个错误,也不添加一个特性(除非伴有 BREAKING CHANGE,否则不会触发发布).
  • docs: 仅文档更改(不触发发布).
  • chore: 构建过程或辅助工具和库的更改(不触发发布).
• 范围:一个可选部分,提供关于所改变内容的额外上下文(例如模块,组件).
• 主题:变化简介.

处理中断更改

为了表示突破性的变化,感叹标记 ! 应在类型/范围之后立即使用:

• feat!:
• fix!:
• refactor!:

许可证

阿帕奇 - 2.0