GoJS 画布常用API

Face
490 阅读4分钟

画布操作

作用api
获取当前画布的 jsonmyDiagram.model.toJson()
加载 json 刷新画布myDiagram.model = go.Model.fromJson(model)
删除选中节点或线myDiagram.commandHandlr.deleteSelection()
获取选中的节点或线
myDiagram.selection		- 用例获取选中的节点或线
 var nodeOrLinkList = myDiagram.selection
 nodeOrLinkList.each((node) => {
        console.info(node.data)
    })
- 获取第一个选中的节点或线
var nodeOrLinkFirst = myDiagram.selection.first()
获取画布所有节点对象
myDiagram.nodes		var nodes = myDiagram.nodes
// 遍历输出节点对象
nodes.each((node) => {
    console.info(node.data.text)
})

获取并操作选中元素也可以在监听选中项进行修改：

// 监听选中项
      that.myDiagram.addDiagramListener("ChangedSelection", function (e, i) {
        // console.log("重新选择了", e.myDiagram.lastInput.viewPoint);
        // console.log("重新选择了", e.Lr.ea);
        that.selectNode = [];
        that.selectLink = [];
        that.myDiagram.selection.each(function (part) {
          if (part instanceof go.Node) {、
            /* 获取所有的 Node 节点 */
            that.selectNode.push(part.data);
          } else if (part instanceof go.Link) {
            /* 获取所有的 link 连线  */
            that.selectLink.push(part.data);
          }
        });
      });

节点操作

作用API
添加节点myDiagram.model.addNodeData(node)
删除节点myDiagram.model.removeNodeData(node)
选中单个节点(不能批量选中)myDiagram.select(node)
更改节点属性myDiagram.model.setDataProperty(node,
"color",'#000")
(参数对应：要修改的节点、要修改的属性名、修改后的属性值)
根据节点数据对象更改节点属性
myDiagram.model.
updateTargetBindings
(node)		var node = myDiagram.model.
findNodeDataForKey('nodeKey')
  node.text = 'newText'
  node.color = 'pink'
  myDiagram.model.updateTargetBindings(node)
获取节点对象let node = myDiagram.findNodeForKey('key')
获取节点Datalet nodeData = myDiagram.model.
  findNodeDataForKey(‘key')
批量删除节点
myDiagram.model.
 removeNodeDataCollection
(nodes)		let removeNodes = []
let removeNode0 = myDiagram.model.
  findNodeDataForKey('key0')
let removeNode1 = myDiagram.model.
  findNodeDataForKey('key1')
removeNodes.push(removeNode0)
removeNodes.push(removeNode0)
myDiagram.model.removeNodeDataCollection(removeNodes)

  • 批量删除节点

    let removeNodes = []
let removeNode0 = myDiagram.model.findNodeDataForKey('key0')
let removeNode1 = myDiagram.model.findNodeDataForKey('key1')
removeNodes.push(removeNode0)
removeNodes.push(removeNode0)
myDiagram.model.removeNodeDataCollection(removeNodes)

  • 模糊获取节点 (版本 1.68 以上)：

    myDiagram.findNodesByExample(data)
/* 
匹配方式默认为===运算符进行比较。
/abc/ 匹配包含“abc”的任何字符串
/abc/i 匹配包含“abc”的任何字符串，忽略大小写
/^no/i 匹配任何以“no”开头的字符串，忽略大小写
/ism$/匹配任何以“ism”结尾的字符串
/(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串
要查询的值类型区分数字和字符串：比如json中是`90`,写成 90 会查询
*/
let data = {};
   data.text="设计";
// data.text=/设计/;
// data.text=/设计/i;
// data.text=/^设计/;
// data.text=/设计$/;
// data.text=/(勘|察)设计/;
let nodes = myDiagram.findNodesByExample(data);
nodes.iterator.each(function (node) {
    console.log(node.data);
});

线

  • 添加线：myDiagram.model.addLinkData(linkData)

  • 删除线：myDiagram.model.removeLinkData(linkData)

  • 批量删除线：

    ｛ Array | iterator } removeLinks
removeLinkDataCollection(removeLinks)
/ * 实现 */
let removeLinks = []
// 拿到节点对象
let node = myDiagram.findNodeForKey("key")
// 获取节点所有线
node.findLinksConnected().each((link) => {
    removeLinks.push(link.data)
})
myDiagram.model.removeLinkDataCollection(removeLinks)

  • 模糊获取线 (1.68版本以上)：

    myDiagram.findLinksByExample(data)
// 匹配方式和模糊获取节点的规则一致
/* 实现 */
// 值区分数值和字符串，‘2.18’ 和 2.18 不同
let links = myDiagram.findLinksByExample({from:'1',to:'2'})
links.iterator.each((link) => {
    console.info(link.data)
})

  • 更改属性值：myDiagram.model.setDataProperty(linkData, 'color', 'green')

  • 获取节点的线：

    {string | null =} PID 端口ID
findLinksConnected(PID)
/* 实现 */
let node = myDiagram.findNodeForKey('key')
node.findLinksConnected().each((link) => {
    console.info(link.data)
})

  • 获取进入节点的线：

    {string | null =} PID 端口ID
findLinksInto(PID)
/* 实现 */
let node = myDiagram.findNodeForKey('key')
node.findLinksInto().each((link) => {
    console.info(link.data)
})

  • 获取从节点出来的线：

    {string | null =} PID 端口ID
findLinksOutOf(PID)
/* 实现 */
let node = myDiagram.findNodeForKey('key')
node.findLinksOutOf().each((link) => {
    console.info(link.data)
})

  • 获取两个节点之间的线

    {node } othernode B节点对象
{string | null =} PID 端口ID
{string | null =} otherPID B节点端口ID
findLinksTo(othernode, PID, otherPID)
/* 实现 */
let node0 = myDiagram.findNodeForKey('key0')
let node1 = myDiagram.findNodeForKey('key1')
node0.findLinksTo(nodeB).each((link) => {
    console.info(link.data)
})

树节点

  • 找节点的所有父祖节点，包括该节点

    node.findTreeParentChain()
/* 实现 */
node.findTreeParentChain().each((pNode) => {
    console.info(pNode.data)
})

  • 找节点的所有子孙节点，包括该节点

    node.findTreeParts()
/* 实现 */
node.findTreeParts().each((sNode) => {
    console.info(sNode.data)
})

  • 找节点的父

    node.findTreeParentNode()
/* 实现 */
let parentNode = node.findTreeParentNode()

  • 找节点的子

    node.findTreeChildrenNodes()
/* 实现 */
node.findTreeChildrenNodes().each((childNode) => {
    console.info(childNode.data)
})

画布常用增删改查API

  • 添加画布元素

    // 添加节点
addNodeData(NodeData)
// 添加连线
addLinkData(LinkData)

/* 实现 */

  // 添加节点
 let node = {
    key: id,
    id: id,                   
    color: "#fff",
    name: name,
    color2: "#000",
    text: type,
    loc:location,
    /* bold、italic、fontsize、fontFamily、font 是我设置的存储字体属性 */
    bold: "normal",
    italic: "normal",
    fontsize: 12,
    fontFamily: "Segoe UI,sans-serif",
    font: {
      bold: "normal",
      italic: "normal",
      fontSize: 12,
      fontFamily: "Segoe UI,sans-serif",
    },
  };
this.diagram.model.addNodeData(node);

  // 添加连线
  let link = {
          from: from,
          to: to,
          text: "text",
          id:id,
          key:key
      };
  this.diagram.model.addLinkData(link);

  • 删除画布元素

      // 删除节点
removeNodeData(nodeData)
  // 删除连线
removeLinkData(linkData)
  /* 实现 */
  // 通过节点的 key 拿到节点对象并删除
  let node = this.diagram.model.findNodeDataForKey(this.nodeFrom.key);
  this.diagram.model.removeNodeData(node);

  // 通过事件获取到要删除的连线 id，查找并删除
  this.association.forEach((item) => { /* this.association 是我当前画布的所有连线对象 */
      if (item.id === this.checkId) { /* 查找要删除的连线 */
          this.diagram.model.removeLinkData(item);
      }
  });

  // 也可以通过获取画布选中对象进行删除, 初始化 GoJS的时候绑定选中项监听
  // 监听选中项
  let that = this
  this.diagram.addDiagramListener("ChangedSelection", function (e, i) {
      console.log("重新选择了", e);
      that.selectNode = [];
      that.selectLink = [];
      that.diagram.selection.each(function (part) {
          if (part instanceof go.Node) {
              that.selectNode.push(part.data); /* 获取当前选中节点 */
          } else if (part instanceof go.Link) {
              that.selectLink.push(part.data); /* 获取当前选中连线 */
          }
      });
  })
  // 然后可以对选中执行要执行的操作

  • 更新画布元素

    setDataProperty(data，propName，val)
// 参数: 
  //         data：NodeData或LinkData对象
  //        propName：要更新的属性名
  //        val：要更新的属性值

/* 实现 */
  // 拿到节点
const nodeData = myDiagram.model.findNodeDataForKey('key') 
// 对元素对象的属性更改的时候，如果没有该属性则添加这个属性
myDiagram.model.setDataProperty(nodeData, 'text', '2333')

  • 查询画布元素

    // 通过 key 获取节点
findNodeDataForKey('key')
// 通过 linkData 模糊查询匹配线集合
findLinksByExample(linkData)

/* 实现 */
const nodeData = myDiagram.model.findNodeDataForKey('key')

// 根据 linkData，模糊匹配线集合，linkData 可以为线的部分属性
let linkData = {
    from:'1',
    to:2
}
const links = myDiagram.model.findLinksByExample(linkData)
// 遍历输出所有线的数据对象
while(links.next()){
    console.info(links.value.data)
}
avatar
文章
阅读
粉丝