网络图 NetworkGraph

在4合一网络图中，NetworkGraph 是图的载体，它包含了图上的所有元素（横道、活动、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。

平移、缩放

1、画布平移

普通画布(未开启 scroller 模式)通过开启 panning 选项来支持拖拽平移。

const netGraph = new NetworkGraph({
  panning: true,
})

// 等同于
const netGraph = new NetworkGraph({
  panning: {
    enabled: true,
  },
})

拖拽可能和其他操作冲突，此时可以设置 modifiers 参数，设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。

const netGraph = new NetworkGraph({
  panning: {
    enabled: true,
    modifiers: 'shift',
  },
})

还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。

const netGraph = new NetworkGraph({
  panning: {
    enabled: true,
    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
  },
})

可以通过以下 API 来启用/禁止画布平移：

netGraph.isPannable() // 画布是否可以平移
netGraph.enablePanning() // 启用画布平移
netGraph.disablePanning() // 禁止画布平移
netGraph.togglePanning() // 切换画布平移状态

2、画布缩放 (甘特图gantt中配置scales,时标刻度缩放)

通过开启 mousewheel 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：

导出（暂未启用）

1、导出 PNG/JPEG

import { DataUri } from 'network-planing-graph'

netGraph.toPNG((dataUri: string) => {
  //dataUri base64 下载
  DataUri.downloadDataUri(dataUri, 'network-graph.png')
})

toPNG/toJPEG 支持以下参数：

width

导出图片的宽度

height

导出图片的高度

padding

图片的 padding

watermark

导出图片水印

netGraph.toPNG((dataUri: string) => {
  // 下载
  DataUri.downloadDataUri(dataUri, 'chart.png')
}, {
  padding: {
    top: 20,
    right: 30,
    bottom: 40,
    left: 50,
  },
})

2、导出 MPP/Excel/PDF/XML

netGraph.toMPP((dataUrl: string) => {
  // 下载地址
})
netGraph.toExcel((dataUrl: string) => {
  // 下载地址
})
netGraph.toPDF((dataUrl: string) => {
  // 下载地址
})
netGraph.toXML((dataUrl: string) => {
  // 下载地址
})