@389689 wrote:
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？？？？
Posts: 1
Participants: 1