Graph API 简介

Graph 是网络图实例的统一入口。外部通常通过 NetworkGraph 创建实例，并通过实例属性、事件和方法操作任务、视图、插件状态。

import { NetworkGraph, ViewMode, ScaleMode } from 'bimcc-network-graph'

const graph = new NetworkGraph({
  container,
  tasks,
  columns,
  viewMode: ViewMode.GanttViewer,
  scaleMode: ScaleMode.Month,
  appKey,
  secretKey,
})

实例属性

属性	类型	说明
`options`	`GraphOptions.Definition`	图实例最终配置，已合并默认值
`container`	`HTMLElement`	图容器，来自 `options.container`
`model`	`Model`	任务、连线、层级等数据模型
`view`	`NetGraphView`	主视图实例，负责渲染和视图切换
`hook`	`HookManager`	模块创建钩子管理器
`tooltip`	`Tooltip`	提示框插件实例
`marker`	`Marker`	标记线插件实例
`history`	`HistoryManager`	撤销/重做插件实例
`clipboard`	`ClipboardManager`	剪贴板插件实例
`keyboard`	`Keyboard`	快捷键插件实例
`draggable`	`Draggable`	拖拽插件实例
`mousewheel`	`MouseWheel`	鼠标滚轮插件实例
`toolbar`	`Toolbar`	工具栏插件实例
`chat`	`Chat`	AI 聊天组件实例
`selectLine`	`LinkType \| null`	当前选中的连线
`version`	`string[]`	授权支持的视图版本

配置属性

创建 Graph 时传入的配置会和默认值合并，常用配置如下。

属性	类型	默认值	说明
`container`	`HTMLElement`	必填	图表容器
`appKey`	`string`	必填	授权 appKey
`secretKey`	`string`	必填	授权 secretKey
`tasks`	`Task[]`	`[]`	任务树数据
`columns`	`Column[]`	`[]`	左侧任务表格列配置
`viewMode`	`ViewMode`	-	当前视图模式
`scaleMode`	`ScaleMode`	-	时间刻度模式
`width`	`number`	容器宽度	图宽度
`height`	`number`	容器高度	图高度
`sideWidth`	`number`	`475`	左侧任务表格宽度
`rowHeight`	`number`	`41`	行高
`barHeight`	`number`	`30`	甘特条高度
`autoResize`	`boolean`	`true`	容器变化时自动重渲染
`editable`	`boolean`	`true`	是否允许编辑
`predict`	`boolean`	`true`	是否开启预测能力
`hideRight`	`boolean`	`false`	是否隐藏右侧图形区域
`activeId`	`(number \| string)[]`	`[]`	当前选中任务 id
`scales`	`{ unit: ScaleMode, width: number }[]`	内置刻度	各时间刻度对应列宽
`tooltip`	`boolean \| object`	`{ enabled: true }`	提示框配置
`marker`	`object`	`{ enabled: true }`	标记线配置
`history`	`object`	`{ enabled: true }`	撤销/重做配置
`clipboard`	`object`	`{ enabled: true }`	剪贴板配置
`keyboard`	`object`	`{ enabled: true, global: true }`	快捷键配置
`mousewheel`	`object`	`{ enabled: true }`	鼠标滚轮配置
`draggable`	`object`	`{ enabled: false }`	拖拽配置
`toolbar`	`object`	`{ enabled: true }`	工具栏配置

事件

Graph 继承事件能力，可使用：

graph.on(name, handler, context?)
graph.trigger(name, ...args)

常用事件：

事件名	参数	说明
`graph:ready`	`{ instance }`	图表首次渲染或重置后触发
`graph:click`	`{ e }`	图区域点击
`graph:dblclick`	`{ e }`	图区域双击
`graph:contextmenu`	`{ e }`	图区域右键
`graph:mousewheel`	`{ e }`	图区域滚轮
`task:click`	`taskId`	任务点击
`task:mouseover`	`taskId`	任务鼠标移入
`task:mouseleave`	-	任务鼠标移出
`task:toggle`	`task`	任务展开/收起
`tree:view:scroll`	`flatTaskData, scrollTop`	图形区滚动，同步左侧表格
`cell:added`	`{ prev }`	任务或连线新增
`cell:changed`	`{ prev, next }`	任务更新
`cell:removed`	`{ prev, next }`	任务或连线删除
`batch:start`	`{ name, data }`	批量操作开始
`batch:stop`	`{ name, data }`	批量操作结束
`clipboard:changed`	`{ tasks }`	剪贴板内容变化
`marker:scale`	`date`	动态标记线移动到新日期

示例：

graph.on('cell:added', ({ prev }) => {
  console.log('新增数据', prev)
})

graph.on('graph:ready', ({ instance }) => {
  console.log('图表渲染完成', instance)
})

方法

数据操作

方法	参数	返回	说明
`addTask(task, taskId = 0)`	`Task, number \| string`	`string \| number`	在指定任务后新增任务，并重渲染
`updateTask(taskId, task)`	`number \| string, Task`	`void`	更新任务，并重渲染
`deleteTask(taskId)`	`number \| string`	`void`	删除任务，并重渲染
`addLink(link)`	`LinkType`	`void`	新增连线，并重渲染
`deleteLink(link)`	`LinkType`	`void`	删除连线，并重渲染
`upgradeTask()`	-	`void`	升级当前选中任务
`degradeTask()`	-	`void`	降级当前选中任务
`render()`	-	`void`	手动重渲染当前视图

视图操作

方法	参数	返回	说明
`changeGridColumn(columns)`	`Column[]`	`this`	修改左侧表格列
`changeViewMode(viewMode)`	`ViewMode`	`this`	切换视图模式
`changeScaleMode(scaleMode)`	`ScaleMode`	`this`	切换时间刻度
`addForwardLine(date, text = '今天')`	`string, string`	`this`	添加前锋线
`removeForwardLine()`	-	`void`	移除前锋线
`toggleCriticalPath()`	-	`void`	显示/隐藏关键路径
`showGridScrollBar(show)`	`boolean`	`void`	显示/隐藏左侧表格滚动条样式
`showHideTaskGrid(show)`	`boolean`	`void`	显示/隐藏左侧任务表格
`showHideTaskData(show)`	`boolean`	`void`	显示/隐藏右侧图形区域
`changeTreeLevel(data)`	`any`	`void`	替换任务树数据并重渲染
`changeOptions(field, data)`	`string, any`	`void`	动态修改 `options[field]`
`checkedTargetTask(dataId)`	`[number \| string]`	`void`	设置表格选中任务

方法	返回	说明
`isTooltipEnabled()`	`boolean`	是否启用提示框
`enableTooltip()`	`this`	启用提示框
`disableTooltip()`	`this`	禁用提示框
`toggleTooltip(enabled?)`	`this`	切换提示框状态

Marker

方法	参数	返回	说明
`isMarkerEnabled()`	-	`boolean`	是否启用标记线
`enableMarker()`	-	`this`	启用标记线
`disableMarker()`	-	`this`	禁用标记线
`toggleMarker(enabled?)`	`boolean?`	`this`	切换标记线状态
`getMarker(markerId)`	`string`	`MarkerIns`	获取标记线实例
`addMarker(options)`	`Marker.OptionsBar`	`string`	添加标记线，返回 `markerId`
`updateMarker(markerId, options)`	`string, Marker.OptionsBar`	`void`	更新标记线
`hideShowMarkers(markerId)`	`string`	`void`	显示/隐藏标记线
`removeMarker(markerId)`	`string`	`void`	删除标记线

Marker.OptionsBar：

属性	类型	说明
`date`	`Date`	标记线日期
`text`	`string`	标记线文本
`color`	`string`	标记线颜色
`end`	`Date`	动态标记线结束日期
`interval`	`number`	动态标记线移动间隔

History

方法	参数	返回	说明
`isHistoryEnabled()`	-	`boolean`	是否启用历史记录
`enableHistory()`	-	`this`	启用历史记录
`disableHistory()`	-	`this`	禁用历史记录
`toggleHistory(enabled?)`	`boolean?`	`this`	切换历史记录状态
`undo(options = {})`	`KeyValue`	`this`	撤销
`undoAndCancel(options = {})`	`KeyValue`	`this`	撤销且不进入 redo 栈
`redo(options = {})`	`KeyValue`	`this`	重做
`canUndo()`	-	`boolean`	是否可以撤销
`canRedo()`	-	`boolean`	是否可以重做
`cleanHistory(options = {})`	`KeyValue`	`void`	清空历史记录

Clipboard

方法	参数	返回	说明
`isClipboardEnabled()`	-	`boolean`	是否启用剪贴板
`enableClipboard()`	-	`this`	启用剪贴板
`disableClipboard()`	-	`this`	禁用剪贴板
`toggleClipboard(enabled?)`	`boolean?`	`this`	切换剪贴板状态
`isClipboardEmpty()`	-	`boolean`	剪贴板是否为空
`getTasksInClipboard()`	-	`Task[]`	获取剪贴板任务
`cleanClipboard()`	-	`this`	清空剪贴板
`copy(tasks, options = {})`	`Task[], Clipboard.CopyOptions`	`this`	复制任务
`cut(tasks, options = {})`	`Task[], Clipboard.CopyOptions`	`this`	剪切任务
`paste(taskId, graph = this, options = {})`	`number \| string, Graph, Clipboard.PasteOptions`	`Task[]`	粘贴任务

Keyboard

方法	参数	返回	说明
`isKeyboardEnabled()`	-	`boolean`	是否启用快捷键
`enableKeyboard()`	-	`this`	启用快捷键
`disableKeyboard()`	-	`this`	禁用快捷键
`toggleKeyboard(enabled?)`	`boolean?`	`this`	切换快捷键状态
`bindKey(keys, callback, action?)`	`string \| string[], Keyboard.Handler, Keyboard.Action?`	`this`	绑定快捷键
`unbindKey(keys, action?)`	`string \| string[], Keyboard.Action?`	`this`	解绑快捷键

内置快捷键：

快捷键	说明
`Delete`	删除选中任务或连线
`Tab`	任务降级
`Shift+Tab`	任务升级
`Ctrl+c`	复制选中任务
`Ctrl+x`	剪切选中任务
`Ctrl+v`	粘贴任务
`Ctrl+z`	撤销
`Ctrl+Shift+z`	重做

Draggable

方法	参数	返回	说明
`isDragEnabled()`	-	`boolean`	是否启用拖拽
`enableDrag()`	-	`this`	启用拖拽
`disableDrag()`	-	`this`	禁用拖拽
`toggleDrag(enabled?)`	`boolean?`	`this`	切换拖拽状态

简单示例

const id = graph.addTask({
  parent_id: 0,
  name: '新增任务',
  start: new Date(),
  end: new Date(),
  duration: 1,
  progress: 0,
  type: 'task',
  children: [],
})

graph.updateTask(id, {
  name: '更新后的任务',
})

graph.changeViewMode(ViewMode.PdmViewer)
graph.changeScaleMode(ScaleMode.Week)

const markerId = graph.addMarker({
  date: new Date(),
  text: '今日',
  color: '#00B3B2',
})

graph.removeMarker(markerId)

Graph API 简介 ​

实例属性 ​

配置属性 ​

事件 ​

方法 ​

数据操作 ​

视图操作 ​

Tooltip ​

Marker ​

History ​

Clipboard ​

Keyboard ​

Draggable ​

简单示例 ​

Graph API 简介

实例属性

配置属性

事件

方法

数据操作

视图操作

Tooltip

Marker

History

Clipboard

Keyboard

Draggable

简单示例