Focus to next created node or object


#1

Dear Walter,

Happy New Year

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;
                                              
                                            });
                                        }
                                        
                                    }

Refer the below picture for better understanding


#2

Instead of all that code which seems way too hard-coded, would something like this satisfy your requirements?

$(go.Diagram, ...,
  { . . .,
    "ChangedSelection": function(e) {
        var sel = e.diagram.selection.first();
        if (sel) e.diagram.centerRect(sel.actualBounds);
    }
  })

#3

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


#4

??? I don’t understand what you are trying to say.


#5

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


#6

Pls help for the above issue.


#7

Hi walter,
Can you have any examples for the below

  1. scroll(unit, dir, dist)
  2. scrollToPart(part)
  3. canScrollToPart(part)
    Pls help

#8

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”);
}

Pls help


#9

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).


#10

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");
                    }

#11

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.


#12

Thanks walter. The above scrollTopart solution itself working. Thanks lot for you help walter.