In TreeMapping, We have to add the new values at runtime in the tree that should be mapped. How to add new values in run time that should be mapped with any one from the left.
You can programmatically add to the tree like this:
myDiagram.model.commit(function(m) {
m.addNodeData({ key: 1501, group: -2 }); // add node to Right Side group
m.addLinkData({ from: 1015, to: 1501 }); // create link to new node from desired parent
}, "Added node");
Its throwing error like" Cannot read property ‘myDiagram’ of undefined"
I’m getting input from the user that new given values has to map with from link
this.myDiagram = this.$(go.Diagram, "myDiagramDiv",
{
"commandHandler.copiesTree": true,
"commandHandler.deletesTree": true,
// newly drawn links always map a node in one tree to a node in another tree
"linkingTool.archetypeLinkData": { category: "Mapping" },
"linkingTool.linkValidation": this.checkLink,
"relinkingTool.linkValidation": this.checkLink,
"undoManager.isEnabled": true,
"ModelChanged": function(e) {
if (e.isTransactionFinished) { // show the model data in the page's TextArea
// prompt("Please enter your vaues", "");
_this.linkdata = e.model.linkDataArray;
for (let i =0; i< _this.linkdata.length;i++) {
if(_this.linkdata[i].category == 'Mapping' && _this.linkdata[i].to =='Enter Value') {
const value = prompt("Please enter your vaues", "");
this.myDiagram.model.commit(function(m) {
m.addNodeData({ key: value, group: -2 }); // add node to Right Side group
m.addLinkData({ from: _this.linkdata[i].from, to: value }); // create link to new node from desired parent
}, "Entered values");
}
}In a “ModelChanged” event handler you really should not be making arbitrary changes to the model! GoJS Changed Events -- Northwoods Software
Do it instead in a separate function that is called due to some user command or due to a successful response from the server. That function should start a transaction, make all of the model changes that you want to make by calling Model methods, and finally commit the transaction. GoJS Using Models -- Northwoods Software
Am not clear, I’m adding the new values while model change in the tree node
in “ModelChanged” if e.isTransactionFinished its true getting input and added in the tree.
i have changed the values like this
e.model.nodeDataArray.push({ key:value, group: “Output BE” });
in foreach i have change the from values with that
e.model.linkDataArray[i].from = value;
but its not reflecting in the tree. its affected in the nodeDataArray & linkDataArray only.
As I just said and as is documented, you cannot do that in a Transaction ChangedEvent listener.
Besides, you should try to avoid calling prompt or confirm: Window.confirm() - Web APIs | MDN
Need to get the linkDataArray & nodeDataArray in linkValidation. Is there any solution?
From the Link you can get its Diagram and then its Model: aLink.diagram.model.....
“linkingTool.linkValidation”: this.checkLink,
Am getting undefined
checkLink(fn, fp, tn, tp, link) {
console.log(’ tn’, tn.aLink.diagram.model);
}
“aLink” is clearly not a property defined on the Node class.
In your code tn.diagram.model will get you the Model.
Am not clear, if not possible in Transaction ChangedEvent listener then how to add values in run time. I have to get any values from user as input and add that values to the tree that should be mapped with linked field (any field).
https://channel-integration-tree-mapping.stackblitz.io/
Above link, If I map “enter value” to the any one of the filed. then propup ask user input based on that add the values to the tree and map it.
What events are causing the model change to happen in the first place? Perhaps you want to define some DiagramEvent listeners?
In Tree mapping, If I map lef to right get the values from the user. that new values to map with right one.
I don’t know how to handle this. couuld you please explain.
Reference: https://channel-integration-tree-mapping.stackblitz.io/
Map parent node so able to map child node
I’m unable to see the page at that URL. It spends a lot of time loading and not doing anything.
I still do not understand the situation that you are trying to handle. Do you want to detect when the user has just drawn a new link? If so, try implementing a “LinkDrawn” DiagramEvent listener. GoJS Events -- Northwoods Software
No, not to draw a new link, add new values to the tree at run time and map the new value to the right side tree
The first reply was correct:
But as I stated in my first reply, you cannot modify either the model or the diagram in a Transaction-type Model Changed event.
I have added this code in the separate function like below. But my question is it has to trigger when I map the left to ride side. Any idea having any listeners?
test () {
myDiagram.model.commit(function(m) {
m.addNodeData({ key: 1501, group: -2 }); // add node to Right Side group
m.addLinkData({ from: 1015, to: 1501 }); // create link to new node from desired parent
}, “Added node”);
}
What do you mean by “when I map the left to ri[ght] side”? My earlier guess was:
If that is not the case that you are imagining, then when?
Yes, This listener is working but I need to add the new values to the sub group not main group and re modify the link to the new values
In the Tree Mapper sample, GoJS Tree Mapper, there are no subgroups – there are only two top-level Groups. So your requirements are not being expressed precisely enough for me to understand you. Maybe you mean subtree?
In the “LinkDrawn” DiagramEvent listener you can add or remove “mapping” links between nodes in different groups. This is just as we first described what you could do.