# 面板节点模板工具函数

# 使用场景

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

# 安装命令

npm run widgets go-panel-node

执行命令后，工具生成在项目的 ".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 配置

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

参数	说明	类型	可选值	默认值
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 区域可以设置为默认显示且不可隐藏，可以用作节点数据展示的补充布局。

# more的特殊配置参数

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

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

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

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

# 使用案例

侦查组织结构图例：

# panel-node.js 源码

← 列表选择器图表类插件集合1 →