I see there are some really good keyboard shortcuts for scrolling and zooming. Is there a way that I can accomplish the same Zoom In/ Zoom Out functionality that comes with Ctrl+ and Ctrl-, by using the mouseWheel?
I’d like to just click on the canvas div element and then use the mouse wheel to zoom the graph in and out, not scroll…exact same way that is done with the keyboard shortcuts…wondering what the best way to go about that is?
Thanks
If you middle-mouse-click, it changes the behavior of mouse-wheel events to zoom instead of scroll.
Programmatically you can specify the behavior by setting Diagram.toolManager.mouseWheelBehavior, ToolManager | GoJS API
Ok that’s nice. I’d like to just have the mouseWheel zoom by default, where exactly do I need to have this line of code, this code by itself isn’t working:
myDiagram2.toolManager.WheelZoom
I’m declaring the name my diagram as myDiagram2:
var myDiagram2 = graph(go.Diagram, "myDiagramDiv2",
{
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform,
// enable undo & redo
"undoManager.isEnabled": true,
maxSelectionCount: 1, //users can only select one part at a time
layout:
graph(go.LayeredDigraphLayout,
{
angle: 90,
layerSpacing: 100
}),
"PartResized": function(e) { e.diagram.layoutDiagram(true); },
"ChangedSelection": showConnections //called when there is a click on the diagram
});
Is this the same case for the other properties listed in the link you posted?
If you search the samples you’ll find some examples of how to set that property.
Alright I was able to figure that out. One other feature I came across, I saw one of the samples had an example of a search functionality that is nice to have. It works no problem when I set:
myDiagram2.highlightCollection(results);
I would prefer to select all matching strings from the search, rather then hightlight, I saw in the docs that there is “selectCollection”, but for some reason it is only selecting the first matching node, not all of the matching nodes:
function searchDiagram() {
myDiagram2.startTransaction("select search");
myDiagram2.clearHighlighteds();
myDiagram2.clearSelection();
var input = document.getElementById("mySearch");
if (!input) return;
input.focus(); //brings HTML focus to canvas
var regex = new RegExp(input.value, "i");
if (input.value) {
var results = myDiagram2.findNodesByExample({ key: regex });
myDiagram2.selectCollection(results);
// try to center the diagram at the first node that was found
if (results.count > 0) myDiagram2.centerRect(results.first().actualBounds);
}
myDiagram2.commitTransaction("select search");
}
Am I using that “selectCollection” incorrectly"?
Thanks
Yes, that looks right.
Are you sure that in that case the value of results really does have more than one Node in it? In other words, is results.count > 1?
Note that you are checking the value of key in the data. I suppose you are trying to search for subsets of nodes that have a particular pattern as the key value.
Yeah it looks like the count is right, when I’m getting a console.log of 6 when I type in “c” which is correct but it only highlights the first node:
I know that calls “ChangedSelection” which I am listening for in my diagram and calling this function but that shouldn’t be changing anything with the selection:
function showConnections(e, obj) {
// var diagram = node.diagram;
myDiagram2.startTransaction("highlight");
// remove any previous highlighting
myDiagram2.clearHighlighteds();
if (myDiagram2.selection.count > 0) {
//loop throug all nodes in the diagram and apply different styling
myDiagram2.nodes.each(function (indNode) {
//if the currently selected node
if(indNode.isSelected) {
indNode.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
indNode.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
//all the other nodes in the diagram that is not selected or highlighted
} else if (!indNode.isHighlighted) {
//RoundedRectangle shape
var shape = indNode.findObject("SHAPE");
shape.stroke = "rgba(183, 227, 246, 0.7)";
//Text of each node
var text = indNode.findObject("TEXT");
text.stroke = "rgba(0,0,0, 0.5)";
//Placeholder for the sub-graph
var placeholderText = indNode.findObject("PLACEHOLDERTEXT");
if(placeholderText){
placeholderText.stroke = "rgba(0,0,0, 0.5)";
}
}
if (!indNode.isSelected){
indNode.findLinksOutOf().each(function (currentNode) {
var arrow = currentNode.findObject("ARROW");
arrow.stroke = "rgba(128,128,128, 0.1)";
var arrowHead = currentNode.findObject("ARROWHEAD");
arrowHead.stroke = "rgba(128,128,128, 0.1)";
arrowHead.fill = "rgba(128,128,128, 0.1)";
})
}
})
} else {
myDiagram2.nodes.each(function (currentNode) {
var shape = currentNode.findObject("SHAPE");
shape.stroke = "#009BE1";
shape.fill = "#FFF";
var text = currentNode.findObject("TEXT");
text.stroke = "black";
var placeholderText = currentNode.findObject("PLACEHOLDERTEXT");
if (placeholderText){
placeholderText.stroke = "black";
}
currentNode.findLinksOutOf().each(function (node){
var arrow = node.findObject("ARROW");
arrow.stroke = "#009BE1";
var arrowHead = node.findObject("ARROWHEAD");
arrowHead.stroke = "#009BE1";
arrowHead.fill = "#009BE1";
})
})
}
myDiagram2.commitTransaction("highlight");
}
I suggest that you debug the code by putting in console.log calls to indicate when and how each node or link is changing state. Maybe you are having more side-effects than you expect.
Alright yeah I’m getting the same result whether I remove the “Changed Selection” listener or not. I have this binding in the nodeTemplate go.Shape but this shouldn’t be affecting the selected nodes, this would be the only other thing in the code that would affect it:
new go.Binding("fill", "isSelected", function(selected) {if (selected) return "#E9F9D7"; else return "#FFF";})
.ofObject(""))
It calls the searchDiagram() function first on button click, then it calls the showConnections function that is being called from the “Changed Selection” listener, I set a breakpoint at the end of that searchDiagram function and there is only one node being selected. So the problem is in that searchDiagram function. Wierd the highlightCollection works fine but selectCollection only gets the first node?
It seems to me more likely that the search that you executed really did find only one node whose data.key matched the given expression.
Alright yeah I would assume if I type in “c” into the input and get a console.log of 6 for results based on my code above and the following nodes have a “c” in them, that is returning the correct number of nodes:
CHESTFIELD SOLUTIONS
CHILD 1
CHILD 2
CHILD 3
CHILD 4
CHILD 5
I get all 6 nodes highlighted when I use “highlightCollection”, but then when I switch that one word to “selectCollection” I only get the one.
I’ll come back to it though if we decide to use the product, and determine the exact functionality we want. Thanks.
OK, if you did find multiple nodes, perhaps there is either an error in the “ChangedSelection” handler or perhaps it is also deselecting parts.