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.eggos[name] 去使用用户可以通过这些对象直接操作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为该节点需要更新的值

demo

请查看demo.js