gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
186 lines (173 loc) • 8.81 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."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
<title>Multi-color Links</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="mb-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 lg:text-base 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 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 data.colors Array.
function MultiColorLink() {
go.Link.call(this);
}
go.Diagram.inherit(MultiColorLink, go.Link);
MultiColorLink.prototype.makeGeometry = function() {
var geo = go.Link.prototype.makeGeometry.call(this);
var colors = this.data.colors;
if (Array.isArray(colors) && colors.length > 0) {
var paths = []; // find all path Shapes
this.elements.each(function(elt) {
if (elt.isPanelMain && elt instanceof go.Shape) {
paths.push(elt);
}
});
var numcolors = Math.min(colors.length, paths.length);
if (numcolors > 0) {
var seclen = geo.flattenedTotalLength / numcolors; // length of each color section
for (var i = 0; i < paths.length; i++) { // go through all path Shapes
var 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;
}
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
$(go.Shape,
{ fill: "white", strokeWidth: 0 },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 12 },
new go.Binding("text"))
);
function linkPath() { // common styling for each colored section, each rendered by a different Shape
return $(go.Shape, { isPanelMain: true, strokeWidth: 5 });
}
myDiagram.linkTemplate =
$(MultiColorLink,
{
routing: go.Link.AvoidsNodes, corner: 10,
relinkableFrom: true, relinkableTo: true,
reshapable: true, resegmentable: true
},
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>
<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>
<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>
</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>