翻譯|使用教程|編輯:吳園園|2020-02-28 11:25:37.380|閱讀 564 次
概述:GoJS提供了一種機制,您可以為任何對象或圖表背景定義上下文菜單。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
注意:GoJS上下文菜單無法在圖外部渲染,因為它們是圖內(nèi)部的對象,因此只能在圖上繪制。如果您需要部分或全部繪制在關(guān)系圖外部的上下文菜單,請考慮制作HTML上下文菜單。
GoJS上下文菜單是一種裝飾,當用戶上下文單擊(其右鍵單擊或長時間按住)設(shè)置了GraphObject.contextMenu的對象時顯示。上下文菜單與零件本身綁定到相同的數(shù)據(jù)。
通常,將上下文菜單實現(xiàn)為包含“ ContextMenuButton”的“ ContextMenu”面板,如下面的代碼所示,在節(jié)點的GraphObject.contextMenu和Diagram.contextMenu屬性的分配中可以看到。每個“ ContextMenu”只是一個“ 陰影”的“垂直”面板裝飾。每個“ ContextMenuButton”都是一個面板,可以在其上設(shè)置GraphObject.click事件處理程序。在事件處理程序中,obj.part將使用整個上下文菜單裝飾。 obj.part.adornedPart將裝飾節(jié)點或鏈接。綁定的數(shù)據(jù)是obj.part.data,它將與相同obj.part.adornedPart.data。
你可以看到如何在“文本菜單”和“ContextMenuButton”助洗劑的定義 Buttons.js。
在此示例中,每個節(jié)點的GraphObject.contextMenu屬性設(shè)置為裝飾,該裝飾顯示單個按鈕,單擊該按鈕可更改綁定模型數(shù)據(jù)的color屬性。通過設(shè)置Diagram.contextMenu,該圖可獲得自己的上下文菜單。
// This method is called as a context menu button's click handler.
// Rotate the selected node's color through a predefined sequence of colors.
function changeColor(e, obj) {
diagram.commit(function(d) {
// get the context menu that holds the button that was clicked
var contextmenu = obj.part;
// get the node data to which the Node is data bound
var nodedata = contextmenu.data;
// compute the next color for the node
var newcolor = "lightblue";
switch (nodedata.color) {
case "lightblue": newcolor = "lightgreen"; break;
case "lightgreen": newcolor = "lightyellow"; break;
case "lightyellow": newcolor = "orange"; break;
case "orange": newcolor = "lightblue"; break;
}
// modify the node data
// this evaluates data Bindings and records changes in the UndoManager
d.model.set(nodedata, "color", newcolor);
}, "changed color");
}
// this is a normal Node template that also has a contextMenu defined for it
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")),
{
contextMenu: // define a context menu for each node
$("ContextMenu", // that has one button
$("ContextMenuButton",
$(go.TextBlock, "Change Color"),
{ click: changeColor })
// more ContextMenuButtons would go here
) // end Adornment
}
);
// also define a context menu for the diagram's background
diagram.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Undo"),
{ click: function(e, obj) { e.diagram.commandHandler.undo(); } },
new go.Binding("visible", "", function(o) {
return o.diagram.commandHandler.canUndo();
}).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Redo"),
{ click: function(e, obj) { e.diagram.commandHandler.redo(); } },
new go.Binding("visible", "", function(o) {
return o.diagram.commandHandler.canRedo();
}).ofObject()),
// no binding, always visible button:
$("ContextMenuButton",
$(go.TextBlock, "New Node"),
{ click: function(e, obj) {
e.diagram.commit(function(d) {
var data = {};
d.model.addNodeData(data);
part = d.findPartForData(data); // must be same data reference, not a new {}
// set location to saved mouseDownPoint in ContextMenuTool
part.location = d.toolManager.contextMenuTool.mouseDownPoint;
}, 'new node');
} })
);
var nodeDataArray = [
{ key: "Alpha", color: "lightyellow" },
{ key: "Beta", color: "orange" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.undoManager.isEnabled = true;
嘗試上下文單擊節(jié)點并多次調(diào)用“更改顏色”命令。使用圖表上下文菜單,您可以“撤消”和/或“重做”,也可以使用Control-Z和/或Control-Y。
定位
有兩種方法可以自定義上下文菜單相對于裝飾的GraphObject的位置。一種方法是重寫ContextMenuTool.positionContextMenu。另一種方法是使上下文菜單裝飾包含一個占位符。占位符的位置和裝飾對象的位置和位置相同。上下文菜單將沒有背景,因此在使用占位符時默認情況下不會顯示陰影。
// this is a shared context menu button click event handler, just for demonstration
function cmCommand(e, obj) {
var node = obj.part.adornedPart; // the Node with the context menu
var buttontext = obj.elt(1); // the TextBlock
alert(buttontext.text + " command on " + node.data.key);
}
// this is a normal Node template that also has a contextMenu defined for it
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")),
{
contextMenu: // define a context menu for each node
$("ContextMenu", "Spot", // that has several buttons around
$(go.Placeholder, { padding: 5 }), // a Placeholder object
$("ContextMenuButton", $(go.TextBlock, "Top"),
{ alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, click: cmCommand }),
$("ContextMenuButton", $(go.TextBlock, "Right"),
{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, click: cmCommand }),
$("ContextMenuButton", $(go.TextBlock, "Bottom"),
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, click: cmCommand }),
$("ContextMenuButton", $(go.TextBlock, "Left"),
{ alignment: go.Spot.Left, alignmentFocus: go.Spot.Right, click: cmCommand })
) // end Adornment
}
);
var nodeDataArray = [
{ key: "Alpha", color: "lightyellow" },
{ key: "Beta", color: "orange" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
HTML上下文菜單
可以使用HTML而不是使用HTMLInfo類定義裝飾來定義自定義上下文菜單。“ 自定義上下文菜單”示例和“ 燈箱上下文菜單”示例顯示了兩個此類自定義上下文菜單。
與使用默認的GoJS “ ContextMenu”和“ ContextMenuButton” 相比,HTML上下文菜單需要更多的精力來實現(xiàn)。但是,您將具有HTML / CSS / JavaScript的全部功能來顯示所需的內(nèi)容。這包括創(chuàng)建上下文菜單,這些菜單可以存在于或浮動在圖表之外。
為上下文菜單創(chuàng)作HTML和CSS時,有兩個主要注意事項。上下文菜單通常應(yīng)該是關(guān)系圖的同級元素,并且絕不能嵌套在關(guān)系圖DIV中:
<div style="position: relative;">
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px;"></div>
<div id="contextMenu">
<!-- ... context menu HTML -->
</div>
</div>
并且ContextMenu可能需要設(shè)置z-index以確保它始終位于最上面。GoJS Diagrams的z-index為2,有些工具的z-index為100。
#contextMenu {
z-index:1000 ;
...
}
啟用觸摸的設(shè)備的默認上下文菜單
假定觸摸設(shè)備沒有鍵盤功能,這會使復(fù)制和粘貼等操作變得更加困難。因此,GoJS在觸摸設(shè)備上提供了內(nèi)置的默認上下文菜單,該菜單以HTML實現(xiàn)。該菜單上的按鈕是動態(tài)填充的,具體取決于目標GraphObject(如果有)和Diagram及其屬性。
可以通過將ContextMenuTool.defaultTouchContextMenu設(shè)置為null 來禁用默認上下文菜單。如果您要修改,“ 燈箱上下文菜單”示例將包含該菜單的重新實現(xiàn)。
如果定義自己的自定義上下文菜單,它們將阻止默認上下文菜單出現(xiàn)在觸摸設(shè)備上。我們建議您的自定義上下文菜單包括適用于您的應(yīng)用程序的所有常用命令。
想要購買GoJS正版授權(quán)的朋友可以
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: