首页 > 其他分享 >gojs常用API

gojs常用API

时间：2023-11-25 19:12:11浏览次数：29  
标签：node 常用 myDiagram var API go gojs data 节点

gojs常用API

 

操作类API：

添加节点：

myDiagram.model.addNodeData(node);
var node = {};
    node["key"] = "节点Key";
    node["loc"] = "0 0";//节点坐标
    node["text"] = "节点名称";
myDiagram.model.addNodeData(node);

删除选中节点：

myDiagram.commandHandler.deleteSelection();
if (myDiagram.commandHandler.canDeleteSelection()) {
    myDiagram.commandHandler.deleteSelection();
    return;
}

获取当前画布的json：

myDiagram.model.toJson()
var model= myDiagram.model.toJson();获得整个画布的json
//model=eval('('+model+')');若格式异常抓一下
var nodes=model.nodeDataArray;取出所有节点
var Links=model.linkDataArray;取出所有线

加载json刷新画布： 

myDiagram.model = go.Model.fromJson(model);
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);

通过节点key获取节点：

myDiagram.model.findNodeDataForKey('key')

更改节点属性值：

var node = myDiagram.model.findNodeDataForKey('key');//首先拿到这个节点的对象
myDiagram.model.setDataProperty(node, 'color', "#ededed");//然后对这个对象的属性进行更改

获取获得焦点的第一个元素，可为节点或者线：

var node=myDiagram.selection.first();
console.log(node.data.key);

获取所有获得焦点的节点：

myDiagram.nodes
复制代码 
var items='';
  for(var nit=myDiagram.nodes;nit.next();){
        var node=nit.value;
       if(node.isSelected){
           items+=node.data.key+",";
         }
     }
 console.log(items);
复制代码

遍历整个画布的节点信息写法：

for(var nit=myDiagram.nodes;nit.next();){
     var node=nit.value;
     var key=node.data.key;
     var text=node.data.text;
 }

给节点添加线：

myDiagram.model.addLinkData({ from: "节点的Key", to: "连到另一节点的key" })

选中节点：

复制代码 
var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" };
myDiagram.model.addNodeData(newdata);
var newdat2= myDiagram.model.findNodeDataForKey('-3');
console.log(newdat2);
var node = myDiagram.findNodeForData(newdat2);
console.log(node);
myDiagram.select(node);//选中节点
复制代码

特殊案例API用法：

myDiagram.findNodeForData(objNode)
myDiagram.findLinkForData(objLink)
//其中objNode或者objLink,只能从画布的json 对象取出，
//不能直接手写例如
var newdata={"text":"AAAA","key":-33,"loc":"0 0"};
var node = myDiagram.findNodeForData(newdat2);
//除了刚好是新建的节点外，，不然是获取不到这个对象的，因为添加节点时，gojs会自动给节点或者线添加一个属性

常用事件定义API:

节点选中改变事件：

selectionChanged: 回调的函数方法名
//该属性要写在$(go.Node,）内用大括号括起来，如右侧例子
复制代码 
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //节点选中改变事件，nodeSelectionChanged为回调的方法名
        $(go.Panel, "Auto",
           $(go.Shape,//节点形状和背景颜色的设置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
        )
    );//go.Node的括号
 
//回调方法
function nodeSelectionChanged(node) {
      if(node.isSelected) {//
         //节点选中执行的内容
         console.log(node.data);//节点的属性信息
         console.log(node.data.key);//拿到节点的Key,拿其他属性类似
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, "fill", "#ededed");
      } else {
         //节点取消选中执行的内容
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");       
      }
}
//节点选中的时候是一种颜色，取消选中是另一种颜色
复制代码

节点双击事件：

doubleClick : function(e, node){
  //node为当前双击的节点的对象信息
 //该属性要写在$(go.node,）内用大括号括起来，如右侧例子
}
复制代码 
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        $(go.Panel, "Auto",
           $(go.Shape,//节点形状和背景颜色的设置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
           {doubleClick : function(e, node){// 双击事件
                             handlerDC(e, node);//双击执行的方法
                          }
           }
        )
    );//go.Node的括号
 
//双击执行的方法
function handlerDC(e, obj) {
     var node = obj.part;//拿到节点的json对象，后面要拿什么值就直接.出来
     var procTaskId = node.data.key;
     var procTaskName = node.data.text;
     var description = node.data.description;
     var procTmplId = node.data.tmplId;
}
//该例子主要应用场景为，双击节点，得到节点的详细信息，弹出窗口修改节点的信息
复制代码

从Palette拖过来节触发的事件：

myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
    console.log(e);
})
复制代码 
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
    e.subject.each(function(n){
        //得到从Palette拖过来的节点
        console.log(n.data.key);
    });
})
复制代码

当前画布被拖动的节点：

复制代码 
myDiagram.addDiagramListener("Modified", function(e) {
        myDiagram.isModified = false;
 
        iter = myDiagram.selection.iterator;
        
        while (iter.next()) {
            var part = iter.value;
            if (part instanceof go.Link) {
               if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined )  ) {
                    myDiagram.model.setDataProperty(part.data, 'link-color', 'red');
                    console.log(part.data);
                    console.log("非法");
               } else if(part.data.from > 0 || part.data.from < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.from);
                    if (!node) {
                        console.log("非法");
                    }
               }else if(part.data.to > 0 || part.data.to < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.to);
                    if (!node) {
                        console.log("非法");
                    }
               }
            }
        }
});
复制代码

画布基本定义类API：

 定义gojs在全局的简洁符号：

var $ = go.GraphObject.make;

定义画布的基本属性：

复制代码 
myDiagram = $(go.Diagram, "myDiagram", //画布绑定的Div的ID
{
     initialContentAlignment: go.Spot.Center, //画布的位置设置（居中，靠左等）
     allowDrop: true, // must be true to accept drops from the Palette
     "LinkDrawn": showLinkLabel, //
     "LinkRelinked": showLinkLabel,
    "animationManager.duration": 600, //画布刷新的加载速度
    "undoManager.isEnabled": true,
     //"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
    allowZoom: true    //允许缩放，false为否
     isReadOnly: false //是否禁用编辑
     //ismodelfied:true //禁止拖拽
});
复制代码

画布元素属性定义类API：

定义单种节点：

复制代码 
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //节点选中改变事件，nodeSelectionChanged为回调的方法名
        $(go.Panel, "Auto",
            $(go.Shape,//节点形状和背景颜色的设置
                { fill: "#1F4963", stroke: null }
            ),
            $(go.TextBlock,
                { font: "bold 13px Helvetica, bold Arial, sans-serif",//字体
                  editable：true,
                  stroke: "white",//颜色
                  margin: 3 },
                  new go.Binding("text", "key")
            )//go.TextBlock,的括号
       )//go.Panel 的括号
);//go.Node的括号
复制代码 
myDiagram.nodeTemplate=$(go.Node,***)
//***为对节点的定义

定义多种节点(画布上有多种节点)：

myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***))
复制代码 
//一种类型的节点
myDiagram.nodeTemplateMap.add("Start",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#79C900",
                     stroke: null
                 })
            )
        )//go.Node的括号
);
//另一种类型的节点
myDiagram.nodeTemplateMap.add("End",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#DC3C00",
                     stroke: null
                 })
            )
       )//go.Node的括号
);
 
//添加不同种类的节点
      var node = {};
      node["text"] = "2222";
      node["key"] = "33";
      node["loc"] = "0 0";
      node["category"] = "Start";//category
      myDiagram.model.addNodeData(node);
复制代码

定义线：

myDiagram.linkTemplate=$(go.Link,***);

添加监听事件：

复制代码 
//添加监听节点生成事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        e.subject.each(function(n){
                console.log(n.data.key);
           });
    })
复制代码 
//添加监听线生成事件
    myDiagram.addDiagramListener("LinkDrawn", function(e) {
           console.log(e.subject.data.to);
 
    })
复制代码 
//监听节点删除事件
    myDiagram.addDiagramListener("SelectionDeleted", function(e) {
            e.subject.each(function(n){
                console.log(n.data.key);
           });
    })
复制代码

go.Shape属性(形状)： RoundedRectangle-圆角矩形

通用属性：

stroke 边框颜色 null为无边框，可填"#87CEFA"，"red"等
margin 边框间距  
visible 设置是元素是否可见 true为可见，false为不可见，
textAlign 文本位置 "center"居中
editable 文本是否可编辑 true，false
font 字体 "bold 8pt Microsoft YaHei, Arial, sans-serif"
fill 背景颜色 可填"#87CEFA"，"red"等
alignment 元素位置设置 go.Spot.BottomLeft/左下 go.Spot.BottomRight/右下 go.Spot.TopLeft/左上 go.Spot.TopRight/右上 alignment:go.Spot.TopRight
isMultiline 编辑时是否允许换行 默认true
maxLines:1 设置文本显示的最大行数  
minSize 最小大小 new go.Size(10, 16)，控制了最大大小后，文本就会自动换行了
maxSize 最大大小  

特殊情况解决方案：

出现的问题 解决的方案
节点或者线删除不了

检查，画布的全局设置是否禁用删除，

或者节点，和线的设置禁用删除，

关键字 isReadOnly，或者节点绑定的事件有问题
重复调用定义画布报错 不能重复定义被绑定的div,应该用重新加载数据的API

标签：node,常用,myDiagram,var,API,go,gojs,data,节点
From： https://www.cnblogs.com/sexintercourse/p/17855909.html

相关文章

  • API成批分配漏洞介绍
    API成批分配漏洞介绍API特定：可利用性2    利用通常需要了解业务逻辑、对象关系和API结构。在API中利用批量分配更容易，因为按照设计，它们公开了应用程序的底层实现以及属性名称。安全弱点：     现代框架鼓励开发人员使用自动将客户端输入绑定到代码变量和内部对象......
  • Linux常用命令的使用
        ......
  • 【9.0】Python高级之常用模块学习
    【一】re【二】time、datetime【三】os......
  • 【2.0】常用模块之time、datetime模块
    【一】时间模块(time/datetime)【二】表示时间的三种方式在Python中，通常有这三种方式来表示时间：时间戳元组(struct_time)格式化的时间字符串：格式化的时间字符串(FormatString)：‘1999-12-06’【三】time（1）导入时间模块importtime（2）时间戳(time)[1]生成时间戳......
  • 【1.0】常用模块之re模块
    【一】正则语法【1】引入一说规则我已经知道你很晕了现在就让我们先来看一些实际的应用。在线测试工具http://tool.chinaz.com/regex/首先你要知道的是谈到正则，就只和字符串相关了。在我给你提供的工具中，你输入的每一个字都是一个字符串。其次，如果在一个位置的一......
  • 【3.0】常用模块之os模块
    【一】文件操作(os)__file__是指当前文件【二】文件路径相关(path)（1）获取当前文件路径(abspath)importos#获取当前文件路径file_path=os.path.abspath(__file__)print(file_path)#E:\PythonProjects\07常用模块学习\03os模块.py（2）获取当前文件所在文件夹路径(dirn......
  • Linux—终端常用指令20218573
     导言：Linux操作系统的终端是用户与系统进行交互的重要界面，通过终端可以执行各种任务和操作。本文将详细介绍Linux终端中的常用指令，为初学者提供一个全面的指南，帮助他们更好地理解和利用Linux系统。1.认识Linux终端：Linux终端是用户通过命令行方式与操作系统进行交互的工具。了......
  • MacBook Pro M2常用软件
    常用快捷键参照苹果官网：https://support.apple.com/zh-cn/HT201236?utm_source=hacpai.comCommand-X：剪切所选项并拷贝到剪贴板。Command-C：将所选项拷贝到剪贴板。这同样适用于“访达”中的文件。Command-V：将剪贴板的内容粘贴到当前文稿或App中。这同样适用于“访达”中的文......
  • 常用的maven dependency依赖
    <dependencies><!--junit--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope><......
  • 常用Linux命令使用
    常用Linux命令find&fdfd默认是正则表达式状态，以及会忽略一些文件-g使用glob通配符-e查找拓展名-x为每一条结果分别执行命令-X为所有结果执行同一个命令-h不跳过隐藏文件-uu不忽略任何东西,包括.gitnore中的-i忽略大小写(fd默认是只能匹配,即输入小写是大小写不......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99