# taskctl-graph-lib

**Repository Path**: mftaskctl/taskctl-graph-lib

## Basic Information

- **Project Name**: taskctl-graph-lib
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-11
- **Last Updated**: 2021-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TASKCTL 业界领先 ETL 批量调度专家

[![塔斯克](https://s3.bmp.ovh/imgs/2021/10/9211baef1279b3a7.png)](http://taskctl.com/)

> 源码地址: [https://gitee.com/mftaskctl/taskctl-graph-lib.git](https://gitee.com/mftaskctl/taskctl-graph-lib.git)  
> 在线预览: [http://mftaskctl.gitee.io/taskctl-graph-lib/](http://mftaskctl.gitee.io/taskctl-graph-lib/)  
> 最新版本: 0.4.3

## 1 安装及使用

### 1.1 添加依赖

```sh
# 添加NPM依赖
npm i -S @tskctl/taskctl_graph
yarn add @tskctl/taskctl_graph
```

### 1.2 使用

```ts
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 包声明

```ts
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 从左到右图形

![从左到右图形](https://s3.bmp.ovh/imgs/2021/10/5d402c41cb0abf23.png)

### 2.1 从上到下图形

![从上到下图形](https://s3.bmp.ovh/imgs/2021/10/8f1f6cda9e65e458.png)