Eigen-gojs NPM

eigen-gojs

基于gojs封装的编辑器组件，参考AntV g6-editor设计，目前仅提供react版本

引用方式及使用方法

import React, { Component } from 'react'
import { GojsEditor } from 'eigen-gojs'

class Demo extends Component {
  render() {
    return <GojsEditor
      width={int}
      height={int}
      page={object}
      palette={object}
      detail={object}
      toolbar={object}
      onEvent={function}
      name={string}
    />
  }
}

props(*为必填项)

名称	类型	含义
*width	int	编辑器宽度
*height	int	编辑器高度度
*page	object	主视图参数，用于初始化节点信息及页面布局等
palette	object	左侧边栏参数，用于定义被拖拽节点信息等，为空则不显示
detail	object	右侧自定义业务区域参数，该区域用于展示节点、连线等信息，为空则不显示
toolbar	object	工具栏参数，该区域用于展示默认工具及自定义业务，为空则不显示
onEvent	function	事件响应函数，入参为(name, data)，其中name值为事件名，如page.initReady/page.selectionDeleted/page.click/page.rightClick/page.ChangedSelection/palette.click/palette.rightClick，data为事件参数值
nodeTemplateMap	function	自定义节点类型，入参为gojsprops：(props)
name	string	自定义 Eigen-editor的名稱（用於在一個頁面有多個diagram)

page 主视图

名称	类型	含义
nodeDataArray	array	初始化节点数据，后文进行详细介绍
linkDataArray	array	初始化连线数据，后文进行详细介绍
toolTip	function	节点提示函数，输出为string
getToolTip	function	自定义节点提示函数，返回reactDom
inputToolTip	function	输入节点提示函数，输出为string
outputToolTip	function	输出节点提示函数，输出为string
icons	array	长度为2，分别为节点preIcon和icon的点击响应事件，目前仅支持click，如{click:(nodeData)=>{...}}, {click:(nodeData)=>{...}}
layout	string	节点布局结构，默认为自动，若为'tree'则为树形布局结构，需配合nodeDataArray格式
allowMove	bool	是否允许拖动节点，默认为true
allowDelete	bool	是否允许删除节点，默认为true
allowZoom	bool	是否允许放大缩小，默认为false
contentAlignment	string	内容自动排列对齐方式，每次更新布局后会重新排列，可选值为Default\Center等...可选值请参考go.Spot.[Constants]，默认值为Center，如果不希望自动排列，可设置为Default，此时画布可实现拖拽功能
showExpanderButton	bool	是否显示展开/缩起按钮，nodeDataArray为树形结构方有效
direction	int	节点排列方式，默认为纵向direction=0，若为横向则节点排列方式，默认为纵向direction=90
autoLinkValidation	function	是否允许初始化自动连线校验函数，入参为(inputNode, input, ouputNode, ouput)
linkValidation	function	是否允许手动连线校验函数，入参为(inputNode, input, ouputNode, ouput)
onDragChange	function	从palette拖动节点到page的响应函数，入参为(dragData)
getMenu	function	右键构造函数，输出为reactDom
diagram	function	自定义初始化diagram，入参为gojsprops：(props)
nodeTemplate	function	自定义默认节点，入参为gojsprops：(props)
linkTemplate	function	自定义节点类型，入参为gojsprops：(props)

其中gojsprops如下

名称	类型	含义
onEvent	function	触发onEvent事件，具体参数请参考上文中props的onEvent
store	object	包含palette、page、toolbar、detail对应的props
setStore	function	gojs回调，使用方式为：this.setStore('page' \| 'palette' \| 'toolbar' \| 'detail', { key: value })

palette 左侧边栏

名称	类型	含义
*nodeDataArray	array	节点数据，后文进行详细介绍
linkDataArray	array	连线数据，后文进行详细介绍
width	int	宽度
layout	string	布局方式，layout='tree'为树形布局
getMenu	function	右键构造函数，输出为reactDom

detail 定义业务区域

名称	类型	含义
width	int	业务区域宽度
navHeight	int	缩略图高度，可通过设置该值为0隐藏缩略图
template	reactDom	定义业务区域组件，返回react节点

toolbar 工具栏

名称	类型	含义
defaultMenus	array	显示默认的工具栏，不设置默认显示全部，默认有：'undo','redo','paste','copy','delete','hideLeft','hideRight','hideBoth','zoomToFit', 'decreaseZoom', 'increaseZoom','search', 'select'
menus	array	定义业务区域组件，返回react节点数组，长度为3，第1~2分别为默认搜索栏前后区域的自定义组件，第3个为隐藏菜单自定义组件，为null则不显示

nodeDataArray 节点数组

分两种格式：默认和树型(tree)

名称	类型	含义
*key	string\int	用于标识节点的id
*name	string\int	节点名称
preIcon	string	节点名称前面的icon，可用值为success/warn/error/loading/plus/minus/upgrade/swap
icon	string	节点名称后面的icon，可用值同上
highlight	bool	用于高亮当前节点
bgColor	string	背景颜色值，同background-color，优先级大于高亮和选中属性
color	string	字体颜色，同color
parent	string\int	父节点key值，适用于只有一个父节点的树形结构，默认初始化时自动连线，与parents不能同时出现
parents	array	所有父节点的key值数组，适用于多个父节点的树形结构，默认初始化时自动连线，与parent不能同时出现
input	array	输入节点，下文进行详细介绍
output	array	输出节点，下文进行详细介绍
category	string	自定义类型，跟nodeTemplateMap搭配使用

eg:

[
  { key: '1', name: '1', parents: ['5'] },
  { key: '2', name: '2', preIcon: 'plus' },
  { key: '3', name: '3', parents: ['2'] },
  { key: '4', name: '4', parents: ['3'] },
  { key: '5', name: '5', parents: ['4'] },
  { key: '6', name: '6', parents: ['3', '4'] },
  { key: '7', name: '7', parents: ['6'], icon: 'minus' }
  { key: '7', name: '7', parents: ['6'], icon: 'minus', category: 'mind' }
]

input/output 输入输出节点

名称	类型	含义
type	string	用于校验两个input/output是否可以相连，若自定义linkValidation则该判断失效
value	any	节点值

linkDataArray 连线数组

一般不需要设置该值，组件会自动连线nodeDataArray中parent指定的节点分两种格式：默认和树型(tree)

名称	类型	含义
*from	string\int	输入节点key值
*to	string\int	输出节点key值
*fromPort	string\int	输入input的id
*toPort	string\int	输出output的id

nodeTemplateMap 自定义节点类型

对于默认节点类型不适用的情况下可以自行定义节点，返回为nodeTemplate数组，具体含义请参考 GOJS官网说明。特别注意：默认右键需要在对应节点增加 contextMenu 属性，使用方式如下：

eg:

import { config } from 'eigen-gojs'
const nodeDataArray = {
  { category: 'mind', ... }
}
...
page.nodeTemplateMap = (props) => {
  return [{
    $(go.Node, "Spot",
      contextMenu: config.contextMenu(props, 'page-rightClick'),
      ...
    )
  }]
}

eggo 全局对象

为了便于管理gojs对象，我们将部分对象挂载到window下：window.eggo，如果 GojsEditor 有了屬性name，将部分对象挂载到window下：window.eggosname 去使用用户可以通过这些对象直接操作gojs对象

注意: 使用nodeTemplate 自定义节点类型需要加上給所有id字段加上defalut 例如：eggo-page-diagram-default

名称	类型	含义
pageDiagram	object	主视图gojs对象
paletteDiagram	object	左侧边栏gojs对象
removePageLinkData	function	移除连线，同eggo.pageDiagram.model.removeLinkData
updatePageDiagram	function	更新主视图gojs对象数据，入参为(nodeKey,data)其中nodeKey为节点key，data为该节点需要更新的值