feat: 后端全量更新 - 含所有本次需求
- Contract.php: 返回合约账户余额(balance_contract) - My.php: 地址管理增加BTC/ETH - AppContract.php: 一键平仓(closeall) - AppProxy.php: 代理专属注册链接 + 分级权限(L1/L2) - site.php: 手续费减半(0.018→0.009) - agent_permission_setup.sql: 代理权限SQL - crypto_news_crawler.py: 新闻自动采集脚本
This commit is contained in:
Executable
+248
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GoJS Context Menus -- Northwoods Software</title>
|
||||
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
|
||||
<script src="../release/go.js"></script>
|
||||
<script src="goIntro.js"></script>
|
||||
</head>
|
||||
<body onload="goIntro()">
|
||||
<div id="container" class="container-fluid">
|
||||
<div id="content">
|
||||
|
||||
<h1>Context Menus</h1>
|
||||
<p>
|
||||
<b>GoJS</b> provides a mechanism for you to define context menus for any object or for the diagram background.
|
||||
</p>
|
||||
|
||||
<p class="box" style="background-color: lightgoldenrodyellow;">
|
||||
Note: GoJS context menus cannot render outside of Diagrams, because they are objects inside the Diagram and therefore drawn only on the Diagram.
|
||||
If you need a context menu drawn partially or fully outside the Diagram, consider making an <a href="#HTMLContextMenus">HTML context menu</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
A GoJS context menu is an <a>Adornment</a> that is shown when the user context-clicks (right mouse click or long touch hold)
|
||||
an object that has its <a>GraphObject.contextMenu</a> set.
|
||||
The context menu is bound to the same data as the part itself.
|
||||
</p>
|
||||
<p>
|
||||
See samples that make use of context menus in the <a href="../samples/index.html#contextmenus">samples index</a>.
|
||||
</p>
|
||||
<p>
|
||||
It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s,
|
||||
as you can see in the code below in the assignment of the Node's <a>GraphObject.contextMenu</a> and <a>Diagram.contextMenu</a> properties.
|
||||
Each "ContextMenu" is just a "Vertical" Panel <a>Adornment</a> that is shadowed.
|
||||
Each "ContextMenuButton" is a Panel on which you can set the <a>GraphObject.click</a> event handler.
|
||||
In the event handler <code>obj.part</code> will be the whole context menu Adornment.
|
||||
<code>obj.part.adornedPart</code> will be adorned Node or Link.
|
||||
The bound data is <code>obj.part.data</code>, which will be the same as <code>obj.part.adornedPart.data</code>.
|
||||
</p>
|
||||
<p>
|
||||
You can see how the "ContextMenu" and "ContextMenuButton" builders are defined at
|
||||
<a href="../extensions/Buttons.js">Buttons.js</a>.
|
||||
</p>
|
||||
<p>
|
||||
In this example each <a>Node</a> has its <a>GraphObject.contextMenu</a> property set to an Adornment that shows
|
||||
a single button that when clicked changes the color property of the bound model data.
|
||||
The diagram gets its own context menu by setting <a>Diagram.contextMenu</a>.
|
||||
</p>
|
||||
<pre class="lang-js" id="contextmenus">
|
||||
// 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;
|
||||
</pre>
|
||||
<script>goCode("contextmenus", 350, 200)</script>
|
||||
<p>
|
||||
Try context clicking a node and invoking the "Change Color" command a few times.
|
||||
With the diagram context menu you will be able to "Undo" and/or "Redo", or you can use Control-Z and/or Control-Y.
|
||||
</p>
|
||||
|
||||
<h2 id="Positioning">Positioning</h2>
|
||||
<p>
|
||||
There are two ways to customize the positioning of the context menu relative to the adorned GraphObject.
|
||||
One way is to override <a>ContextMenuTool.positionContextMenu</a>.
|
||||
Another way is to have the context menu <a>Adornment</a> include a <a>Placeholder</a>.
|
||||
The Placeholder is positioned to have the same size and position as the adorned object.
|
||||
The context menu will not to have a background, and thus will not display a shadow by default when using a Placeholder.
|
||||
</p>
|
||||
<pre class="lang-js" id="contextmenusplaceholder">
|
||||
// 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);
|
||||
</pre>
|
||||
<script>goCode("contextmenusplaceholder", 350, 200)</script>
|
||||
|
||||
<h2 id="HTMLContextMenus">HTML Context Menus</h2>
|
||||
<p>
|
||||
It is possible to define custom context menus using HTML instead of Adornments using the <a>HTMLInfo</a> class.
|
||||
The <a href="../samples/customContextMenu.html">Custom Context Menu sample</a> and
|
||||
<a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> show two such custom context menus.
|
||||
</p>
|
||||
<p>
|
||||
HTML context menus require more effort to implement than using the default <b>GoJS</b> "ContextMenu" and "ContextMenuButton".
|
||||
However you would have the full power of HTML/CSS/JavaScript to show whatever you want.
|
||||
This includes creating context menus that can exist or float outside of the Diagram.
|
||||
</p>
|
||||
<p>
|
||||
There are two primary considerations when authoring HTML and CSS for context menus.
|
||||
The context menu should usually be a sibling Element of the Diagram, and should never be nested inside a Diagram DIV:
|
||||
</p>
|
||||
|
||||
<pre class="lang-js">
|
||||
<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>
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
And the ContextMenu may need a z-index set to ensure it is always on top. GoJS Diagrams have z-index of 2, and some tools a z-index of 100.
|
||||
</p>
|
||||
|
||||
<pre class="lang-css">#contextMenu {
|
||||
z-index: 1000;
|
||||
...
|
||||
}
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
See the <a href="../samples/customContextMenu.html">Custom Context Menu sample</a> and
|
||||
<a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> for HTML examples.
|
||||
See the <a href="HTMLInteraction.html">HTMLInteraction</a> page for more discussion on HTML in GoJS.
|
||||
</p>
|
||||
|
||||
<h2 id="DefaultContextMenuForTouchEnabledDevices">Default Context Menu for Touch-enabled devices</h2>
|
||||
<p>
|
||||
Touch devices are presumed to have no keyboard ability, which makes actions like copying and pasting more difficult.
|
||||
Because of this, <b>GoJS</b> provides a built-in default context menu on touch devices, implemented in HTML.
|
||||
The buttons on this menu are populated dynamically, depending on the target GraphObject (if any) and Diagram and their properties.
|
||||
</p>
|
||||
<p>
|
||||
The default context menu can be disabled by setting <a>ContextMenuTool.defaultTouchContextMenu</a> to null.
|
||||
The <a href="../samples/htmlLightBoxContextMenu.html">Lightbox Context Menu sample</a> contains a re-implementation of this menu if you wish to modify it.
|
||||
</p>
|
||||
<p>
|
||||
If you define your own custom context menus, they will prevent the default context menu from appearing on touch devices.
|
||||
We recommend that your custom context menus include all common commands appropriate for your app.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user