Hi All
I have just started with GoJS, so please be gentle. I have two questions (so far) about the TextEdited event:
1) I am trying to understand the TextEdited event as demonstrated in the OrgChart Editor example but cannot determine how to identify the property that is being changed.
Here is the callback function
// This is called when the user has finished inline text-editing
function onTextEdited(e) {
var tb = e.subject;
if (tb === null || !tb.name) return;
var node = tb.part;
if (node instanceof go.Node) {
updateData(tb.text, tb.name);
updateProperties(node.data);
}
}
It would seem that "tb.name" is intended to be the property "field" name (in the example one of "title", "comments" or "name") so that the if (field === "???") selections in updateData() work.
However, when I step through using the Chrome debugger, field is set to something like "_5480" so the tests in updateData() never pass.
The reason for me testing this example is because I want to see if either of two numeric text fields in my node are edited and then calculate and set another node data property using the new value.
2) When I edit a LinkLabel TextBlock, I don't seem to get a TextEdited event. Do I have to add another listener to trap these?
You are an astute observer – that call to updateData in onTextEdited is completely superfluous.
The updateData function is still needed by the “onchange” event handlers of the Input elements.
I have removed that call from future versions of that sample. (But it’s still in 1.1.9, which we built yesterday, and which remains GoJS - Build Interactive Diagrams for the Web for only a short time longer.)
I added a TextBlock label to the link template, as follows:
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ corner: 5, relinkableFrom: true, relinkableTo: true },
$(go.Shape, { strokeWidth: 2 }), // the link shape
$(go.TextBlock,
{ editable: true },
new go.Binding("text", "label").makeTwoWay())
);
This worked just fine, including calling the onTextEdited function. Of course in that function the “part” will be a Link, not a Node, so it won’t call updateProperties. I don’t know if that’s what you want or not – either way is reasonable.
By the way, the TwoWay Binding on the TextBlock.text property causes the node data to get and update the “label” data property value on the node data. That surprised me momentarily, until I realized that the Diagram.model is a TreeModel, not a GraphLinksModel. When using a TreeModel there are no link data objects, so Links are data bound to the node data object of the child node.
Thanks Walter. I am not sure how to proceed now. I am looking to create a diagram where there can be many links from and to many nodes (but without cycles). I need each link to “carry” some data (an integer 0…100) in a property called “weight” for example. As I don’t know how many links/nodes the user is going to create, I don’t think I want the property stored on the node unless it is possible to use an array/list.
Later on I wish to add code to calculate a score based on the all of the weight values coming in to a newly linked toNode (it will be more complicated than that, but it gives an idea of usage).
Well, don’t use a TreeModel – use a GraphLinksModel. That way each Link is associated with a link data JavaScript object in the GraphLinksModel.linkDataArray.