gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
192 lines (175 loc) • 7.51 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS Highlighting -- Northwoods Software</title>
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<h1>Highlighting</h1>
<p>
It is common to make a Node (or a part of a Node or a Link) stand out by "highlighting" it in some way.
This happens with selection when a selection Adornment is shown.
However one frequently wants to highlight Parts independently of selection.
This can be done by changing the fill or stroke of a Shape, replacing a Picture source with another source, adding or removing a shadow, and so on.
</p>
<h2 id="HighlightingNodeUponMouseOver">Highlighting a Node upon Mouse Over</h2>
<p>
The most general kind of highlighting is to change appearance when an action occurs, such as mousing over a node.
This can draw attention to interactive Nodes or Links or really any GraphObject, such as buttons.
This is why <a href="buttons.html">predefined buttons in GoJS</a> highlight on mouse-over.
</p>
<p>
To achieve this effect you just need to define <a>GraphObject.mouseEnter</a> and <a>GraphObject.mouseLeave</a> event handlers.
</p>
<pre data-language="javascript" id="button">
diagram.initialContentAlignment = go.Spot.Center;
function mouseEnter(e, obj) {
var shape = obj.findObject("SHAPE");
shape.fill = "#6DAB80";
shape.stroke = "#A6E6A1";
var text = obj.findObject("TEXT");
text.stroke = "white";
};
function mouseLeave(e, obj) {
var shape = obj.findObject("SHAPE");
// Return the Shape's fill and stroke to the defaults
shape.fill = obj.data.color;
shape.stroke = null;
// Return the TextBlock's stroke to its default
var text = obj.findObject("TEXT");
text.stroke = "black";
};
diagram.nodeTemplate =
$(go.Node, "Auto",
{
mouseEnter: mouseEnter,
mouseLeave: mouseLeave
},
$(go.Shape, "Rectangle",
{ strokeWidth: 2, stroke: null, name: "SHAPE" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 10, font: "bold 18px Verdana", name: "TEXT" },
new go.Binding("text", "key"))
);
diagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "#96D6D9" },
{ key: "Beta", color: "#96D6D9" },
{ key: "Gamma", color: "#EFEBCA" },
{ key: "Delta", color: "#EFEBCA" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
</pre>
<script>goCode("button", 600, 150)</script>
<p>Mouse-over nodes to see them highlight.</p>
<p>
It is also commonplace to perform highlighting of stationary Parts during a drag, which is a different case of "mouse over".
This can be implemented in a manner similar to the mouseEnter/mouseLeave events by implementing
<a>GraphObject.mouseDragEnter</a> and <a>GraphObject.mouseDragLeave</a> event handlers.
Several samples demonstrate this: <a href="../samples/orgChartEditor.html">Org Chart Editor</a>,
<a href="../samples/planogram.html">Planogram</a>, <a href="../samples/regrouping.html">Regrouping</a>,
and <a href="../samples/seatingChart.html">Seating Chart</a>.
</p>
<h2 id="HighlightingNodesAndLinks">Highlighting Nodes and Links</h2>
<p>
It is common to want to show Nodes or Links that are related to a particular Node.
Unlike the mouse-over scenarios, one may want to maintain the highlighting for many Parts
independent of any mouse state or selection state.
</p>
<p>
Here is an example of highlighting all of the nodes and links that come out of a node that the user clicks.
This example uses the <a>Part.isHighlighted</a> property and data binding of visual properties to that Part.isHighlighted property.
</p>
<pre data-language="javascript" id="treeExpanderButton">
diagram.initialContentAlignment = go.Spot.Center;
diagram.nodeTemplate =
$(go.Node, "Auto",
{ // when the user clicks on a Node, highlight all Links coming out of the node
// and all of the Nodes at the other ends of those Links.
click: function(e, node) { showConnections(node); } // defined below
},
$(go.Shape, "Rectangle",
{ strokeWidth: 2, stroke: null },
new go.Binding("fill", "color"),
// the Shape.stroke color depends on whether Node.isHighlighted is true
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
.ofObject()),
$(go.TextBlock,
{ margin: 10, font: "bold 18px Verdana" },
new go.Binding("text", "key"))
);
// define the Link template
diagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Normal, toShortLength: 4, selectable: false },
$(go.Shape,
{ isPanelMain: true, stroke: "black", strokeWidth: 1 },
// the Shape.stroke color depends on whether Link.isHighlighted is true
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
.ofObject()),
$(go.Shape,
{ toArrow: "standard", stroke: null, strokeWidth: 0 },
// the Shape.fill color depends on whether Link.isHighlighted is true
new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "black"; })
.ofObject())
);
// highlight all Links and Nodes coming out of a given Node
function showConnections(node) {
var diagram = node.diagram;
diagram.startTransaction("highlight");
// remove any previous highlighting
diagram.clearHighlighteds();
// for each Link coming out of the Node, set Link.isHighlighted
node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
// for each Node destination for the Node, set Node.isHighlighted
node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
diagram.commitTransaction("highlight");
}
// when the user clicks on the background of the Diagram, remove all highlighting
diagram.click = function(e) {
diagram.startTransaction("no highlighteds");
diagram.clearHighlighteds();
diagram.commitTransaction("no highlighteds");
};
diagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "#96D6D9" },
{ key: "Beta", color: "#96D6D9" },
{ key: "Gamma", color: "#EFEBCA" },
{ key: "Delta", color: "#EFEBCA" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
</pre>
<script>goCode("treeExpanderButton", 600, 200)</script>
<p>
Click on a node to highlight outbound connected links and nodes.
Click in the diagram background to remove all highlights.
Note that the highlighting is independent of selection.
</p>
<p>
The use of data binding to modify the Shape properties allows you to avoid specifying names for each Shape
and writing code to find the Shape and modify its properties.
</p>
</div>
</div>
</body>
</html>