logic-liteflow v1.0.0

logic-liteflow

项目基于logicflow-liteflow扩展而来

将logicflow生成的图形数据转化为liteflow规则，支持拖拽和实时预览liteflow规则，支持 then、when、switch和循环节点

使用步骤

项目已上传至npm仓库

1. 下载

npm/pnpm install logic-liteflow

2. 导入（这里默认注册了需要的组件）

import {LiteFlow} from 'logic-liteflow';

3. 作为LogicFlow插件使用

new LogicFlow({
    ...,
    plugins: [LiteFlow],
})

4. 解析为liteFlow表达式

import {parse} from 'logic-liteflow';

data = lf.getGraphRawData()
parse(data);

仅使用解析功能

如果想要自定义图形界面，仅使用解析功能，需要保证图形数据至少有以下的属性

interface Data {
    nodes: {
        id: string;
        type: "COMMON" | "SWITCH" | "IF" | "LOOP";

        //仅循环需要的属性
        flowData?: Data;//循环包含的内容
        properties?: {
            name: "FOR" | "WHILE" | "ITERATOR";
            startNum?: number; //循环次数，当name为FOR时生效，同时startId失效。
        };

        startId?: string; //循环节点id
        breakId?: string; //跳出循环节点id
    }[];
    edges: {
        sourceNodeId: string,
        targetNodeId: string
    };
}

自定义节点样式

你可以用任何logicflow支持的方式自定义节点（继承项目中的或是自己写），并注册为项目已有type(COMMON,IF,LOOP,SWITCH)，这会覆盖默认注册的组件 如果重写loop节点，注意在getData中输出上面5中需要的属性

运行实例项目

通过gitee直接下载本项目运行试试看。

项目截图

启动步骤

npm install
npm run dev

id生成和数据保存

id从1开始自动递增，和图形数据一起保存在localstorage中，可以自行修改

IF 节点的使用

1. 最稳妥的使用方式当然是有两个分支，并且连线上标明true和false（false可以省略）

2. liteFlow中有IF(x,a)的语法，但是从图上不好判断IF节点何时结束，所以用空分支指向结束位置。

2. 为了方便，当if节点在最后时可以只有一个分支，指定为true

循环节点的使用(更新)

循环节点更换成单独的一个节点