# logicflow-liteflow

前端代码地址：https://gitee.com/yabcd/parse_vue (如何使用在这个项目文档)

后端代码地址：https://gitee.com/yabcd/parse_springboot


## 使用步骤

项目已上传至npm仓库

1. 下载

```
npm install logicflow-liteflow@2.1.5
```

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

```ts
import {LiteFlow} from 'logicflow-liteflow';
```

3. 作为LogicFlow插件使用

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

4. 使用提供的节点组件

   提供的节点类型有COMMON，SWITCH，IF，GROUP，AND，OR，NOT。可以使用logicflow的dnd插件。也可以自己实现拖拽，在拖入节点时将type赋值为其中一个,并把properties中的nodeId修改为需要展示的id，下面给出了基于HTML拖拽事件的示例

```ts
//拖拽开始事件，ScriptNodeDTO是自定义的数据结构
const dragstart_handler = (e: DragEvent, node: ScriptNodeDTO) => {
    e.dataTransfer?.setData("text/plain", JSON.stringify(node));
}
```

```ts

//修改拖拽鼠标经过样式
const onDragOver = (e: DragEvent) => {
    e.preventDefault();
    e.dataTransfer && (e.dataTransfer.dropEffect = "move");
}

//拖拽结束事件
const onDrop = (e: DragEvent) => {
    e.preventDefault();
    const data = e.dataTransfer?.getData("text/plain");
    const node: ScriptNodeDTO = JSON.parse(data as string);

    const point = logicflow.getPointByClient(e.x, e.y);
    if (!point) return;


    logicflow.addNode({
        type: node.type,
        x: point.canvasOverlayPosition.x,
        y: point.canvasOverlayPosition.y,
        text: node.scriptNodeName,
        zIndex: 2,
        properties: {
            nodeId: node.scriptNodeId
        }
    });
}
```

5. 解析为liteFlow表达式

```ts
import {parse} from 'logicflow-liteflow';

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

## 自定义节点样式

你可以用任何logicflow支持的方式自定义节点（继承项目中的或是自己写），并注册为项目已有type(COMMON，IF，GROUP，SWITCH，AND，OR，NOT)，这会覆盖默认注册的组件，非常建议重写，因为本人写的不好看，可能后面会改吧。

关于与或非表达式

可以想办法把箭头给去掉，因为输入输出锚点是固定位置的，应该会更好看一点（已完成）

![1716538076831](image/README/1716538076831.png)

## 运行示例项目

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

### 项目截图

![1716537254842](image/README/1716537254842.png)

### 启动步骤

```
npm install
npm run dev
```

### id生成和数据保存

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

### GROUP 节点

![1717742318220](image/README/1717742318220.png)

![1717742381384](image/README/1717742381384.png)

2.0.1 现在的Group节点添加了并行和id，tag的配置，其实原理是将外部连接到GROUP内部的边视为直接连接到GROUP节点，所以你也可以直接这么做)。。。(可能在一些特殊情况你可以使用分组作为最高优先级，比如在switch节点后面紧跟一个when节点等)

2.0.0中更新最大的就是GROUP节点了，循环，与或非表达式，捕获异常表达式都是用的GROUP节点，主要区别在于不同的groupType

![1716536810972](image/README/1716536810972.png)

后面并行的配置以及id，tag的配置估计也是GROUP，但是还没写。。。

### IF 节点的使用

连线上的TRUE和FALSE可以双击进行选择

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

![](./src/assets/if3.png)

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

![](./src/assets/if2.png)

3. 为了方便，当if节点在最后时可以只有一个分支，指定为true
   ![img](./src/assets/if1.png)
4. 可以使用与或非表达式作为if的开始节点

   ![1716538076831](image/README/1716538076831.png)

### 循环节点的使用

使用分组节点并将分组类型设置为FOR、WHILE、ITERATOR中的一个，连接START边和BREAK边，通过双击边进行选择。（其中FOR配置迭代次数和连接START边只需要进行一项）

![1716537828999](image/README/1716537828999.png)
![1716537861452](image/README/1716537861452.png)
![1716537905393](image/README/1716537905393.png)
![1716537805571](image/README/1716537805571.png)

## 更新日志
2.1.5 修复IF节点BUG

2.1.4 修复IF在最后只有一个分支前面节点不显示的问题

2.1.3 修复嵌套when的bug

2.1.2：修复嵌套when的bug，添加节点的tag和data特性，添加选择编排的tag语法

2.1.0：优化了分支解析时的bug和空链问题，添加格式化增加可读性，提供选择编排中的id语法支持
![alt text](image/README/image.png)

2.0.2：switch分支可以侵入其他分支, 复用其他分支的节点

![1716538076831](image/README/Snipaste_2024-09-03_16-25-35.png)

2.0.1: 修改Switch表达式按照when解析的错误，新增组合节点进行配置的功能，包括id，tag，ignoreError，any，must

2.0.0: 新增与或非表达式和捕获异常表达式，修改循环的实现方式，增加节点的配置（节点和边可以双击配置）

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