API

creator

creator 函数 可以用于 生成各种 gojs 实例。

creator 参数：

creator({
  name: goType, // gojs 实例类型 (如 go.Part / go.TextBlock 等)
  props: {}, // gojs 实例的配置项
  children: [] // gojs 实例的子实例
})

使用creator函数 与 gojs原版的对比

// gojs 官方写法：
$(go.Node, go.Panel.Position,
  { background: 'lightgray' },
  $(go.TextBlock, 'node1', { background: 'lightgreen' })
)

// 使用creator
creator({
  name: go.Node,
  props: {
    type: go.Panel.Position, 
    background: 'lightgray'
  },
  children: [
    creator({
      name: go.TextBlock,
      props: {
        text: 'node2',
        background: 'lightgreen'
      }
    })
  ]
})  

虽然 使用creator 函数 生成节点时 代码比官方写法复杂，但是 creator 结构更清晰，在构建比较复杂结构的节点模板时，creator 函数更有优势。

creator 的 专属配置：

在 creator() 函数中 的 “props”配置中，预设了以下几个专属的配置项，

• $bindings：数据绑定
• $events： 绑定事件
• $gray： 绑定置灰状态（在预设节点模板中使用，绑定主题中的置灰效果）
• $selected：绑定选中状态（在预设节点模板中使用，绑定主题中的选中效果）
• $disabled：绑定禁用状态（在预设节点模板中使用，绑定主题中的禁用效果）
• $hover：绑定鼠标经过状态（在预设节点模板中使用，绑定主题中的鼠标经过效果）

上述所提到的主题 来自于 import {normal} from '$ui/go/template/theme'

import {theme} from '$ui/go/template/theme'
creator({
  name: go.Node,
  props: {
    ......,
    $gray: { 
      opacity: theme.grayOpacity
    },
    $hover: {
      opacity: theme.hoverOpacity
    },
    $disabled: {
      opacity: theme.disabledOpacity
    },
    $selected: {
      opacity: theme.selectedOpacity
    },
    $events,
    $bindings
  }
})

nodeTemplate 基础节点模板

mygo 关系图中的节点模板 基础构造函数, 继承于creator，参数为 “options”(配置) 和 “theme”(主题)

options 的配置

配置名	说明	类型
props	节点（$(go.Node, {...})）的全局配置，可以覆盖其他配置	object
wrapper	Node节点下面第一个（展示为容器）子元素的配置， 用于配置背景边框等	object
tooltip	配置是否显示提示语	object
lock	配置是否	object/boolean
tags	配置是否显示标签	object/array
badge	配置是否显示数字提示	object
children	给节点添加子元素	array
$events	给节点绑定事件	object
$bindings	给节点绑定数据	array/object

theme 主题

const normal = {
  // 背景颜色
  fill: 'rgba(124,129,143,0.3)',
  // 边框样式
  stroke: '#7c818f',
  // 文本/icon颜色
  color: '#7c818f',
  // 形状外的文本颜色
  textColor: '#ffffff',
  strokeWidth: 2,
  opacity: 1,
  hoverOpacity: 1,
  grayOpacity: 0.25,
  selectedOpacity: 1,
  // 边框厚度
  disabledOpacity: 0.1,
  // 默认图标
  geometryString: defaultIcon,
  // 默认图片
  imageSource: defaultImage,
  // 标签颜色
  tags: ['#0099cc', '#ffb609', '#ef5350', '#00d156', '#f431ba'],

  selectedFill: 'rgba(64,158,255,0.1)',
  selectedStrokeWidth: 2,
  selectedStroke: '#409eff'
}