markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
185 lines (169 loc) • 8.99 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Relationships</title>
<meta name="description" content="Examples of different visuals for relationships (links)." />
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
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", function(f) { return (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.getValue(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('string', go.Shape);
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.add(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");
}
</script>
</head>
<body onload="init()">
<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>
</body>
</html>