gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
424 lines (380 loc) • 18.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Allow the user to shift ports that are in a node."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Logic Circuit with shiftable ports</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="Figures.js"></script>
<script src="PortShiftingTool.js"></script>
<script id="code">
var red = "orangered"; // 0 or false
var green = "forestgreen"; // 1 or true
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
new go.Diagram("myDiagramDiv", // create a new Diagram in the HTML DIV element "myDiagramDiv"
{
"draggingTool.isGridSnapEnabled": true, // dragged nodes will snap to a grid of 10x10 cells
"undoManager.isEnabled": true
});
// install the PortShiftingTool as a "mouse move" tool
myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", e => {
var button = document.getElementById("saveModel");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
var palette = new go.Palette("palette"); // create a new Palette in the HTML DIV element "palette"
// creates relinkable Links that will avoid crossing Nodes when possible and will jump over other Links in their paths
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 3,
relinkableFrom: true, relinkableTo: true,
selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
shadowOffset: new go.Point(0, 0), shadowBlur: 5, shadowColor: "blue",
},
new go.Binding("isShadowed", "isSelected").ofObject(),
$(go.Shape,
{ name: "SHAPE", strokeWidth: 2, stroke: red }));
// node template helpers
var sharedToolTip =
$("ToolTip",
{ "Border.figure": "RoundedRectangle" },
$(go.TextBlock, { margin: 2 },
new go.Binding("text", "", d => d.category)));
// define some common property settings
function nodeStyle() {
return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isShadowed", "isSelected").ofObject(),
{
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: "blue",
resizable: true,
resizeObjectName: "NODESHAPE",
toolTip: sharedToolTip
}];
}
function shapeStyle() {
return {
name: "NODESHAPE",
fill: "lightgray",
stroke: "darkslategray",
desiredSize: new go.Size(40, 40),
strokeWidth: 2
};
}
function portStyle(id, input, align) {
return [
new go.Binding("alignment", id + "Spot", go.Spot.parse).makeTwoWay(go.Spot.stringify),
{
portId: id,
desiredSize: new go.Size(6, 6),
alignment: align,
fill: 'black',
fromSpot: go.Spot.Right,
fromLinkable: !input,
toSpot: go.Spot.Left,
toLinkable: input,
toMaxLinks: 1,
cursor: 'pointer'
}];
}
// define templates for each type of node
const inputTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'Circle', shapeStyle(), { fill: red }), // override the default fill (from shapeStyle()) to be red
$(go.Shape, 'Rectangle', portStyle('', false, new go.Spot(1, 0.5))), // the only port
{
doubleClick: (e, obj) => {
if (!(obj instanceof go.Node)) return;
e.diagram.startTransaction('Toggle Input');
const shp = obj.findObject('NODESHAPE');
shp.fill = (shp.fill === green) ? red : green;
updateStates();
e.diagram.commitTransaction('Toggle Input');
}
});
const outputTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'Rectangle', shapeStyle(), { fill: green }), // override the default fill (from shapeStyle()) to be green
$(go.Shape, 'Rectangle', portStyle('', true, new go.Spot(0, 0.5)))); // the only port
const andTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'AndGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2',true, new go.Spot(0, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const orTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'OrGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0.16, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2', true, new go.Spot(0.16, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const xorTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'XorGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0.26, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2', true, new go.Spot(0.26, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const norTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'NorGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0.16, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2', true, new go.Spot(0.16, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const xnorTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'XnorGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0.26, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2', true, new go.Spot(0.26, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const nandTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'NandGate', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in1', true, new go.Spot(0, 0.3))),
$(go.Shape, 'Rectangle', portStyle('in2', true, new go.Spot(0, 0.7))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
const notTemplate =
$(go.Node, 'Spot', nodeStyle(),
$(go.Shape, 'Inverter', shapeStyle()),
$(go.Shape, 'Rectangle', portStyle('in', true, new go.Spot(0, 0.5))),
$(go.Shape, 'Rectangle', portStyle('out', false, new go.Spot(1, 0.5))));
// add the templates created above to myDiagram and palette
myDiagram.nodeTemplateMap.add("input", inputTemplate);
myDiagram.nodeTemplateMap.add("output", outputTemplate);
myDiagram.nodeTemplateMap.add("and", andTemplate);
myDiagram.nodeTemplateMap.add("or", orTemplate);
myDiagram.nodeTemplateMap.add("xor", xorTemplate);
myDiagram.nodeTemplateMap.add("not", notTemplate);
myDiagram.nodeTemplateMap.add("nand", nandTemplate);
myDiagram.nodeTemplateMap.add("nor", norTemplate);
myDiagram.nodeTemplateMap.add("xnor", xnorTemplate);
// share the template map with the Palette
palette.nodeTemplateMap = myDiagram.nodeTemplateMap;
palette.model.nodeDataArray = [
{ category: "input" },
{ category: "output" },
{ category: "and" },
{ category: "or" },
{ category: "xor" },
{ category: "not" },
{ category: "nand" },
{ category: "nor" },
{ category: "xnor" }
];
// load the initial diagram
load();
// continually update the diagram
loop();
}
// update the diagram every 250 milliseconds
function loop() {
setTimeout(() => { updateStates(); loop(); }, 250);
}
// update the value and appearance of each node according to its type and input values
function updateStates() {
var oldskip = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
// do all "input" nodes first
myDiagram.nodes.each(node => {
if (node.category === "input") {
doInput(node);
}
});
// now we can do all other kinds of nodes
myDiagram.nodes.each(node => {
switch (node.category) {
case "and": doAnd(node); break;
case "or": doOr(node); break;
case "xor": doXor(node); break;
case "not": doNot(node); break;
case "nand": doNand(node); break;
case "nor": doNor(node); break;
case "xnor": doXnor(node); break;
case "output": doOutput(node); break;
case "input": break; // doInput already called, above
}
});
myDiagram.skipsUndoManager = oldskip;
}
// helper predicate
function linkIsTrue(link) { // assume the given Link has a Shape named "SHAPE"
return link.findObject("SHAPE").stroke === green;
}
// helper function for propagating results
function setOutputLinks(node, color) {
node.findLinksOutOf().each(link => link.findObject("SHAPE").stroke = color);
}
// update nodes by the specific function for its type
// determine the color of links coming out of this node based on those coming in and node type
function doInput(node) {
// the output is just the node's Shape.fill
setOutputLinks(node, node.findObject("NODESHAPE").fill);
}
function doAnd(node) {
var color = node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNand(node) {
var color = !node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNot(node) {
var color = !node.findLinksInto().all(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doOr(node) {
var color = node.findLinksInto().any(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doNor(node) {
var color = !node.findLinksInto().any(linkIsTrue) ? green : red;
setOutputLinks(node, color);
}
function doXor(node) {
var truecount = 0;
node.findLinksInto().each(link => { if (linkIsTrue(link)) truecount++; });
var color = truecount % 2 !== 0 ? green : red;
setOutputLinks(node, color);
}
function doXnor(node) {
var truecount = 0;
node.findLinksInto().each(link => { if (linkIsTrue(link)) truecount++; });
var color = truecount % 2 === 0 ? green : red;
setOutputLinks(node, color);
}
function doOutput(node) {
// assume there is just one input link
// we just need to update the node's Shape.fill
node.linksConnected.each(link => { node.findObject("NODESHAPE").fill = link.findObject("SHAPE").stroke; });
}
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<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.js">PortShiftingTool.js</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" onclick="save()">Save</button>
<button id="loadModel" onclick="load()">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>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>