TASKCTL 业界领先 ETL 批量调度专家
源码地址: https://gitee.com/mftaskctl/taskctl-graph-lib.git
在线预览: http://mftaskctl.gitee.io/taskctl-graph-lib/
最新版本: 0.4.3
1 安装及使用
1.1 添加依赖
# 添加NPM依赖
npm i -S @tskctl/taskctl_graph
yarn add @tskctl/taskctl_graph
1.2 使用
import { mockNodes, toCalcGraphData } from "@tskctl/taskctl_graph_lib";
// 模拟数据
const nodes = mockNodes(150, true);
// 计算图数据
const data = toCalcGraphData(nodes[0], {
offset: [0, 0],
size: [100, 50],
space: [20, 10],
debug: true,
compact: storage.compact,
});
1.3 包声明
export declare namespace NS {
/**
* 盒子大小
* S0 - 宽度 - 盒子
* S1 - 高度 - 盒子
* S2 - 高度 - 临时高度(计算时临时变量)
* S3 - 个数 - 组节点下第一个非空子节点下的S3个数(计算时临时变量,用于画线)
* S4 - 个数 - 组节点下最后一个非空子节点下的S4个数(计算时临时变量,用于画线)
*/
type Size = [number, number, number, number, number];
/** 节点类型: 0-串联;1-并联;2-普通节点 */
type NodeType = 0 | 1 | 2;
/** 图形方向: 0-从左到右;1-从上到下 */
type GraphDirection = 0 | 1;
/** 绘制图形配置 */
type Opts = {
/** 图形上下左右偏移值 */
offset: [number, number];
/** 节点之间间隔(水平与垂直方向) */
space: [number, number];
/** 普通节点盒子大小 */
size: [number, number];
/** 箭头对角线长->对等边 */
arrow: number;
/** 是否紧凑模型 -> 是否绘制单串行节点 */
compact: boolean;
/** 是否调试 */
debug: boolean;
/** 图形方向:0-从左到右;1-从上到下 */
direction: GraphDirection;
/** 是否启用数据优化 - 清楚空组套空组或组组只有一个节点情况 */
optimizeData: boolean;
};
/** 节点基础数据对象 */
interface XNode {
/** 类型: 0-串联;1-并联;2-普通节点 */
type: NodeType;
/** 节点名称-唯一 */
name: string;
/** 子节点 */
children?: XNode[];
/** 节点强制依赖(画斜线), 多个使用逗号隔开 */
lean?: string;
}
/** 节点绘制图形对象 */
interface DrwNode extends XNode {
/** 节点类型 */
type: NodeType;
/** 节点名称 */
name: string;
/** 子节点集合 */
children: DrwNode[];
/** 上级节点名称 */
pname?: string;
/** 盒子大小 */
size: Size;
/** 盒子坐标 */
position: [number, number];
}
}
/**
* 计算图形
* @param root 节点树根节点
* @param config 配置
* @returns
*/
export declare function toCalcGraphData(
root: NS.XNode,
config?: Partial<NS.Opts>
): {
dnodes: NS.DrwNode[];
dlines: string[];
dsize: [number, number];
root: NS.DrwNode;
};