Org Chart Editor double click on canvas stop creating New Node

GoJS
1

Hi

We need Org Chart Editor double click on canvas stop creating New Node. Only Create new node once you click on the Context Menu. i commented below section. stop creating new node with context menu click too. Please advise

“clickCreatingTool.insertPart” : function(loc) {
this.archetypeNodeData = {
key : getNextKey(), // assign the key based on
// the number of nodes
name : “(new person)”,
title : “”
};
return go.ClickCreatingTool.prototype.insertPart
.call(this, loc);

2

ClickCreatingTool | GoJS API is only enabled if its ClickCreatingTool.archetypeNodeData property is non-null.

So don’t set that property – the default value is null.

3

Hi I when i creating the new node. I am not getting the new node “box” any idea?

4

Are you adding a node by constructing a new node data object for the model and then calling Model.addNodeData? That’s what you need to do to create nodes programmatically. See the State Chart sample, for example. State Chart

5

doing below

myDiagram.startTransaction(“add employee”);
var newemp = {
key : getNextKey(),
parentCmdName : thisemp.name,
title : “”,
parent : thisemp.key,
parentOperCmd : thisemp.command,
menuSelected : “addNew”
};
myDiagram.model.addNodeData(newemp);
myDiagram.commitTransaction(“add employee”);

6

Since you didn’t specify a location for the new node, you must be depending on the Diagram.layout to assign locations to this new node (along with the other nodes). Is that correct?

GoJS cannot show a Node (or any Part, really) unless it has a real location: aNode.location.isReal().

7

Hi Walter

Yes. Not specified location. when i click the Node and add new Node working correctly. with out click if i add new node from the context menu it is not adding it. How to set the location when i right click on the context menu?

8

I am finding it difficult to understand what you are saying.

e.documentPoint

9

Hi Walter
This is one of the issue in my out standing list and its important too.

The issue is once diagram is generated. Attached.

Here in the above diagram if i click the context menu on selected node It works fine. If i click the context menu on child node and click Add New Node. The new node icon is not coming… here is the code for Add New Command in the context menu

var thisemp = node.data;
myDiagram.startTransaction(“add employee”);
var newemp = {
key : getNextKey(),
parentCmdName : thisemp.name,
title : “”,
parent : thisemp.key,
parentOperCmd : thisemp.command,
menuSelected : “addNew”
};
myDiagram.model.addNodeData(newemp);
node = myDiagram.findNodeForData(newemp);
node.location = e.documentPoint;
myDiagram.scrollToRect(node.actualBounds);
myDiagram.centerRect(node.actualBounds);
myDiagram.select(node);
myDiagram.focus();
myDiagram.commitTransaction(“add employee”);
diagramTreeModel.push(newemp);
myDiagram.commandHandler.scrollToPart(node.data.part);

please advise.

10

You need to debug your code. Does the new Node exist and do you find it by calling Diagram.findNodeForData? What location do you set? What are the node.actualBounds? Did you set Diagram.layout?

11

Yes new node exist. Yes
Adding node data and finding node data with below
myDiagram.model.addNodeData(newemp);
node = myDiagram.findNodeForData(newemp);
What is diagram layout? How to set layout?
i set up the layout when we draw initial layout like below

layout : $(go.TreeLayout, {
treeStyle : go.TreeLayout.StyleLayered,
arrangement : go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle : 90,
layerSpacing : 35,
// properties for the “last parents”:
alternateAngle : 90,
alternateLayerSpacing : 35,
alternateAlignment : go.TreeLayout.AlignmentBus,
alternateNodeSpacing : 20
}),

Do you need set again this layout when context menu clicked ?

12

OK, so are you depending on the TreeLayout to automatically assign a location to the new node?

If so, and if you look at the new node’s location before the transaction completes, you will see that it does not have the location that it will have after the layout has been performed. So it does no good to try to scroll there in any of the various ways that your code tries.

Instead, do the scrolling after the transaction is committed.

13

Hi Walter Tryed scroll before commit and after commit No Luck…
myDiagram.startTransaction(“add employee”);
var newemp = {
key : getNextKey(),
parentCmdName : thisemp.name,
title : “”,
parent : thisemp.key,
parentOperCmd : thisemp.command,
menuSelected : “addNew”
};
myDiagram.model.addNodeData(newemp);
node = myDiagram.findNodeForData(newemp);
node.location = e.documentPoint;
myDiagram.centerRect(node.actualBounds);
myDiagram.select(node);
myDiagram.focus();
myDiagram.commitTransaction(“add employee”);
myDiagram.scrollToRect(node.actualBounds);
myDiagram.commandHandler.scrollToPart(node.data.part);

14

How is what you are doing fundamentally different than what is demonstrated in the State Chart sample, State Chart ?

The addNodeAndLink function adds a new Node and a Link to that new Node, and after the committing the transaction calls Diagram.scrollToRect.

The presence or absence or type of Diagram.layout does not affect the behavior of that function.

15

i did same as mentioned in the example… I got below error

Uncaught TypeError: myDiagram.model.addLinkData is not a function
at click (commandOper.js?v=2017071609:717)
at Vh (crimecenter.js?v=2017071609:143434)

Below is the code…
var fromNode = obj.part.adornedPart;
if (fromNode !== null) {

											var fromData = fromNode.data;
myDiagram.startTransaction("add employee");
var toData = {
	key : getNextKey(),
	parentCmdName : fromData.name,
	title : "",
	parent : fromData.key,
	parentOperCmd : fromData.command,
	menuSelected : "addNew"
};
var p = fromNode.location.copy();
  p.x += 200;
  toData.loc = go.Point.stringify(p); 
myDiagram.model.addNodeData(toData);
var linkdata = {
        from: myDiagram.model.getKeyForNodeData(fromData),  // or just: fromData.id
        to: myDiagram.model.getKeyForNodeData(toData),
        text: "transition"
      };
      // and add the link data to the model
myDiagram.model.addLinkData(linkdata);
var toNode = myDiagram.findNodeForData(toData);
myDiagram.centerRect(toNode.actualBounds);
myDiagram.select(toNode);
myDiagram.focus();
myDiagram.commitTransaction("add employee");
myDiagram.scrollToRect(toNode.actualBounds);
myDiagram.commandHandler.scrollToPart(toNode.data.part);
16

Are you using a TreeModel instead of a GraphLinksModel? If so, set the parent on the new child data object.

Read Get Started with GoJS and GoJS Using Models -- Northwoods Software

17

Hi Walter

I do not have luck with this. I am adding child and parent correctly to the TreeModel. But some how when i creating new node. It was not creating the node. Is it possible can we schedule Webex or screen share with skype and resolve this issue?

18

Try Page Not Found -- Northwoods Software. Select a Node, and the selection Adornment will include a Button to add a child to that node.

How is what your app does different from what this sample does when adding a node?

19

Hi Walter
can you share the code for the above link. I have same simple. But No new node is adding it. This click is from “context menu”

click : function(e, obj) {
var fromNode = obj.part.adornedPart;
var fromData = fromNode.data;
var toData = {
key : getNextKey(),
title : “”,
parent : fromData.key,
menuSelected : “addNew”
};
myDiagram.model.addNodeData(toData);
var toNode = myDiagram.findNodeForData(toData);

}

20

As is the case for all of our documentation and samples, you can look at the page source to see the code.