zt-flowgraph-layout v0.0.1

使用说明

安装

npm i zt-flowgraph-layout

引入

import { FlowGraphAutoLayout } from "zt-flowgraph-layout"

使用

//创建实例
let layout = new FlowGraphAutoLayout(config, 0, 0, 0, 0, 2, 1, 1);

//传入json数据
layout.calculGraphData(JSON.parse(jsontext2.value))

 //按分组字段拆分
let groupSort = []//['登记','初审','办理','处室办理']
layout.splitGroup(groupSort)

//合并连线
layout.mergeLink()

//根据方向旋转结果
if (direct.value == 1) {
  layout.rol();
  layout.rol();
  layout.rol();
} else if (direct.value == 2) {
} else if (direct.value == 3) {
  layout.rol();
  layout.mirror(2)
} else if (direct.value == 4) {
  layout.rol();
  layout.rol();
  layout.mirror(1)
}

//根据传入的参数，计算位置和大小，再返回信息
let layoutData = layout.getCalculuatedData();

//利用得到的结果修改HTML坐标完成展示
layoutData.groups //所有的分组信息，包含了分组的大小、位置、分组中的任务
layoutData.tasks  //所有的任务信息，包含了任务的大小、位置、json中对应任务的数据
layoutData.lines  //所有的连线信息，包含了连线的开始、结束位置、中间折线点位置、连线两端开始和结束控件的ID
layoutData.maxWidth //整个区域的宽度
layoutData.maxHeight //整个区域的高度