create-gojs-kit

<!DOCTYPE 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="A custom Layout that arranges a collection of nodes and links where there is a single split node and a single merge node, and all nodes are in paths of links that come from the split node and go to the merge node." /> <meta itemprop="description" content="A custom Layout that arranges a collection of nodes and links where there is a single split node and a single merge node, and all nodes are in paths of links that come from the split node and go to the merge node." /> <meta property="og:description" content="A custom Layout that arranges a collection of nodes and links where there is a single split node and a single merge node, and all nodes are in paths of links that come from the split node and go to the merge node." /> <meta name="twitter:description" content="A custom Layout that arranges a collection of nodes and links where there is a single split node and a single merge node, and all nodes are in paths of links that come from the split node and go to the merge node." /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="../assets/css/style.css">  <meta itemprop="name" content="Layout of Parallel Flows from Split Node to Merge Node" /> <meta property="og:title" content="Layout of Parallel Flows from Split Node to Merge Node" /> <meta name="twitter:title" content="Layout of Parallel Flows from Split Node to Merge Node" /> <meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/parallel.png" /> <meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/parallel.png" /> <meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/parallel.png" /> <meta property="og:url" content="https://gojs.net/latest/samples/Parallel.html" /> <meta property="twitter:url" content="https://gojs.net/latest/samples/Parallel.html" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:type" content="website" /> <meta property="twitter:domain" content="gojs.net" /> <title> Layout of Parallel Flows from Split Node to Merge Node | GoJS Diagramming Library </title> </head> <body>  <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">   <script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script> <div id="allSampleContent" class="p-4 w-full"> <script src="../extensions/ParallelLayout.js"></script> <script id="code"> function init() { myDiagram = new go.Diagram('myDiagramDiv', { // must be the ID or reference to div allowCopy: false, // would need to merge copied nodes and links to allowDelete: false, // use the single "Split" and "Merge" nodes layout: new ParallelLayout({ layerSpacing: 20, nodeSpacing: 10 }) }); // define the Node templates myDiagram.nodeTemplate = new go.Node('Auto', { locationSpot: go.Spot.Center }) .add( new go.Shape('Rectangle', { fill: 'wheat', stroke: null, strokeWidth: 0 }), new go.TextBlock({ margin: 3 }) .bind('text') ); myDiagram.nodeTemplateMap.add('Split', new go.Node('Auto', { locationSpot: go.Spot.Center }) .add( new go.Shape('Diamond', { fill: 'deepskyblue', stroke: null, strokeWidth: 0, desiredSize: new go.Size(28, 28) }), new go.TextBlock() .bind('text') ) ); myDiagram.nodeTemplateMap.add('Merge', new go.Node('Auto', { locationSpot: go.Spot.Center }) .add( new go.Shape('Circle', { fill: 'deepskyblue', stroke: null, strokeWidth: 0, desiredSize: new go.Size(28, 28) }), new go.TextBlock() .bind('text') ) ); // define the Link template to be minimal myDiagram.linkTemplate = new go.Link({ routing: go.Routing.Orthogonal, corner: 5 }) .add( new go.Shape({ stroke: 'gray', strokeWidth: 1.5 }) ); // define the Group template to be fairly simple myDiagram.groupTemplate = new go.Group('Auto', { layout: new ParallelLayout({ layerSpacing: 20, nodeSpacing: 10 }) }) .add( new go.Shape({ fill: 'transparent', stroke: 'darkgoldenrod' }), new go.Placeholder({ padding: 10 }), go.GraphObject.build('SubGraphExpanderButton', { alignment: go.Spot.TopLeft, 'ButtonBorder.figure': 'Rectangle' }) ); var model = new go.GraphLinksModel(); model.nodeDataArray = [ { key: -1, isGroup: true }, { key: -2, isGroup: true }, { key: -3, isGroup: true }, { key: 1, text: 'S', category: 'Split', group: -1 }, { key: 2, text: 'C', group: -1 }, { key: 3, text: 'Longer Node', group: -1 }, { key: 4, text: 'A', group: -1 }, { key: 5, text: 'B\nB', group: -1 }, { key: 6, text: 'Another', group: -1 }, { key: 9, text: 'J', category: 'Merge', group: -1 }, { key: 11, text: 'T', category: 'Split', group: -2 }, { key: 12, text: 'C', group: -2 }, { key: 13, text: 'Here', group: -2 }, { key: 14, text: 'D', group: -2 }, { key: 15, text: 'Everywhere', group: -2 }, { key: 16, text: 'EEEEE', group: -2 }, { key: 19, text: 'K', category: 'Merge', group: -2 }, { key: 21, text: 'U', category: 'Split', group: -3 }, { key: 22, text: 'F', group: -3 }, { key: 23, text: 'Medium\nTall\nNode', group: -3 }, { key: 24, text: 'G', group: -3 }, { key: 25, text: 'AS', group: -3 }, { key: 26, text: 'H\nHH\nHHH', group: -3 }, { key: 27, text: 'I', group: -3 }, { key: 29, text: 'L', category: 'Merge', group: -3 }, { key: 101, text: '0', category: 'Split' }, { key: 107, text: 'ABCDEFG' }, { key: 109, text: '*', category: 'Merge' } ]; model.linkDataArray = [ { from: 1, to: 2 }, { from: 2, to: 3 }, { from: 3, to: 4 }, { from: 4, to: 9 }, { from: 1, to: 5 }, { from: 5, to: 6 }, { from: 6, to: 9 }, { from: 9, to: 11 }, { from: 9, to: 21 }, { from: 11, to: 12 }, { from: 12, to: 13 }, { from: 13, to: 14 }, { from: 14, to: 19 }, { from: 11, to: 15 }, { from: 15, to: 16 }, { from: 16, to: 19 }, { from: 21, to: 22 }, { from: 22, to: 24 }, { from: 24, to: 26 }, { from: 23, to: 29 }, { from: 21, to: 25 }, { from: 25, to: 23 }, { from: 21, to: 27 }, { from: 26, to: 29 }, { from: 27, to: 29 }, { from: 101, to: 1 }, { from: 19, to: 109 }, { from: 29, to: 107 }, { from: 107, to: 109 } ]; myDiagram.model = model; } window.addEventListener('DOMContentLoaded', init); </script> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; background: white; width: 100%; height: 500px"></div> <p> This sample demonstrates a custom <a>TreeLayout</a>, ParallelLayout, which assumes that there is a single "Split" node that is the root of a tree, other than links that connect with a single "Merge" node. The layout is defined in its own file, as <a href="../extensions/ParallelLayout.js">ParallelLayout.js</a>. </p> <p>Both the <a>Diagram.layout</a> and the <a>Group.layout</a> are instances of ParallelLayout, allowing for nested layouts that appear in parallel.</p> </div> </div>   </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>  <h4>Tree Layout</h4> <p> This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the <a href="../api/symbols/TreeLayout.html">TreeLayout</a>, see the <a href="../intro/trees.html">Trees</a> page in the Introduction. More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#treelayout">Related samples</a> </p> <hr>  <h4>Custom Layouts</h4> <p> GoJS allows for the creation of custom layouts to meet specific needs. </p> <p> There are also many layouts that are extensions -- not predefined in the <code>go.js</code> or <code>go-debug.js</code> library, but available as source code in one of the three extension directories, with some documentation and corresponding samples. More information can be found in the <a href="../intro/layouts.html#CustomLayouts">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#customlayout">Related samples</a> </p> <hr>  <h4>Groups</h4> <p> The <a href="../api/symbols/Group.html" target="api">Group</a> class is used to treat a collection of <a href="../api/symbols/Node.html" target="api">Node</a>s and <a href="../api/symbols/Link.html" target="api">Link</a>s as if they were a single <a href="../api/symbols/Node.html" target="api">Node</a>. Those nodes and links are members of the group; together they constitute a subgraph. </p> <p> A subgraph is <em>not</em> another <a href="../api/symbols/Diagram.html" target="api">Diagram</a>, so there is no separate HTML Div element for the subgraph of a group. All of the <a href="../api/symbols/Part.html" target="api">Part</a>s that are members of a <a href="../api/symbols/Group.html" target="api">Group</a> belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself. </p> <p> More information can be found in the <a href="../intro/groups.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#groups">Related samples</a> </p> <hr>  <h4>Buttons</h4> <p> GoJS defines several <a href="../api/symbols/Panel.html" target="api">Panel</a>s for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels. </p> <p> These predefined panels can be used as if they were <a href="../api/symbols/Panel.html" target="api">Panel</a>-derived classes in calls to <a href="../api/symbols/GraphObject.html#build" target="api">GraphObject.build</a>. They are implemented as simple visual trees of <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>s in <a href="../api/symbols/Panel.html" target="api">Panel</a>s, with pre-set properties and event handlers. </p> <p> More information can be found in the <a href="../intro/buttons.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#buttons">Related samples</a> </p> <hr>  <h4>GoJS Extensions</h4> <p> <b>GoJS</b> can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>, <a href="../api/symbols/Diagram.html" target="api">Diagram</a>, <a href="../api/symbols/CommandHandler.html" target="api">CommandHandler</a>, <a href="../api/symbols/Tool.html" target="api">Tool</a>, or <a href="../api/symbols/Layout.html" target="api">Layout</a>. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the <b>GoJS</b> classes. </p> <p> In addition to our samples, <b>GoJS</b> provides an <strong><a href="../samples/#extensions">extensions gallery</a></strong>, showcasing the creation of custom tools and layouts. Those classes and samples are written in TypeScript, available at <code>../extensionsJSM/</code>, as ECMAScript/JavaScript modules -- these use the <code>../release/go-module.js</code> library. We recommend that you copy the files that you need into your project, so that you can adjust how they refer to the GoJS library that you choose and so that you can include them into your own building and packaging procedures. </p> <p> More information can be found in the <a href="../intro/extensions.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#extensions">Related samples</a> </p> <hr> </div> </div> </body>  <script src="../assets/js/goSamples.js"></script> </html>