create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
327 lines (286 loc) • 14.4 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="Links that can render different colors for equal lengths along the link path." />
<meta itemprop="description" content="Links that can render different colors for equal lengths along the link path." />
<meta property="og:description" content="Links that can render different colors for equal lengths along the link path." />
<meta name="twitter:description" content="Links that can render different colors for equal lengths along the link path." />
<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="Multi-color Link Paths" />
<meta property="og:title" content="Multi-color Link Paths" />
<meta name="twitter:title" content="Multi-color Link Paths" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/multicolorlinks.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/multicolorlinks.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/multicolorlinks.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/multiColorLinks.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/multiColorLinks.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Multi-color Link Paths | 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">
// Assume that a Link may have a linkdata.colors property that is an Array of CSS color strings.
// Also assume that each Link has as many Shapes in it that are marked with isPanelMain: true
// as you want to get a color from the linkdata.colors Array, because each Shape can only show one color.
class MultiColorLink extends go.Link {
constructor(init) {
super();
if (init) Object.assign(this, init);
}
makeGeometry() {
const geo = super.makeGeometry();
const colors = this.data.colors;
if (Array.isArray(colors) && colors.length > 0) {
const paths = []; // find all path Shapes
this.elements.each(elt => {
if (elt.isPanelMain && elt instanceof go.Shape) {
paths.push(elt);
}
});
const numcolors = Math.min(colors.length, paths.length);
if (numcolors > 0) {
const seclen = geo.flattenedTotalLength / numcolors; // length of each color section
for (let i = 0; i < paths.length; i++) {
// go through all path Shapes
const shape = paths[i];
if (i < numcolors) {
shape.visible = true; // make sure this Shape can be seen
shape.stroke = colors[i]; // and assign a color
if (i > 0) {
// and a stroke dash array so that it only draws the needed fraction
shape.strokeDashArray = [0, i * seclen, seclen, 99999];
}
} else {
// unneeded Shapes are not visible
shape.visible = false;
}
}
}
}
return geo;
}
}
// end of MultiColorLink class
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
layout: new go.ForceDirectedLayout(),
'undoManager.isEnabled': true
});
myDiagram.nodeTemplate =
new go.Node('Auto', {
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides
})
.add(
new go.Shape({ fill: 'white', strokeWidth: 0 })
.bind('fill', 'color'),
new go.TextBlock({ margin: 12 })
.bind('text')
);
function linkPath() {
// common styling for each colored section, each rendered by a different Shape
return new go.Shape({
isPanelMain: true,
strokeWidth: 5
});
}
myDiagram.linkTemplate =
new MultiColorLink({ // defined above
routing: go.Routing.AvoidsNodes,
corner: 10,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true
})
.add(
linkPath(), // this template can show at most 5 colors,
linkPath(), // one for each link path Shape
linkPath(),
linkPath(),
linkPath() // remove any unneeded path Shapes here, if you never need to show 5 colors at once in a single link
);
load();
}
// Show the diagram's model in JSON format
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: 400px; background: #444"></div>
<p>
The Link template depends on a custom <b>MultiColorLink</b> class to render sections of each of the path Shapes that it has in a different color. The colors
are specified in the link data object's <b>colors</b> property, an Array of CSS color strings. The template must have as many
<a>GraphObject.isPanelMain</a> Shapes in it as the maximum length of the Arrays of colors. This sample's template has five path Shapes in it so that it can
render in five different colors. But if for example you need to show at most two colors, for efficiency you should change the template to have only two path
Shapes in it.
</p>
<button onclick="load()">Load</button>
<button onclick="save()">Save</button>
<textarea id="mySavedModel" style="width: 100%; height: 250px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"Alpha", "color":"lightblue"},
{"key":2, "text":"Beta", "color":"orange"},
{"key":3, "text":"Gamma", "color":"lightgreen"},
{"key":4, "text":"Delta", "color":"pink"},
{"key":5, "text":"Epsilon", "color":"gold"}
],
"linkDataArray": [
{"from":1, "to":2, "colors":[ "red","orange","gold","green","blue" ]},
{"from":1, "to":3, "colors":[ "red","blue" ]},
{"from":1, "to":4, "colors":[ "purple","orange","green" ]},
{"from":4, "to":5, "colors":[ "fuchsia" ]},
{"from":5, "to":2}
]}
</textarea>
</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>Links</h4>
<p>
The <a href="../api/symbols/Link.html" target="api">Link</a> class is used to implement a visual relationship between nodes.
Links are normally created by the presence of link data objects in the <a href="../api/symbols/GraphLinksModel.html#linkDataArray" target="api">GraphLinksModel.linkDataArray</a>
or by a parent key reference as the value of the <a href="../api/symbols/TreeModel.html#nodeParentKeyProperty" target="api">TreeModel.nodeParentKeyProperty</a> of a node data object
in a <a href="../api/symbols/TreeModel.html" target="api">TreeModel</a>.
More information can be found in the <a href="../intro/links.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#links">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Force Directed Layout</h4>
<p>
This predefined layout treats the graph as if it were a system of physical bodies with forces acting on and between them.
The layout iteratively moves nodes and links to minimize the total sum of forces on each node. The resulting layout will normally not contain
overlapping Nodes, excluding cases where the graph is densely interconnected.
More information can be found in the <a href="../intro/layouts.html#ForceDirectedLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#force-directed">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Geometry Path Strings</h4>
<p>
The <b>GoJS</b> <a href="../api/symbols/Geometry.html" target="api">Geometry</a> class controls the "shape" of a <a href="../api/symbols/Shape.html" target="api">Shape</a>,
whereas the <a href="../api/symbols/Shape.html#fill" target="api">Shape.fill</a> and <a href="../api/symbols/Shape.html#stroke" target="api">Shape.stroke</a> and other shape properties control the colors and appearance of the shape.
For common shape figures, there are predefined geometries that can be used by setting <a href="../api/symbols/Shape.html#figure" target="api">Shape.figure</a>.
However one can also define custom geometries.
</p>
<p>
One can construct any Geometry by allocating and initializing a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> of at least one <a href="../api/symbols/PathFigure.html" target="api">PathFigure</a> holding some <a href="../api/symbols/PathSegment.html" target="api">PathSegment</a>s.
But you may find that using the string representation of a Geometry is easier to write and save in a database.
Use the static method <a href="../api/symbols/Geometry.html#parse" target="api">Geometry.parse</a> or the <a href="../api/symbols/Shape.html#geometryString" target="api">Shape.geometryString</a> property to transform a geometry path string into a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> object.
</p>
<p>
More information can be found in the <a href="../intro/geometry.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#geometries">Related samples</a>
</p>
<hr>
</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>