<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
function makeAnnularWedge(angle, sweep, inner) { // taken from Radial Partition sample
// the Geometry will be centered about (0,0)
var outer = inner + 24; // the outer radius
var p = new go.Point(outer, 0).rotate(angle);
var q = new go.Point(inner, 0).rotate(angle + sweep);
var geo = new go.Geometry()
.add(new go.PathFigure(-outer, -outer)) // always make sure the Geometry includes the top left corner
.add(new go.PathFigure(outer, outer)) // and the bottom right corner of the whole circular area
.add(new go.PathFigure(p.x, p.y) // start at outer corner, go clockwise
.add(new go.PathSegment(go.PathSegment.Arc, angle, sweep, 0, 0, outer, outer))
.add(new go.PathSegment(go.PathSegment.Line, q.x, q.y)) // to opposite inner corner, then anticlockwise
.add(new go.PathSegment(go.PathSegment.Arc, angle + sweep, -sweep, 0, 0, inner, inner).close()));
return geo;
}
var HighlighterTemplate =
$(go.Adornment, "Spot",
$(go.Placeholder), // takes the size and position of the adorned Node
$(go.Panel,
new go.Binding("itemArray", "colors"),
{
itemTemplate:
$(go.Panel, // this Panel.itemIndex will tell us which item it is in the colors Array
$(go.Shape, { strokeWidth: 0.5, stroke: "gray" },
new go.Binding("fill", ""), // the item will be the CSS color string
new go.Binding("geometry", "", function(color, shape) { // compute the Geometry
// ignore the color
var colorarr = shape.panel.panel.itemArray;
var sweep = 180/colorarr.length; // cannot be zero, else there wouldn't be any item Panel
var i = shape.panel.itemIndex; // the index of the color in the colors Array
var b = shape.part.adornedPart.actualBounds; // the adorned Node's bounds
var radius = Math.sqrt(b.width*b.width/4 + b.height*b.height/4) + 12;
return makeAnnularWedge(180 + i * sweep, sweep, radius);
})))
})
);
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
highlightedChanged: function(node) {
if (node.isHighlighted && node.data && node.data.colors && node.data.colors.length > 0) {
var ad = HighlighterTemplate.copyTemplate();
ad.adornedObject = node;
node.addAdornment("HIGHLIGHT", ad);
} else {
node.removeAdornment("HIGHLIGHT");
}
}
// Alternatively, as a selection Adornment:
// selectionAdornmentTemplate: HighlighterTemplate
},
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", colors: ["red", "orange", "yellow", "green", "blue"] },
{ key: 2, text: "BetaBetaBetaBeta", color: "orange", colors: ["blue"] }
]);
}
var toggle = true;
function test() {
myDiagram.commit(function(diag) {
if (toggle) diag.nodes.each(function(n) { if (Math.random() < 0.7) n.isHighlighted = true; });
else diag.clearHighlighteds();
});
toggle = !toggle;
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Highlight randomly</button>
</body>
</html>
