In my project i need to focus on next when node/object is creating one by one. I am using flowchart samples in gojs. when a new node is created how to focus to the node. Pls help
I am using the below code for focus the next node.
var nodekey7 = myDiagram.findNodeForKey(“7”);
var nodekey8 = myDiagram.findNodeForKey(“8”);
if (nodekey8.visible == false && nodekey4.visible == true && obj.part.data.key == “7”) {
myDiagram.startTransaction(“make new link”);
myDiagram.model.addLinkData({ from: 7, to: 8, fromPort: “B”, toPort: “T”, visible: true, isHighlighted: true });
myDiagram.commitTransaction("make new link");
nodekey8.visible = true;
myDiagram.nodes.each(function (node) { node.highlight = 0; });
var sel = myDiagram.selection.first();
var nodesToList = new go.List("string");
if (x instanceof go.Link) {
x.fromNode.highlight = i;
nodesToList.add(x.data.from);
} else {
x.findNodesInto().each(function (node) {
node.highlight = i;
node.scrollToPart = true;
});
}
}
Hi walter, the above solution is not working when scroll is coming.
In my flow chart diagram having many nodes that when scroll is coming at the its not showing/ pointing to the below node its displaying as above picture only. Pls hlep
Sorry walter.
The above “ChangedSelcetion” code is not focusing on next node in my flowchart diagram when scroll bar appears. My requirement is need to focus on next node when we click any object in our diagram. Pls help
Hi Walter,
I have tried two different ways to scroll down when new node is appearing in the screen. But its not working, its only highlighting but is moving down to the node when scroll bar is available in the screen.
Pls help
Step 1: By org chart example
// the Search functionality highlights all of the nodes that have at least one data property match a RegExp
function searchDiagram() { // called by button
var input = document.getElementById(“mySearch”);
if (!input) return;
input.focus();
myDiagram.startTransaction("highlight search");
if (input.value) {
// search four different data properties for the string, any of which may match for success
// create a case insensitive RegExp from what the user typed
var regex = new RegExp(input.value, "i");
var results = myDiagram.findNodesByExample({ name: regex },
{ nation: regex },
{ title: regex },
{ headOf: regex });
myDiagram.highlightCollection(results);
// try to center the diagram at the first node that was found
if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
} else { // empty string only clears highlighteds collection
myDiagram.clearHighlighteds();
}
myDiagram.commitTransaction("highlight search");
}
Step 2: Node Click function
click: function(e, node) {
// highlight all Links and Nodes coming out of a given 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”);
}
OK, somehow you need to get the Node that you want to scroll to. How you do that is specific to your app, and I have no idea of how you want to decide between multiple reasonable choices.
Once you have that node you can either call myDiagram.commandHandler.scrollToPart(node) or myDiagram.centerRect(node.actualBounds).
Hi walter,
I have tried the above solution but this also not giving any luck. In some scenario , its pointing to the node but some cases no. Any suggestion please
Code :
click: function(e, node) {
// highlight all Links and Nodes coming out of a given 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;
diagram.commandHandler.scrollToPart(l);
// diagram.centerRect(l.actualBounds);
});
// for each Node destination for the Node, set Node.isHighlighted
node.findNodesOutOf().each(function(n) { n.isHighlighted = true;
n.isSelected = true;
diagram.commandHandler.scrollToPart(n);
//diagram.centerRect(n.actualBounds);
});
diagram.commitTransaction("highlight");
}
It doesn’t make sense to be trying to scroll to each connected node, within the first iteration. Effectively you will just be scrolling to the last node that is found by Node.findNodesOutOf.
So my previous comment still applies – you need to find the one Node (or Link, if you like) that you want to scroll to, and make one of the two calls that I suggested.
Whether that Node or Link is selected or highlighted is an independent concern that has nothing to do with scrolling the diagram.
