Components in tree mapper links

GoJS
1

Hi, is it possible to put some component (like a square for example) on the links created in the tree mapper sample. Do you have a sample code to do that?
Thanks in advance

2

Yes, just add what you want to the Node template.

However you do need to consider keeping the size of what you add to a minimum, since the TreeMapLayout may force the node to be very narrow and/or short.

3

Thanks Walter. I’m very new with GoJS. Just downloaded and trying to do a proof of concept in order to incorporate this component in our product. Do you have a sample code to add the Node and be able to handle the double click on the “square”?
Thanks in advance.

4

Here’s a modified node template that adds a Shape and a GraphObject.doubleClick event handler:

    myDiagram.nodeTemplate =
      $(go.Node,
        { background: "rgba(99,99,99,0.2)" },
        new go.Binding("background", "fill"),
        $(go.Shape, "Square", { strokeWidth: 0, width: 10, height: 10 }),
        {
          doubleClick: function(e, obj) {
            alert(tooltipString(obj.part));
          },
          toolTip: $(go.Adornment,
                     $(go.TextBlock, new go.Binding("text", "", tooltipString).ofObject())
                   )
        }
      );

I highly recommend that you read Get Started with GoJS and then all of the pages of the Introduction, GoJS Introduction -- Northwoods Software, that apply to the kind of app that you want to create. At least read the first dozen or so pages of the Introduction so that you become familiar with GoJS.

It also would help if you read or searched all of the sample code to find code that you might be able to use.

5

Thanks Walter!!!

6

Wait! I misunderstood which sample you were talking about.

I answered assuming you were starting with Tree Map.

But now I realize that you probably are starting with GoJS Tree Mapper.

So are you actually interested in the latter sample? If so, it is very easy to add label(s) to the links: GoJS Link Labels -- Northwoods Software. As you can see, my answer to both adding a square Shape and a GraphObject.doubleClick event handler is basically the same for both nodes and links.

7

Thanks Walter. I’ve realized that I need to create a node instead of a LinkLabel. So I made this function that executes at diagram double click and creates:

  1. a new node (Func) - which I want to be created inside a group called “grupofunct”
  2. a link from a node (3) in the left treeView to the new node (Func)
  3. a link from this new node (Func) to a node (103) in the right treeview.

doubleClick: function(e, obj) {
myDiagram.startTransaction(“a”);
myDiagram.model.addNodeData(
{ key: “Func”,
modelType: “Auto”,
isGroup: false ,
category:“Functoide” ,
group:“grupofunct”,
// loc: go.Point.parse(“30 30”)
});
myDiagram.model.addLinkData({ from: 3, to: ‘Func’,“category”:“Mapping” });
myDiagram.model.addLinkData({ from: ‘Func’, to:103,“category”:“Mapping” });
var nf=myDiagram.findNodeForKey(“grupofunct”);
nf.location=go.Point.parse(“200 200”);

			myDiagram.commitTransaction("a");
			
			alert(nf.location);
		}

The problem is that the new node (Funct) is created at position -5,-5 and moves my group “grupofunct” to that position.

Could you say what am I doing wrong?

Thanks!

8

Why do you need to involve any Groups? Do what you are doing, but do not try to add the new node to any group. Position the new node to be at the midpoint of the original link.fromNode.location and link.toNode.location.