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:
li
Executable
+162
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GoJS Palette -- 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>Palette Diagrams</h1>
|
||||
<p>
|
||||
A <a>Palette</a> is a subclass of <a>Diagram</a> that is used to display a number of <a>Part</a>s that
|
||||
can be dragged into the diagram that is being modified by the user.
|
||||
The initialization of a <a>Palette</a> is just like the initialization of any <a>Diagram</a>.
|
||||
Like Diagrams, you can have more than one Palette on the page at the same time.
|
||||
</p>
|
||||
<p>
|
||||
See samples that make use of <a>Palette</a>s in the <a href="../samples/index.html#palette">samples index</a>.
|
||||
</p>
|
||||
<p>
|
||||
The following code initializes an empty Diagram on the right side, below.
|
||||
Note that <a>Diagram.allowDrop</a> must be true, which it is now by default.
|
||||
In this example we do not bother initializing the model with any node data.
|
||||
</p>
|
||||
<p>
|
||||
This code also creates two <a>Palette</a>s, in the same manner as you would any Diagram.
|
||||
You initialize a Palette's model in order to show nodes in that Palette.
|
||||
</p>
|
||||
<pre class="lang-js" id="diagramPre">
|
||||
diagram.nodeTemplate =
|
||||
$(go.Node, "Auto",
|
||||
$(go.Shape, "RoundedRectangle",
|
||||
{ fill: "white" },
|
||||
new go.Binding("fill", "color"),
|
||||
{ portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
|
||||
$(go.TextBlock, { margin: 5 },
|
||||
new go.Binding("text", "key"))
|
||||
);
|
||||
|
||||
diagram.undoManager.isEnabled = true;
|
||||
|
||||
// create the Palette
|
||||
var myPalette =
|
||||
$(go.Palette, "myPaletteDiv");
|
||||
|
||||
// the Palette's node template is different from the main Diagram's
|
||||
myPalette.nodeTemplate =
|
||||
$(go.Node, "Horizontal",
|
||||
$(go.Shape,
|
||||
{ width: 14, height: 14, fill: "white" },
|
||||
new go.Binding("fill", "color")),
|
||||
$(go.TextBlock,
|
||||
new go.Binding("text", "color"))
|
||||
);
|
||||
|
||||
// the list of data to show in the Palette
|
||||
myPalette.model.nodeDataArray = [
|
||||
{ key: "C", color: "cyan" },
|
||||
{ key: "LC", color: "lightcyan" },
|
||||
{ key: "A", color: "aquamarine" },
|
||||
{ key: "T", color: "turquoise" },
|
||||
{ key: "PB", color: "powderblue" },
|
||||
{ key: "LB", color: "lightblue" },
|
||||
{ key: "LSB", color: "lightskyblue" },
|
||||
{ key: "DSB", color: "deepskyblue" }
|
||||
];
|
||||
|
||||
// create the Palette
|
||||
var myPalette2 =
|
||||
$(go.Palette, "myPaletteDiv2",
|
||||
{ // customize the GridLayout to align the centers of the locationObjects
|
||||
layout: $(go.GridLayout, { alignment: go.GridLayout.Location })
|
||||
});
|
||||
|
||||
// the Palette's node template is different from the main Diagram's
|
||||
myPalette2.nodeTemplate =
|
||||
$(go.Node, "Vertical",
|
||||
{ locationObjectName: "TB", locationSpot: go.Spot.Center },
|
||||
$(go.Shape,
|
||||
{ width: 20, height: 20, fill: "white" },
|
||||
new go.Binding("fill", "color")),
|
||||
$(go.TextBlock, { name: "TB" },
|
||||
new go.Binding("text", "color"))
|
||||
);
|
||||
|
||||
// the list of data to show in the Palette
|
||||
myPalette2.model.nodeDataArray = [
|
||||
{ key: "IR", color: "indianred" },
|
||||
{ key: "LC", color: "lightcoral" },
|
||||
{ key: "S", color: "salmon" },
|
||||
{ key: "DS", color: "darksalmon" },
|
||||
{ key: "LS", color: "lightsalmon" }
|
||||
];
|
||||
</pre>
|
||||
<div style="width:100%">
|
||||
<span id="paletteSpan" style="display: inline-block; vertical-align: top">
|
||||
<b>Palette 1 (blues):</b><br />
|
||||
<div id="myPaletteDiv" style="width: 120px; height: 250px" class="diagramStyling"></div>
|
||||
</span>
|
||||
<span id="diagramSpan" style="display: inline-block; vertical-align: top">
|
||||
<b>Diagram:</b><br />
|
||||
</span>
|
||||
<span id="paletteSpan2" style="display: inline-block; vertical-align: top">
|
||||
<b>Palette 2 (reds):</b><br />
|
||||
<div id="myPaletteDiv2" style="width: 120px; height: 250px" class="diagramStyling"></div>
|
||||
</span>
|
||||
</div>
|
||||
<script>goCode("diagramPre", 250, 250, go.Diagram, "diagramSpan");</script>
|
||||
<p>
|
||||
First, notice that although both Palettes have been initialized with the same kind of model data,
|
||||
the appearances of the items in the palettes are different because the two use different node templates.
|
||||
</p>
|
||||
<p>
|
||||
Furthermore when you drag a part from the Palette on either side into the Diagram in the middle,
|
||||
that the appearance changes, because the Diagram uses a third node template.
|
||||
<em>What is being dragged is just the model data, not the actual <a>Node</a>s.</em>
|
||||
Because each diagram can use its own templates, the same data object can be represented completely differently.
|
||||
</p>
|
||||
<p>
|
||||
If you want the Palette to show exactly the same Nodes for the same data as your main Diagram,
|
||||
you can have it share the templates of the main Diagram:
|
||||
</p>
|
||||
<pre class="lang-js">
|
||||
myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;
|
||||
</pre>
|
||||
<p>
|
||||
Because <a>Palette</a> inherits from <a>Diagram</a>, you can customize it in the normal manners.
|
||||
You can decide to set its <a>Diagram.initialScale</a> if you want its parts to be smaller or larger than normal.
|
||||
</p>
|
||||
<p>
|
||||
It is also commonplace to customize the ordering of the parts in the palette.
|
||||
The palette's layout property is a <a>GridLayout</a>, so you can set its <a>GridLayout.sorting</a> property,
|
||||
and if needed, its <a>GridLayout.comparer</a> property to a custom sorting function.
|
||||
For example, if you want the Palette to show its parts in exactly the same order in which they
|
||||
appear in the <code>myPalette.model.nodeDataArray</code>:
|
||||
</p>
|
||||
<pre class="lang-js">
|
||||
myPalette.layout.sorting = go.GridLayout.Forward;
|
||||
</pre>
|
||||
<p>
|
||||
If you wanted to sort the parts in the Palette according to some property on the model data:
|
||||
</p>
|
||||
<pre class="lang-js">
|
||||
myPalette.layout.comparer = function(a, b) {
|
||||
// A and B are Parts
|
||||
var av = a.data.someProp;
|
||||
var bv = b.data.someProp;
|
||||
if (av < bv) return -1;
|
||||
if (av > bv) return 1;
|
||||
return 0;
|
||||
};
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user