Configuring tree layout

GoJS
21

As I understood diagram.commandHandler.editTextBlock(); shouldn’t be wrapped in a transaction.
In case I rename the node in the same transaction the text editor is not positioned correctly.

function newChildNode() {
	if (diagram.model.selectedNodeData) {
		const selectedNode: GoCanvasNode = diagram.selection.first();
		if (selectedNode instanceof go.Node) {
			diagram.startTransaction("Create new child node");
			let newNode = { Id: temporaryNodeKey(), Name: "new node"};
			diagram.model.addNodeData(newNode);
			let newLink = { toNode: selectedNode.data.Id, fromNode: newNode.Id};
			diagram.model.addLinkData(newLink);
			editTextOnNewNode(newNode);
			diagram.commitTransaction("Create new child node");
		}
	}
}

0ed2ea54f6755d94cd9f548b6cc1816b.gif784×596 261 KB

And still no animation. What happens on this gif is newChildNode()

Or if I’m adding DiagramEvent listener:

function editTextOnNewNode(node) {
	diagram.addDiagramListener('AnimationFinished', editText);
	function editText() {
		let newNode = diagram.findNodeForKey(node.Id);
		diagram.select(newNode);
		diagram.commandHandler.editTextBlock();
		diagram.removeDiagramListener('AnimationFinished', editText);
	}
}

Then it is never called.

22

That is correct: CommandHandler.editTextBlock just starts the TextEditingTool, which conducts its own transaction when the user finishes editing.

Adding the “AnimationFinished” DiagramEvent listener after the previous transaction has finished might be too late. Register the listener before the previous transaction starts.

23

It seems that animation didn’t start and therefore didn’t finish.

Adding listener before starting a transaction didn’t help.

function newChildNode() {
	if (diagram.model.selectedNodeData) {
		const selectedNode: GoCanvasNode = diagram.selection.first();
		if (selectedNode instanceof go.Node) {
			let newNode = { Id: temporaryNodeKey(), Name: "new node" };
			editTextOnNewNode(newNode);
			diagram.startTransaction("Create new child node");
			diagram.model.addNodeData(newNode);
			let newLink = { toNode: selectedNode.data.Id, fromNode: newNode.Id};
			diagram.model.addLinkData(newLink);
			diagram.commitTransaction("Create new child node");
		}
	}
}

function editTextOnNewNode(node) {
	diagram.addDiagramListener('AnimationFinished', editText);

	function editText() {
		let newNode = diagram.findNodeForKey(node.Id);
		diagram.select(newNode);
		diagram.commandHandler.editTextBlock();
		diagram.removeDiagramListener('AnimationFinished', editText);
	}
}
24

Ah, that seems to be a layout animation bug that has already been fixed in 1.7 beta.

What I tried was a simple modification to the State Chart sample. I added this function as a listener:

    function startEditing(e) {
      e.diagram.removeDiagramListener("AnimationFinished", startEditing);
      e.diagram.commandHandler.editTextBlock();
    }

And then I set it up in addNodeAndLink:

    function addNodeAndLink(e, obj) {
      var adornment = obj.part;
      var diagram = e.diagram;
      diagram.addDiagramListener("AnimationFinished", startEditing);
      diagram.startTransaction("Add State");
      . . .

Oh, I also set Diagram.layout to an instance of TreeLayout.

So when selecting a node and then clicking on the “+” Button to call addNodeAndLink, results in a new node and link being added, a regular layout animation, and then the start of editing the TextBlock:

This is in 1.7; I do not know why there is no “AnimationFinished” DiagramEvent in 1.6. But clearly it works in 1.7.

25

Yes, Indeed.

Looking forward for the new version :)