GoJS的一些使用技巧
修改图的内容
通过修改各种监听方法中得到的part内部的结构data等
或者直接遍历
myDiagram.model.nodeDataArray
myDiagram.model.linkDataArray
//修改完成调用以下方法完成重建
myDiagram.rebuildParts()
修改内容对应的data内容
调用即可
删除某个节点
myDiagram.remove(part)
通过全局变量获取某个选择的节点
var Select_Port = null;
myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
Select_Port = e.subject.part;
});
myDiagram.addDiagramListener("ObjectContextClicked", function(e) {
Select_Port = e.subject.part;
});
结合undoManager创建撤销重做删除的工具栏
$('#deletePart').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
return false;
}
myDiagram.remove(Select_Port);
});
$('#undo-buttun').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
return false;
}
myDiagram.undoManager.undo();
});
$('#redo-buttun').click(function(){
if("undefined" == typeof myDiagram){
result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
return false;
}
myDiagram.undoManager.redo();
});
利用绘图过程中的一些DiagramListener完成更多的数据交互体验
可以在创建Diagram时进行创建对应的监听、通过遍历监听可以得到想要的组件
myDiagram =
goObj(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
allowDrop: true,
"LinkDrawn": showLinkLabel,
"LinkRelinked": showLinkLabel,
"animationManager.duration": 800,
"undoManager.isEnabled": true
});
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null) label.visible = (e.subject.fromNode.data.figure === "RoundedRectangle");
}
也可以后面添加各种监听上去,具体事件可以查看API
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
try {
e.subject.each(function(part) {
//此处处理part
);
} catch (err) {
console.warn(err);
}
});