create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
438 lines (389 loc) • 17.9 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="Data flow or workflow graph of nodes with varying input and output ports with labels, oriented vertically." />
<meta itemprop="description" content="Data flow or workflow graph of nodes with varying input and output ports with labels, oriented vertically." />
<meta property="og:description" content="Data flow or workflow graph of nodes with varying input and output ports with labels, oriented vertically." />
<meta name="twitter:description" content="Data flow or workflow graph of nodes with varying input and output ports with labels, oriented vertically." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Vertical Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports" />
<meta property="og:title" content="Vertical Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports" />
<meta name="twitter:title" content="Vertical Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/dataflowvertical.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/dataflowvertical.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/dataflowvertical.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/dataFlowVertical.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/dataFlowVertical.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Vertical Data Flow Diagram of SQL Operation Nodes with Multiple Labeled Input and Output Ports | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
initialContentAlignment: go.Spot.Top,
initialAutoScale: go.AutoScale.UniformToFill,
layout: new go.LayeredDigraphLayout({ direction: 90 }),
'undoManager.isEnabled': true
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener('Modified', e => {
const button = document.getElementById('SaveButton');
if (button) button.disabled = !myDiagram.isModified;
const idx = document.title.indexOf('*');
if (myDiagram.isModified) {
if (idx < 0) document.title += '*';
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
// when the diagram is vertically oriented, "left" means "top" and "right" means "bottom"
function makePort(name, leftside) {
const port = new go.Shape('Circle', {
fill: '#555555',
stroke: null,
desiredSize: new go.Size(10, 10),
portId: name, // declare this object to be a "port"
toMaxLinks: 1, // don't allow more than one link into a port
cursor: 'pointer' // show a different cursor to indicate potential link point
});
const lab = new go.TextBlock(
name, // the name of the port
{ font: '7pt sans-serif' }
);
const panel = new go.Panel('Vertical', { margin: new go.Margin(0, 2) });
if (leftside) {
port.toSpot = go.Spot.Top;
port.toLinkable = true;
lab.margin = new go.Margin(1, 0, 0, 1);
panel.alignment = go.Spot.TopLeft;
panel.add(port);
panel.add(lab);
} else {
port.fromSpot = go.Spot.Bottom;
port.fromLinkable = true;
lab.margin = new go.Margin(1, 1, 0, 0);
panel.alignment = go.Spot.TopRight;
panel.add(lab);
panel.add(port);
}
return panel;
}
function makeTemplate(typename, icon, background, inports, outports) {
myDiagram.nodeTemplateMap.set(typename,
new go.Node('Spot', { selectionAdorned: false })
.add(
new go.Panel('Auto', { width: 200, height: 90 })
.add(
new go.Shape('RoundedRectangle', {
fill: go.Brush.lighten(background),
stroke: 'gray',
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight
})
.bindObject('fill', 'isSelected', s => s ? 'dodgerblue' : background),
new go.Panel('Table')
.add(
new go.TextBlock(typename, {
column: 0,
margin: 3,
maxSize: new go.Size(80, NaN),
stroke: 'black',
font: 'bold 11pt sans-serif'
}),
new go.Picture(icon, { column: 1, width: 55, height: 55 }),
new go.TextBlock({
column: 2,
margin: 3,
editable: true,
maxSize: new go.Size(80, 40),
stroke: 'black',
font: 'bold 9pt sans-serif'
})
.bindTwoWay('text', 'name')
)
),
new go.Panel('Horizontal', {
alignment: go.Spot.Top,
alignmentFocus: new go.Spot(0.5, 0, 0, 4)
})
.add(...inports),
new go.Panel('Horizontal', {
alignment: go.Spot.Bottom,
alignmentFocus: new go.Spot(0.5, 1, 0, -4)
})
.add(...outports)
));
}
makeTemplate('Table', 'images/table.svg', 'forestgreen',
[],
[makePort('OUT', false)]
);
makeTemplate('Join', 'images/join.svg', 'mediumorchid',
[makePort('L', true), makePort('R', true)],
[
makePort('UL', false),
makePort('ML', false),
makePort('M', false),
makePort('MR', false),
makePort('UR', false)
]
);
makeTemplate('Project', 'images/project.svg', 'darkcyan',
[makePort('', true)],
[makePort('OUT', false)]
);
makeTemplate('Filter', 'images/filter.svg', 'cornflowerblue',
[makePort('', true)],
[makePort('OUT', false), makePort('INV', false)]
);
makeTemplate('Group', 'images/group.svg', 'mediumpurple',
[makePort('', true)],
[makePort('OUT', false)]
);
makeTemplate('Sort', 'images/sort.svg', 'sienna',
[makePort('', true)],
[makePort('OUT', false)]
);
makeTemplate('Export', 'images/upload.svg', 'darkred',
[makePort('', true)],
[]
);
myDiagram.linkTemplate =
new go.Link({
curve: go.Curve.Bezier,
fromEndSegmentLength: 30,
toEndSegmentLength: 30,
relinkableFrom: true,
relinkableTo: true
})
.add(
new go.Shape({ stroke: '#555555', strokeWidth: 2 })
);
load();
}
// Show the diagram's model in JSON format that the user may edit
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
id="myDiagramDiv"
style="border: solid 1px black; width: 100%; height: 600px"></div>
<p>
This sample demonstrates a data flow or workflow graph with labeled ports on
nodes. A real application would provide the ability to edit the details
(properties) of each node so that the actual database operation could be
executed.
</p>
<p>
The ports of each node are set up as panels, created within the
<b>makePort</b> function. This function sets various properties of the
<a>Shape</a> and <a>TextBlock</a> that make up the panel, and properties of
the panel itself. Most notable are <a>GraphObject.portId</a> to declare the
shape as a port, and <a>GraphObject.fromLinkable</a> and
<a>GraphObject.toLinkable</a> to set the way the ports can be linked.
</p>
<p>
The diagram also uses the <b>makeTemplate</b> function to create the node
templates with shared features. This function takes a type, an image, a
background color, and arrays of ports to create the node to be added to the
<a>Diagram.nodeTemplateMap</a>.
</p>
<p>
For the same data model rendered somewhat differently, see the
<a href="dataFlow.html">Data Flow (horizontal)</a> sample.
</p>
<div>
<div>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
Diagram Model saved in JSON format:
</div>
<textarea id="mySavedModel" style="width: 100%; height: 300px">
{ "class": "go.GraphLinksModel",
"nodeCategoryProperty": "type",
"linkFromPortIdProperty": "frompid",
"linkToPortIdProperty": "topid",
"nodeDataArray": [
{"key":1, "type":"Table", "name":"Product"},
{"key":2, "type":"Table", "name":"Sales"},
{"key":3, "type":"Table", "name":"Period"},
{"key":4, "type":"Table", "name":"Store"},
{"key":11, "type":"Join", "name":"Product, Class"},
{"key":12, "type":"Join", "name":"Period"},
{"key":13, "type":"Join", "name":"Store"},
{"key":21, "type":"Project", "name":"Product, Class"},
{"key":31, "type":"Filter", "name":"Boston, Jan2014"},
{"key":32, "type":"Filter", "name":"Boston, 2014"},
{"key":41, "type":"Group", "name":"Sales"},
{"key":42, "type":"Group", "name":"Total Sales"},
{"key":51, "type":"Join", "name":"Product Name"},
{"key":61, "type":"Sort", "name":"Product Name"},
{"key":71, "type":"Export", "name":"File"}
],
"linkDataArray": [
{"from":1, "frompid":"OUT", "to":11, "topid":"L"},
{"from":2, "frompid":"OUT", "to":11, "topid":"R"},
{"from":3, "frompid":"OUT", "to":12, "topid":"R"},
{"from":4, "frompid":"OUT", "to":13, "topid":"R"},
{"from":11, "frompid":"M", "to":12, "topid":"L"},
{"from":12, "frompid":"M", "to":13, "topid":"L"},
{"from":13, "frompid":"M", "to":21},
{"from":21, "frompid":"OUT", "to":31},
{"from":21, "frompid":"OUT", "to":32},
{"from":31, "frompid":"OUT", "to":41},
{"from":32, "frompid":"OUT", "to":42},
{"from":41, "frompid":"OUT", "to":51, "topid":"L"},
{"from":42, "frompid":"OUT", "to":51, "topid":"R"},
{"from":51, "frompid":"OUT", "to":61},
{"from":61, "frompid":"OUT", "to":71}
]}
</textarea>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Table Panels</h4>
<p>
The "Table" Panel, <a href="../api/symbols/Panel.html#static-Table" target="api">Panel.Table</a>, arranges objects in rows and columns.
Each object in a Table Panel is put into the cell indexed by the value of <a href="../api/symbols/GraphObject.html#row" target="api">GraphObject.row</a> and <a href="../api/symbols/GraphObject.html#column" target="api">GraphObject.column</a>.
The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.
More information can be found in the <a href="../intro/tablePanels.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tables">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Layered Digraph Layout</h4>
<p>
This predefined layout is used for placing Nodes of a general directed graph in layers (rows or columns). This is more general than <a href="../api/symbols/TreeLayout.html">TreeLayout</a>,
as it does not require that the graph be tree-structured.
More information can be found in the <a href="../intro/layouts.html#LayeredDigraphLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#layered-digraph">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Ports in Nodes</h4>
<p>
Specific elements of a Node at which links may connect are called <i>ports</i>.
There may be any number of ports in a node. By default there is just one port, the whole node,
which results in the effect of having the whole node act as the port.
Port-like GraphObjects can only be in <a href="../api/symbols/Node.html" target="api">Node</a>s or <a href="../api/symbols/Group.html" target="api">Group</a>s, not in <a href="../api/symbols/Link.html" target="api">Link</a>s or <a href="../api/symbols/Adornment.html" target="api">Adornment</a>s or simple <a href="../api/symbols/Part.html" target="api">Part</a>s.
</p>
<p>
More information can be found in the <a href="../intro/ports.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#ports">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
</div>
</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>