gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
235 lines (214 loc) • 12.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="Examples of different visuals for relationships (links)."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Custom Relationships</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="my-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 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 id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
new go.Diagram("myDiagramDiv",
{
layout: $(go.TreeLayout,
{ layerSpacing: 150, arrangementSpacing: new go.Size(2, 2), setsPortSpot: false, setsChildPortSpot: false })
});
// this typically represents a person
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Shape, "Circle",
{ desiredSize: new go.Size(28, 28), fill: "white", strokeWidth: 1.5, portId: "" },
new go.Binding("figure")),
$(go.TextBlock, "name",
new go.Binding("text"))
);
// this template works for all kinds of relationships
myDiagram.linkTemplate =
$(go.Link, go.Link.Bezier, // slightly curved, by default
{ reshapable: true }, // users can reshape the link route
$(go.Shape, // the link's path shape
{ isPanelMain: true, stroke: "transparent" },
new go.Binding("stroke", "patt", f => (f === "") ? "black" : "transparent"),
new go.Binding("pathPattern", "patt", convertPathPatternToShape)),
$(go.Shape, // the link's path shape
{ isPanelMain: true, stroke: "transparent", strokeWidth: 3 },
new go.Binding("pathPattern", "patt2", convertPathPatternToShape)),
$(go.Shape, // the "to" arrowhead
{ toArrow: "", fill: null, scale: 1.2 },
new go.Binding("toArrow"),
new go.Binding("stroke", "patt", convertPathPatternToColor)),
$(go.TextBlock, // show the path object name
{ segmentOffset: new go.Point(0, 12) },
new go.Binding("text", "patt")),
$(go.TextBlock, // show the second path object name, if any
{ segmentOffset: new go.Point(0, -12) },
new go.Binding("text", "patt2"))
);
// Conversion functions that make use of the PathPatterns store of pattern Shapes
function convertPathPatternToShape(name) {
if (!name) return null;
return PathPatterns.get(name);
}
function convertPathPatternToColor(name) {
var pattobj = convertPathPatternToShape(name);
return (pattobj !== null) ? pattobj.stroke : "transparent";
}
// Define a bunch of small Shapes that can be used as values for Shape.pathPattern
var PathPatterns = new go.Map();
function definePathPattern(name, geostr, color, width, cap) {
if (typeof name !== 'string' || typeof geostr !== 'string') throw new Error("invalid name or geometry string argument: " + name + " " + geostr);
if (color === undefined) color = "black";
if (width === undefined) width = 1;
if (cap === undefined) cap = "square";
PathPatterns.set(name,
$(go.Shape,
{
geometryString: geostr,
fill: "transparent",
stroke: color,
strokeWidth: width,
strokeCap: cap
}
));
}
definePathPattern("Single", "M0 0 L1 0");
definePathPattern("Double", "M0 0 L1 0 M0 3 L1 3");
definePathPattern("Triple", "M0 0 L1 0 M0 3 L1 3 M0 6 L1 6");
definePathPattern("DashR", "M0 0 M3 0 L6 0", "red");
definePathPattern("DoubleDashR", "M0 0 M3 0 L6 0 M3 3 L6 3", "red");
definePathPattern("TripleDashR", "M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6", "red");
definePathPattern("Dash", "M0 0 M3 0 L6 0");
definePathPattern("DoubleDash", "M0 0 M3 0 L6 0 M3 3 L6 3");
//definePathPattern("TripleDash", "M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6");
definePathPattern("Dot", "M0 0 M4 0 L4.1 0", "black", 2, "round");
definePathPattern("DoubleDot", "M0 0 M4 0 L4.1 0 M4 3 L4.1 3", "black", 2, "round");
definePathPattern("SingleG", "M0 0 L1 0", "green");
definePathPattern("DoubleG", "M0 0 L1 0 M0 3 L1 3", "green");
definePathPattern("SingleR", "M0 0 L1 0", "red");
definePathPattern("TripleR", "M0 0 L1 0 M0 3 L1 3 M0 6 L1 6", "red");
definePathPattern("ZigzagB", "M0 3 L1 0 3 6 4 3", "blue");
definePathPattern("ZigzagR", "M0 3 L1 0 3 6 4 3", "red");
definePathPattern("BigZigzagR", "M0 4 L2 0 6 8 8 4", "red");
definePathPattern("DoubleZigzagB", "M0 3 L1 0 3 6 4 3 M0 9 L1 6 3 12 4 9", "blue");
definePathPattern("CrossG", "M0 0 M3 0 M1 0 L1 8", "green");
definePathPattern("CrossR", "M0 0 M3 0 M1 0 L1 8", "red");
//definePathPattern("Railroad", "M0 2 L3 2 M0 6 L3 6 M1 0 L1 8"); // also == Double & Cross
definePathPattern("BackSlash", "M0 3 L2 6 M1 0 L5 6 M4 0 L6 3");
definePathPattern("Slash", "M0 3 L2 0 M1 6 L5 0 M4 6 L6 3");
definePathPattern("Coil", "M0 0 C2.5 0 5 2.5 5 5 C5 7.5 5 10 2.5 10 C0 10 0 7.5 0 5 C0 2.5 2.5 0 5 0");
definePathPattern("Square", "M0 0 M1 0 L7 0 7 6 1 6z");
definePathPattern("Circle", "M0 3 A3 3 0 1 0 6 4 A3 3 0 1 0 0 3");
definePathPattern("BigCircle", "M0 5 A5 5 0 1 0 10 5 A5 5 0 1 0 0 5");
definePathPattern("Triangle", "M0 0 L4 4 0 8z");
definePathPattern("Diamond", "M0 4 L4 0 8 4 4 8z");
definePathPattern("Dentil", "M0 0 L2 0 2 6 6 6 6 0 8 0");
definePathPattern("Greek", "M0 0 L1 0 1 3 0 3 M0 6 L4 6 4 0 8 0 M8 3 L7 3 7 6 8 6");
definePathPattern("Seed", "M0 0 A9 9 0 0 0 12 0 A9 9 180 0 0 0 0");
definePathPattern("SemiCircle", "M0 0 A4 4 0 0 1 8 0");
definePathPattern("BlindHem", "M0 4 L2 4 4 0 6 4 8 4");
definePathPattern("Zipper", "M0 4 L1 4 1 0 8 0 8 4 9 4 M0 6 L3 6 3 2 6 2 6 6 9 6");
//definePathPattern("Zipper2", "M0 4 L1 4 1 0 8 0 8 4 9 4 M0 7 L3 7 3 3 6 3 6 7 9 7");
definePathPattern("Herringbone", "M0 2 L2 4 0 6 M2 0 L4 2 M4 6 L2 8");
definePathPattern("Sawtooth", "M0 3 L4 0 2 6 6 3");
// helper function for creating sequential chains of nodes
function addLinks(patt1a, patt1b, patt2a, patt2b, patt3a, patt3b) {
var arrow = "OpenTriangle";
var left = { figure: "Square" };
myDiagram.model.addNodeData(left);
var middle = { figure: "Circle" };
myDiagram.model.addNodeData(middle);
myDiagram.model.addLinkData({ from: left.key, to: middle.key, patt: patt1a, patt2: patt1b, toArrow: arrow });
if (patt2a) {
var right = { figure: "Triangle" };
myDiagram.model.addNodeData(right);
myDiagram.model.addLinkData({ from: middle.key, to: right.key, patt: patt2a, patt2: patt2b, toArrow: arrow });
if (patt3a) {
var farright = { figure: "Diamond" };
myDiagram.model.addNodeData(farright);
myDiagram.model.addLinkData({ from: right.key, to: farright.key, patt: patt3a, patt2: patt3b, toArrow: arrow });
}
}
}
// simple path objects
var it = PathPatterns.iteratorKeys;
while (it.next()) {
addLinks(it.value, "", it.next() ? it.value : "", "", it.next() ? it.value : "");
}
// compound path objects
addLinks("DoubleG", "CrossG", "Single", "CrossR");
addLinks("Dash", "ZigzagR", "Dash", "BigZigzagR");
addLinks("Double", "ZigzagR", "Double", "BigZigzagR");
addLinks("Triple", "ZigzagR", "Triple", "BigZigzagR");
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
<p>
This illustrates how one can define custom strokes for Links (or really any Shape that is relatively straight)
by making use of the <a>Shape.pathPattern</a> property to repeatedly draw a small Shape along the stroke path.
These examples may be useful in generating diagrams showing social or emotional relationships or other cases
where it is useful to distinguish kinds of relationships in more manners than just by the <a>Shape.stroke</a> (color)
or <a>Shape.strokeWidth</a> or <a>Shape.strokeDashArray</a>.
</p>
<p>
The first set of link triplets, at the top, demonstrate the basic pathPatterns defined by the <code>definePathPattern</code> function in this page.
The last set of link doublets, at the bottom, demonstrate how those basic pathPatterns can be combined in a single <a>Link</a>
that has two <a>Shape</a>s that have <a>GraphObject.isPanelMain</a> set to true, so that both shapes get the same <a>Geometry</a>
computed by the link. Yet each such link shape draws a different path pattern.
</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>