可视化—gojs 超多超实用经验分享(二)

想了想序号还是接上一篇分享的的序号接着写，如果在本文中没有获取需要的答案，可以移步去看看上一篇的分享。gojs 超多超实用经验分享(一)

目录

• 22. 指定线段连接到节点的某一个特定的接口上
• 23. 给节点设置连线端口spot
• 24. 设置折叠面板及部分默认样式
• 25. itemArray 抽离封装引用，面板中设置表格，并给表格设置边框
• 26. 设置渐变色
• 27. 与端口相邻的链路段的长度
• 28. 设置/关闭选中效果
• 29. 画布垂直水平居中
• 30. 将某一个节点聚焦至画布中心
• 31. button使用和修改默认样式

22. 指定线段连接到节点的某一个特定的接口上

如果不指定链接点的话，gojs会自动规划一条路径，具体算法还不是很清楚，总之大部分时候按默认的算法规划出来的路径，还是比较美观的，但是当节点比较多且关系复杂的时候，可能会出现几条线路并不是很美观，需要自己动态的调整一下，看下两种写法：

第一种：所有节点均指定相同的出入连接点，关键属性:fromSpot、toSpot

可选值 :Top、 Bottom、Right 、Left 是从节点对应方向的center开始连接， 也可以指定角: TopRight、 TopLeft、BottomRight、BottomLeft

myDiagram.linkTemplate = $(
  go.Link,
  {
    // routing, corner, curve....等属性
    fromSpot: go.Spot.Top,  // 从上出
    toSpot: go.Spot.Bottom  // 从下入
  },
);

第二种： 根据不同的属性，动态绑定，关键属性:fromSpot、toSpot,关键方法：go.Binding

myDiagram.linkTemplate = $(
  go.Link,
  {
    // routing, corner, curve....等属性
  },
  new go.Binding("toSpot",'linkto',()=>go.Spot.Top), // 回调函数 返回具体连接点位置
);
var linkDataArray = [
  { from: "A", to: "B",linkto:'Top'},  // 属性名随便，值也随便，上边回调判断的是，linkto字段有没有值
  { from: "B", to: "C",,linkto:'Top'},
];

23. 给节点设置连线端口spot

myDiagram.nodeTemplate =$(
  go.Node,
  'Auto',
  $(
    go.Shape,
    'RoundedRectangle',
    { fill: '#eee', parameter1: 5, opacity: 0.7, stroke: '#eee' },
  ),
   //  其他Panel / Shape / TextBlock 零件配置
  $(go.Panel, 'Vertical', { alignment: go.Spot.TopLeft }, makePort('1')),
  $(go.Panel, 'Vertical', { alignment: go.Spot.TopRight }, makePort('2'))
)

nodeDataArray = [{ key: 'A' },{ key: 'B' }]
linkDataArray = [{ from: 'A', to: 'B', frompid: '1', topid: '2'}]
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
myDiagram.model.linkFromPortIdProperty = 'frompid'   // 1
myDiagram.model.linkToPortIdProperty = 'topid'  // 2

// 创建端口
function makePort(name) {
  var port = $(go.Shape, 'Rectangle', {
    fill: 'transparent',
    stroke: null,
    desiredSize: new go.Size(8, 8),
    portId: name,
    toMaxLinks: 3,
    cursor: 'pointer'
  },
  new go.Binding('fromSpot', 'xxx', () => go.Spot.Right),
  new go.Binding('toSpot', 'xxx', () => go.Spot.Left)
)

  var panel = $(go.Panel, 'Horizontal', { margin: new go.Margin(8, 0) })
  panel.add(port)
  return panel
}

24. 设置折叠面板及部分默认样式

$('PanelExpanderButton', 'COLLAPSIBLE', {
  alignment: go.Spot.Right,
  _buttonExpandedFigure: 'M0 0  L8 0',
  _buttonCollapsedFigure: 'M0 0 L8 0 M4 -4 L4 4',
  'ButtonBorder.fill': '#fff',
  'ButtonBorder.stroke': '#fff',
  width: 15,
  height: 15,
  margin: 3,
})

25. itemArray 抽离封装引用，面板中设置表格，并给表格设置边框

// 表格数据，用于下方面板中
var fieldTemplate = $(
  go.Panel,
  'TableRow',
  $(
    go.TextBlock,
    {
      margin: new go.Margin(3, 5),
      column: 1,    // 表格第一列
      font: '13px sans-serif',
      alignment: go.Spot.Left
    },
    new go.Binding('text', 'name')
  ),
  $(
    go.TextBlock,
    {
      margin: new go.Margin(3, 5),
      column: 2,  // 表格第二列
      font: 'bold 13px sans-serif',
      alignment: go.Spot.Left
    },
    new go.Binding('text', 'age'),
  )
);
// 表格面板
$(
  go.Panel,
  'Table',
  {
    name: 'COLLAPSIBLE',
    stretch: go.GraphObject.Horizontal,
    background: 'white',
    defaultAlignment: go.Spot.Left,
    itemTemplate: fieldTemplate,
    defaultColumnSeparatorStroke: '#ccc',    // 列边框
    defaultRowSeparatorStroke: '#ccc'  // 行边框
  },
  new go.Binding('itemArray', 'dataList')
)

26. 设置渐变色

const pinkbluegrad= $(go.Brush, 'Linear', { 0: '#F48FB1', 1: '#90CAF9' })  // 粉蓝渐变
$(go.Shape, "Rectangle",{ desiredSize: new go.Size(30, 30), fill: pinkbluegrad, margin: 5 }),

27. 与端口相邻的链路段的长度

myDiagram.linkTemplate = $(
  go.Link,
   {
    // routing ,corner ,... ,
    fromEndSegmentLength: 40,
    toEndSegmentLength:40
   })

28. 设置/关闭选中效果

选中效果，就是节点外层有一层蓝色的边框， 选中的样式也是可以自定义的，详细可以查看下文档，因为我没有用到，所以就没进行记录。

myDiagram.select(myDiagram.findNodeForKey(key))   // 设置选中节点
$( go.Node, 'auto', { selectionAdorned: false})   // 关闭选中节点

29. 画布垂直水平居中

尽量能够保证在画布init之后，在执行，可以在外层加一个定时器

myDiagram.alignDocument(go.Spot.Center, go.Spot.Center)
myDiagram.contentAlignment = go.Spot.Default
myDiagram.commandHandler.scrollToPart(diagram.findNodeForKey(key))

30. 将某一个节点聚焦至画布中心

myDiagram.commandHandler.scrollToPart(myDiagram.findNodeForKey(key))

31. button使用和修改默认样式

还有更多的自定义样式，可以去button.js源码中查看。

$(
   'Button',
    {
       'ButtonBorder.fill': 'white',
       'ButtonBorder.stroke': 'white',
       _buttonFillOver: '#E0E0E0',
       _buttonStrokeOver: '#E0E0E0',
       cursor: 'pointer',
       maxSize: new go.Size(100, NaN),
       minSize: new go.Size(60, NaN),
        click: ()=>{}  // 建议单独抽离为一个函数
    },
    $(go.TextBlock, new go.Binding('text'))
),