How to automatic focus TextBlock when a new node is created?

GoJS
1

When a create a new Node, I give it the focus its isSelected property to true, However, I also want to make a textblock on it already focused when a new Node is created. I tried searching this forum but could not find any help.

Thanks

2

If you want to programmatically start the user editing a particular TextBlock, call CommandHandler.editTextBlock. That command method is also invoked by the F2 key on the keyboard.

3 
`             var textBlocktoSelect = nodeToBeSelected.findObject('userText');
         var canEdit = myDiagram.commandHandler.canEditTextBlock(textBlocktoSelect);
            if (canEdit) {
                myDiagram.commandHandler.editTextBlock(textBlocktoSelect);
            }

I’m using this code to access TextBlock object and editing it but it does not bring the cursor to the text. Moreover, the F2 key also doesn’t respond with this code. Am I missing something?

Thanks

4

Ok. There are two ways I’m creating a new node. One is through double click and the other is through context menu. And your solution works when I create new node through double click.

$$(go.Node, "Auto", {
                doubleClick: addChildNode,
                stretch: go.GraphObject.Fill,
                selectionAdorned: false,
                selectionChanged: onNodeSelectionChanged,
                minSize: new go.Size(105, 36),
                click: function (e, node) {
                    if ($scope.isSidenavOpen == true) {
                        $scope.close();
                    }

This is snippet from node where I call ‘addChildNode’ upon double click. I’m calling the same function manually from context menu to create new node. Is there a way that I trigger a double click on Node from the context menu programmatically. It might resolve this issue.

Thanks

5

You probably want to add the node (and make any other changes) and then commit the transaction. Then you can call the command.

6

I’m doing exactly as you said and it works perfect when I create new node through double click but not when I create new node using context menu. As you can see the function ‘addChildNode’ called upon double click, I’m calling the same function from context menu as well but it doesn’t work when a new node is created from context menu.

So, is there a way to trigger double click on node programmatically. So, instead calling that function from context menu, I’ll just trigger double click on node.

7

I just tried this initialization of a Diagram, and it worked successfully as I think we would expect it to:

      contextMenu:
          $(go.Adornment,
            $("ContextMenuButton",
              $(go.TextBlock, "Click me!"),
              {
                click: function(e) {
                  e.diagram.startTransaction();
                  var newdata = { text: "new node", color: "yellow" };
                  e.diagram.model.addNodeData(newdata);
                  var node = e.diagram.findNodeForData(newdata);
                  node.location = e.documentPoint;
                  e.diagram.commitTransaction();
                  e.diagram.commandHandler.editTextBlock(node.elt(1));
                }
              }
            )
          ),
8

Thanks for the code.

I’ve tried a lot and this what I have concluded. It all works if the focus does not go out of GoJS ‘canvas’ element. Like, on the double click when a new Node is created, the focus is on TextBlock and it works fine but when I create Node by calling the same method from HTML context menu, the textBlock is not focused.

I tried using Robot.js to simulate ‘F2’ but Robot.js doesn’t seem to work at all.

9

Thanks Walter, I was able to make it work.

10

Hi walter

I have code like this
$(“ContextMenuButton”,
$(go.TextBlock, “Add New Command”),
{
click: function(e, obj) {
// reparent the subtree to this node’s boss, then remove the node
var node = obj.part.adornedPart;

	              if (node !== null) {
	            	  var thisemp = node.data;
	            	 myDiagram.startTransaction("add employee");
	  		        var newemp = { key: getNextKey(), parentCmdName: thisemp.name, title: "", parent: thisemp.key, parentOperCmd: thisemp.command, coTaxid:thisemp.coTaxid, menuSelected:"addNew"};
	  		        myDiagram.model.addNodeData(newemp);
		  		       node = myDiagram.findNodeForData(newemp);
	                  node.location = e.documentPoint;
	  		        myDiagram.commitTransaction("add employee");
	  		        //self.commandOperIdSelected = "";
	  		       // diagramTreeModel.push(newemp);
	  		      myDiagram.commandHandler.editTextBlock(node.data.command);
	              }

	            }
	          }
	        ),

the focus is not shifting… i am getting error Uncaught Error: CommandHandler.editTextBlock value is not an instance of TextBlock: Node#6186(-1)

11

You should not be passing node.data.command, whatever that is, to CommandHandler.editTextBlock. That method only takes a TextBlock (or nothing), and you should not have any GraphObject or Diagram or Tool or CommandHandler as properties on your model data object.

12

Hi Walter
taken out that node.data.command. now error is gone. But not achieved what i need. when i click on add new node from the context menu. The current focus on selected node need to move to new node. Appreciate your help

13

Set Part.isSelected, or call Diagram.select. GoJS Selection -- Northwoods Software

Perhaps you will find this sample interesting and useful: Graphical Macros via Auto Ungrouping