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;
};

2 案例

2.1 从左到右图形

2.1 从上到下图形