Tree mapping add new values at runtime

GoJS
21

How to remove link in “LinkDrawn” DiagramEvent listener

We have tried this below method but its not working…

e.diagram.model.commit(function(m) {
                m.removeLinkData({category:" Mapping", from: "leftside", to: "rightside"});
           }, "Entered values");
22

If you want to call GraphLinksModel.removeLinkData and refer to a particular link you must pass a reference to the specific link data object, not to a new object that might have some properties with the same value.

(If you really want to find a specific link data that way, call Diagram | GoJS API. )

Instead I suggest that you do this, if all you wanted to do is delete the newly drawn Link:

  myDiagram = $(go.Diagram, . . ., { "LinkDrawn": onLinkDrawn, . . . });

  function onLinkDrawn(e) {
    e.diagram.remove(e.subject);
  }
23

Hi Am not clear about this… where i have to call this GraphLinksModel.removeLinkData and where i get this GraphLinksModel

Model change listener ? how to call i need code for thhis… could you please explain

could you please elaborate.

24

We’re not clear on what exactly your requirements are. Could you please provide a series of screenshots or sketches that show what you want to do when the user creates a link?

For example, a screenshot showing before link creation, a screenshot as the user has finished drawing the link, and a screenshot after your desired changes have been made.

25

https://channel-integration-tree-mapping.stackblitz.io/

Go this tis URL and map “EV” to “My account” and again map “Enter values” to the “account address”. then popup ask you the new values that value will link to that account address.

Now I have to delete the " Enter values" to the “account address” link

26

Ok, if I do the following:

  1. Map EV to My Account.
  2. Map Enter Value to Account Address
  3. In the prompt, type Account Country

Where should the new node be created? What node will be its parent? Will it have any mapping links connected to it, and where will they go?

27

Please Check now, The “Account Country” will come under the "EV "
and its mapped to the “Account Address” upto it works fine

Later, I have to delete the "Enter value " to the “Account Address” link…

We don’t know how to delete the this link.

28

Based on your description, I think you want something like this:

this.myDiagram.addDiagramListener("LinkDrawn", function(e) {
  var l = e.subject;
  if (l.category === "Mapping" && l.fromNode.key === "Enter Value") {
    var newKey = prompt("Please enter a new key", "");
    if (newKey !== null && newKey !== "") {
      var model = e.diagram.model;
      model.addNodeData({ key: newKey, group: "Source" });
      model.addLinkData({ from: "EV", to: newKey });
      model.addLinkData({ from: newKey, to: l.toNode.key, category: "Mapping" });
    } else {
      e.diagram.currentTool.doCancel();
    }
    e.diagram.remove(l);
  }
});

This adds the new node as a child of EV and creates a link from it to the output node. It also removes the mapping link that was drawn.

You wouldn’t need the ModelChanged listener in this case.

29

Thank you, Its working:)