使用说明

通过npm安装

安装

npm i ddei-flowgraph-layout

引入

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

通过直接引入js安装

安装

将/dist/ddei-flowgraph-layout.umd.cjs复制到项目的/public目录

引入

在index.html中通过script标签引入

<script src="/ddei-flowgraph-layout.umd.cjs"></script>

在所在页面的js中，通过self引入FlowGraphAutoLayout

const { FlowGraphAutoLayout } = self["ddei-flowgraph-layout"] || {} //非npm引入

使用

//FlowGraphAutoLayout(config,align,valign,spaceWidth,spaceHeight,coord,coordPosition,worldCoordPosition)
//参数说明：主要用于配置生成的行为，传入0、null或不传会取默认值
//第一个参数为config，参考下面说明，用于配置生成的任务大小
//align 横向对齐，1左，2中，3右，默认2
//valign 纵向对齐，1上，2中，3下，默认2
//spaceWidth 横向间距，默认20
//spaceHeight 纵向间距，默认20
//coord 坐标系：1笛卡尔坐标/2页面坐标，默认2
//coordPosition 坐标类型: 1中心点 / 2左上角，默认2
//worldCoordPosition 世界坐标类型: 1中心点 / 2左上角，默认2
//创建实例
let layout = new FlowGraphAutoLayout(config, 0, 0, 1, 0, 2, 2, 2);

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

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

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

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

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

config配置说明

用于配置节点大小，用于设置不同类型节点的大小、文本字段等信息，与传入数据中的type字段对应，如下：

const config = {
  root: { //sxly节点的大小、以及配置信息，与传入data中的类型匹配
    width: 160,
    height: 80,
    textField: "name",
    groupField: "groupId",
    font: { size: 16 }
  },
  task: { //sxly节点的大小、以及配置信息，与传入data中的类型匹配
    width: 160,
    height: 80,
    textField: "group",
    groupField: "groupId",
    font: { size: 16 }
  },
  default: { //默认节点的大小、以及配置信息，与传入data中的类型匹配
    width: 160,
    height: 80,
    textField: "group",
    groupField: "groupId",
    font: { size: 16 }
  }
}