192 lines
7.2 KiB
HTML
192 lines
7.2 KiB
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>
|