# 面板节点模板工具函数

# 使用场景

扩展gojs 的使用场景,使gojs 节点能够展示更多节点信息

# 安装命令

npm run widgets go-panel-node
1

执行命令后,工具生成在项目的 ".my/widgets/go-panel-node" 路径下; 有个“panel-node.js”文件, 是面板节点生成的工具函数。

# 面板节点结构

形状节点元素构成示意图

# 面板节点构造函数配置项

panelNode({
  panel: {
    // 面板节点全局配置
  },
  header: {
    // 面板头部区域配置
  },
  body: {
    // 主体配置
    image: {
      // 主体左侧图片配置
    },
    info: {
      title: {
        // 主体标题配置 
      },
      detail: {
        // 主体内容配置
      }
    },
    more: {
      // 更多区域内容配置
      detail: {
        // 更多展示内容配置
      }           
    }
  },
  footer: {
    // 面板底部区域配置  
  },

  others: [......], // 其他元素

  // ----继承nodeTemplate 函数的 其他快捷配置项----
  tooltip: {}, // 提示 
  lock: {}, // 锁定
  tags: {}, // 标签
  badge: {}, // 数字提示
  $bindings: [] // 数据绑定
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 常规使用

# 色彩配置

根据 panel、 info.title、 info.detail 中的背景与字体颜色对面板元素进行颜色的修改配置

# Panel节点通用配置

panelNode({          
  panel: { 
    width: 300,
    fill: '#061178', // 面板背景颜色
    sideWidth: 0 // 左侧图片宽度设置为0 
  }
}) 
1
2
3
4
5
6
7

# panelNode的特殊配置参数

参数 说明 类型 可选值 默认值
width 面板节点宽度 Number - 200
fill 面板节点背景颜色 String - white
sideWidth 定义面板内 左侧图片区域宽度 Number - 80
bg 定义面板背景图形的参数(go.Shape的配置) Object - -
expandBtn 节点树的展开按钮 Object / Boolean - -

sideWidth 左侧图片宽度 可以在panel的‘sideWidth’中预设置,默认为100。也可以读取 body.image 内的 “width” 来控制图片宽度(取最大值)。 如果 sideWidth = 0 且 不配置 body.image, 则不显示图片

# 其他节点配置:

panel支持其他 gojs 中的 graphObject 配置

# Header 区域配置

panelNode({          
  panel: {...},
  header: {
    textKey: 'header',
    fill: '#030852',
    font: 'bold 16pt sans-serif',
    color: 'white',
    tools: []
  }
}) 
1
2
3
4
5
6
7
8
9
10

# Header的特殊配置参数

参数 说明 类型 可选值 默认值
textKey 面板节点宽度 Number - 200
fill 面板节点背景颜色 String - white
font 定义面板内 左侧图片区域宽度 Number - 80
color 头部字体颜色 Object - -
tools 工具按钮列表 Array - -
tools.icon 按钮icon, 为svg path 的字符串 String - -
tools.icon 按钮颜色 String - -
tools.cb 按钮点击回调函数, 参数为 e, obj(gojs的节点实例) Function - -
tools.name 按钮名称 String - -

# Body 区域配置

Body 分为三大模块: image / info / more

# Body.image 图片模块

  • body.image 为Body 中的 图片配置项,可以是一个函数(函数为自定义图片)
  • body.image 的宽度 以 panel.sideWidth 和 image.width 中的最大值来定义

# image的特殊配置参数

参数 说明 类型 可选值 默认值
sourceKey 对应数据内的图片url字段 String - -
width 图片宽度 Number - 80
height 图片高度 Number - -
stroke 边框颜色 String - -
isRight 控制图片放右边 Boolean - 200

# Body.info 内容模块

内容模块分为 “title” 和 “detail” 两个子模块

# Body.info.title

# 特殊配置参数

参数 说明 类型 可选值 默认值
titleKey 标题对应节点数据的字段 String - -
subTitleKey 副标题对应节点数据的字段 String - -
titleProps 标题文字(textBlock)的配置 Object - -
subTitleProps 副标题文字(textBlock)的配置 Object - -

# Body.info.detail

面板节点中显示数据内容的区域。数据以表格布局形式展示。 info 中的detail 可以为函数形式, 支持自定义生成数据显示内容。

# detail的特殊配置参数

参数 说明 类型 可选值 默认值
dataKey 对应节点数据的内容字段 String - -
column 数据展示列数 Number - -
color 内容字体颜色 String - -
contentTemplate 内容模板函数 Function - -

# dataKey 对应数据格式

detail 模块 渲染的 数据必须为一个对象数组,数据格式如下:

  • label: [string] 字段数据标题
  • value: [string] 字段数据内容
  • isRow: [boolean] 是否占满整行

# Body.more

描述: more 模块是 body区域中 "info"内容 后面的补充内容区域。

  • more 默认提供切换展示按钮,可以切换显示隐藏
  • more 区域可以设置为默认显示且不可隐藏,可以用作 节点数据展示的补充布局。

# detail的特殊配置参数

参数 说明 类型 可选值 默认值
hideButton 是否显示切换按钮 Boolean true/false true
buttonColor 按钮颜色 String - -
defaultShow 区域是否默认显示 Boolean - false
detail 内容模板配置,同 body.info.detail - -

# Footer区域配置

Footer 是 配置面板底部的GraphObject 的配置参数,在Body区域外面。

Footer的参数比较简单,只保留了 fill (背景颜色) 和 content(内容渲染函数) 两个。这是为了尽可能保留 底部内容 的自由度

主要是开发者累了,不想写了。还是你们自己来吧。

参数 说明 类型 可选值 默认值
fill 底部背景颜色 String - -
content 内容生成函数 Function - -

content 内容生成函数 需要返回一个gojs的 GraphObject 实例 (例如 go.Panel 或 go.Shape )

# 其他额外功能

# panel.expandBtn 树拓展按钮

在 panel配置(面板的全局配置)下有一个 “expandBtn”的 配置,支持 Object 和 Boolean 类型。 用于控制 节点是否显示 树展开按钮

# TreeExpandButton 的参数:

{
  // set the two additional properties used by "TreeExpanderButton"
  // that control the shape depending on the value of Node.isTreeExpanded
  "_treeExpandedFigure": "TriangleUp",
  "_treeCollapsedFigure": "TriangleDown",
  // set properties on the icon within the border
  "ButtonIcon.fill": "darkcyan",
  "ButtonIcon.strokeWidth": 0,
  // set general "Button" properties
  "ButtonBorder.figure": "Circle",
  "ButtonBorder.stroke": "darkcyan",
  "_buttonStrokeOver": "darkcyan",
  alignment: go.Spot.Bottom, 
  alignmentFocus: go.Spot.Top
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Others

Others 是个数组,里面元素为gojs 的 graphObject

# tooltip lock tags badge $bindings

panelNode() 方法是基于 nodeTemplate() 函数生成的节点模板,因此 支持 以上几个 快捷配置参数

"nodeTemplate()" 为 "import {nodeTemplate} from '$ui/gojs/template/nodes'", 是 myGo 组件中默认的节点模板构造函数。

# 使用案例

侦查组织结构图例:

# panel-node.js 源码