After modification
setup code
if (self.diagram && self.palette) {
return;
}
var gojs = go.GraphObject.make;
var diagram =
gojs(go.Diagram, "canvas",
{
initialContentAlignment: go.Spot.Center,
allowDrop: true,
"LinkDrawn": self.showLinkLabel,
"LinkRelinked": self.showLinkLabel,
"animationManager.duration": 800,
"undoManager.isEnabled": true
});
diagram.addDiagramListener("Modified", function (e) {
var idx = document.title.indexOf("*");
if (diagram.isModified) {
if (idx < 0) document.title += "*";
$('#btn_store_process').show();
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
$('#btn_store_process').hide();
}
});
// var lightText = 'whitesmoke';
diagram.nodeTemplateMap.add("start",
gojs(go.Node, "Spot", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/start.png' },
new go.Binding("minSize", "minSize"),
new go.Binding("source", "src", function (icon) {
return openinfo.root + 'components/gojs/icon/' + icon;
})),
// gojs(go.TextBlock, "start",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, true, false),
self.makePort("L", go.Spot.Left, true, false),
self.makePort("R", go.Spot.Right, true, false),
self.makePort("B", go.Spot.Bottom, true, false)
));
diagram.nodeTemplateMap.add("end",
gojs(go.Node, "Spot", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/end.png' },
new go.Binding("minSize", "minSize")),
// gojs(go.TextBlock, "end",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, false, true),
self.makePort("L", go.Spot.Left, false, true),
self.makePort("R", go.Spot.Right, false, true),
self.makePort("B", go.Spot.Bottom, false, true)
));
diagram.nodeTemplateMap.add("task",
gojs(go.Node, "Vertical", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Panel, "Spot",
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/task.png' },
new go.Binding("minSize", "minSize"),
new go.Binding("source", "src", function (icon) {
return openinfo.root + 'components/gojs/icon/' + icon;
})),
// gojs(go.TextBlock, "task",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, true, true),
self.makePort("L", go.Spot.Left, true, true),
self.makePort("R", go.Spot.Right, true, true),
self.makePort("B", go.Spot.Bottom, true, true)
),
gojs(go.TextBlock,
new go.Binding("text", "name"))
));
diagram.nodeTemplateMap.add("event",
gojs(go.Node, "Spot", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/event.png' },
new go.Binding("minSize", "minSize")),
// gojs(go.TextBlock, "event",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, true, true),
self.makePort("L", go.Spot.Left, true, true),
self.makePort("R", go.Spot.Right, true, true),
self.makePort("B", go.Spot.Bottom, true, true)
));
diagram.nodeTemplateMap.add("gateway",
gojs(go.Node, "Spot", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/gateway.png' },
new go.Binding("minSize", "minSize")),
// gojs(go.TextBlock, "gateway",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, true, true),
self.makePort("L", go.Spot.Left, true, true),
self.makePort("R", go.Spot.Right, true, true),
self.makePort("B", go.Spot.Bottom, true, true)
));
diagram.nodeTemplateMap.add("gather",
gojs(go.Node, "Spot", { contextMenu: gojs(go.Adornment) }, self.nodeStyle(),
gojs(go.Picture,
{ minSize: new go.Size(40, 40), source: openinfo.root + 'components/gojs/icon/gather.png' },
new go.Binding("minSize", "minSize")),
// gojs(go.TextBlock, "gather",
// { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText }),
self.makePort("T", go.Spot.Top, true, true),
self.makePort("L", go.Spot.Left, true, true),
self.makePort("R", go.Spot.Right, true, true),
self.makePort("B", go.Spot.Bottom, true, true)
));
diagram.linkTemplate =
gojs(go.Link,
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
contextMenu: gojs(go.Adornment),
},
new go.Binding("points").makeTwoWay(),
gojs(go.Shape,
{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
gojs(go.Shape,
{ isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
gojs(go.Shape,
{ toArrow: "standard", stroke: null, fill: "gray" }),
gojs(go.Panel, "Auto",
{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
new go.Binding("visible", "visible").makeTwoWay(),
gojs(go.Shape, "RoundedRectangle",
{ fill: "#F8F8F8", stroke: null }),
gojs(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
diagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
diagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
var palette =
gojs(go.Palette, "canvas_ele",
{
"animationManager.duration": 800,
nodeTemplateMap: diagram.nodeTemplateMap,
model: new go.GraphLinksModel([
{ category: "start", minSize: new go.Size(40, 40) },
{ category: "end", minSize: new go.Size(40, 40) },
{ category: "task", minSize: new go.Size(40, 40) },
{ category: "event", minSize: new go.Size(40, 40) },
{ category: "gateway", minSize: new go.Size(40, 40) },
{ category: "gather", minSize: new go.Size(40, 40) }
])
});
diagram.model.linkFromPortIdProperty = "fromPort";
diagram.model.linkToPortIdProperty = "toPort";
diagram.addDiagramListener('LinkDrawn', function (e) {
self.linkDrawn(e);
});
diagram.addDiagramListener('ExternalObjectsDropped', function (e) {
self.externalObjectsDropped(e);
});
// 右键菜单
// Override the ContextMenuTool.showContextMenu and hideContextMenu methods
// in order to modify the HTML appropriately.
var cxTool = diagram.toolManager.contextMenuTool;
var cxElement = document.getElementById("canvas_context");
cxElement.addEventListener("contextmenu", function (e) {
e.preventDefault();
return false;
}, false);
cxElement.addEventListener("blur", function (e) {
cxTool.stopTool();
// maybe start another context menu
if (cxTool.canStart()) {
diagram.currentTool = cxTool;
cxTool.doMouseUp();
}
}, false);
cxElement.tabIndex = "1";
// This is the override of ContextMenuTool.showContextMenu:
// This does not not need to call the base method.
cxTool.showContextMenu = function (contextmenu, obj) {
var _diagram = this.diagram;
if (_diagram === null) return;
// Hide any other existing context menu
if (contextmenu !== this.currentContextMenu) {
this.hideContextMenu();
}
var ele = [];
var link = [];
_diagram.selection.filter(function (_ele) {
if (_ele.data.category) {
ele.push(_ele);
}
else {
link.push(_ele);
}
return ele;
});
var display = true;
if (ele.length == 1 && link.length == 0) {
$('#align').css({ 'display': 'none' });
$('#vertical_align').css({ 'display': 'none' });
$('#attribute').css({ 'display': 'block' });
}
else if (ele.length > 1 && link.length == 0) {
$('#align').css({ 'display': 'block' });
$('#vertical_align').css({ 'display': 'block' });
$('#attribute').css({ 'display': 'none' });
}
else if (ele.length == 0 && link.length == 1) {
$('#align').css({ 'display': 'none' });
$('#vertical_align').css({ 'display': 'none' });
$('#attribute').css({ 'display': 'block' });
}
else {
display = false;
}
if (display) {
// Now show the whole context menu element
cxElement.style.display = "block";
}
// we don't bother overriding positionContextMenu, we just do it here:
var mousePt = _diagram.lastInput.viewPoint;
cxElement.style.left = mousePt.x - 470 + "px";
cxElement.style.top = mousePt.y - 40 + "px";
// Remember that there is now a context menu showing
this.currentContextMenu = contextmenu;
}
// This is the corresponding override of ContextMenuTool.hideContextMenu:
// This does not not need to call the base method.
cxTool.hideContextMenu = function () {
if (this.currentContextMenu === null) return;
cxElement.style.display = "none";
this.currentContextMenu = null;
}
// 变量
self.diagram = diagram;
self.palette = palette;
self.diagram.attr = {
start: {
linkCount: { from: 1000, to: 0 },
totalCount: 1
},
end: {
linkCount: { from: 0, to: 1000 },
totalCount: 1000
},
task: {
linkCount: { from: 1000, to: 1000 },
totalCount: 1000
},
event: {
linkCount: { from: 0, to: 1 },
totalCount: 1000
},
gateway: {
linkCount: { from: 1000, to: 1 },
totalCount: 1000
},
gather: {
linkCount: { from: 1, to: 1000 },
totalCount: 1000
}
};
self.diagram.title = {
start: "开始",
end: "结束",
task: "任务",
event: "事件",
gateway: "网关",
gather: "聚合"
};
Modify the code
var action = $('.sel_task_link_type').val();
var attribute = {
fromAction: action
};
var ele = self.diagram.selection.first();
ele.data.visible = true;
ele.data.text = $('.sel_task_link_type').val() == "同意" ? "Yes" : "No";
ele.data.attribute = attribute;
self.diagram.model.updateTargetBindings(ele.data);
self.current_link = undefined;
self.store_process();
$('#dv_task_link_dialog').modal('hide');
Why can link be disorganized after modifying a display property of link????