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.
96 lines
3.2 KiB
96 lines
3.2 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS in Node.js -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2019 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>Using GoJS with Node.js</h1>
|
|
|
|
<p>
|
|
As of 2.0, GoJS can be used in DOM-less contexts like Node.js. However there are some considerations:
|
|
<ul>
|
|
<li>Since there is no Diagram DIV, you must instead set the <a>Diagram.viewSize</a> property.
|
|
This affects all the same values as the DIV size, like Diagram.position and layout results from layouts that are viewport-sized.</li>
|
|
<li>Cannot measure go.Pictures, you must set a <a>GraphObject.desiredSize</a> instead.</li>
|
|
<li>Cannot measure go.TextBlocks accurately, you should set a <a>GraphObject.desiredSize</a> instead.</li></li>
|
|
</ul>
|
|
</p>
|
|
|
|
<p>
|
|
For server-side operations that need to measure Pictures or TextBlocks, you should consider using a headless browser with Node.
|
|
<a href="serverSideImages.html">Click here for examples using Node with Puppeteer (headless Chrome)</a>.
|
|
</p>
|
|
|
|
<h2>Node.js example</h2>
|
|
|
|
<p>
|
|
If you saved the following JavaScript as <code>nodescript.js</code> and run it with node (<code>node nodescript.js</code>),
|
|
it will output Model JSON results in the console, which include the locations of laid-out Nodes. You can use Node.js
|
|
in this way to do server-side operations like large layouts, and then send the JSON to the client.
|
|
</p>
|
|
|
|
<pre class="lang-js">
|
|
// This example loads the GoJS library, creates a Diagram with a layout and prints the JSON results,
|
|
|
|
// Reference GoJS. This assumes its in the same directory as this script:
|
|
require('./go.js');
|
|
|
|
var $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
|
myDiagram = $(go.Diagram, '', // No DIV
|
|
{
|
|
viewSize: new go.Size(400,400), // Set this property in DOM-less environments
|
|
layout: $(go.LayeredDigraphLayout),
|
|
'animationManager.isEnabled': false
|
|
});
|
|
|
|
// define a simple Node template
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, 'Auto',
|
|
new go.Binding('location', 'loc', go.Point.Parse).makeTwoWay(go.Point.Stringify),
|
|
$(go.Shape, 'RoundedRectangle', { strokeWidth: 0},
|
|
// Shape.fill is bound to Node.data.color
|
|
new go.Binding('fill', 'color')),
|
|
$(go.TextBlock,
|
|
{ margin: 8 }, // some room around the text
|
|
// TextBlock.text is bound to Node.data.key
|
|
new go.Binding('text', 'key'))
|
|
);
|
|
|
|
// After the layout, output results:
|
|
myDiagram.addDiagramListener('InitialLayoutCompleted', function() {
|
|
console.log(myDiagram.model.toJSON());
|
|
});
|
|
|
|
// load a model:
|
|
myDiagram.model = new go.GraphLinksModel(
|
|
[
|
|
{ key: 'Alpha', color: 'lightblue' },
|
|
{ key: 'Beta', color: 'orange' },
|
|
{ key: 'Gamma', color: 'lightgreen' },
|
|
{ key: 'Delta', color: 'pink' }
|
|
],
|
|
[
|
|
{ from: 'Alpha', to: 'Beta' },
|
|
{ from: 'Alpha', to: 'Gamma' },
|
|
{ from: 'Beta', to: 'Beta' },
|
|
{ from: 'Gamma', to: 'Delta' },
|
|
{ from: 'Delta', to: 'Alpha' }
|
|
]);
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|