# logicflow to liteflow

**Repository Path**: LiuKun_Km/logicflow-liteflow

## Basic Information

- **Project Name**: logicflow to liteflow
- **Description**: 将logicflow生成的图形数据转化为liteflow规则
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 33
- **Created**: 2024-03-12
- **Last Updated**: 2024-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# logicflow-liteflow

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

## 使用步骤

项目已上传至npm仓库

1. 下载

```
npm install logicflow-liteflow@1.0.4
```

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

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

3. 作为LogicFlow插件使用

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

4. 使用提供的节点组件

   提供的节点类型有COMMON，SWITCH，IF，LOOP四种,在拖入节点时将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);
```

## 仅使用解析功能

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

普通节点：

```ts
interface Data {
    nodes: {
        id: string;
        type: "COMMON" | "SWITCH" | "IF";
        properties: {
            nodeId: string;//最终输出EL表达式中的ID
        }
    }[];
    edges: {
        sourceNodeId: string,
        targetNodeId: string
    };
}
```

循环节点：

```ts
interface Data {
    nodes: {
        id: string;
        type: "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直接下载本项目运行试试看。

### 项目截图

![Alt text](./src/assets/image1.png)

### 启动步骤

```
npm install
npm run dev
```

### id生成和数据保存

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

### IF 节点的使用

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

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

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

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

2. 为了方便，当if节点在最后时可以只有一个分支，指定为true
   ![](./src/assets/if1.png)

### 循环节点的使用(更新)

循环节点更换成单独的一个节点
![](./src/assets/for1.png)
![](./src/assets/for2.png)
![](./src/assets/while.png)
![](./src/assets/interator.png)