gojs的api

最新推荐文章于 2024-06-13 14:26:56 发布

myl12138

最新推荐文章于 2024-06-13 14:26:56 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/weixin_43908036/article/details/85603724

版权

项目要求要根据左侧工具栏的点击事件去相应的生成或删除流程图中的节点,如下图:
在这里插入图片描述
在点击左侧工具栏的时候通过监听事件将新添加的或者删除的节点的key获取(该方法是写在var app = new Vue({});外面的)

//监听前后两次选择的节点,nval是最新一次操作后的数据，oval是上一次操作后的数据
    app.$watch('test', function (nval, oval) {
        //监听添加事件,通过比较nval, oval两个数组的不同来获取相应的添加和删除的数据
        if (oval.length != 0) {
            var addResult = [];
            for (var i = 0; i < nval.length; i++) {
                var obj = nval[i];
                //需要进行条件比较的数据
                var nvalSessionflyCourse = obj.sessionflyCourse;
                var nvalSessionflyCoursetype = obj.sessionflyCoursetype;
                var isExist = false;
                for (var j = 0; j < oval.length; j++) {
                    var aj = oval[j];
                    var ovalSessionflyCourse = aj.sessionflyCourse;
                    var ovalSessionflyCoursetype = aj.sessionflyCoursetype;
                    if (nvalSessionflyCourse == ovalSessionflyCourse && nvalSessionflyCoursetype == ovalSessionflyCoursetype) {
                        isExist = true;
                        break;
                    }
                }
                if (!isExist) {
                    addResult.push(obj);
                    addNodes(addResult[0].sessionflyCourse + "-" + addResult[0].sessionflyCoursetype + "-" + addResult[0].qualificationId, addResult[0].title);
                }
            }
        }
        //监听删除事件可以使用同样的方法,只需要将上述两个for循环的顺序交换,然后调用deleteNode方法即可
    });

调用相应的添加和删除方法

            //删除节点
            function deleteNode(value) {
                var nodedata = myDiagram.model.findNodeDataForKey(value);
                var removeLinks = [];
                //首先拿到这个节点的对象
                var node = myDiagram.findNodeForKey(value);
                //获取节点所有线
                node.findLinksConnected().each(function (link) {
                        removeLinks.push(link.data);
                    }
                );
                //删除与要删除节点的相关的线
                myDiagram.model.removeLinkDataCollection(removeLinks);
                //删除单个节点
                myDiagram.model.removeNodeData(nodedata);

                //键盘的删除事件
                // myDiagram.commandHandler.deleteSelection();
            }

            //增加节点
            function addNodes(value, text) {//value是该节点的key,text是该节点的内容,这里取获取过来的text空格前的所有字符串
                var CreateNode = {
                    key: value, //设置key的方法，每个节点最好是有自己独立的key
                    "loc": "0 -100",     //设置新生成的节点的初始位置坐标
                    "text": text.trim().split(" ")[0],
                    "category":"Source",
                }
                myDiagram.model.addNodeData(CreateNode);
            }

gojs常用操作

操作	api	例子
增	addNodeData(节点对象); addLinkData(线对象);	var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";//节点坐标 node["text"] = "节点名称"; myDiagram.model.addNodeData(node);
删	removeNodeData(节点对象) removeLinkData(线对象);	//首先拿到这个节点的对象,这里直接通过节点的Key获取,也可以通过各种事件的返回的对象中获取 var nodeData = myDiagram.model.findNodeDataForKey('key'); //删除单个节点 myDiagram.model.removeNodeData(nodeData);
改	参数:data: nodeData或linkData propname：属性名 val:修改的值 setDataProperty(data, propname, val);	//首先拿到这个节点的data对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //然后对这个对象的属性进行更改，如果没有则新增这个属性 myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
查	根据key获取节点data对象findNodeDataForKey('节点key'); 根据linkData模糊匹配线集合(gojs1.68以上) findLinksByExample(linkData)	//根据Key获取节点数据对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //根据linkData，模糊匹配线集合,linkData可以为部分属性组成 //如from:-1或to:-1,或者from:-1,to:-1 var links=myDiagram.findLinksByExample({"from":-1, "to":-2}); while (links.next()) { //遍历输出所有线数据对象 console.log(links.value.data); }

获取当前画布的json	myDiagram.model.toJson();
加载json刷新画布	myDiagram.model = go.Model.fromJson(model);
(键盘事件) 删除选中节点或线	myDiagram.commandHandler.deleteSelection();
获取画布所有节点对象 myDiagram.nodes	var nodes=myDiagram.nodes;//遍历输出节点对象 nodes.each(function (node) {console.log(node.data.text);});
添加节点(nodeData为该节点的key)	myDiagram.model.addNodeData(nodeData);
删除节点	myDiagram.model.removeNodeData(nodeData);
获取节点对象	var node=myDiagram.findNodeForKey(‘key’);
获取节点所有线	var removeLinks = []; node.findLinksConnected().each(function (link) { removeLinks.push(link.data); });
删除与要删除节点的相关的线	myDiagram.model.removeLinkDataCollection(removeLinks);
获取节点data	var nodeData=myDiagram.model.findNodeDataForKey(‘key’);
删除单个节点	myDiagram.model.removeNodeData(nodedata);
获取节点的线(node可通过上面提到的获取节点对象得到)	node.findLinksConnected().each(function(link) {console.log(link.data)});
获取进入节点的线	node.findLinksInto().each(function(link) {console.log(link.data)});
获取从节点出来的线	node.findLinksOutOf().each(function(link) {console.log(link.data)});
获取A-B节点之间的线	nodeA.findLinksTo(nodeB).each(function(link) {console.log(link.data)});