You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.3 KiB
77 lines
3.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Logic Circuit with shiftable ports</title>
|
|
<meta name="description" content="TypeScript: Allow the user to shift ports that are in a node." />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
|
|
|
|
<script src="../samples/assets/require.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script id="code">
|
|
function init() {
|
|
require(["PortShiftingScript"], function(app) {
|
|
app.init();
|
|
document.getElementById("saveModel").onclick = app.save;
|
|
document.getElementById("loadModel").onclick = app.load;
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div style="width: 100%; display: flex; justify-content: space-between">
|
|
<div id="palette" style="width: 100px; height: 500px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
|
|
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
|
|
</div>
|
|
<div id="description">
|
|
<p>
|
|
This is exactly like the <a href="../samples/LogicCircuit.html">Logic Circuit sample</a> but also makes use of the
|
|
PortShiftingTool, which is defined in <a href="PortShiftingTool.ts">PortShiftingTool.ts</a>
|
|
</p>
|
|
<p>
|
|
When the user wants to shift the position of a port on a node, the user can hold down the Shift key during a mouse-down on
|
|
a port element. Dragging then will move the port within the node.
|
|
</p>
|
|
<p>
|
|
Note how the relative position of the port within the node is maintained as you resize the node.
|
|
</p>
|
|
<p>
|
|
If you want to persist the port's spot, you should add a TwoWay Binding of the <a>GraphObject.alignment</a> property
|
|
with a property that you define on the node data for each port.
|
|
</p>
|
|
<p>
|
|
This sample does not constrain the position of the port within the node, but you could adapt the PortShiftingTool.updateAlignment
|
|
method to do so. For example if you wanted, you could keep a port stuck along one edge of the node.
|
|
</p>
|
|
</div>
|
|
<div id="buttons">
|
|
<button id="saveModel">Save</button>
|
|
<button id="loadModel">Load</button>
|
|
</div>
|
|
<textarea id="mySavedModel" style="width:100%;height:200px">
|
|
{ "class": "go.GraphLinksModel",
|
|
"linkFromPortIdProperty": "fromPort",
|
|
"linkToPortIdProperty": "toPort",
|
|
"nodeDataArray": [
|
|
{"category":"input", "key":"input1", "loc":"-150 -80" },
|
|
{"category":"or", "key":"or1", "loc":"-70 0" },
|
|
{"category":"not", "key":"not1", "loc":"10 0" },
|
|
{"category":"xor", "key":"xor1", "loc":"100 0" },
|
|
{"category":"or", "key":"or2", "loc":"200 0" },
|
|
{"category":"output", "key":"output1", "loc":"200 -100" }
|
|
],
|
|
"linkDataArray": [
|
|
{"from":"input1", "fromPort":"out", "to":"or1", "toPort":"in1"},
|
|
{"from":"or1", "fromPort":"out", "to":"not1", "toPort":"in"},
|
|
{"from":"not1", "fromPort":"out", "to":"or1", "toPort":"in2"},
|
|
{"from":"not1", "fromPort":"out", "to":"xor1", "toPort":"in1"},
|
|
{"from":"xor1", "fromPort":"out", "to":"or2", "toPort":"in1"},
|
|
{"from":"or2", "fromPort":"out", "to":"xor1", "toPort":"in2"},
|
|
{"from":"xor1", "fromPort":"out", "to":"output1", "toPort":""}
|
|
]}
|
|
</textarea>
|
|
</div>
|
|
</body>
|
|
</html> |